呼萬喚始出來！微信小程序頁面分享到朋友圈的功能，終于在安卓系統灰度測試了！目前只在安卓系統！只在安卓系統！只在安卓系統！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 行不行？ 這個真不行，會導致右上角菜單中“發送給朋友”和“分享到朋友圈”都是灰色不可點擊。

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

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

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

SVG（Scalable Vector Graphics）是一種基于XML的2D矢量圖形格式，可以實現圖像的無損縮放和高清晰度顯示。在HTML中嵌入SVG圖像，可以使網頁更加生動有趣，提高用戶體驗

<svg width="54" height="54" class="c-nav--footer__svgicon c-slackhash" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M19.712.133a5.381 5.381 0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376 5.386h5.376V5.52A5.381 5.381 0 0 0 19.712.133m0 14.365H5.376A5.381 5.381 0 0 0 0 19.884a5.381 5.381 0 0 0 5.376 5.387h14.336a5.381 5.381 0 0 0 5.376-5.387 5.381 5.381 0 0 0-5.376-5.386" fill="#44BEDF">
</path>
<path d="M53.76 19.884a5.381 5.381 0 0 0-5.376-5.386 5.381 5.381 0 0 0-5.376 5.386v5.387h5.376a5.381 5.381 0 0 0 5.376-5.387m-14.336 0V5.52A5.381 5.381 0 0 0 34.048.133a5.381 5.381 0 0 0-5.376 5.387v14.364a5.381 5.381 0 0 0 5.376 5.387 5.381 5.381 0 0 0 5.376-5.387" fill="#2EB67D">
</path>
<path d="M34.048 54a5.381 5.381 0 0 0 5.376-5.387 5.381 5.381 0 0 0-5.376-5.386h-5.376v5.386A5.381 5.381 0 0 0 34.048 54m0-14.365h14.336a5.381 5.381 0 0 0 5.376-5.386 5.381 5.381 0 0 0-5.376-5.387H34.048a5.381 5.381 0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376 5.386" fill="#ECB22E">
</path>
<path d="M0 34.249a5.381 5.381 0 0 0 5.376 5.386 5.381 5.381 0 0 0 5.376-5.386v-5.387H5.376A5.381 5.381 0 0 0 0 34.25m14.336-.001v14.364A5.381 5.381 0 0 0 19.712 54a5.381 5.381 0 0 0 5.376-5.387V34.25a5.381 5.381 0 0 0-5.376-5.387 5.381 5.381 0 0 0-5.376 5.387" fill="#E01E5A">
</path>
</g>
</svg>

現在很多朋友想學習前端，知道前端行業越來越有優勢，但還不是特別了解html具體是做些什么的，以下我就對html進行了一個簡單的介紹。

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML） 是一種用于創建網頁的標準標記語言。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用于設計令人賞心悅目的網頁、網頁應用程序以及移動應用程序的用戶界面。網頁瀏覽器可以讀取HTML文件，并將其渲染成可視化網頁。HTML描述了一個網站的結構語義隨著線索的呈現，使之成為一種標記語言而非編程語言。

HTML元素是構建網站的基石。HTML允許嵌入圖像與對象，并且可以用于創建交互式表單，它被用來結構化信息——例如標題、段落和列表等等，也可用來在一定程度上描述文檔的外觀和語義。HTML的語言形式為尖括號包圍的HTML元素（如 <html>），瀏覽器使用HTML標簽和腳本來詮釋網頁內容，但不會將它們顯示在頁面上。

HTML可以嵌入如JavaScript的腳本語言，它們會影響HTML網頁的行為。網頁瀏覽器也可以引用層疊樣式表（CSS）來定義文本和其它元素的外觀與布局。

HTML命令可以說明文字，圖像、動畫、聲音、表格、鏈接等。

HTML標簽

HTML標記標簽通常稱為和HTML標簽。

1.標簽是由尖括號（< >）包圍的關鍵詞，通常是成對出現的。

2.標簽對中第一個是開始標簽，第二個標簽為結束標簽。

HTML實例

------------------------分割線-----------------------------

上面的代碼文件后綴保存為.html或.htm之后，打開如下圖所示：

解析：

1.<!DOCTYPE html> 聲明為 HTML5 文檔

2.<html> 元素是 HTML 頁面的根元素

3.<head> 元素包含了文檔的元（meta）數據， <meta charset="utf-8"> 定義網頁編碼格式為 utf-8。

4.<title> 元素描述了文檔的標題

5.<body> 元素包含了可見的頁面內容

6.<h1> 元素定義一個大標題

7.<p> 元素定義一個段落

在html的學習上，分為自學和培訓學習，學習是要因人而異，但很多人自學的能力比較差，自學又浪費時間和經歷，選擇培訓是一個比較好的方法。愛創課堂前端培訓是一個非常負責的培訓機構，老師師資力量雄厚，教學理念創新，實戰課程多對以后參加工作幫助很大，開設小班教學，老師能照顧每位學員，并且簽就業協議保障就業問題，愛創開設免費試聽一周，提前感受老師講課及課程內容。

Html學習并不難，門檻也是相對較低的，所以很多人學技術都學前端，現在市場需要的前端人才越來越多，但怎么脫穎而出，成為企業比較擁戴的人才。其實，學好前端，擁有過人的技術是關鍵，這一點在愛創課堂都可以實現，只要你肯學，就能學會，學成前端在企業中會帶給你足夠的成就感。