小程序入門總結(jié)篇
發(fā)布時間：2018-08-10 10:59 所屬欄目：小程序開發(fā)教程
|
須知
1.1 主體由 app.js 、 app.json 、 app.wxss 三個文件組成，放在根目錄
pages 配置小程序的組成頁面，第一個代表小程序的初始頁面 window 設置小程序的狀態(tài)欄、標題欄、導航條、窗口背景顏色 tabBar 配置小程序tab欄的樣式和對應的頁面
app.json
"pages": [ //設置頁面的路徑
"pages/index/index", //不需要寫index.wxml,index.js,index,wxss,框架會自動尋找并整合
"pages/logs/logs"
],
"window": { //設置默認窗口的表現(xiàn)形式
"navigationBarBackgroundColor": "#ffffff", //頂部導航欄背景色
"navigationBarTextStyle": "black", //頂部導航文字的顏色 black/white
"navigationBarTitleText": "微信接口功能演示", //頂部導航的顯示文字
"backgroundColor": "#eeeeee", //窗口的背景色
"backgroundTextStyle": "light", //下拉背景字體、loading 圖的樣式，僅支持 dark/light
"enablePullDownRefresh": "false"， //是否支持下拉刷新 ，不支持的話就直接不寫！
"disableScroll": true, // 設置true不能上下滾動，true/false，注意！只能在 page.json 中有效，無法在 app.json 中設置該項。
},
"tabBar": { //底部tab或者頂部tab的表現(xiàn)，是個數(shù)組，最少配置2個，最多5個
"list": [{ //設置tab的屬性，最少2個，最多5個
"pagePath": "pages/index/index", //點擊底部 tab 跳轉(zhuǎn)的路徑
"text": "首頁", //tab 按鈕上的文字
"iconPath": "../img/a.png", //tab圖片的路徑
"selectedIconPath": "../img/a.png" //tab 在當前頁，也就是選中狀態(tài)的路徑
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}],
"color": "red", //tab 的字體顏色
"selectedColor": "#673ab7", //當前頁 tab 的顏色，也就是選中頁的
"backgroundColor": "#2196f3", //tab 的背景色
"borderStyle": "white", //邊框的顏色 black/white
"position": "bottom" //tab處于窗口的位置 top/bottom
},
"networkTimeout": { //默認都是 60000 秒一分鐘
"request": 10000, //請求網(wǎng)絡超時時間 10000 秒
"downloadFile": 10000， //鏈接服務器超時時間 10000 秒
"uploadFile": "10000", //上傳圖片 10000 秒
"downloadFile": "10000" //下載圖片超時時間 10000 秒
},
"debug": true //項目上線后，建議關閉此項，或者不寫此項
1.2 pagespages 文件夾里是小程序的各個頁面，每個界面一般都由 .wxml 、 .wxss 、 .js 、 .json四個文件組成，四個文件必須是相同的名字和路徑
1.3 utilsutils 里面包含一些公共的代碼抽取的 js 文件，作為模塊方便使用。模塊通過 module.exports 對外暴露接口
二、視圖層 WXML2.1 數(shù)據(jù)綁定傳統(tǒng)的視圖和數(shù)據(jù)綁定
那么微信小程序是通過什么方法來管理視圖和對象綁定的呢,狀態(tài)模式-單向數(shù)據(jù)流
數(shù)據(jù)流向是單向的，即視圖變化不會影響對象狀態(tài) UI
.wxml 中的動態(tài)數(shù)據(jù)都來自 Page 中的 data 。數(shù)據(jù)綁定使用數(shù)據(jù)綁定使用雙大括號將變量包起來，可以作用于內(nèi)容、組件屬性(需要在雙引號之內(nèi))、控制屬性(需要在雙引號之內(nèi))、關鍵字(需要在雙引號之內(nèi))
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>
還可以進行簡單的運算在大括號里
<view hidden="{{status ? true : false}}"> Hidden view>
<view> {{a + b}} + c view>
<view wx:if="{{num > 6}}"> view>
<view>{{"hello" + word}}view>
2.2 條件渲染用 wx:if=”” 來判斷是否渲染代碼塊
<view wx:if="{{status}}"> isShow view>
還可以添加 else 塊
<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"]
}
})
使用 wx:for-item 可以指定數(shù)組當前元素的變量名，使用 wx:for-index 可以指定數(shù)組當前下標的變量名
<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 就可以多重引用 <include src="header.wxml"/> <view> body view> <view> header view> <include src="footer.wxml"/> 2.6 事件
三、生命周期3.1 App()應用生命周期
onLaunch onShow onHide onShow onError 前臺、后臺定義： 當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信，小程序并沒有直接銷毀，而是進入了后臺；當再次進入微信或再次打開小程序，又會從后臺進入前臺
//app.js
App({
onLaunch: function() {
//小程序初始化(全局只觸發(fā)一次)
},
onShow: function() {
//小程序顯示
},
onHide: function() {
//小程序隱藏
},
onError: function(msg) {
//小程序錯誤
},
})
//其他 開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 Object 參數(shù)中，用 this 可以訪問
3.2 Page頁面生命周期每個頁面也有自己的生命周期
//index.js
Page({
onLoad: function(options) {
//頁面加載-----(一個頁面只會調(diào)用一次)
},
onReady: function() {
//頁面渲染-----(一個頁面只會調(diào)用一次)
},
onShow: function() {
//頁面顯示-----(每次打開頁面都會調(diào)用一次)
},
onHide: function() {
//頁面隱藏-----(當navigateTo或底部tab切換時調(diào)用)
},
onUnload: function() {
//頁面卸載-----(當redirectTo或navigateBack的時候調(diào)用)
},
})
//其他 開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 object 參數(shù)中，在頁面的函數(shù)中用 this 可以訪問
3.3 應用生命周期影響頁面生命周期
四、小程序限制4.1 程序限制
4.2 數(shù)量限制
4.3 大小限制
五、路由
5.1 哪些情況會觸發(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 使用組件
當該組件添加 redirect 屬性時，等同于 wx.redirectTo 接口；默認 redirect 屬性為 false，等同于 wx.navigateTo 接口 用戶點擊左上角返回按鈕，或調(diào)用 wx.navigateBack 接口返回上一頁
wx.navigateBack({
delta: 1
})
delta 為1時表示返回上一頁，為2時表示上上一頁，以此類推；如果dalta大于已打開的頁面總數(shù)，則返回到首頁。返回后，元界面會銷毀 5.4 頁面跳轉(zhuǎn)傳值url?key=value&key1=value1 傳遞的參數(shù)沒有被 URIEncode ,傳遞中文沒有亂碼 5.5 如何正確使用頁面跳轉(zhuǎn)官方規(guī)定小程序最多只能有五個頁面同時存在，意思是在不關閉頁面的情況，最多新開五個頁面，頁面深度為5
5.6 頁面棧getCurrentPages() 使用wx.navigateTo每新開一個頁面，頁面棧大小加1,直到頁面棧大小為5為止
使用wx.navigateTo重復打開界面
假如使用wx.navigateTo從四級頁面跳轉(zhuǎn)到二級頁面，此時會在頁面棧頂添加一個與二級頁面初始狀態(tài)一樣的界面，但兩個頁面狀態(tài)是獨立的。頁面棧大小會加1，如果頁面棧大小為5，則wx.navigateTo無效 使用wx.redirectTo重定向
假如使用wx.redirectTo從四級頁面重定向到二級頁面，此時會將關閉四級頁面，并使用二級頁面替換四級頁面，但兩個頁面狀態(tài)是獨立的。此時的頁面棧大小不變，請注意和使用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、通過在 App.js 中設置全局變量通常把不會更改的數(shù)據(jù)放在 app.js 的 Data 中，在各個頁面中都可以通過 APP 實例獲取 Data 數(shù)據(jù) var app = getApp(); var data = app.data; 2、通過拼接 URL 直接傳遞wx.navigateTo({}) 中 URL 攜帶參數(shù)
wx.navigateTo({
url: 'test?id=1'
});
在wxml中使用 navigator 跳轉(zhuǎn)url傳遞參數(shù)代碼如下，將要傳遞到另一個頁面的字符串testId的值賦值到url中
在 js 頁面中 onLoad 方法中接收
Page({
onLoad: function(options) {
var testId = options.testId
console.log(testId)
}
})
navigator 跳轉(zhuǎn) url 傳遞數(shù)組如果一個頁面要將一個數(shù)組，如相冊列表傳遞到另一個頁面
傳遞到js后從 options 中得到的是個字符串，每個圖片的url通過’,’分隔，所以此時還需要對其進行處理，重新組裝為數(shù)組
Page({
data: {
// 相冊列表數(shù)據(jù)
albumList: [],
},
onLoad: function (options) {
var that = this;
that.setData({
albumList: options.albumList.split(",")
});
}
})
3、在wxml中綁定事件后，通過 data-hi="參數(shù)" 的方式傳遞這種方式一般是在wxml中綁定事件，同時設置需要傳遞的數(shù)據(jù)，如果需要傳遞多個，可以寫多個 data-[參數(shù)] 的方式進行傳遞
<view bindtap="clickMe" data-testId={{testId}}">
...
view>
在js頁面中自定義方法clickMe中接收
Page({
clickMe: function(event) {
var testId = event.currentTarget.dataset.testid;
wx.navigateTo({
url: '../../pages/test/test'
})
}
})
wxml中配置data-albumlist傳遞數(shù)組
<view bindtap="clickMe" data-albumlist={{testData.albumList}}">
view>
在js頁面中自定義方法clickMe中接收
Page({
clickMe: function(event) {
var albumList = event.currentTarget.dataset.albumlist.split(",");
wx.navigateTo({
url: '../../pages/test/test'
})
}
})
4、通過數(shù)據(jù)緩存存儲再獲取wx.setStorageSync(KEY,DATA) 存儲數(shù)據(jù)
try {
wx.setStorageSync('key', 'value')
} catch (e) {
}
wx.getStorageSync(KEY) 獲取數(shù)據(jù)
try {
var value = wx.getStorageSync('key')
if (value) {
// Do something with return value
}
} catch (e) {
// Do something when catch error
}
或
wx.getStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})
七、疑問匯總為什么腳本內(nèi)不能使用window等對象
為什么 zepto/jquery 無法使用
wx.navigateTo無法打開頁面
樣式表不支持級聯(lián)選擇器
本地資源無法通過 css 獲取
如何修改窗口的背景色
page {
display: block;
min-height: 100%;
background-color: red;
}
為什么上傳不成功
HTTPS 請求不成功
微信小程序支持fetch或者promise嗎?
wx.request的POST方法的參數(shù)傳輸服務器接收不到的bug
wx.request({
....
method: "POST",
header: {
"content-type": "application/x-www-form-urlencoded"
},
...
})
wx.uploadFile在手機上返回http碼403
小程序SVG支持嗎?
ipad不能使用小程序？
請問小程序頁內(nèi)支持長按保存圖片或分享圖片嗎？
微信小程序不支持cookie
有些手機不支持Object.assign方法，如果使用了該方法會出現(xiàn)莫名其妙的報錯（并不會提示Object.assign is not function，而是導致調(diào)用了Object.assign方法的方法不能被調(diào)用）！直接寫一個合并對象的方法
function assignObject(o, n) {
for (var p in n) {
if (n.hasOwnProperty(p) && (!o.hasOwnProperty(p)))
o[p] = n[p];
}
}
|
