1.文件类型说明：

(1)APP部分：

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

(2)页面部分：

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

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

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

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

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

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

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

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

App({onLaunch (options) {//小程序启动后触发//...此处进行一些初始化代码},onShow (options) {//小程序前台显示时触发},onHide () {//小程序在后台时触发},onError (msg) { //出错时触发},globalData: { //全局初始数据自定义字段名: 值,}
})

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

const app = getApp()

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

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

Page({onLoad: function(options) {//1.页面创建时触发},onShow: function() {//2.页面前台显示时触发},onReady: function() {  //3.页面首次渲染完后触发},onHide: function() { //-2.页面变后台时触发},onUnload: function() { //-3.页面销毁时触发},onPullDownRefresh: function() { //下拉刷新时触发},onReachBottom: function() { //页面上拉触底时触发},onShareAppMessage: function () {  //页面分享时触发},onPageScroll: function() {  //页面滚动时触发},onResize: function() {  //页面尺寸变化时触发},onTabItemTap(item) { //tab点击时执行},data: {//页面初始数据自定义字段名: 值,    //.wxml中取值方式：{{自定义字段名}}},viewTap: function() {   //事件响应函数},
})

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

Component({methods: { //组件的方法列表onLoad: function (options) { //页面创建时触发},onPullDownRefresh: function () { //下拉刷新时触发},viewTap: function () { //事件响应函数}},properties: {//组件的属性列表},data: {//组件的初始数据自定义字段名: 值,    //.wxml中取值方式：{{自定义字段名}}...}
})

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

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

module.exports = Behavior({data: {自定义字段名: 值},methods: {方法名: function() {}}
})

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

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

3.页面布局(.wxml)：

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

4.页面跳转：

(1)说明：

url=""：跳转链接
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)
delta=1：回退页面数，需open-type='navigateBack'
app-id=""：待打开小程序的appId，需target="miniProgram"且open-type="navigate"
path=""：待打开小程序的页面路径(默认首页)，需target="miniProgram"且open-type="navigate"
extra-data={}：传递给目标小程序的数据，需target="miniProgram"且open-type="navigate/navigateBack"

(2)跳转新页面：

点击跳转新页面