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):
<控件名>
<控件名 属性="{
{自定义字段名或表达式}}">{
{自定义字段名或表达式}}</控件名> <!-- .js中设置数据方式:Page({data: {自定义字段名: 值}}) -->
...
</控件名>
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)跳转新页面:
<navigator url="../目录1/页面1?参数1=值1" hover-class="CSS样式">点击跳转新页面</navigator>