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({
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({
methods: { //组件的方法列表
onLoad: function (options) { //页面创建时触发
},
onPullDownRefresh: function () { //下拉刷新时触发
},
viewTap: function () { //事件响应函数
}
},
properties: {//组件的属性列表
},
data: {//组件的初始数据
自定义字段名: 值, //.wxml中取值方式：{
{自定义字段名}}
...
}
})(3) 動作を使用して一般データを定義します。
Behavior を使用して、project/utils/behavior1.js に一般的なデータを定義します (ファイル名と保存場所は任意です)。
module.exports = Behavior({
data: {
自定义字段名: 值
},
methods: {
方法名: function() {
}
}
})page.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>