跟著小程序重構(gòu)迭代4個(gè)版本,總結(jié)一些開(kāi)發(fā)中遇到的問(wèn)題, 第四個(gè)版本,可以說(shuō)是功能真的很雜奕锌,也很亂,下面我主要說(shuō)下我負(fù)責(zé)的司乘同顯的調(diào)整優(yōu)化村生,行程分享一系列相關(guān)需求以及用戶(hù)感知的隨單返
1.頁(yè)面按鈕分享
wxml只能用button
在頁(yè)面的js文件中定義 onShareAppMessage 函數(shù)時(shí)惊暴,表示該頁(yè)面可以進(jìn)行轉(zhuǎn)發(fā)〕锰遥可以在函數(shù)中設(shè)置頁(yè)面轉(zhuǎn)發(fā)的信息辽话。
只有定義了該函數(shù),小程序右上角的菜單中才會(huì)有轉(zhuǎn)發(fā)按鈕
用戶(hù)點(diǎn)擊轉(zhuǎn)發(fā)按鈕的時(shí)候回調(diào)用該函數(shù)
該函數(shù)內(nèi)需要 return 一個(gè) Object卫病,Object中包含轉(zhuǎn)發(fā)的信息(可自定義轉(zhuǎn)發(fā)的內(nèi)容
2.觸發(fā)分享轉(zhuǎn)發(fā)位置
頁(yè)面中可以觸發(fā)轉(zhuǎn)發(fā)的地方有兩個(gè):
一個(gè)是右上角菜單中的轉(zhuǎn)發(fā)按鈕
另一個(gè)是頁(yè)面中具有屬性open-type且其值為share的button屡穗。(注:必須是button組件,其他組件中設(shè)置 open-type="share" 無(wú)效)
即:
<button data-name="shareBtn" open-type="share">轉(zhuǎn)發(fā)</button>
注意:實(shí)際開(kāi)發(fā)中會(huì)發(fā)現(xiàn)這個(gè) button 自帶有樣式忽肛,當(dāng)背景顏色設(shè)置為白色的時(shí)候還有一個(gè)黑色的邊框村砂,剛開(kāi)始那個(gè)邊框怎么都去不掉,后來(lái)給button加了一個(gè)樣式屬性 plain="true" 以后屹逛,再在樣式文件中控制樣式 button[plain]{ border:0 } 础废,就可以比較隨便的自定義樣式了汛骂。
eg:
將分享按鈕做成一個(gè)圖標(biāo)等
或者不加 plain="true",用偽類(lèi)
button::after{
border: none;
}
3.頁(yè)面跳轉(zhuǎn)傳遞參數(shù)
就算傳入的參和接的參不一致,也盡量不要在傳參的地方做修改评腺。不改變?cè)械模?/p>
4.分享后頁(yè)面
// 分享來(lái)自頁(yè)面內(nèi)轉(zhuǎn)發(fā)按鈕
onShareAppMessage: function (res) {
if (res.from === 'button') {
console.log(res.target)
}
return {
title: 自定義標(biāo)題,
imageUrl: 自定義圖片,
path: 用戶(hù)點(diǎn)擊分享卡片后看見(jiàn)的頁(yè)面帘瞭,注意必須以‘/’開(kāi)頭,
success: function (res) {
console.log('分享成功的處理')
},
fail: function (res) {
console.log('分享失敗的處理')
}
}
},
5.從何處分享來(lái)
- 從小程序分享過(guò)來(lái)的只能打開(kāi)小程序
- 從app分享過(guò)來(lái)的既能打開(kāi)小程序也能打開(kāi)app
打開(kāi)app
需要用戶(hù)主動(dòng)觸發(fā)才能打開(kāi) APP,所以不由 API 來(lái)調(diào)用蒿讥,需要用 open-type 的值設(shè)置為 launchApp 的 <button> 組件的點(diǎn)擊來(lái)觸發(fā)蝶念。
eg:
<button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打開(kāi)APP</button>
Page({
launchAppError (e) {
console.log(e.detail.errMsg)
}
})
相關(guān)文檔: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html