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