【小程序開發(fā)】小程序入門總結(jié)篇
2018-08-10 18:12:08|
須知
1.1 主體由
pages 配置小程序的組成頁面，第一個(gè)代表小程序的初始頁面
window 設(shè)置小程序的狀態(tài)欄、標(biāo)題欄、導(dǎo)航條、窗口背景顏色
tabBar 配置小程序tab欄的樣式和對應(yīng)的頁面
"pages": [ //設(shè)置頁面的路徑 "pages/index/index", //不需要寫index.wxml,index.js,index,wxss,框架會(huì)自動(dòng)尋找并整合 "pages/logs/logs" ], "window": { //設(shè)置默認(rèn)窗口的表現(xiàn)形式 "navigationBarBackgroundColor": "#ffffff", //頂部導(dǎo)航欄背景色 "navigationBarTextStyle": "black", //頂部導(dǎo)航文字的顏色 black/white "navigationBarTitleText": "微信接口功能演示", //頂部導(dǎo)航的顯示文字 "backgroundColor": "#eeeeee", //窗口的背景色 "backgroundTextStyle": "light", //下拉背景字體、loading 圖的樣式，僅支持 dark/light "enablePullDownRefresh": "false"， //是否支持下拉刷新 ，不支持的話就直接不寫！ "disableScroll": true, // 設(shè)置true不能上下滾動(dòng)，true/false，注意！只能在 page.json 中有效，無法在 app.json 中設(shè)置該項(xiàng)。 }, "tabBar": { //底部tab或者頂部tab的表現(xiàn)，是個(gè)數(shù)組，最少配置2個(gè)，最多5個(gè) "list": [{ //設(shè)置tab的屬性，最少2個(gè)，最多5個(gè) "pagePath": "pages/index/index", //點(diǎn)擊底部 tab 跳轉(zhuǎn)的路徑 "text": "首頁", //tab 按鈕上的文字 "iconPath": "../img/a.png", //tab圖片的路徑 "selectedIconPath": "../img/a.png" //tab 在當(dāng)前頁，也就是選中狀態(tài)的路徑 }, { "pagePath": "pages/logs/logs", "text": "日志" }], "color": "red", //tab 的字體顏色 "selectedColor": "#673ab7", //當(dāng)前頁 tab 的顏色，也就是選中頁的 "backgroundColor": "#2196f3", //tab 的背景色 "borderStyle": "white", //邊框的顏色 black/white "position": "bottom" //tab處于窗口的位置 top/bottom }, "networkTimeout": { //默認(rèn)都是 60000 秒一分鐘 "request": 10000, //請求網(wǎng)絡(luò)超時(shí)時(shí)間 10000 秒 "downloadFile": 10000， //鏈接服務(wù)器超時(shí)時(shí)間 10000 秒 "uploadFile": "10000", //上傳圖片 10000 秒 "downloadFile": "10000" //下載圖片超時(shí)時(shí)間 10000 秒 }, "debug": true //項(xiàng)目上線后，建議關(guān)閉此項(xiàng)，或者不寫此項(xiàng)
1.2 pages
1.3 utils
二、視圖層 WXML2.1 數(shù)據(jù)綁定傳統(tǒng)的視圖和數(shù)據(jù)綁定
那么微信小程序是通過什么方法來管理視圖和對象綁定的呢,狀態(tài)模式-單向數(shù)據(jù)流
數(shù)據(jù)流向是單向的，即視圖變化不會(huì)影響對象狀態(tài) UI
Page({ data: { message: "Hello", id:0, status: true
}
})
<view> {{message}} view> <view id="item-{{id}}"> view> <view wx:if="{{status}}"> view> <view hidden="{{status}}"> checkbox>
還可以進(jìn)行簡單的運(yùn)算在大括號(hào)里 <view hidden="{{status ? true : false}}"> Hidden view> <view> {{a + b}} + c view> <view wx:if="{{num > 6}}"> view> <view>{{"hello" + word}}view>
2.2 條件渲染用 <view wx:if="{{status}}"> isShow view>
還可以添加 <view wx:if="{{num > 5}}"> A view> <view wx:elif="{{num > 2}}"> B view> <view wx:else> C view>
2.3 列表渲染
<view wx:for="{{array}}"> {{index}}: {{item.message}} view>
Page({ data: { array: ["AA","BB","CC"]
}
})
使用 <view wx:for="{{array}}" wx:for-index="num" wx:for-item="itemName">
{{num}}: {{itemName}}
view>
2.4 模板template
<template name="msgItem"> <view> <text> {{index}}: {{msg}} text> <text> Time: {{time}} text> view> template> <template is="msgItem" data="{{...item}}"/>
2.5 公共模塊的引用
<import src="a.wxml"/> <template name="A"> <text> A template text> template>
<include src="header.wxml"/> <view> body view> <view> header view> <include src="footer.wxml"/>
2.6 事件
三、生命周期3.1 App()應(yīng)用生命周期
onLaunch onShow onHide onShow onError
前臺(tái)、后臺(tái)定義： 當(dāng)用戶點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開微信，小程序并沒有直接銷毀，而是進(jìn)入了后臺(tái)；當(dāng)再次進(jìn)入微信或再次打開小程序，又會(huì)從后臺(tái)進(jìn)入前臺(tái) //app.js App({
onLaunch: function() { //小程序初始化(全局只觸發(fā)一次) },
onShow: function() { //小程序顯示 },
onHide: function() { //小程序隱藏 },
onError: function(msg) { //小程序錯(cuò)誤 },
}) //其他 開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 Object 參數(shù)中，用 this 可以訪問
3.2 Page頁面生命周期每個(gè)頁面也有自己的生命周期
//index.js Page({
onLoad: function(options) { //頁面加載-----(一個(gè)頁面只會(huì)調(diào)用一次) },
onReady: function() { //頁面渲染-----(一個(gè)頁面只會(huì)調(diào)用一次) },
onShow: function() { //頁面顯示-----(每次打開頁面都會(huì)調(diào)用一次) },
onHide: function() { //頁面隱藏-----(當(dāng)navigateTo或底部tab切換時(shí)調(diào)用) },
onUnload: function() { //頁面卸載-----(當(dāng)redirectTo或navigateBack的時(shí)候調(diào)用) },
}) //其他 開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 object 參數(shù)中，在頁面的函數(shù)中用 this 可以訪問
3.3 應(yīng)用生命周期影響頁面生命周期
四、小程序限制4.1 程序限制
4.2 數(shù)量限制
4.3 大小限制
五、路由
5.1 哪些情況會(huì)觸發(fā)頁面跳轉(zhuǎn)
5.2 如何跳轉(zhuǎn)頁面
wx.navigateTo({ //目的頁面地址 url: 'pages/logs/index', success: function(res){},
...
})
wx.redirectTo({ //目的頁面地址 url: 'pages/logs/index', success: function(res){},
...
})
5.3 使用組件當(dāng)該組件添加 用戶點(diǎn)擊左上角返回按鈕，或調(diào)用 wx.navigateBack({ delta: 1 })
5.4 頁面跳轉(zhuǎn)傳值url?key=value&key1=value1
傳遞的參數(shù)沒有被 5.5 如何正確使用頁面跳轉(zhuǎn)官方規(guī)定小程序最多只能有五個(gè)頁面同時(shí)存在，意思是在不關(guān)閉頁面的情況，最多新開五個(gè)頁面，頁面深度為5
5.6 頁面棧getCurrentPages()
使用wx.navigateTo每新開一個(gè)頁面，頁面棧大小加1,直到頁面棧大小為5為止
使用wx.navigateTo重復(fù)打開界面
假如使用wx.navigateTo從四級(jí)頁面跳轉(zhuǎn)到二級(jí)頁面，此時(shí)會(huì)在頁面棧頂添加一個(gè)與二級(jí)頁面初始狀態(tài)一樣的界面，但兩個(gè)頁面狀態(tài)是獨(dú)立的。頁面棧大小會(huì)加1，如果頁面棧大小為5，則wx.navigateTo無效 使用wx.redirectTo重定向
假如使用wx.redirectTo從四級(jí)頁面重定向到二級(jí)頁面，此時(shí)會(huì)將關(guān)閉四級(jí)頁面，并使用二級(jí)頁面替換四級(jí)頁面，但兩個(gè)頁面狀態(tài)是獨(dú)立的。此時(shí)的頁面棧大小不變，請注意和使用wx.navigateTo的區(qū)別 使用wx.navigateBack返回
總結(jié)wx.navigateTo wx.redirectTo wx.navigateBack
六、數(shù)據(jù)通信6.1 頁面之間的通信app.globalData wx.setStorageSync url
// A頁面-傳遞數(shù)據(jù) // 需要注意的是，wx.switchTab 中的 url 不能傳參數(shù)。 wx.navigateTo({ url:'../pageD/pageD?name=raymond&gender=male' }) // B頁面-接收數(shù)據(jù)// //通過onLoad的option... Page({ onLoad: function(option){
console.log(option.name +'is'+ option.gender)// raymond is male this.setData({option: option })
}})
6.2 參數(shù)傳遞6.2.1 小程序傳遞參數(shù)的方式1、通過在
|
