小程序模板網(wǎng)

微信小程序分享到朋友圈之曲線救國

發(fā)布時間:2018-04-26 12:05 所屬欄目:小程序開發(fā)教程

遇到的問題

經(jīng)過多次重大更新,微信始終沒有開放小程序直接分享到朋友圈的相關(guān)api。

曲線救國

我們直接開門見山,用間接的方式來實現(xiàn)微信小程序分享到朋友圈 
這里先來羅列一下實現(xiàn)思路

  1. 通過微信api申請小程序二維碼
    獲取小程序二維碼接口文檔
  2. 下載二維碼到服務器并返回url
  3. 小程序接收url并從服務器下載圖片 
    wx.downloadFile
  4. 小程序?qū)⑾螺d好的圖片保存至用戶相冊 
    wx.saveImageToPhotosAlbum

實現(xiàn)過程

首先通過閱讀獲取小程序二維碼接口文檔獲取申請小程序二維碼的接口 
這里我使用的是不限次的二維碼接口即B方案 
代碼示例:

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字段只有簡單的描述并沒有給到實際示例,這里其實很容易誤導新人,不知道這個scene具體應該如何使用。

最大32個可見字符,只支持數(shù)字,大小寫英文以及部分特殊字符:!#$&'()*+,/:;=?@-._~,其它字符請自行編碼為合法字符(因不支持%,中文無法使用 urlencode 處理,請使用其他編碼方式)

以上是官方對scene的介紹 
其實這里就是一個單純的字符串,至于參數(shù)如何傳遞我們完全可以自行設計,自己喜歡就好。一定要注意官方有限制使用的特殊字符(!#$&'()*+,/:;=?@-._~) 
這里我使用的是 key:value;key:value形式,當用戶掃碼后通過onLoad(options)來獲取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 
沒有什么原因,就因為該項目的后端是golang搭建的,自己也在練習golang,所以服務端代碼寫的沒有任何水平,還請路過的大神指點一二,這里主要介紹實現(xiàn)思路

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)
  }
})

如此就完成了微信小程序分享到朋友圈的功能,感覺也是有點艱辛啊。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24111.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢