云开发小程序码是一种新型的小程序二维码,它可以帮助用户快速打开小程序,而不需要在搜索框中输入小程序名字。它是一个特殊的二维码,可以将用户直接带到小程序的首页,而不需要用户输入任何信息。
使用云开发小程序码有很多优势:
1. 快速打开小程序:使用云开发小程序码,用户无需在搜索框中输入小程序名字即可快速打开小程序。 2. 更好的体验:使用云开发小程序后,由于不需要输入任何信息,因此能够为用户带来更好的体验。 3. 更安全的方式:使用云开发小程序后,因为不需要输入任何信息,因此也能够为用户带来更安全的方式。
如何使用云开发小程序呢? 首先要注册一个微信公众平台账号和一个微信小 登录这个平台之后, 就能够看到” 产品-〉 将服务-〉 云开发” 这样一个标识, 点击进去之后, 就能够看到” 产品-〉 将服务-〉 云开发-〉 代 码” 这样一个标识, 点击进去之后, 就能够看到” 代 码-〉 创建新代 码” 这样一个标识, 点击进去之后, 就能够看到” 代 码-〉 新增代 码” 这样一个标识, 点击进去之后, 就能够看到” 新增代 码-〉 配 置代 码” 这样一个标识, 配 置它之后, 即可生成对应的代 码。
此时生成的代 码即是对应的云开发小程序代 码。然后将这个代 码扫放在想要传递的场所即可。当有人扫放这个代 码时便会直接跳转到对应的微信就行中去。
通过服务端云函数可以获取一个小程序任意页面的小程序码,扫描该小程序码就可以直接进入小程序对应的页面,所有生成的小程序码永久有效,可长期使用。小程序码具有更好的辨识度,且拥有展示“公众号关注组件”等高级能力。当用户扫小程序码打开小程序时,开发者可在小程序内配置公众号关注组件official-account
,用户可以快捷关注公众号。
wxacode.get 和 wxacode.createQRCode 总共生成的码数量限制为10万个,也就是究极你的小程序的一生,只能通过这两种方式生成10万个小程序码和小程序二维码,不过如果参数相同,是不算次数的,所以10万个还是挺多的。
wxacode.get和wxacode.getUnlimited的区别
如果你的小程序页面参数是动态更新的,建议使用wxacode.getUnlimited,如果你的小程序页面包含了非常多的运营类的参数,32个字符不够用,或者动态页面较少,那可以使用wxacode.get,通常用wxacode.getUnlimited比较稳妥。
wxacode.getUnlimited可能32个字符不够用,比如想追踪分享小程序码的用户的openid,比如希望记录更多运营数据,不过即使不够用,也是有替代方法的,就是在数据库里添加一个字段ID,将你要记录的这些参数与这个简短而独一无二的ID对应,这个会浪费一点数据库的性能,不过也在可以接受范围之类。
除此之外,在云调用时传递的参数上,wxacode.get是必须填写path的(path为小程序的页面路径,即包含page和scene),而wxacode.getUnlimited的page和scene是分开的,可以只填scene,不必填写page。
首先我们使用开发者工具,新建一个云函数比如wxacode,然后在config.json里添加如下权限配置(前面已经反复强调权限配置文件json的格式),也就是我们在处理云调用时,一定要先添加权限,而且权限文件的格式不能出错。
{
"permissions": {
"openapi": [
"wxacode.get",
"wxacode.getUnlimited"
]
}
}
然后在index.js里添加如下代码,我们先以wxacode.getUnlimited这个接口为例获取小程序码,然后再把小程序码上传到云存储里,
const cloud = require("wx-server-sdk")
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
exports.main = async (event, context) => {
const wxacodeResult = await cloud.openapi.wxacode.getUnlimited({
scene: "uid=1jigsdff",
//只支持数字,大小写英文以及部分特殊字符:!#$&"()*+,/:;=?@-._~,不能有空格之类的其他字符
page: "page/index/index",
//注意这个必须是已经发布的小程序存在的页面(否则报错),根路径前不要填加 /,不能携带参数(参数请放在scene字段里),如果不填写这个字段,默认跳主页面;但是你要填写就不要写错路径
})
const uploadResult = await cloud.uploadFile({
cloudPath: `wxacode.jpg`,
fileContent: wxacodeResult.buffer,
})
return uploadResult.fileID
}
而如果是使用wxacode.get这个接口,它传递的参数会有所不同,
const result = await cloud.openapi.wxacode.get({
path: "page/index/index?uid=1jigsdff",
})
调用这个云函数,就能在云存储里看到生成的wxacode.jpg小程序码了。我们可以把集合的某个字段的id,或者页面id等参数写进小程序码里。
通过追踪带有参数的小程序码,我们就能知道用户到底是通过我们生成的哪个小程序码进入到小程序的,这个功能应用的场景有很多,尤其是运营上特别有用,比如追踪用户的分享来增加积分或返利,追踪各个渠道的运营效果等等,要完成这样的步骤,除了生成带参数的小程序外,还需小程序能识别该小程序码。
场景值用来描述用户进入小程序的路径,比如公众号文章的自定义菜单、模板消息、文章等,二维码的扫描、长按、通过识别手机相册的二维码等,微信群聊或单聊等,微信首页顶部搜索框等,也就是用户到底是通过什么方式进入到我们的小程序的,会有一个对应的场景值,扫描小程序码的是1047,长按图片识别小程序码为1048,扫描手机相册中选取的小程序码为1049。
我们可以在 App生命周期的 onLaunch 和 onShow,或wx.getLaunchOptionsSync
(注意,这个接口是一个对象,不是一个函数) 中获取上述场景值,在下面的options对象里就会包含scene
onLaunch (options) {
console.log("onLaunch方法",options)
},
onShow (options) {
console.log("onShow方法",options)
},
在options对象里就包含着scene这个属性,属性的值即为场景值:
path: "" //页面路径
query: {} //页面的参数
referrerInfo: {} //来源小程序、公众号或 App 的 appId
scene: 1047 //场景值
shareTicket: //带 shareTicket 的转发可以获取到更多的转发信息,例如群聊的名称以及群的标识 openGId
值得注意的是,使用cloud.openapi.wxacode.get和cloud.openapi.wxacode.getUnlimited生成的小程序码所带的参数在调试时需要使用开发工具的条件编译自定义参数 scene=xxxx 进行模拟,开发工具模拟时的 scene 的参数值需要进行 encodeURIComponent。
首先我们需要encodeURIComponent()方法将我们要传递的参数进行编码,比如我们要传递“a=3&b=4&c=5”这样的参数,我们可以直接在控制台里进行编码:
encodeURIComponent("a=3&b=4&c=5")
编码之后的结果为"a%3D3%26b%3D4%26c%3D5",调试时可以添加编译模式,在启动参数里填入
scene=a%3D3%26b%3D4%26c%3D5
小程序码不只是一个技术问题,更多的是涉及到运营,让运营的效果可以量化追踪,是增长黑客、数据运营的关键,场景值可以让我们了解小程序的增长来源;而将一些参数写进小程序码,可以让我们根据参数的不同来采取不同的运营策略,比如广告点击、返利、分销、拼团、分享追踪等等。作为开发人员,可以多和运营交流,让小程序的增长更有效果。
uni,读you ni,是统一的意思。很多人以为小程序是微信先推出的,其实,DCloud才是这个行业的开创者。 W3C和HTML5中国产业联盟,...
uni-appApp 端内置HTML5+引擎,让 js 可以直接调用丰富的原生能力。条件编译调用 HTML5+小程序及 H5 等平台是没有 HTML5+ 扩展规...
DCloud有470万开发者,uni统计手机端月活8.4亿。是开发者数量和案例最丰富的多端开发框架。欢迎知名开发商提交案例或接入uni统计...
uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS,Android,H5,以及各种小程序(微信/支付宝...
PropsEdit on GitHubanimatingbool 型显示指示器(true,默认的)还是隐藏它(false)。color字符串型Spinner 的前景颜色(默认为灰色...
jQuery Mobile pagecontainerbeforeload 事件 jQuery Mobile 事件实例在请求载入前弹出信息:$(document).on(pagecontainerbefor...
jQuery Mobile swipeleft 事件jQuery Mobile 事件实例 水平方向向左滑动 p 元素并隐藏它:$("p").on("swipeleft",function(){ ...