知識
不管是網(wǎng)站,軟件還是小程序,都要直接或間接能為您產(chǎn)生價值,我們在追求其視覺表現(xiàn)的同時,更側(cè)重于功能的便捷,營銷的便利,運營的高效,讓網(wǎng)站成為營銷工具,讓軟件能切實提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序為后期升級提供便捷的支持!
您當(dāng)前位置>首頁 » 新聞資訊 » 小程序相關(guān) >
微信小程序分享到朋友圈之曲線救國
發(fā)表時間:2021-3-31
發(fā)布人:葵宇科技
瀏覽次數(shù):42
遇到的問題
經(jīng)過多次重大更新,微信始終沒有開放小程序直接分享到朋友圈的相關(guān)api。
曲線救國
我們直接開門見山,用間接的方式來實現(xiàn)微信小程序分享到朋友圈
這里先來羅列一下實現(xiàn)思路
- 通過微信api申請小程序二維碼
獲取小程序二維碼接口文檔 - 下載二維碼到服務(wù)器并返回url
- 小程序接收url并從服務(wù)器下載圖片
wx.downloadFile - 小程序?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 // 這里我是從服務(wù)器直接返回保存好的圖片url
... // 后文介紹保存過程
},
fail() {
wx.hideLoading()
app.$alert('分享失敗', 'wrong', _this)
}
})
發(fā)送請求前我們需要準(zhǔn)備好頁面的page(開頭不能帶有“/”)路徑及scene(頁面參數(shù))
文檔中對scene字段只有簡單的描述并沒有給到實際示例,這里其實很容易誤導(dǎo)新人,不知道這個scene具體應(yīng)該如何使用。
最大32個可見字符,只支持?jǐn)?shù)字,大小寫英文以及部分特殊字符:!#$&'()*+,/:;=?@-._~,其它字符請自行編碼為合法字符(因不支持%,中文無法使用 urlencode 處理,請使用其他編碼方式)
以上是官方對scene的介紹
其實這里就是一個單純的字符串,至于參數(shù)如何傳遞我們完全可以自行設(shè)計,自己喜歡就好。一定要注意官方有限制使用的特殊字符(!#$&'()*+,/:;=?@-._~)
這里我使用的是 key:value;key:value形式,當(dāng)用戶掃碼后通過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è)務(wù)不受影響
options.id = obj.id
}
}
服務(wù)端實現(xiàn)
服務(wù)端我用的是golang
沒有什么原因,就因為該項目的后端是golang搭建的,自己也在練習(xí)golang,所以服務(wù)端代碼寫的沒有任何水平,還請路過的大神指點一二,這里主要介紹實現(xiàn)思路
func GetMiniProgramQrcode(c *gin.Context) {
// 獲取應(yīng)用的appid
appid := c.PostForm("appid")
// 后端獲取小程序傳來的page及scene
page := c.PostForm("page")
scene := c.PostForm("scene")
// 考慮到反復(fù)請求微信接口的耗時及服務(wù)器io消耗,我打算把圖片通過MD5(page+scene)的方式命名
h := md5.New()
h.Write([]byte(page + scene)) // 需要加密的字符串
cipherStr := h.Sum(nil)
result := hex.EncodeToString(cipherStr)
exist, _ := model.PathExists("服務(wù)器文件存儲路徑" + result + ".jpg") // 檢測圖片是否已經(jīng)存在(即之前是否有人分享過相同頁面)
if exist {
// 若二維碼文件存在直接返回路徑
c.String(200, "URL訪問路徑"+result+".jpg")
} else {
// 不存在則直接請求微信獲取二維碼
token, ok := GetAccessToken(appid) // 首先獲取access_token 這里大家根據(jù)自己的業(yè)務(wù)方式來獲取
if !ok {
c.JSON(200, gin.H{
"code": 4001,
"msg": "accesstoken 獲取失敗",
})
} else {
// 向微信請求小程序二維碼圖片
// 這里需要注意?。?! 官方只介紹了通過該接口以post的形式傳參,但其實參數(shù)是要嚴(yán)格的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("服務(wù)器文件存儲路徑"+result+".jpg", body, 0755)
if err != nil {
fmt.Println(err)
c.JSON(200, gin.H{
"code": 4002,
"msg": "文件寫入服務(wù)器失敗",
})
}else{
// 寫入成功 直接返回url
c.String(200, "URL訪問路徑"+result+".jpg")
}
}
}
}
通過上述邏輯我們可以正常獲取到圖片url地址
接下來就是將圖片下載到小程序本地并保存到用戶相冊中
// 接著第一塊代碼片中省略部分 我們已經(jīng)獲取到服務(wù)器返回的二維碼圖片url(res)
wx.downloadFile({ // 調(diào)用wx.downloadFile接口將圖片下載到小程序本地
url: app.webUrl + res,
success(res) { // 下載成功后會生成一個臨時文件路徑 res.tempFilePath(這時res變量已經(jīng)被新的回調(diào)替換了哦,已經(jīng)不是服務(wù)器返回來的res了)
wx.saveImageToPhotosAlbum({ // 接著調(diào)用wx.saveImageToPhotosAlbum將圖片保存到用戶手機(jī)相冊,該接口需要用戶授權(quán)才可以使用,在調(diào)用過程中微信會自動彈框請求授權(quán),如果用戶拒絕則直接調(diào)用fail回調(diào),且一段時間內(nèi)不會重新請求,這里大家可以通過微信權(quán)限設(shè)置接口重新引導(dǎo)用戶授權(quán)
filePath: res.tempFilePath,
success(res) {
wx.hideLoading()
wx.showModal({ // 保存成功后記得提醒用戶二維碼已經(jīng)存到他的手機(jī)相冊了哦
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)
}
})
如此就完成了微信小程序分享到朋友圈的功能,感覺也是有點艱辛啊。
相關(guān)案例查看更多
相關(guān)閱讀
- 汽車拆解管理軟件
- 前端技術(shù)
- 云南建設(shè)廳網(wǎng)站
- 云南網(wǎng)站建設(shè)價格
- 云南網(wǎng)站建設(shè)哪家公司好
- 網(wǎng)站建設(shè)需要多少錢
- 云南企業(yè)網(wǎng)站
- web
- 小程序開發(fā)平臺前十名
- 昆明小程序設(shè)計
- 昆明軟件公司
- 云南小程序開發(fā)公司
- 報廢車回收管理系統(tǒng)
- 支付寶小程序被騙
- 云南小程序開發(fā)制作公司
- 網(wǎng)站建設(shè)高手
- 云南網(wǎng)站建設(shè)服務(wù)
- 搜索引擎排名
- 小程序生成海報
- web服務(wù)
- 商標(biāo)
- 云南網(wǎng)站建設(shè)高手
- 紅河小程序開發(fā)
- 云南網(wǎng)站建設(shè)招商
- 網(wǎng)站建設(shè)哪家強
- 保山小程序開發(fā)
- 報廢車拆解軟件
- 快排推廣
- 云南網(wǎng)站建設(shè)特性
- 小程序分銷商城