小伙伴們大家好，今天衛(wèi)寧輝給大家分析下關(guān)于微信如何轉(zhuǎn)發(fā)朋友圈內(nèi)容,朋友圈直接轉(zhuǎn)發(fā)文字圖片操作的事情，以及微信如何轉(zhuǎn)發(fā)朋友圈這些一系列的相關(guān)干貨內(nèi)容，思路很重要，希望我整理分享的這篇文章對你能有一定的幫助！

最近被產(chǎn)品提了相關(guān)需求，過程中遇到了一些坑。作者帶著踩坑經(jīng)驗，給大家介紹下這個功能，以及其如何實(shí)現(xiàn)。

概述

點(diǎn)擊右上角分享朋友圈

分享到朋友圈樣式

朋友圈打開樣式

這個功能目前只支持Android(在IOS高版本微信支持朋友圈打開小程序能力，但不能分享)。

用戶打開朋友圈分享的小程序，看到不是真正的小程序，而是原本頁面的“單頁模式”。

什么是“單頁模式”？

以下是微信官方對于“單頁模式”的描述：

“單頁模式”下，頁面頂部固定有導(dǎo)航欄，標(biāo)題顯示為當(dāng)前頁面 JSON 配置的標(biāo)題。底部固定有操作欄，點(diǎn)擊操作欄的“前往小程序”可打開小程序的當(dāng)前頁面。頂部導(dǎo)航欄與底部操作欄均不支持自定義樣式。

“單頁模式”默認(rèn)運(yùn)行的是小程序頁面內(nèi)容，但由于頁面固定有頂部導(dǎo)航欄與底部操作欄，很可能會影響小程序頁面的布局。因此，請開發(fā)者特別注意適配“單頁模式”的頁面交互，以實(shí)現(xiàn)流暢完整的交互體驗。

限制

另外，“單頁模式”存在著很多限制。以下是官方給出的禁用能力列表：

限制主要包括以下幾點(diǎn)：

頁面無登錄態(tài)，與登錄相關(guān)的接口，如wx.login均不可用

不允許跳轉(zhuǎn)到其它頁面，包括任何跳小程序頁面、跳其它小程序、跳微信原生頁面

若頁面包含 tabBar，tabBar 不會渲染，包括自定義 tabBar

本地存儲與小程序普通模式不共用

這些限制，讓“單頁模式”只適用于內(nèi)容展示，不適用于有較多交互。

配置

針對“單頁模式”，新增了單頁模式相關(guān)配置。目前這個配置里只有一個navigationBarFit屬性:

navigationBarFit屬性主要是針對原頁面設(shè)置了自定義導(dǎo)航欄的情況。也就是原頁面的json文件中配置了這個屬性:

{ // … “navigationStyle”:”custom” // …}

給大家看一下普通導(dǎo)航欄和自定義導(dǎo)航欄的區(qū)別，下圖是普通導(dǎo)航欄頁面：

下圖是自定義導(dǎo)航欄頁面，我們在原本的導(dǎo)航欄位置使用了banner：

“navigationStyle”:”custom”這個設(shè)置在“單頁模式”下也會生效。前文微信官方對“單頁模式”的描述有說到“頂部導(dǎo)航欄與底部操作欄均不支持自定義樣式”。如果我們在原頁面設(shè)置了自定義導(dǎo)航欄。那么“單頁模式”樣式就會變成這樣：

通過設(shè)置navigationBarFit為 squeezed就可以解決這個問題:

{ // … “singlePage”: { “navigationBarFit”: “squeezed” } // …}

設(shè)置后的樣式：

開發(fā)

接下來介紹如何在小程序中實(shí)現(xiàn)這個功能。

第一步在需要轉(zhuǎn)發(fā)朋友圈的頁面中注冊用戶點(diǎn)擊右上角轉(zhuǎn)發(fā)功能，這是實(shí)現(xiàn)轉(zhuǎn)發(fā)朋友圈功能的必要滿足條件。

onShareAppMessage: function () { return { title: ‘轉(zhuǎn)發(fā)標(biāo)題’, path: ‘/pages/home/index’, imageUrl: ‘自定義圖片路徑’ }}

第二步注冊分享朋友圈功能(從基礎(chǔ)庫 2.11.3 開始支持)：

onShareTimeline: function () { return { title: ‘轉(zhuǎn)發(fā)標(biāo)題’, query: ‘from=pyq’, imageUrl: ‘自定義圖片路徑’ }}

注意，這里有個問題，分享朋友圈功能不支持自定義頁面路徑，意味著只能轉(zhuǎn)發(fā)當(dāng)前頁面。如果當(dāng)前頁面存在較多“單頁模式”限制功能，就可能讓我們的頁面不能按預(yù)期展示。

當(dāng)頁面存在限制功能時，我們存在兩個方案，第一個方案，針對“單頁模式”做改動，不調(diào)用那些限制的功能。第二個方案，另外寫一個針對“單頁模式”的頁面。

這兩種方案都需要能判斷當(dāng)前是否正處在小程序“單頁模式”。

我們通過判斷場景值(場景值用來描述用戶進(jìn)入小程序的路徑)是否等于 1154 來判斷當(dāng)前是否正處在小程序“單頁模式”。場景值可以在 App 的 onLaunch 獲取。

// app.jsApp({ // … onLaunch(options) { const { scene } = options; this.isSinglePage = scene === 1154; } // …})

我們將是否正處在“單頁模式”的Boolean值放入App實(shí)例，方便全局拿到值。

接下來說說兩種方案。

第一種方案，在“單頁模式”不調(diào)用那些限制功能(這是一種不推薦的方案，代碼耦合性太強(qiáng))。舉個例子:

const app = getApp();Page({ // … onLoad() { if (!app.isSinglePage) { wx.login({ // … }) } } // …})

第二種方案，針對“單頁模式”另寫一個頁面。因為分享朋友圈功能并不支持自定義頁面路徑，我們只能另外寫一個組件來作為“單頁模式”的內(nèi)容承載。

將isSinglePage放入頁面的初始數(shù)據(jù)，方便在wxml中拿到：

// pages/home/index.jsconst app = getApp();Page({ data: { isSinglePage: app.isSinglePage, } // …})

home-single-page就是分享到朋友圈的內(nèi)容承載組件：

// pages/home/index.json{ // … “usingComponents”: { “home-single-page”: “components/home-single-page/index” },}

當(dāng)“單頁模式”時，我們展示 home-single-page組件，否則就展示普通頁面內(nèi)容：

// pages/home/index.wxml

樣式上雖然搞定了，但是在原本的生命周期中可能會調(diào)用一些限制功能，或者跑一些其它“單頁模式”用不上的內(nèi)容。我們得停止原本生命周期函數(shù)調(diào)用。

建議對傳入Page的對象進(jìn)行統(tǒng)一處理，當(dāng)“單頁模式”時，不調(diào)用原本的生命周期：

// pages/home/index.jsimport ExtendPage from ‘common/extend-page/index’const app = getApp();ExtendPage({ data: { isSinglePage: app.isSinglePage, } // …})

ExtendPage函數(shù)針對“單頁模式”進(jìn)行統(tǒng)一處理：

// common/extend-page/index.jsconst app = getApp();const PAGE_LIFE = [ ‘onLoad’, ‘onReady’, ‘onShow’, ‘onHide’, ‘onError’, ‘onUnload’, ‘onResize’, ‘onPullDownRefresh’, ‘onReachBottom’, ‘onPageScroll’];export default function(option) { let newOption = {}; if(app.isSinglePage) { newOption = PAGE_LIFE.reduce((res, lifeKey) => { if (option[lifeKey]) { res[lifeKey] = undefined; } return res; }, {}) } return Page({ …option, …newOption, });}

在“單頁模式”下，我們將原本的生命周期都停止了調(diào)用。這樣就能很好的將“單頁模式”下的頁面和普通頁面進(jìn)行解耦。

如果”單頁模式“頁面比較復(fù)雜，需要使用生命周期。我們也可以添加 singlePageLife屬性，當(dāng)處在“單頁模式”下，就調(diào)用 singlePageLife內(nèi)的生命周期:

// pages/home/index.jsimport ExtendPage from ‘common/extend-page/index’const app = getApp();ExtendPage({ data: { isSinglePage: app.isSinglePage, }, singlePageLife: { onLoad() { // … }, } // …})

// common/extend-page/index.jsconst app = getApp();const PAGE_LIFE = [ ‘onLoad’, ‘onReady’, ‘onShow’, ‘onHide’, ‘onError’, ‘onUnload’, ‘onResize’, ‘onPullDownRefresh’, ‘onReachBottom’, ‘onPageScroll’];export default function(option) { let newOption = {}; if(app.isSinglePage) { const { singlePageLife } = option; newOption = PAGE_LIFE.reduce((res, lifeKey) => { if (singlePageLife[lifeKey]) { res[lifeKey] = singlePageLife[lifeKey]; } else if(option[lifeKey]) { res[lifeKey] = undefined; } return res; }, {}) } return Page({ …option, …newOption, });}

文章如有疏漏、錯誤歡迎批評指正。

這篇文章就到這里了，不管如何，只要能幫到你我就非常開心了，看完了，如果你感覺微信如何轉(zhuǎn)發(fā)朋友圈內(nèi)容「必看：朋友圈直接轉(zhuǎn)發(fā)文字圖片操作」挺不錯的話幫忙點(diǎn)個贊吧，瀏覽巢座耶學(xué)習(xí)網(wǎng)更多頁面可以學(xué)到更多知識哈！