千呼萬喚始出來！微信小程序頁面分享到朋友圈的功能，終于在安卓系統灰度測試了！目前只在安卓系統！只在安卓系統！只在安卓系統！iOS系統還沒有辦法體驗。

首先，我們看一下官方文檔的描述，解讀一下小程序分享到朋友圈的實現步驟和條條框框；之后，我們用一個非常簡單的代碼例子來實現小程序分享到朋友圈的功能。

下面開始正題，官方文檔的具體位置在這里：

小程序開發文檔-開發指南-開放能力-分享到朋友圈(Beta)

文檔中有說明：
從基礎庫 2.11.3 開始支持，此功能為beta版，暫僅在Android平臺支持。

官方文檔短短一頁，說明了小程序分享到朋友圈的使用方法，對于我們開發者或者用戶來說急需要了解的是怎么用，呈現的效果是怎樣的。

先不著急上“碼”，我先來歸納整理一下官方文檔，讓大家能有個清楚的認識：

1. 小程序頁面分享到朋友圈的呈現效果

不像大家想象的那樣，小程序分享到朋友圈的內容點擊后可直達小程序。目前呈現的方式是用官方稱作為“單頁模式”的頁面顯示小程序頁面的內容。

分享到朋友圈以后點擊打開的頁面布局

2. 什么是單頁模式？

這個單頁模式可就厲害了，有著一些約束要記好：

1)單頁模式的布局

頁面頂部固定有導航欄，標題顯示為分享時設置的標題。底部固定有操作欄，點擊操作欄的“前往小程序”才可以打開小程序的當前頁面。頂部導航欄與底部操作欄均不支持自定義樣式。

2)單頁模式的限制

• 頁面無登錄狀態(云開發資源需開啟未登錄訪問方可在單頁模式下使用)
• 不允許跳轉到其它頁面
• 不允許橫屏使用
• 若頁面包含 tabBar 或自定義 tabBar，tabBar 不會渲染
• 本地存儲與小程序普通模式不共用
• 如果在單頁里使用了禁用的組件或接口，在點擊調用時，會彈 toast 提示“請前往小程序使用完整服務”。官方有對應的適配解決方案，請接著看。

3) 單頁模式的頁面適配

以下文字內容是官方文檔的原文：

可通過判斷場景值等于 1154 的方法來進行頁面適配。另外，在單頁模式下，可設置頂部導航欄與頁面的相交狀態，具體參考 navigationBarFit 配置。

還需留意的是，在單頁模式下，wx.getSystemInfo 接口返回的 safeArea 為整個屏幕空間。

所以，在分享到朋友圈的小程序頁面里面有交互的環節應該盡量考慮適配方法，免得影響用戶體驗。

3. 什么頁面適用于分享到朋友圈？

像文章詳情頁、產品詳情頁等等這樣的內容頁面是非常適合分享到朋友圈的，官方文檔也提到了：“分享朋友圈能力是為了滿足純內容場景的分享訴求”。

因此，在這個頁面不可誘導或強制用戶點擊“打開小程序”，應在“單頁模式”中盡可能呈現完整的內容。

4. 使用分享到朋友圈能力之前的關注點

• 存在 web-view 組件的頁面不支持發起分享。解讀：想嵌入個html走天下的想法是不被允許的！
• 不支持在小程序頁面內直接發起分享。解讀：通過設置open-type="share"是不可能的！
• 不支持自定義頁面路徑。解讀：分享哪個頁面就是哪個頁面，想改沒門兒！
• 支持打開開發版、體驗版
• 無權限人員進入時頁面會提示無權限
• 低版本微信客戶端打開時，會進入一個升級提示頁面

好了，說了這么多，接下來用一個簡單得不能再簡單的代碼案例說明使用方法。各位看官，上“碼”！

等等……出發前先讀一下分享朋友圈的接口文檔，具體官方文檔位置：

小程序開發文檔-框架-框架接口-頁面-Page-onShareTimeline()

官方又說了，這玩意兒從基礎庫 2.11.3 開始支持，如果低于這個版本請做兼容處理。再次提醒，這是Beta版本，目前只在Andriod平臺支持。該接口監聽右上角菜單“分享到朋友圈”按鈕的行為，并設置自定義分享內容。

onShareTimeline返回一個 Object，用于自定義分享內容，不支持自定義頁面路徑(沒有path這個屬性)，返回如下三個字段：

1.字段：title

說明：自定義標題
默認值：當前小程序名稱

2.字段：query

說明：雖然不支持自定義頁面路徑，但這個頁面需要接收參數小程序是讓你傳進去的，這就可以統計到這個分享入口的量了
默認值：當前頁面路徑攜帶的參數

3.字段：imageUrl

說明：自定義圖片路徑，可以是本地文件或者網絡圖片。支持 PNG 及 JPG，顯示圖片長寬比是 1:1
默認值：默認使用小程序 Logo

接下來，我們啟動微信開發者工具，新建一個小程序項目，在index.js里增加如下代碼即可：

onShareAppMessage: function (res) { if (res.from === 'button') { // 來自頁面內轉發按鈕 console.log(res.target) } return { title: '自定義轉發標題', path: '/page/index/index' }},onShareTimeline: function() { return { title: '自定義朋友圈分享', query: '', imageUrl: '圖片的鏈接地址' }}

有人問，只放置 onShareTimeline，不要 onShareAppMessage 行不行？ 這個真不行，會導致右上角菜單中“發送給朋友”和“分享到朋友圈”都是灰色不可點擊。

代碼已到位，編譯運行，看看效果吧～

這是沒有加onShareTimeline時的右上角菜單

這是加上onShareTimeline監聽后的效果，分享到朋友圈亮起來啦！

onShareTimeline設置的標題和圖片起作用了！

分享出去了！測試嘛為了不驚動朋友圈，設置為私密啦呵呵

這是點擊分享內容的單頁，這就是神秘單頁模式！沒有登錄信息哦，被禁用了。

你不信？！點一下“獲取頭像昵稱”按鈕試試，完全被禁用。

通過上面這組截圖，大概的把小程序分享朋友圈功能演示了一下，更多的應用還需要結合產品的自身業務邏輯來合理使用。盡早做準備吧，各大廠商和平臺已經紛紛宣布接入了小程序分享朋友圈的能力，下一個是不是你的應用呢！？

感謝您的耐心閱讀，歡迎技術愛好者交流探討。

總結

以上是生活随笔為你收集整理的plsql developer无监听程序_微信小程序支持分享到朋友圈啦！技术解读跟我来的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。