• 微信小程序：页面配置/控制/跳转摘要

    1.文件类型说明：

    (1)APP部分：

    1. app.json：APP公共配置(类似AndroidManifest)，用于全局配置
    2. app.js：APP控制逻辑(类似Android的Application或iOS的AppDelegate)，编写js代码
    3. app.wxss：APP公共样式，编写CSS样式

    (2)页面部分：

    1. xxx.json：页面配置，配置当前页标题背景等
    2. xxx.js：页面控制逻辑，编写js代码
    3. xxx.wxml：页面布局，类似html
    4. xxx.wxss：页面样式，编写CSS样式

    2.APP配置/页面配置(.json)：

    (1)公共配置(app.json)：

    1. {
    2.   "entryPagePath": "pages/目录1/页面1",     //配置启动页(不配置默认首页)
    3.   "pages":[                                 //(必须)配置所有页面路径列表
    4.     "pages/目录1/页面1",
    5.   ],
    6.   "window":{                                //配置全局样式
    7.     "navigationBarBackgroundColor": "#ffffff",   //标题栏背景颜色
    8.     "navigationBarTitleText": "标题",            //标题文字
    9.     "navigationBarTextStyle":"black",            //标题文字颜色，支持：black、white
    10.     "navigationStyle": "default",                //标题栏样式，支持：default、custom(只留右上胶囊按钮)
    11.     "homeButton": "default",                     //标题栏显示home键(非首页、非最底层页、非tabbar内)
    12.     "backgroundColor": "#ffffff",                //全局页面背景色
    13.     "backgroundTextStyle":"light",               //下拉 loading 的样式，支持：dark、light
    14.     "enablePullDownRefresh": false,              //true开启全局的下拉刷新
    15.     "pageOrientation": "portrait",               //屏幕旋转设置，支持：auto、portrait、landscape
    16.     "restartStrategy": "homePage",               //重启时跳转页，支持：homePage首页、homePageAndLatestPage当前页
    17.     "initialRenderingCache": "static",           //页面初始渲染缓存配置，支持：static、dynamic
    18.     "handleWebviewPreload": "auto"               //预加载下页的时机。支持：static(默认，onReady触发200ms后预加载)、auto(空闲时预加载)、manua(调用wx.preloadWebview触发)
    19.   },
    20.   "tabBar":{
    21.     "color": "#888888",                          //tab文本默认颜色
    22.     "selectedColor": "#4ac995",                  //tab文本选中颜色
    23.     "backgroundColorr": "#000000",               //tab背景色
    24.     "borderStyle": "black",                      //tabbar上边框颜色， 支持：black、white
    25.     "position": "bottom",                        //tabBar位置，支持：bottom(底部)、top(顶部)
    26.     "custom": false,                             //true自定义tabbar，在工程/custom-tab-bar目录内创建：index.js、index.json、index.wxml、index.wxss
    27.     "list": [                                    //tabBar中item列表
    28.     {"pagePath": "pages/目录1/页面1", "text": "tab文本1", "iconPath": "images/默认图片1.png", "selectedIconPath": "images/选中图片1.png"},  //images为工程根目录下自定义目录
    29.     {"pagePath": "pages/目录2/页面2", "text": "tab文本2", "iconPath": "images/默认图片2.png", "selectedIconPath": "images/选中图片2.png"},
    30.     ...                                          //更多item
    31.     ]
    32.   },
    33.   "networkTimeout": {                       //配置网络超时时间
    34.     "request": 60000,                       //wx.request超时时间，单位毫秒
    35.     "connectSocket": 60000,                 //wx.connectSocket超时时间，单位毫秒
    36.     "uploadFile": 60000,                    //wx.uploadFile超时时间，单位毫秒
    37.     "downloadFile": 60000,                  //wx.downloadFile超时时间，单位毫秒
    38.   },
    39.   "debug": true,                            //true开启调试模式(输出log)(默认关闭)
    40.   "subpackages": [                          //分包加载 
    41.     {
    42.       "root": "pkg1",                           //分包根目录，路径：工程/pkg1
    43.       "name": "pkg1_name",                      //分包别名，分包预下载时用
    44.       "independent": false,                     //true为独立分包(从外部打开独立分包页时无需下载主包)
    45.       "pages": [                                //分包中的页面路列表
    46.         "pages/目录名1",                        //路径：工程/pkg1/目录名1
    47.       ]
    48.     },
    49.     ...                                         //支持多个包
    50.   ],
    51.   "requiredBackgroundModes": ["audio", "location"], //需要后台运行，支持：audio后台音乐播放、location后台定位
    52.   "requiredPrivateInfos": [                 //申明使用地理位置接口(不申明无法使用)
    53.     "getFuzzyLocation", 
    54.     "getLocation",
    55.     "onLocationChange",
    56.     "startLocationUpdateBackground"
    57.     "chooseAddress"
    58.   ],
    59.   "permission": {                          //申明权限列表
    60.     "scope.权限名1": {"desc": "权限描述"},    //申明指定权限，如scope.userLocation为定位、scope.camera为摄像头
    61.     "scope.权限名2": {"desc": "权限描述"},
    62.     ...
    63.   },
    64.   "functionalPages": {"independent": true}, //启用插件功能页(默认关闭)
    65.   "plugins": {                              //引入插件代码包
    66.     "插件名": {
    67.       "version": "插件版本号",
    68.       "provider": "插件appid"
    69.     }
    70.   },
    71.   "style": "v2",                            //启用新版weui样式
    72.   "sitemapLocation": "sitemap.json"         //(必须)指明 sitemap.json 的位置
    73. }

    (2)页面配置(xxx.json)：

    1. {
    2.   "navigationBarBackgroundColor": "#ffffff",   //标题栏背景颜色
    3.   "navigationBarTitleText": "标题",            //标题文字
    4.   "navigationBarTextStyle":"black",            //标题文字颜色，支持：black、white
    5.   "navigationStyle": "default",                //标题栏样式，支持：default、custom(只留右上胶囊按钮)
    6.   "homeButton": "default",                     //标题栏显示home键(非首页、非最底层页、非tabbar内)
    7.   "backgroundColor": "#ffffff",                //全局页面背景色
    8.   "backgroundTextStyle":"light",               //下拉 loading 的样式，支持：dark、light
    9.   "enablePullDownRefresh": false,              //true开启当前页的下拉刷新
    10.   "pageOrientation": "portrait",               //屏幕旋转设置，支持：auto、portrait、landscape
    11.   "restartStrategy": "homePage",               //重启时跳转页，支持：homePage首页、homePageAndLatestPage当前页
    12.   "initialRenderingCache": "static",           //页面初始渲染缓存配置，支持：static、dynamic
    13.   "handleWebviewPreload": "auto"               //预加载下页的时机。支持：static(默认，onReady触发200ms后预加载)、auto(空闲时预加载)、manua(调用wx.preloadWebview触发)
    14.   "disableScroll": false,                      //true时页面整体不能上下滚动
    15.   "usingComponents": {                         //使用自定义组件
    16.     "自定义组件名": "自定义组件路径"
    17.   }
    18. }

    2.APP控制/页面控制逻辑(.js)：

    (1)APP控制逻辑(app.js)：

    1. App({
    2.   onLaunch (options) {//小程序启动后触发
    3.     //...此处进行一些初始化代码
    4.   },
    5.   onShow (options) {//小程序前台显示时触发
    6.   },
    7.   onHide () {//小程序在后台时触发
    8.   },
    9.   onError (msg) { //出错时触发
    10.   },
    11.   globalData: { //全局初始数据
    12.     自定义字段名: 值,
    13.   }
    14. })

    在页面xxx.js中获取APP实例：

    const app = getApp()

    (2)页面控制逻辑(xxx.js)：

    <1>Page方式(适用简单页面)：

    1. Page({
    2.   onLoad: function(options) {//1.页面创建时触发
    3.   },
    4.   onShow: function() {//2.页面前台显示时触发
    5.   },
    6.   onReady: function() {  //3.页面首次渲染完后触发
    7.   },
    8.   onHide: function() { //-2.页面变后台时触发
    9.   },
    10.   onUnload: function() { //-3.页面销毁时触发
    11.   },
    12.   onPullDownRefresh: function() { //下拉刷新时触发
    13.   },
    14.   onReachBottom: function() { //页面上拉触底时触发
    15.   },
    16.   onShareAppMessage: function () {  //页面分享时触发
    17.   },
    18.   onPageScroll: function() {  //页面滚动时触发
    19.   },
    20.   onResize: function() {  //页面尺寸变化时触发
    21.   },
    22.   onTabItemTap(item) { //tab点击时执行
    23.   },
    24.   data: {//页面初始数据
    25.     自定义字段名: 值,    //.wxml中取值方式：{{自定义字段名}}
    26.   },
    27.   viewTap: function() {   //事件响应函数
    28.   },
    29. })

    <2>Component方式(适用复杂页面)：

    1. Component({
    2.   methods: { //组件的方法列表
    3.     onLoad: function (options) { //页面创建时触发
    4.     },
    5.     onPullDownRefresh: function () { //下拉刷新时触发
    6.     },
    7.     viewTap: function () { //事件响应函数
    8.     }
    9.   },
    10.   properties: {//组件的属性列表
    11.   },
    12.   data: {//组件的初始数据
    13.     自定义字段名: 值,    //.wxml中取值方式：{{自定义字段名}}
    14.     ...
    15.   }
    16. })

    (3)使用Behavior定义通用数据：

    使用Behavior定义通用数据，在工程/utils/behavior1.js中(文名与存放位置任意)：

    1. module.exports = Behavior({
    2.   data: {
    3.     自定义字段名: 值
    4.   },
    5.   methods: {
    6.     方法名: function() {
    7.     }
    8.   }
    9. })

    在页面.js中使用通用数据：

    1. var behavior1 = require('../../utils/behavior1.js')  //导入外部js文件
    2. Page({
    3.   behaviors: [behavior1],  //使用通用数据
    4. })

    3.页面布局(.wxml)：

    1. <控件名>
    2.   <控件名 属性="{{自定义字段名或表达式}}">{{自定义字段名或表达式}}控件名>   
    3.   ...
    4. 控件名>

    4.页面跳转：

    (1)说明：

    1. url=""：跳转链接
    2. open-type="navigate"：跳转方式，值：exit(退出，需target="miniProgram")、navigate(跳转页面或其他小程序，同wx.navigateTo或wx.navigateToMiniProgram)、redirect(跳转页面，同wx.redirectTo)、switchTab(切换tab，同wx.switchTab)、reLaunch(wx.reLaunch)、navigateBack(返回，同wx.navigateBack或wx.navigateBackMiniProgram)
    3. delta=1：回退页面数，需open-type='navigateBack'
    4. app-id=""：待打开小程序的appId，需target="miniProgram"且open-type="navigate"
    5. path=""：待打开小程序的页面路径(默认首页)，需target="miniProgram"且open-type="navigate"
    6. extra-data={}：传递给目标小程序的数据，需target="miniProgram"且open-type="navigate/navigateBack"

    (2)跳转新页面：

    <navigator url="../目录1/页面1?参数1=值1" hover-class="CSS样式">点击跳转新页面navigator>

  • 相关阅读:
    多线程概述（线程创建，方法（等待，通知，加入，睡眠，礼让，中断），上下文切换，死锁，守护线程与用户线程）
    大数据软件项目的验收流程
    黑盒模糊测试之AFL++
    【题解】JZOJ7879 escape from whk 3
    RS485温湿度检测单元 modbus通讯 环境温湿度 支持1路开关量接入
    java计算机毕业设计会展中心招商服务平台MyBatis+系统+LW文档+源码+调试部署
    JMeter接口测试工具基础— 取样器sampler（二）
    【DETR源码解析】二、Backbone模块
    GNSS及其定位原理，差分GNSS技术分析
    SpringBoot
  • 原文地址：https://blog.csdn.net/a526001650a/article/details/128035993