截止我寫這篇文章的時候，小程序是還沒有能夠直接分享到朋友圈的api,轉發給(gei)朋友(you)和群(qun)是可以實現的(de)，這篇(pian)文(wen)章主要是講如何(he)實現分(fen)享到朋友(you)圈(quan)。

實現思路

那么既然小程(cheng)序沒(mei)有分享到朋友圈的api,我們怎么實現分享到朋友圈呢，下(xia)面我介紹一下(xia)實現思(si)路。

既然沒有捷徑(jing)，那就(jiu)走復雜一點(dian)的(de)(de)路線，那就(jiu)是需要用(yong)戶手(shou)動(dong)分(fen)享到(dao)(dao)(dao)朋友(you)圈(quan)，問題又來了，用(yong)戶手(shou)動(dong)分(fen)享的(de)(de)話，分(fen)享什么(me)呢(ni)？我們其(qi)實在朋友(you)圈(quan)應該已經看到(dao)(dao)(dao)不少帶有小程(cheng)序碼的(de)(de)圖片，特(te)別是年(nian)前與年(nian)后(hou)，應該看到(dao)(dao)(dao)不少智行火(huo)車(che)票，攜(xie)程(cheng)火(huo)車(che)票分(fen)享到(dao)(dao)(dao)朋友(you)圈(quan)的(de)(de)圖片，幫(bang)助好友(you)加速，用(yong)來搶火(huo)車(che)票，還有像(xiang)今日(ri)頭條，分(fen)享新聞到(dao)(dao)(dao)朋友(you)圈(quan)的(de)(de)方式。

他們共同的(de)(de)(de)策略是生(sheng)成(cheng)一張帶(dai)有小程(cheng)(cheng)序(xu)碼(ma)的(de)(de)(de)圖(tu)片(pian)，小程(cheng)(cheng)序(xu)碼(ma)包(bao)含了分(fen)享者的(de)(de)(de)用戶信息，我們把(ba)圖(tu)片(pian)生(sheng)成(cheng)以后(hou)，用戶自行保存圖(tu)片(pian)到本(ben)地，然(ran)后(hou)分(fen)享到朋友圈(quan)，朋友圈(quan)好友長(chang)按圖(tu)片(pian)識別(bie)圖(tu)中二維碼(ma)，進(jin)入(ru)小程(cheng)(cheng)序(xu)后(hou)解析小程(cheng)(cheng)序(xu)碼(ma)攜(xie)帶(dai)的(de)(de)(de)信息，生(sheng)成(cheng)相應的(de)(de)(de)頁面。這(zhe)樣(yang)就實現了分(fen)享到朋友圈(quan)這(zhe)樣(yang)一個流(liu)程(cheng)(cheng)。

在這個流(liu)程(cheng)中有兩個難點。

第一個 難(nan)點是(shi)怎么生成(cheng)帶有(you)小程序(xu)碼(ma)的(de)圖(tu)(tu)片(pian)，因為(wei)生成(cheng)的(de)圖(tu)(tu)片(pian)通常都(dou)不是(shi)孤零(ling)零(ling)的(de)只(zhi)有(you)小程序(xu)碼(ma)，而且注意(yi)我們是(shi)要“生成(cheng)一(yi)張圖(tu)(tu)片(pian)保存到(dao)本(ben)地“。

第二個 難點是生成圖片了(le)，分享(xiang)到朋友圈了(le)，好友通過我們(men)分享(xiang)的小程(cheng)序碼(ma)進入小程(cheng)序了(le)，那么我們(men)怎么提(ti)取小程(cheng)序碼(ma)攜帶的用戶(hu)信息，獲取其中攜帶的參數？

生成圖片

目前我所知道的有兩(liang)種方(fang)式生(sheng)(sheng)成小(xiao)程(cheng)序(xu)分享圖(tu)片，第一種是(shi)前端生(sheng)(sheng)成，第二種是(shi)后(hou)端生(sheng)(sheng)成。

前(qian)端生成(cheng)圖片的(de)話(hua)，就不可(ke)避免的(de)需要借助(zhu)canvas實現(xian)。微信小(xiao)程序有(you)自己的(de)一套canvas的(de)api,雖(sui)然(ran)名義(yi)上是(shi)他(ta)自己的(de)繪(hui)圖功能，但是(shi)用法(fa)上與canvas并沒有(you)太大區別，所以如果之(zhi)前(qian)使用過canvas繪(hui)圖的(de)話(hua)，使用起來(lai)應該不難。

讀取小程序碼攜帶參數信息

//mp.weixin.qq.com/debug/wxadoc/dev/api/qrcode.html

上面的(de)路(lu)徑是小程序關于(yu)小程序碼(ma)(ma)的(de)官方文檔(dang)說明(ming)，具體配置(zhi)生成小程序二維(wei)碼(ma)(ma)需要(yao)后端配合(he)。

我下面主要講怎么讀取小程序碼(ma)攜帶(dai)的信息。

在小程序生命周期(qi)onload函數中可以(yi)攜帶option參數，option.scene就是(shi)小程序碼中攜帶的(de)(de)(de)信(xin)息，簡單信(xin)息可以(yi)直接放到scene中，如(ru)果是(shi)復(fu)雜信(xin)息，可以(yi)把獲(huo)取(qu)到的(de)(de)(de)scene作為參數，通(tong)過ajax請求獲(huo)取(qu)到你需要的(de)(de)(de)信(xin)息。下(xia)面是(shi)部分代碼，實(shi)現思路是(shi)這樣(yang)的(de)(de)(de)。

if (options.scene) {
            //小程序碼掃碼進入
            console.log('小程序碼掃碼進入')
            that.setData({
                scene: decodeURIComponent(options.scene),
                entryType: 'scan'
            })
            wx.request({
                url: app.globalData.subDomain + '/GetSceneCode',
                data: {
                    scene: decodeURIComponent(options.scene)
                },
                method: 'POST',
                success: function (res) {}

小結

上(shang)面講了小(xiao)程(cheng)序分享(xiang)到(dao)朋友(you)圈的(de)(de)(de)主題流(liu)程(cheng)和一些可能會遇到(dao)的(de)(de)(de)難點問(wen)題，這篇文章(zhang)主要(yao)是提供了一個思路，代(dai)碼可以作為(wei)參考，畢竟每個人(ren)的(de)(de)(de)項目需(xu)求總是有差別的(de)(de)(de)，我上(shang)面所(suo)寫的(de)(de)(de)內容是我實現(xian)這個功能的(de)(de)(de)流(liu)程(cheng)和方式，我不知道還有沒有更(geng)好(hao)的(de)(de)(de)方式，如果有更(geng)好(hao)的(de)(de)(de)實現(xian)方式，歡迎評(ping)論留下(xia)您的(de)(de)(de)建(jian)議，或(huo)者分享(xiang)一些更(geng)好(hao)的(de)(de)(de)鏈接(jie)也是可以的(de)(de)(de)，謝(xie)謝(xie)。