近日小程序支持分享到朋友圈的消息可以說(shuō)是小程序開(kāi)發(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、朋友圈打開(kāi)小程序的能力

分享到朋友圈的樣式

朋友圈里面打開(kāi)的樣式

開(kāi)發(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)能力，但高版本微信支持朋友圈打開(kāi)小程序能力（下文述）

小程序頁(yè)面默認(rèn)不開(kāi)啟分享到朋友圈按鈕，除非代碼中主動(dòng)設(shè)置：

1.頁(yè)面需設(shè)置允許“發(fā)送給朋友”，代碼示例：

onShareAppMessage() {
    return {
      title: '買(mǎi)賣(mài)二手，省錢(qián)又賺錢(qián)！轉(zhuǎn)轉(zhuǎn)，一個(gè)幫你賺錢(qián)的網(wǎng)站！',
      path: '/pages/index/index',
      imageUrl:'https://pic5.zhuanstatic.com/zhuanzh/n_v2be00a9c4aa4941bf8567f5fd999e2709.png',
    }
}
復(fù)制代碼

2.頁(yè)面需設(shè)置允許“分享到朋友圈”，代碼示例：

onShareTimeline() {
  return {
    title: '[小程序] 買(mǎi)賣(mài)二手，省錢(qián)又賺錢(qián)！轉(zhuǎn)轉(zhuǎn)，一個(gè)幫你賺錢(qián)的網(wǎng)站！',
    query: 'zzfrom=pyq'
  }
}
復(fù)制代碼

3.開(kāi)啟分享菜單中的“分享到朋友圈”按鈕：

wx.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
})
復(fù)制代碼

這項(xiàng)要求微信在文檔中并沒(méi)有提到，但實(shí)測(cè)發(fā)現(xiàn)必須調(diào)用此方法才能出現(xiàn)分享到朋友圈按鈕

其中： 1.最新版微信開(kāi)發(fā)者工具支持此項(xiàng)能力的模擬調(diào)試 2.存在 web-view 組件的頁(yè)面不支持發(fā)起分享。 3.onShareTimeline是自基礎(chǔ)庫(kù)2.11.3開(kāi)始新增的頁(yè)面生命周期，行為與onShareAppMessage類(lèi)似。 4.該生命周期需返回Object，用于自定義分享內(nèi)容，其中：

• title：分享標(biāo)é¡Œ，默認(rèn)去小程序名稱(chÄ“ng)
• query：分享出去的頁(yè)面上攜帶的參數(shù)，用于標(biāo)示渠道來(lái)源等
• imageUrl：分享圖片，默認(rèn)使用小程序logo

5.特別強(qiáng)調(diào)： åˆ†äº«åˆ°æœ‹å‹åœˆä¸æ”¯æŒpath參數(shù) ，也就是說(shuō)用戶在哪個(gè)頁(yè)面發(fā)起分享，分享出去的就是哪個(gè)頁(yè)面。

以上最后就要求開(kāi)發(fā)者對(duì)分享頁(yè)面進(jìn)行一些適配，因?yàn)槲覀兎窒淼脚笥讶Φ捻?yè)面，用戶打開(kāi)時(shí)會(huì)進(jìn)入一個(gè)“單頁(yè)模式”，在此模式下，很多sdk無(wú)法使用。

2、朋友圈打開(kāi)小程序的能力

用戶在朋友圈打開(kāi)分享的小程序頁(yè)面，并不會(huì)真正打開(kāi)小程序，而是進(jìn)入一個(gè)原本頁(yè)面的“單頁(yè)模式”的頁(yè)面，上文提到，用戶分享的原始頁(yè)面和朋友圈打開(kāi)的“單頁(yè)模式”頁(yè)面，其實(shí)對(duì)開(kāi)發(fā)者來(lái)講是同一個(gè)頁(yè)面，為了區(qū)分，微信給出了兩個(gè)新的場(chǎng)景值：

1154：朋友圈打開(kāi)小程序，也就是正處在“單頁(yè)模式”，開(kāi)發(fā)者可以根據(jù)這個(gè)場(chǎng)景值進(jìn)行適配，理論上除此場(chǎng)景值外，都是正常模式。

1155：從“單頁(yè)模式”進(jìn)入正常模式，由于此項(xiàng)行為是微信統(tǒng)一行為，開(kāi)發(fā)者無(wú)法進(jìn)行標(biāo)記，如果想對(duì)此項(xiàng)行為進(jìn)行統(tǒng)計(jì)，可以使用該場(chǎng)景值。

“單頁(yè)模式”需要適配什么呢？

微信官方對(duì)“單頁(yè)模式”有以下解釋?zhuān)?/p>

1.“單頁(yè)模式”下，頁(yè)面頂部固定有導(dǎo)航欄，標(biāo)題顯示為分享時(shí)的標(biāo)題。底部固定有操作欄，點(diǎn)擊操作欄的“前往小程序”可打開(kāi)小程序的當(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)開(kāi)發(fā)者特別注意適配“單頁(yè)模式”的頁(yè)面交互，以實(shí)現(xiàn)流暢完整的交互體驗(yàn)。

在app.json中新增了對(duì)單頁(yè)模式的配置項(xiàng)：

"singlePage" : {
  "navigationBarFit" : "" //float或squeezed
}
復(fù)制代碼

該項(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è)模式適配最麻煩的一點(diǎn)，我們先看哪些組件和接口無(wú)法使用

（可跳過(guò)直接看下面總結(jié)）

在單頁(yè)模式下禁用的能力非常多，我們可以理解為： å–®é (yè)模式下僅允許內(nèi)容展示，不允許任何互動(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
}
復(fù)制代碼

即直接在單頁(yè)模式下，將所有接口請(qǐng)求方法改寫(xiě)為無(wú)需登錄態(tài)的請(qǐng)求方式。

對(duì)于此項(xiàng)限制，不同的小程序頁(yè)面需要進(jìn)行針對(duì)性處理。

• 跳轉(zhuÇŽn)

單頁(yè)模式下，不支持任何頁(yè)面跳轉(zhuǎn)方法，也就是說(shuō)，用戶無(wú)法離開(kāi)當(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)行如下處理：

1. 如果用戶有點(diǎn)擊行為，則微信會(huì)統(tǒng)一toast：‘請(qǐng)前往小程序使用完整服務(wù)’

2. 如果沒(méi)有點(diǎn)擊行為，該方法會(huì)進(jìn)入調(diào)用失敗邏輯：

• 注意：

1. 在單頁(yè)模式下，依然支持不離開(kāi)頁(yè)面的各種交互，比如tab、幻燈片等
2. 在單頁(yè)模式下，只有底部“前往小程序”按鈕可以進(jìn)入到正常小程序
3. 在單頁(yè)模式下，支持再次被分享到朋友圈，也支持發(fā)送給朋友（通小程序卡片，打開(kāi)會(huì)進(jìn)入正常小程序）
4. 云開(kāi)發(fā)資源需開(kāi)啟未登錄訪問(wèn)方可在單頁(yè)模式下使用：

默認(rèn)情況下云開(kāi)發(fā)資源不允許未登錄訪問(wèn)，需要在云控制臺(tái) - 設(shè)置 - 全局設(shè)置中手動(dòng)為云環(huán)境開(kāi)啟允許未登錄訪問(wèn)。

并且在未登錄模式下，C 端權(quán)限控制必須使用安全規(guī)則，即云函數(shù)、數(shù)據(jù)庫(kù)和文件存儲(chǔ)的訪問(wèn)都必須通過(guò)安全規(guī)則，因此控制臺(tái)設(shè)置時(shí)除了開(kāi)啟允許未登錄訪問(wèn)云環(huán)境外，還必須在云函數(shù)、數(shù)據(jù)庫(kù)和文件存儲(chǔ)分別的權(quán)限設(shè)置中選擇安全規(guī)則并配置。未登錄用戶訪問(wèn)時(shí)，安全規(guī)則的 auth 字段為空，可以此判斷請(qǐng)求來(lái)自未登錄用戶的訪問(wèn)。

5. 不允許橫屏使用
6. 若頁(yè)面包含 tabBar，tabBar 不會(huì)渲染，包括自定義 tabBar
7. 本地存儲(chǔ)與小程序普通模式不共用，這一點(diǎn)決定了單頁(yè)模式和正常模式，互通的唯一途徑就是1155這個(gè)場(chǎng)景值

低版本兼容

分享到朋友圈按鈕： 低版本微信目前無(wú)法出現(xiàn)該按鈕

朋友圈打開(kāi)小程序： 微信文檔中說(shuō)會(huì)，低版本微信打開(kāi)朋友圈會(huì)進(jìn)入一個(gè)升級(jí)提示頁(yè)，不過(guò)這是一個(gè)基礎(chǔ)庫(kù)逐漸覆蓋的過(guò)程，據(jù)發(fā)稿時(shí)，實(shí)測(cè)發(fā)現(xiàn)iOS微信7.0.14版本即可正常顯示單頁(yè)模式。

常見(jiàn)問(wèn)題

1、按照文檔設(shè)置了，但并沒(méi)有出現(xiàn)分享到朋友圈按鈕

可能的解決方案有：

• 調(diào)用wx.showShareMenu方法開(kāi)啟菜單
• 更換調(diào)試設(shè)å‚™

2、單頁(yè)模式無(wú)法正常打開(kāi)

首先建議使用真機(jī)調(diào)試對(duì)單頁(yè)模式進(jìn)行調(diào)試

其次檢查是否有關(guān)鍵流程被限制的sdk能力阻斷

最后檢查頁(yè)面報(bào)錯(cuò)

3、shareImageMessage錯(cuò)誤

該錯(cuò)誤的是因?yàn)槲⑿旁趩雾?yè)模式下新增了一個(gè)內(nèi)部方法：wx.shareImageMessage，并且微信禁止了該方法的讀取/枚舉權(quán)限，否則就會(huì)直接報(bào)錯(cuò)，社區(qū)里面很多開(kāi)發(fā)者遇到了這個(gè)錯(cuò)誤，轉(zhuǎn)轉(zhuǎn)小程序也遇到了，核心原因都是在于：

頁(yè)面代碼或者第三方框架/插件中含有對(duì)wx拷貝的操作，類(lèi)似：

Object.assign({},wx)
復(fù)制代碼

我們需要找到此類(lèi)代碼并進(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)
復(fù)制代碼

以上就是關(guān)于小程序分享到朋友圈這項(xiàng)能力開(kāi)發(fā)上的經(jīng)驗(yàn)和解讀，期望能夠幫助到各位讀者朋友。

筆者看法

最后，筆者也想談?wù)剬?duì)這項(xiàng)能力的看法。

微信提供這項(xiàng)能力，可以解決目前小程序從朋友圈回流效果差的問(wèn)題，之前小程序想分享到朋友圈，幾乎唯一的方式是生成一個(gè)圖片二維碼并分享出去，不過(guò)以筆者經(jīng)驗(yàn)，這種方式回流效果越來(lái)越差，這極大限制了小程序在朋友圈的傳播能力，微信想解決這個(gè)問(wèn)題，但又非?？酥疲⑿挪幌Ｍ脩魪呐笥讶χ苯舆M(jìn)入小程序，而是提供的單頁(yè)模式，旨在期望給用戶更多的內(nèi)容展示，通過(guò)內(nèi)容吸引用戶進(jìn)入小程序，雖然與我們的期待有一些落差，但這項(xiàng)能力確實(shí)對(duì)小程序在朋友圈的傳播會(huì)有很大的促進(jìn)作用，相信會(huì)有越來(lái)越多的小程序支持此項(xiàng)能力。