核心
一個(gè)響應(yīng)式數(shù)據(jù)綁定系統(tǒng)
- View 視圖
- App Service 邏輯
文件結(jié)構(gòu)
根目錄：
- app.js 小程序邏輯(require)
- app.json 小程序公共設(shè)置(require)
- app.wxss 小程序公共樣式
小程序頁面組成
- js 頁面邏輯(require)
- wxml 頁面結(jié)構(gòu)(require)
- wxss 頁面樣式
- json 頁面配置
為減少配置耘分，描述頁面4個(gè)文件必須具有相同的路徑和文件名
配置
app.json為小程序全局配置
{
//小程序頁面路徑
pages: [],
//小程序狀態(tài)欄纹腌，導(dǎo)航艇炎，標(biāo)題，窗口背景色
window: {},
tabBar: {},
networkTimeout: {},
debug: true
}
page.json為小程序頁面配置科侈，只能設(shè)置window配置項(xiàng)內(nèi)容
{
navigationBarBackgroundColor: '#000',
navigationBarTextStyle: 'white',
navigationBarTitleText: 'title',
backgroundColor: '#fff',
backgroundTextStyle: 'dark',
enablePullDownRefresh: false,
disableScroll: false,
onReachBottomDistance: 50
}
App Service邏輯
- 注冊程序
App({
//當(dāng)小程序初始化完成
onLaunch() {},
//當(dāng)小程序啟動，或從后臺進(jìn)入前臺顯示
onShow() {},
//當(dāng)小程序從前臺進(jìn)入后臺
onHide() {},
//當(dāng)小程序出錯
onError(err) {},
//可以添加自定義函數(shù)或數(shù)據(jù)，使用this訪問
66sData:{}
});
//全局getApp()可獲取小程序?qū)嵗?//不要在App()內(nèi)調(diào)用闭翩，App()內(nèi)使用this可以拿到實(shí)例
var appInstance = getApp();
appInstance.66sData;
App()必須在app.js中注冊，且只能注冊一個(gè)
場景值
可在App的onLaunch和onShow中獲取注冊頁面
Page({
//頁面初始數(shù)據(jù)
data: { num: 0 },
//監(jiān)聽頁面加載
onLoad() {},
//監(jiān)聽頁面初次渲染完成
onReady() {},
//監(jiān)聽頁面顯示
onShow() {},
//監(jiān)聽頁面隱藏
onHide() {},
//監(jiān)聽頁面卸載
onUnload() {},
//監(jiān)聽用戶下拉刷新
onPullDownRefresh() {},
//監(jiān)聽用戶上拉觸底
onReachBottom() {},
//監(jiān)聽用戶點(diǎn)分享
onShareAppMessage() {},
//監(jiān)聽頁面滾動
onPageScroll() {},
//可以添加自定義函數(shù)或數(shù)據(jù)迄埃，使用this訪問
66sData:{},
changeNum: function(){
let route = this.route;
this.setData({num: route});
}
});
//獲取當(dāng)前頁面路徑
Page.prototype.route;
//變更data值并同步視圖
Page.prototype.setDate({})
- 路由
小程序路由由框架管理疗韵，框架以頁面棧的形式維護(hù)所有頁面
| 路由方式 | 頁面棧行為 |
|---|---|
| 初始化，打開新頁 | 新頁入棧 |
| 頁重定向 | 當(dāng)前頁出棧调俘，新頁入棧 |
| 頁返回 | 頁出棧伶棒，直到目標(biāo)返回頁，新頁入棧 |
| Tab切換 | 頁全部出棧彩库，只留新Tab頁 |
| 重加載 | 頁全部出棧肤无，只留新頁 |
//獲取當(dāng)前頁棧數(shù)組實(shí)例，第一個(gè)為首頁骇钦，最后一個(gè)為當(dāng)前頁
getCurrentPages();
wx.navigateTo
<navigator open-type="navigateTo" />
wx.redirectTo
<navigator open-type="redirectTo" />
wx.navigateBack
<navigator open-type="navigateBack" />
wx.switchTab
<navigator open-type="switchTab" />
wx.reLaunch
<navigator open-type="reLaunch" />
- 模塊化
//comme.js
//通過module.export和export導(dǎo)出
module.export.sayHello = () => {};
export.sayGoodbye = () => {};
//通過require導(dǎo)入
const common = require('comm.js');
