>[success] # page
1. 小程序中的每個頁面, 都有一個對應的`js`文件, 其中調用[Page](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html)函數注冊頁面示例
2. 在注冊時, 可以綁定初始化數據、生命周期回調、事件處理函數等
* 在生命周期函數中發送網絡請求,從服務器獲取數據;
* 初始化一些數據,以方便被`wxml`引用展示
* 監聽`wxml`中的事件,綁定對應的事件函數
* 其他一些監聽(比如頁面滾動、上拉刷新、下拉加載更多等)
~~~
Page({
/**
* 頁面的初始數據
*/
data: {
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad(options) {
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow() {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide() {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload() {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh() {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom() {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage() {
}
})
~~~
>[danger] ##### 簡單的綜合案例
* index.js
~~~
function getApi(){
return new Promise((res,rej)=>{
setTimeout(()=>{
res(10000)
},1000)
})
}
Page({
// 渲染的data 數據
data:{
buttons:[
{name:"注冊頁面",path:"/pages/registerPage/index"},
{name:"常見組件",path:"/pages/commonCmp/index"},
],
count:0,
},
// 注冊事件
onBntClick(event){
const {path} = event.target.dataset.item
// 路由頁面跳轉
wx.navigateTo({
url: path,
})
},
// 小程序自帶的一些方法鉤子 綁定下拉刷新/達到底部/頁面滾動
onPullDownRefresh() {
console.log("onPullDownRefresh");
},
onReachBottom() {
console.log("onReachBottom");
},
onPageScroll(event) {
console.log("onPageScroll:", event);
},
// 生命周期
/**
* 生命周期函數--監聽頁面加載
*/
onLoad(options) {
// 異步請求 初始化數據
console.log('onLoad')
getApi().then((res)=>{
this.setData({count:res});
})
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady() {
console.log("onReady");
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow() {
console.log("onShow");
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide() {
console.log("onHide");
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload() {
console.log("onUnload");
},
})
~~~
* index.wxml, 和vue 不同是**bindtap** 作為點擊事件,給方法傳參使用的是`data-*` 的形式例如`data-item="{{item}}"`
~~~
<!--index.wxml-->
<view>
<block wx:for="{{buttons}}" wx:key="name">
<!-- bindtap 用來綁定事件 -->
<button type="primary" bindtap="onBntClick" data-item="{{item}}">
{{item.name}}
</button>
</block>
{{count}}
</view>
~~~
- 小程序了解
- webview 是什么
- Native App、Web App、Hybrid App
- 小程序架構模型
- 小程序配置文件
- app.js -- App函數
- 頁面.js -- page
- 生命周期????
- 小程序 -- 頁面wxml
- 小程序 -- WXS
- 小程序 -- 事件
- 小程序 -- 樣式wxss
- 小程序 -- 組件開發
- 小程序 -- 組件插槽
- 小程序 -- 組件的生命周期
- 組件總結
- 小程序 -- 混入
- 小程序基本組件
- text -- 文本
- view -- 視圖容器
- button -- 按鈕
- image -- 圖片
- scroll-view -- 滾動容器
- input -- 雙向綁定
- 通用屬性
- 小程序常用Api
- 微信網絡請求
- 微信小程序彈窗
- 微信小程序分享
- 獲取設備信息 / 獲取位置信息
- Storage存儲
- 頁面跳轉
- 小程序登錄