背景
近日小程序支持分享到朋友圈的消息可以說(shuō)是小程序開發(fā)圈的一個(gè)重磅炸彈肖油，轉(zhuǎn)轉(zhuǎn)小程序團(tuán)隊(duì)也在收到微信邀請(qǐng)后第一時(shí)間進(jìn)行了調(diào)研兼吓，并對(duì)轉(zhuǎn)轉(zhuǎn)小程序迅速進(jìn)行了能力支持，本文將全面解讀微信此項(xiàng)能力森枪。
概述
此項(xiàng)能力其實(shí)分成兩個(gè)模塊：
1视搏、小程序分享到朋友圈能力
2、朋友圈打開小程序的能力
分享到朋友圈的樣式開發(fā)
我們也分兩個(gè)模塊來(lái)看：
1县袱、小程序分享到朋友圈能力
在小程序界面顯示分享到朋友圈按鈕的能力浑娜，目前要求如下：
1.安卓平臺(tái)：
要求微信版本7.0.16及以上，基礎(chǔ)庫(kù)2.11.13及以上式散，筆者在測(cè)試中發(fā)現(xiàn)筋遭，此項(xiàng)能力也跟機(jī)型有關(guān)，目前發(fā)現(xiàn)OPPO一款機(jī)型無(wú)分享到朋友圈按鈕，小米機(jī)型均有此項(xiàng)能力漓滔。
2.IOS平臺(tái)：
目前還不支持此項(xiàng)能力编饺，但高版本微信支持朋友圈打開小程序能力（下文述）
小程序頁(yè)面默認(rèn)不開啟分享到朋友圈按鈕，除非代碼中主動(dòng)設(shè)置：
1.頁(yè)面需設(shè)置允許“發(fā)送給朋友”响驴，代碼示例：
onShareAppMessage() {
return {
title: '買賣二手透且，省錢又賺錢！轉(zhuǎn)轉(zhuǎn)豁鲤，一個(gè)幫你賺錢的網(wǎng)站秽誊！',
path: '/pages/index/index',
imageUrl:'https://pic5.zhuanstatic.com/zhuanzh/n_v2be00a9c4aa4941bf8567f5fd999e2709.png',
}
}
2.頁(yè)面需設(shè)置允許“分享到朋友圈”，代碼示例：
onShareTimeline() {
return {
title: '[小程序] 買賣二手畅形，省錢又賺錢养距！轉(zhuǎn)轉(zhuǎn)，一個(gè)幫你賺錢的網(wǎng)站日熬！',
query: 'zzfrom=pyq'
}
}
3.開啟分享菜單中的“分享到朋友圈”按鈕：
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
})
這項(xiàng)要求微信在文檔中并沒有提到棍厌，但實(shí)測(cè)發(fā)現(xiàn)必須調(diào)用此方法才能出現(xiàn)分享到朋友圈按鈕,可以在onLoad生命周期調(diào)用此方法
其中：
1.最新版微信開發(fā)者工具支持此項(xiàng)能力的模擬調(diào)試
2.存在
web-view組件的頁(yè)面不支持發(fā)起分享
3.
onShareTimeline是自基礎(chǔ)庫(kù)2.11.3開始新增的頁(yè)面生命周期，行為與onShareAppMessage類似
4.該生命周期需返回
Object竖席，用于自定義分享內(nèi)容耘纱，其中：
title：分享標(biāo)題，默認(rèn)去小程序名稱query：分享出去的頁(yè)面上攜帶的參數(shù)毕荐，用于標(biāo)示渠道來(lái)源等imageUrl：分享圖片束析，默認(rèn)使用小程序logo
5.特別強(qiáng)調(diào)：分享到朋友圈不支持path參數(shù)，也就是說(shuō)用戶在哪個(gè)頁(yè)面發(fā)起分享憎亚，分享出去的就是哪個(gè)頁(yè)面员寇，這就要求開發(fā)者對(duì)分享頁(yè)面進(jìn)行一些適配，因?yàn)槲覀兎窒淼脚笥讶Φ捻?yè)面第美，用戶打開時(shí)會(huì)進(jìn)入一個(gè)“單頁(yè)模式”蝶锋，在此模式下，很多sdk無(wú)法使用什往。
2扳缕、朋友圈打開小程序的能力
用戶在朋友圈打開分享的小程序頁(yè)面，并不會(huì)真正打開小程序别威，而是進(jìn)入一個(gè)原本頁(yè)面的“單頁(yè)模式”的頁(yè)面躯舔，上文提到，用戶分享的原始頁(yè)面和朋友圈打開的“單頁(yè)模式”頁(yè)面省古，其實(shí)對(duì)開發(fā)者來(lái)講是同一個(gè)頁(yè)面粥庄，為了區(qū)分，微信給出了兩個(gè)新的場(chǎng)景值：
1154：朋友圈打開小程序衫樊，也就是正處在“單頁(yè)模式”飒赃，開發(fā)者可以根據(jù)這個(gè)場(chǎng)景值進(jìn)行適配利花，理論上除此場(chǎng)景值外，都是正常模式载佳。
1155：從“單頁(yè)模式”進(jìn)入正常模式炒事，由于此項(xiàng)行為是微信統(tǒng)一行為，開發(fā)者無(wú)法進(jìn)行標(biāo)記蔫慧，如果想對(duì)此項(xiàng)行為進(jìn)行統(tǒng)計(jì)挠乳，可以使用該場(chǎng)景值。
“單頁(yè)模式”需要適配什么呢姑躲？
微信官方對(duì)“單頁(yè)模式”有以下解釋：
1.“單頁(yè)模式”下睡扬，頁(yè)面頂部固定有導(dǎo)航欄，標(biāo)題顯示為分享時(shí)的標(biāo)題黍析。底部固定有操作欄卖怜，點(diǎn)擊操作欄的“前往小程序”可打開小程序的當(dāng)前頁(yè)面。頂部導(dǎo)航欄與底部操作欄均不支持自定義樣式阐枣。
樣式參考下圖
這兩處的樣式是無(wú)法自定義的马靠。
其中，用戶只能通過(guò)下方“前往小程序”按鈕進(jìn)入正常模式蔼两。
如果小程序使用了自定義導(dǎo)航頭部甩鳄，則需要進(jìn)行一定的適配，比如我司小程序额划，頂部使用了自定義背景妙啃，適配前是這樣：
由于頂部title欄微信有固定樣式，因此我們?cè)陬^部加了一個(gè)灰色背景進(jìn)行遮擋俊戳。
2.“單頁(yè)模式”默認(rèn)運(yùn)行的是小程序頁(yè)面內(nèi)容揖赴，但由于頁(yè)面固定有頂部導(dǎo)航欄與底部操作欄，很可能會(huì)影響小程序頁(yè)面的布局抑胎。因此储笑，請(qǐng)開發(fā)者特別注意適配“單頁(yè)模式”的頁(yè)面交互，以實(shí)現(xiàn)流暢完整的交互體驗(yàn)圆恤。
在app.json中新增了對(duì)單頁(yè)模式的配置項(xiàng)：
"singlePage" : { "navigationBarFit" : "" //float或squeezed}
該項(xiàng)配置可以設(shè)置頂部默認(rèn)title欄的表現(xiàn)，其中：
默認(rèn)值：
- 如果頁(yè)面使用了自定義導(dǎo)航欄模式腔稀，則此項(xiàng)默認(rèn)為:
float盆昙，意為導(dǎo)航欄浮在頁(yè)面上，不對(duì)原本頁(yè)面布局產(chǎn)生影響（但可能遮擋原本頁(yè)面部分元素） - 如果否則默認(rèn)為：
squeezed焊虏，表示頁(yè)面被導(dǎo)航欄擠壓淡喜，與頁(yè)面不相交，也就是在頁(yè)面頂部留出固定空間放微信的導(dǎo)航欄诵闭，原本頁(yè)面將往下移動(dòng)
當(dāng)然這兩個(gè)值也可以根據(jù)頁(yè)面需要而設(shè)置不同值炼团。
還有一點(diǎn)需要注意：
單頁(yè)模式下澎嚣，wx.getSystemInfo 接口返回的 safeArea 為整個(gè)屏幕空間，例如：
在iPhone6下瘟芝，屏幕尺寸為375x667
- 在單頁(yè)模式下易桃，
safeArea的高度為：667 - 在正常模式下，
safeArea的高度為：647
如果有依賴safeArea布局的頁(yè)面需要進(jìn)行適配锌俱。
3.“單頁(yè)模式”下晤郑，一些組件或接口存在一定限制
這一點(diǎn)是單頁(yè)模式適配最麻煩的地方，我們先看哪些組件和接口無(wú)法使用
（可跳過(guò)直接看下面總結(jié)）
| 分類 | 功能點(diǎn) |
|---|---|
| 組件 | button open-type 贸宏、 camera 造寝、 editor 、 form 吭练、 functional-page-navigator 诫龙、 live-pusher 、 navigator 鲫咽、 navigation-bar 签赃、 official-account 、 open-data 浑侥、 web-view |
| 路由 | wx.redirectTo 姊舵、 wx.reLaunch 、 wx.navigateTo 寓落、 wx.switchTab 括丁、 wx.navigateBack |
| 界面 | 導(dǎo)航欄 、 Tab Bar |
| 網(wǎng)絡(luò) | mDNS 伶选、 UDP 通信 |
| 界面 | 導(dǎo)航欄 史飞、 Tab Bar |
| 數(shù)據(jù)緩存 | 周期性更新 |
| 媒體 | VoIP 、 wx.chooseMedia 仰税、 wx.chooseImage 构资、 wx.saveImageToPhotosAlbum 、 wx.chooseVideo 陨簇、 wx.saveVideoToPhotosAlbum 吐绵、 wx.getVideoInfo 、 wx.compressVideo |
| 位置 | wx.openLocation 河绽、 wx.chooseLocation 己单、 wx.startLocationUpdateBackground 、 wx.startLocationUpdate |
| 轉(zhuǎn)發(fā) | wx.getShareInfo 耙饰、 wx.showShareMenu 纹笼、 wx.hideShareMenu 、 wx.updateShareMenu |
| 文件 | wx.openDocument |
| 開放接口 | 登錄 苟跪、 小程序跳轉(zhuǎn) 廷痘、 用戶信息 蔓涧、 支付 、 授權(quán) 笋额、 設(shè)置 元暴、 收貨地址 、 卡券 鳞陨、 發(fā)票 昨寞、 生物認(rèn)證 、 微信運(yùn)動(dòng) 厦滤、 微信紅包 |
| 設(shè)備 | 藍(lán)牙 援岩、 iBeacon 、 Wi-Fi 掏导、 NFC 享怀、 聯(lián)系人 、 剪貼板 趟咆、 電話 添瓷、 掃碼 |
| 廣告 | ad 、 wx.createRewardedVideoAd 值纱、 wx.createInterstitialAd |
在單頁(yè)模式下禁用的能力非常多鳞贷，我們可以理解為：單頁(yè)模式下僅允許內(nèi)容展示和UI交互，不允許任何互動(dòng)或操作
其中虐唠，給我們影響最大的有：
- 登錄
在單頁(yè)模式下調(diào)用wx.login將不會(huì)成功搀愧，也就是說(shuō)我們的頁(yè)面需要支持非登錄態(tài)下的展示（即便是靜默登錄也不支持）
對(duì)此，轉(zhuǎn)轉(zhuǎn)小程序在改造時(shí)比較簡(jiǎn)單：
if(this.scene == 1154) { this.$httpWithLogin = this.$http}
即直接在單頁(yè)模式下疆偿，將所有接口請(qǐng)求方法改寫為無(wú)需登錄態(tài)的請(qǐng)求方式咱筛。
對(duì)于此項(xiàng)限制，不同的小程序頁(yè)面需要進(jìn)行針對(duì)性處理杆故。
- 跳轉(zhuǎn)
單頁(yè)模式下迅箩，不支持任何頁(yè)面跳轉(zhuǎn)方法，也就是說(shuō)处铛，用戶無(wú)法離開當(dāng)前頁(yè)饲趋，除非點(diǎn)擊“前往小程序”按鈕，回到正常模式撤蟆。
- 其他
微信提供此項(xiàng)能力的初衷就是希望能在朋友圈展示更多內(nèi)容篙贸，而不希望用戶直接進(jìn)入小程序，但單頁(yè)模式下的限制太多了枫疆，無(wú)法一一進(jìn)行改造，筆者的建議是敷鸦，解決阻礙頁(yè)面正常顯示的問(wèn)題和阻礙核心頁(yè)面流程的問(wèn)題即可息楔，在使用不支持的能力時(shí)寝贡，微信會(huì)進(jìn)行如下處理：
如果用戶有點(diǎn)擊行為，則微信會(huì)統(tǒng)一toast：‘請(qǐng)前往小程序使用完整服務(wù)’
如果沒有點(diǎn)擊行為值依，該方法會(huì)進(jìn)入調(diào)用失敗邏輯：
- 注意：
- 在單頁(yè)模式下圃泡，依然支持不離開頁(yè)面的各種交互，比如tab愿险、幻燈片等
- 在單頁(yè)模式下颇蜡，只有底部“前往小程序”按鈕可以進(jìn)入到正常小程序
- 在單頁(yè)模式下，支持再次被分享到朋友圈辆亏，也支持發(fā)送給朋友（同小程序卡片风秤，打開會(huì)進(jìn)入正常小程序）
- 云開發(fā)資源需開啟未登錄訪問(wèn)方可在單頁(yè)模式下使用：
默認(rèn)情況下云開發(fā)資源不允許未登錄訪問(wèn)，需要在云控制臺(tái) - 設(shè)置 - 全局設(shè)置中手動(dòng)為云環(huán)境開啟允許未登錄訪問(wèn)扮叨。
并且在未登錄模式下缤弦，C 端權(quán)限控制必須使用安全規(guī)則，即云函數(shù)彻磁、數(shù)據(jù)庫(kù)和文件存儲(chǔ)的訪問(wèn)都必須通過(guò)安全規(guī)則碍沐，因此控制臺(tái)設(shè)置時(shí)除了開啟允許未登錄訪問(wèn)云環(huán)境外，還必須在云函數(shù)衷蜓、數(shù)據(jù)庫(kù)和文件存儲(chǔ)分別的權(quán)限設(shè)置中選擇安全規(guī)則并配置累提。未登錄用戶訪問(wèn)時(shí)，安全規(guī)則的 auth 字段為空磁浇，可以此判斷請(qǐng)求來(lái)自未登錄用戶的訪問(wèn)斋陪。
- 不允許橫屏使用
- 若頁(yè)面包含 tabBar，tabBar 不會(huì)渲染扯夭，包括自定義 tabBar
- 本地存儲(chǔ)與小程序普通模式不共用鳍贾，這一點(diǎn)決定了單頁(yè)模式和正常模式，互通的唯一途徑就是1155這個(gè)場(chǎng)景值
低版本兼容
分享到朋友圈按鈕：低版本微信目前無(wú)法出現(xiàn)該按鈕
朋友圈打開小程序：低版本微信打開朋友圈會(huì)進(jìn)入一個(gè)升級(jí)提示頁(yè)交洗，不過(guò)這是一個(gè)基礎(chǔ)庫(kù)逐漸覆蓋的過(guò)程骑科，據(jù)發(fā)稿時(shí)，實(shí)測(cè)發(fā)現(xiàn)iOS微信7.0.14版本即可正常顯示單頁(yè)模式构拳。
常見問(wèn)題
1咆爽、按照文檔設(shè)置了，但并沒有出現(xiàn)分享到朋友圈按鈕
可能的解決方案有：
- 調(diào)用wx.showShareMenu方法開啟菜單
- 更換調(diào)試設(shè)備
2置森、單頁(yè)模式無(wú)法正常打開
首先建議使用真機(jī)調(diào)試對(duì)單頁(yè)模式進(jìn)行調(diào)試
其次檢查是否有關(guān)鍵流程被限制的sdk能力阻斷
最后檢查頁(yè)面報(bào)錯(cuò)
3斗埂、shareImageMessage錯(cuò)誤[>>>WX好像已經(jīng)修復(fù)了只讀屬性 可以正常讀取了]
該錯(cuò)誤的是因?yàn)槲⑿旁趩雾?yè)模式下新增了一個(gè)內(nèi)部方法：wx.shareImageMessage，并且微信禁止了該方法的讀取/枚舉權(quán)限凫海，否則就會(huì)直接報(bào)錯(cuò)呛凶，社區(qū)里面很多開發(fā)者遇到了這個(gè)錯(cuò)誤，轉(zhuǎn)轉(zhuǎn)小程序也遇到了行贪，核心原因都是在于：
頁(yè)面代碼或者第三方框架/插件中含有對(duì)wx拷貝的操作漾稀，類似：
Object.assign({},wx)
我們需要找到此類代碼并進(jìn)行兼容模闲，示例如下：
//先將報(bào)錯(cuò)方法設(shè)置為不可枚舉for (let key in wx) { try { if(wx[key]) {} }catch(e) { Object.defineProperty(wx,key,{ enumerable:false }); }}Object.assign({},wx)
4、緩存問(wèn)題
當(dāng)用戶短時(shí)間內(nèi)第二次進(jìn)入朋友圈分享的小程序單頁(yè)時(shí)崭捍，會(huì)存在一定的緩存（也可以說(shuō)該單頁(yè)實(shí)例還駐留在內(nèi)存里）：
我們定義的一些變量值被緩存下來(lái)了尸折，但依然會(huì)觸發(fā)Page的各個(gè)生命周期。
這會(huì)導(dǎo)致一些問(wèn)題殷蛇，比如我們通過(guò)一個(gè)在Page方法外的普通變量來(lái)記錄頁(yè)面吸頂狀態(tài)：
let isSticky = falsePage({ onShow(){ //第二次進(jìn)入時(shí)实夹，isSticky == true if(!isSticky){ //do sth isSticky = true } }})
以上就是關(guān)于小程序分享到朋友圈這項(xiàng)能力開發(fā)上的經(jīng)驗(yàn)和解讀，期望能夠幫助到各位讀者朋友粒梦。
筆者看法
最后亮航，筆者也想談?wù)剬?duì)這項(xiàng)能力的看法。
微信提供這項(xiàng)能力谍倦，可以解決目前小程序從朋友圈回流效果差的問(wèn)題塞赂，之前小程序想分享到朋友圈，幾乎唯一的方式是生成一個(gè)圖片二維碼并分享出去昼蛀，不過(guò)以筆者經(jīng)驗(yàn)宴猾，這種方式回流效果越來(lái)越差，這極大限制了小程序在朋友圈的傳播能力叼旋，微信想解決這個(gè)問(wèn)題仇哆，但又非常克制夫植，微信不希望用戶從朋友圈直接進(jìn)入小程序讹剔，而是提供的單頁(yè)模式，旨在期望給用戶更多的內(nèi)容展示详民，通過(guò)內(nèi)容吸引用戶進(jìn)入小程序延欠，雖然與我們的期待有一些落差，但這項(xiàng)能力確實(shí)對(duì)小程序在朋友圈的傳播會(huì)有很大的促進(jìn)作用沈跨，相信會(huì)有越來(lái)越多的小程序支持此項(xiàng)能力由捎。
