微信小程序实现生成二维码功能并下载到本地
微信小程序实现生成二维码功能并下载到本地背景实现备注背景有这样一个需求,后台返回了url地址,微信小程序将url地址转成二维码图片,展示在页面上,并且该二维码图片可下载到用户手机相册中
实现安装wx-qr
npmiwx-qr-S在页面组件的json文件中引入wx-qr
{"navigationBarTitleText":"我的线索库","usingComponents":{"qr-container":"wx-qr"}}页面中使用wx-qr展示二维码
小程序二维码和小程序带参数二维码生成
本文主要讲解小程序二维码的基本概念,帮助开发和运营人员更好的掌握小程序参数二维码,同时也包含小程序二维码官方文档解读,更好的掌握小程序参数二维码在业务中的使用
一,小程序二维码小白介绍
二,小程序二维码开发介绍
三,小程序二维码生成介绍
四,小程序二维码官方文档解读
一,小程序参数二维码小白篇介绍参数二维码的基础知识,让开发者和运营者知道什么是参数二维码
1.首先我们要了解,什么是小程序的二维码?
以下是小程序二维码
小程序的菊花码 普通的小程序二维码
2.为什么小程序码是圆的放射型,也称为菊花码
小程序最开始使用的是常规方形的二维码,后面微信专门为此设计了一套菊花码,也就是图二,为什么要专门搞一套小程序特有的编码呢,估计是
(1)专利原因
方形二维码的专利属于别人,微信没有专利。
(2)区分普通二维码,减少用户扫码额疑虑
将小程序和普通的二维码进行区分,现在大家看到二维码,都不敢随便扫,但是如果提前知道二维码属于哪一类,对手机有没有危害性,这样就会减少扫码人的顾虑,大家看方形的二维码中间那 块还是圆的,就是为了,让大家知道这个是小程序,而且微信生成的二维码里,还有一句提示,明确的告之用户,这是小程序,可以放心使用
更多小程序的菊花码故事,请跳转到这里 https://www.qcloud.com/community/article/347791
3.什么是小程序带参数的二维码
小程序的带参数的二维码,顾名思义。就是就将参数带入小程序内,当然参数这个,是明显偏技术类的一个名称。我们来举2个例子
播放视频例子
比如打开一个网页,播放视频
https://v.qq.com?play=湖人队比赛
当你打开网页的时候,网站知道你想要打开看的是湖人对的比赛,而参数名是play,参数值是湖人队比赛,那么网站就直接打开这个页面给您,而不是进入网站的首页。
同样的道理,当我扫码二维码打开小程序的时候,我希望能够直接找到对应的内容,而不是进入首页,一个一个去浏览。
衣服购买例子
我扫码二维码后,希望进入衣服的购买介绍页面,而不是小程序的首页,这样节省时间。
共享单车例子
再比如摩拜单车,每扫一个二维码,就直接对应的是这辆车,进入摩拜的小程序,摩拜是知道
图中的编号02110015717就传递到摩拜小程序了,摩拜小程序就知道你想打开哪辆车了(妹子和本文无关,不是我女朋友)。
所以带参数二维码,就是将数据直接带入小程序,小程序知道用户是扫哪个二维码过来的,参数是什么,用户希望做什么
所以带参数二维码,就是通过参数直达小程序的内容页面。参数二维码还有哪些场景呢?
小程序带参数二维码场景举例
医院场景:比如每个医生一个id,通过带参数二维码,扫码二维码就直接进入小程序医生页面
餐厅场景:比如每个菜一个二维码,通过扫码这个菜的二维码,进入小程序后,可以直接点这道菜,而不是要找菜铺。
电商场景:扫码二维码带参数,进入小程序直接购买,比如通过公众号,通过带参数二维码,用户长按识别,直接进入服装的购买页面,提高购买转换。
音乐场景:扫码某个带参数二维码,直接打开播放某个固定的歌曲
推广场景:
线上推广
比如我同样的一件衣服,放在A公众号推广,有多少人购买了,放在B公众号有多少人购买了,怎么区分和统计呢?
那就增加一个参数两个二维码,增加一个参数,A公众号设置qudao=A B公众号设置参数qudao=B,那么我们小程序就知道同样的一件衣服,是哪个公众号购买的
线下推广:
通过带参数的二维码,商家将这些独一无二的小程序码配置在不同的物料上,开发者通过追踪到用户都是从哪儿识别进入到小程序,让商家清楚了解到各物料的投放效果。
这样,我们就知道哪边的推广效果好。
到这里小程序的参数二维码的具体用户我们大致是知道了。
二,小程序参数二维码开发篇介绍如何开发小程序参数二维码,如何在开发模拟小程序参数二维码,以及代码里如何获取小程序参数码的值
1.自定义编译条件
2.在代理的onLoad里获取参数值
Page({onLoad:function(options){//options中的scene需要使用decodeURIComponent才能获取到生成二维码时传入的scenevarscene=decodeURIComponent(options.scene)//varquery=options.query.dentistId//3736}})我们通过onLoad的options的参数,可以很方便的获取小程序带参数二维码传递过来的参数,以及场景参数二维码的值
三,小程序参数二维码生成篇
当小程序审核通过后,那么线上的小程序二维码是如何生成呢?芝麻小程序码提供了程序二维码生成工具。
网址如下https://weixin.hotapp.cn
芝麻小程序码的特色
(1)支持小程序路径带参数,自定义带参数
(2)小程序码,方形小程序码,以及小程序码的美化
(3)支持创建带场景值的二维码
(4)支持小程序参数二维码的统计,统计扫码人数,扫码次数
四,小程序二维码官方文档解读
小程序二维码生成官方文档链接https://mp.weixin.qq.com/debug/wxadoc/dev/api/qrcode.html
接口A:生成普通菊花小程序带参数二维码,适用于需要的码数量较少的业务场景,通过该接口生成的小程序码,永久有效,用户扫描该码进入小程序后,将直接进入path对应的页面。
数量限制是10万个
接口地址:https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN
接口A的的生成二维码,如何生成,二维码样式,选择普通的菊花码
接口B:生成场景小程序参数二维码 通过该接口生成的小程序码,永久有效,数量不限制,用户扫描该码进入小程序后,将直接进入path对应的页面。
接口地址:https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN
用户扫描该码进入小程序后,开发者需在对应页面获取的码中scene字段的值,再做处理逻辑。使用如下代码可以获取到二维码中的scene字段的值。调试阶段可以使用开发工具的条件编译自定义参数scene=xxxx进行模拟,开发工具模拟时的scene的参数值需要进行urlencode
//这是首页的jsPage({onLoad:function(options){//options中的scene需要使用decodeURIComponent才能获取到生成二维码时传入的scenevarscene=decodeURIComponent(options.scene)}})
产品发布后,场景小程序码的生成方法
接口C:普通方形二维码,适用于需要的码数量较少的业务场景,接口C和接口A的二维码总数量是10万个。如果数量比较多。需要用接口B,场景参数二维码
接口地址:https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN
小程序二维码生成工具:芝麻小程序码https://weixin.hotapp.cn
图片生成二维码最好的工具
二维码如何大行其道,只需要手机扫描一下就可以使用了的。那么如何把图片生成二维码的呢?我比较推荐maitube,功能齐全而且不用注册。类似pdf和图片之类在线分享的,maitube不但没有限制,而且是免费不用注册的。手机浏览器就可以直接打开使用qr.maitube.com
打开maitub二维码工具,因为maitube是个H5网页,大家可以在电脑手机甚至微信自带的浏览器都可以打开maitube二维码工具
可以选择需要制作的二维码,比如短信,电话,wifi之类的。当然如果需要分享文档或者图片,可以进入照片生成二维码或者图片部分
然后就可以将生成的二维码和链接分享给别人进行阅览了。MaiTube二维码生成器的好处就是不需要注册,直接进行使用
如果这组图片是要分享到微信当中的,我们还可以设置这组图片的标题和描述,这样可以增加别人的点击欲望。
图片分享出去之后,还有追踪链接。。。在别的二维码制作工具中是要充会员的。但是麦瓜二维码是不用的,为了免除注册的烦恼,针对每个二维码和链接,都有对应的追踪链接。我们可以很清楚的通过这个链接知道二维码被扫了多少次,链接被打开多少次。每次打开的时间是什么,打开的ip地址是什么,这样就可以知道打开着的大致位置了。