在小程序中,可以直接分享小程序到聊天窗口,但是無法分享小程序到朋友圈,但是朋友圈又是一個重要的推廣場地,所以分享小程序碼就成了重要途徑。常常被朋友圈刷屏的各種帶有小程序碼的海報,就是一個應(yīng)用場景。
普通的分享小程序碼,直接在后臺放一個通用的小程序碼就可以了。但是如果需要分享一個特定路徑+參數(shù)的小程序碼就必須要借助小程序提供的API來實現(xiàn)了。
此次來和大家說一說如何利用云函數(shù)來實現(xiàn)獲取特定路徑+參數(shù)的小程序碼。
云函數(shù)為我們提供了三種獲取小程序碼的API:
前兩個都有數(shù)量限制,無法滿足一些類似詳情分享的場景,所以留給我們的道路只有wxacode.getUnlimited接口了。
先來看一下這個接口的主要參數(shù):
其他參數(shù)就不一一列舉了,有需要可以直接去官方文檔查看。 根據(jù)上面的參數(shù),我們可以指定任意page,而且還可以傳入頁面參數(shù),最終在小程序頁面加載的時候,通過options來獲取到scene,從而做數(shù)據(jù)加載。
先來看一下云函數(shù)如何配置。 新建一個云函數(shù)qrcode后,在config.json中配置如下:
{ "permissions": { "openapi": [ "wxacode.getUnlimited" ] } } 復(fù)制代碼
然后在index.js中加入如下代碼:
// 云函數(shù)入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函數(shù)入口函數(shù) exports.main = async(event, context) => { try { let param = { // 小程序傳入的 scene 參數(shù) scene: event.scene, // 可以換成任意 page page: 'pages/index/index', }; // 調(diào)用接口 var result = await cloud.openapi.wxacode.getUnlimited(param) return result } catch (err) { return err } } 復(fù)制代碼
然后部署到云端,云函數(shù)部分就完成了。
再來看看小程序端如何調(diào)用:
requestQrcode(scene) { let that = this; wx.cloud.callFunction({ name: 'qrcode', data: { scene: scene } }) .then((res) => { let path = wx.env.USER_DATA_PATH + '/' + res.requestID + '.jpg' if (res.result.contentType == 'image/jpeg') { // 返回的結(jié)束是 base64 編碼的二進(jìn)制流 // 這里直接保存到文件 wx.getFileSystemManager() .writeFile({ filePath: path, data: res.result.buffer, encoding: 'base64', success: (res) => { }, fail: (res) => { } }) } else { // 異常處理 } }) }, 復(fù)制代碼
最終在頁面的onLoad(options)中可以這樣獲取到小程序碼傳遞的參數(shù)scene:
onLoad: function(options) { let scene = options.scene; }, 復(fù)制代碼
這樣就完成了利用云函數(shù)來生成特定路徑+參數(shù)的小程序碼了,后面就可以利用這個小程序碼來繪制海報。
不知道你是否注意到scene參數(shù)有一個限制,最大32個可見字符,有時候很容易就超出了,那豈不是就沒法用了?
沒有什么可以難倒程序員!如果有,那一定是需求不合理~
短鏈,一個很好的方案。把所有的參數(shù)生成一個唯一的短鏈,作為scene參數(shù)傳遞,最后在加載的時候先解析短鏈,就可以獲取到超長參數(shù)啦~
如果你不需要給頁面?zhèn)魅雲(yún)?shù),直接在小程序管理平臺最上方,有個工具->生成小程序碼,填上頁面路徑就可以生成小程序碼素材啦~
最后分享一個成品~
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)