16. 小程序this.setData is not a function
現(xiàn)象：如果出現(xiàn)this.setData is not a function 這個(gè)錯(cuò)誤奋岁，這個(gè)就是微信小程序中的this的指向問(wèn)題思瘟，比如在發(fā)送請(qǐng)求成功之后的this指向。
解決方法：
- const that = this;然后使用that.setData
- 使用ES6的箭頭函數(shù)
17.使用data-xx傳值
小程序會(huì)使用data-xx自定義屬性闻伶，讀取的時(shí)候event.currentTarget.dataset就可以獲取設(shè)置的屬性值滨攻，常用于循環(huán)渲染
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="viewTap"> Click me</view>
viewTap: function(event) {
console.log(event.currentTarget.dataset.alphaBeta) // 轉(zhuǎn)化為駝峰寫(xiě)法
console.log(event.currentTarget.dataset.alphabeta) // 所有的大寫(xiě)轉(zhuǎn)化成小寫(xiě)
}
注意寫(xiě)法
18. 小程序撥打電話報(bào)錯(cuò)
解決方法：小程序調(diào)用撥打電話參數(shù) phoneNumber必須是字符串格式
calling: function (event) {
wx.makePhoneCall({
phoneNumber: event.currentTarget.dataset.tel + ''
})
}
19. block 標(biāo)簽
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>
<block/> 并不是一個(gè)組件，它僅僅是一個(gè)包裝元素铡买，不會(huì)在頁(yè)面中做任何渲染霎箍，只接受控制屬性（如wx:for 或 wx:if）漂坏。
20. 關(guān)鍵字
關(guān)鍵字綁定常用于組件的一些關(guān)鍵字顶别，像復(fù)選框組件一樣，checked關(guān)鍵字如果等于true完慧，則代表選中復(fù)選框屈尼，false則代表不選中復(fù)選框拴孤，示例代碼如下：
<checkbox checked="{{false}}"> </checkbox>
不要直接寫(xiě)checked = "false"演熟，其計(jì)算結(jié)果是一個(gè)字符串，轉(zhuǎn)成boolean類型后代表真值兄纺。
21. 網(wǎng)絡(luò)請(qǐng)求
小程序通過(guò)wx.request方法進(jìn)行https網(wǎng)絡(luò)請(qǐng)求囤热，網(wǎng)絡(luò)請(qǐng)求是獲取網(wǎng)絡(luò)數(shù)據(jù)的基本方法获三。
wx.request({
url: 'test.php', // 僅為示例疙教，并非真實(shí)的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默認(rèn)值
},
success(res) {
console.log(res.data)
}
})
注意點(diǎn)：
- wx.request方法只支持https請(qǐng)求。
- 訪問(wèn)URL域名已經(jīng)在微信小程序后臺(tái)配置為合法域名限佩，并且不能有端口祟同。
- method的value必須為大寫(xiě)（如GET）晕城。
- request請(qǐng)求的默認(rèn)超時(shí)時(shí)間和最大超時(shí)時(shí)間都是60s窖贤。
- request的最大并發(fā)數(shù)是5贰锁。
- 網(wǎng)絡(luò)請(qǐng)求的referer是不可以設(shè)置的豌熄，固定格式為
https://servicewechat.com/{appid}/{version}/page-frame.html锣险。關(guān)于referer的詳細(xì)解釋
22. getCurrentPages()函數(shù)
框架以棧的形式維護(hù)了當(dāng)前的所有頁(yè)面囱持。 當(dāng)發(fā)生路由切換的時(shí)候焕济，頁(yè)面棧的表現(xiàn)如下：
| 路由方式 | 頁(yè)面棧表現(xiàn) |
|---|---|
| 初始化 | 新頁(yè)面入棧 |
| 打開(kāi)新頁(yè)面 | 新頁(yè)面入棧 |
| 頁(yè)面重定向 | 當(dāng)前頁(yè)面出棧晴弃，新頁(yè)面入棧 |
| 頁(yè)面返回 | 頁(yè)面不斷出棧上鞠，直到目標(biāo)返回頁(yè) |
| Tab 切換 | 頁(yè)面全部出棧，只留下新的 Tab 頁(yè)面 |
| 重加載 | 頁(yè)面全部出棧世曾，只留下新的頁(yè)面 |
getCurrentPages()函數(shù)用于獲取當(dāng)前頁(yè)面棧的實(shí)例轮听，以數(shù)組形式按棧的順序給出岭佳，第一個(gè)元素為首頁(yè)珊随，最后一個(gè)元素為當(dāng)前頁(yè)面。
注意：
- 不要嘗試修改頁(yè)面棧鲫凶，會(huì)導(dǎo)致路由以及頁(yè)面狀態(tài)錯(cuò)誤衩辟。
- 不要在 App.onLaunch 的時(shí)候調(diào)用 getCurrentPages()惭婿，此時(shí) page 還沒(méi)有生成。
- getCurrentPages() 跳轉(zhuǎn)現(xiàn)在小程序支持十層换吧。超過(guò)十層之后小程序可能會(huì)造成崩潰沾瓦。
23. getApp()
微信小程序在App()函數(shù)里定義的是全局函數(shù)和全局?jǐn)?shù)據(jù)谦炒，因此在頁(yè)面文件夾的js文件也可以直接使用。比如存在“pages/home/home”這樣的頁(yè)面路徑缕探，在App()函數(shù)中也定義了全局函數(shù)getUserInfo()爹耗。則在home.js文件中就可以直接使用App()函數(shù)提供的全局函數(shù)或數(shù)據(jù)谜喊，代碼如下：
//home.js
//獲取應(yīng)用實(shí)例
const app = getApp()
Page({
onLoad: function () {
const that = this
// 調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
app.getUserInfo({
success: res => {
that.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
})
注意點(diǎn)：
- App()函數(shù)必須在app.js中注冊(cè)斗遏，且不能注冊(cè)多個(gè)诵次。
- 不能在App()內(nèi)的函數(shù)調(diào)用getApp()，使用this就可以拿到App實(shí)例剔猿。
- 通過(guò)getApp()獲取實(shí)例之后嬉荆，不要私自調(diào)用生命周期函數(shù)鄙早。
24. 小程序生命周期
小程序生命周期分為兩類：應(yīng)用生命周期和頁(yè)面生命周期。
應(yīng)用生命周期包括onLaunch舱污、onShow扩灯、onHide、onError珠插、onUnload。
頁(yè)面生命周期包括onLoad磨隘、onShow番捂、onReady江解、onHide、onUnload絮缅。
25. 小程序判斷用戶是否是通過(guò)點(diǎn)擊別人分享的小卡片進(jìn)入頁(yè)面
用戶進(jìn)入小程序的方法有很多種耕魄，可以通過(guò)好友分享彭谁、群聊分享缠局、微信聊天主頁(yè)面下拉或者發(fā)現(xiàn)欄小程序等等多種途徑。但如果通過(guò)好友分享或者群聊分享打開(kāi)的可能是某一個(gè)小程序頁(yè)面读处，不能返回主頁(yè)面唱矛，這時(shí)就需要在分享的頁(yè)面中加入一個(gè)返回主頁(yè)面的按鈕绎谦，所以需要判斷用戶進(jìn)入的渠道。
其解決方法有多種包个，詳細(xì)解釋
26.小程序與內(nèi)嵌網(wǎng)頁(yè)之間的跳轉(zhuǎn)
小程序跳轉(zhuǎn)到內(nèi)嵌H5頁(yè)面碧囊，需要使用web-view組件，定義該組件的src屬性即可糯而。
內(nèi)嵌H5頁(yè)面跳轉(zhuǎn)到小程序頁(yè)面引入微信的jssdk文件歧蒋，使用wx.miniProgram.redirectTo({url: '/path/to/page'})
27. 判斷網(wǎng)頁(yè)是否在小程序環(huán)境
在網(wǎng)頁(yè)內(nèi)可通過(guò)window.__wxjs_environment變量判斷是否在小程序環(huán)境州既，建議在WeixinJSBridgeReady回調(diào)中使用吴叶，也可以使用JSSDK 1.3.2提供的getEnv接口。
代碼如下：
// web-view下的頁(yè)面內(nèi)
wx.ready(function() {
console.log(window.__wxjs_environment === 'miniprogram') // true
})
// 或
wx.miniProgram.getEnv(function(res) {
console.log(res.miniprogram) // true
})
28. 小程序與內(nèi)嵌網(wǎng)頁(yè)的通信
- 在web-view中添加bindmessage屬性实束，并綁定一個(gè)函數(shù)咸灿，用于監(jiān)聽(tīng)網(wǎng)頁(yè)發(fā)來(lái)的消息侮叮。
- 在內(nèi)嵌網(wǎng)頁(yè)中引入jssdk，然后調(diào)用wx.miniProgram.postMessage()來(lái)向小程序發(fā)送數(shù)據(jù)审胸。
小程序代碼：
<!--webview.wxml-->
<web-view src="{{url}}" bindmessage="postMessage"></web-view>
// webview.js
Page({
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
this.setData({
url: options.url
})
},
postMessage(e) {
// e.detail = { data }砂沛，data是多次 postMessage 的參數(shù)組成的數(shù)組
this.setData({
score: e.detail.data[0].score
})
}
})
內(nèi)嵌網(wǎng)頁(yè)代碼：
<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
// javascript
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
注意：網(wǎng)頁(yè)向小程序 postMessage時(shí)碍庵，不是實(shí)時(shí)的悟狱，只有在特定時(shí)機(jī)（小程序后退芽淡、組件銷毀、分享）觸發(fā)并收到消息富稻。
29. 小程序內(nèi)嵌網(wǎng)頁(yè)的轉(zhuǎn)發(fā)分享
小程序內(nèi)嵌網(wǎng)頁(yè)本質(zhì)是在web-view組件的容器中，當(dāng)對(duì)小程序內(nèi)嵌網(wǎng)頁(yè)的轉(zhuǎn)發(fā)分享抚岗，也是對(duì)webview頁(yè)面的轉(zhuǎn)發(fā)分享哪怔，所以只需在webview.js中的page()定義onShareAppMessage即可。
代碼如下：
Page({
onShareAppMessage(options) {
console.log(options.webViewUrl) // 獲取當(dāng)前<web-view>的URL
return {
title: "轉(zhuǎn)發(fā)文本標(biāo)題",
imageUrl: "轉(zhuǎn)發(fā)縮略圖途徑",
path: options.webViewUrl
}
}
})
30. webview組件中bindload問(wèn)題
最近開(kāi)發(fā)小程序的時(shí)候胚委，遇到了一個(gè)奇怪的問(wèn)題亩冬。當(dāng)我對(duì)內(nèi)嵌網(wǎng)頁(yè)設(shè)置背景音頻的時(shí)候硅急，當(dāng)網(wǎng)頁(yè)加載成功的時(shí)候佳遂，定義音頻。但在真機(jī)上測(cè)試的時(shí)候背景音頻定義兩次荚板，所以出現(xiàn)了重音的現(xiàn)象啸驯。
打印了一下日志祟峦，發(fā)現(xiàn)bindload定義的方法執(zhí)行了兩次。其原因我也不知针姿。
代碼如下：
webview.wxml
<!-- 指向微信公眾平臺(tái)首頁(yè)的web-view -->
<web-view src="{{url}}" bindload="loadHtml"></web-view>
webview.js
Page({
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
this.setData({
url: options.url
})
},
loadHtml() {
console.log('頁(yè)面加載完成') // 該方法執(zhí)行兩次
}
})
