遇到的問題經(jīng)過多次重大更新,微信始終沒有開放小程序直接分享到朋友圈的相關(guān)api。 曲線救國
我們直接開門見山,用間接的方式來實現(xiàn)微信小程序分享到朋友圈
實現(xiàn)過程
首先通過閱讀獲取小程序二維碼接口文檔獲取申請小程序二維碼的接口 wx.request({ method: 'POST', url: app.apiUrl + '/miniprogram/qrcode', data: { appid: app.appid, page: 'pages/activityInfo/activityInfo', scene: 'id:' + this.data.activity.id }, header: { 'content-type': 'application/x-www-form-urlencoded', 'X-TOKEN': app.jwt }, success(res) { res = res.data // 這里我是從服務器直接返回保存好的圖片url ... // 后文介紹保存過程 }, fail() { wx.hideLoading() app.$alert('分享失敗', 'wrong', _this) } })
發(fā)送請求前我們需要準備好頁面的page(開頭不能帶有“/”)路徑及scene(頁面參數(shù))
以上是官方對scene的介紹 onLoad (options) { // 因為這里要跟正常url傳參做區(qū)分,所以要先判斷scene是否存在 if (options.scene) { let scene = decodeURIComponent(options.scene) // 官方要求一定要先decodeURIComponent才能正常使用scene scene = scene.split(';') let obj = {} for (let i = 0; i < scene.length; i++) { let item = scene[i].split(':') obj[item[0]] = item[1] } // 將options.id 替換為scene中提取的id 以保證后續(xù)業(yè)務不受影響 options.id = obj.id } } 服務端實現(xiàn)
服務端我用的是golang func GetMiniProgramQrcode(c *gin.Context) { // 獲取應用的appid appid := c.PostForm("appid") // 后端獲取小程序傳來的page及scene page := c.PostForm("page") scene := c.PostForm("scene") // 考慮到反復請求微信接口的耗時及服務器io消耗,我打算把圖片通過MD5(page+scene)的方式命名 h := md5.New() h.Write([]byte(page + scene)) // 需要加密的字符串 cipherStr := h.Sum(nil) result := hex.EncodeToString(cipherStr) exist, _ := model.PathExists("服務器文件存儲路徑" + result + ".jpg") // 檢測圖片是否已經(jīng)存在(即之前是否有人分享過相同頁面) if exist { // 若二維碼文件存在直接返回路徑 c.String(200, "URL訪問路徑"+result+".jpg") } else { // 不存在則直接請求微信獲取二維碼 token, ok := GetAccessToken(appid) // 首先獲取access_token 這里大家根據(jù)自己的業(yè)務方式來獲取 if !ok { c.JSON(200, gin.H{ "code": 4001, "msg": "accesstoken 獲取失敗", }) } else { // 向微信請求小程序二維碼圖片 // 這里需要注意?。?! 官方只介紹了通過該接口以post的形式傳參,但其實參數(shù)是要嚴格的json格式傳遞才能正常獲取 resp, err := http.Post("https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token="+token, "application/x-www-form-urlencoded", strings.NewReader(`{"page":"`+page+`", "scene":"`+scene+`"}`)) if err != nil { fmt.Println(err) } defer resp.Body.Close() body, err := ioutil.ReadAll(resp.Body) if err != nil { // handle error } // 圖片寫入本地 err = ioutil.WriteFile("服務器文件存儲路徑"+result+".jpg", body, 0755) if err != nil { fmt.Println(err) c.JSON(200, gin.H{ "code": 4002, "msg": "文件寫入服務器失敗", }) }else{ // 寫入成功 直接返回url c.String(200, "URL訪問路徑"+result+".jpg") } } } }
通過上述邏輯我們可以正常獲取到圖片url地址 // 接著第一塊代碼片中省略部分 我們已經(jīng)獲取到服務器返回的二維碼圖片url(res) wx.downloadFile({ // 調(diào)用wx.downloadFile接口將圖片下載到小程序本地 url: app.webUrl + res, success(res) { // 下載成功后會生成一個臨時文件路徑 res.tempFilePath(這時res變量已經(jīng)被新的回調(diào)替換了哦,已經(jīng)不是服務器返回來的res了) wx.saveImageToPhotosAlbum({ // 接著調(diào)用wx.saveImageToPhotosAlbum將圖片保存到用戶手機相冊,該接口需要用戶授權(quán)才可以使用,在調(diào)用過程中微信會自動彈框請求授權(quán),如果用戶拒絕則直接調(diào)用fail回調(diào),且一段時間內(nèi)不會重新請求,這里大家可以通過微信權(quán)限設置接口重新引導用戶授權(quán) filePath: res.tempFilePath, success(res) { wx.hideLoading() wx.showModal({ // 保存成功后記得提醒用戶二維碼已經(jīng)存到他的手機相冊了哦 title: '分享二維碼已保存到系統(tǒng)相冊', content: '快去分享給朋友,讓更多的朋友發(fā)現(xiàn)這里的美好', success: function (res) { if (res.confirm) { console.log('用戶點擊確定') } else if (res.cancel) { console.log('用戶點擊取消') } _this.shareCancle() } }) }, fail(res) { wx.hideLoading() app.$alert('分享失敗', 'wrong', _this) } }) }, fail: function (res) { wx.hideLoading() app.$alert('分享失敗', 'wrong', _this) } }) 如此就完成了微信小程序分享到朋友圈的功能,感覺也是有點艱辛啊。 |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務