微信小程序扫描二维码获取信息实例详解


Posted in Javascript onMay 07, 2019

1.最简单的扫二维码获得信息。

首先,在网上找一个二维码生成网站,生成一个二维码,我用的是草料二维码,随便生成了一个二维码做测试。

就这个。

微信小程序扫描二维码获取信息实例详解

我搭建的界面如下:

如图可见,点击1中的“点我扫一扫”,可以扫二维码,扫错了如2所示,扫对了如3所示。“你傻不傻啊?”就是上图的二维码内容。

嗯,大家都不傻。

4是小程序的结构,就是快速模板建立的,index页面里的内容都删空了,替换了新的代码,其中wxss文件没有东西,因为并没有对界面进行设计。

微信小程序扫描二维码获取信息实例详解

其中index.wxml的代码如下:

<view> 
 <view bindtap="click">点我扫一扫</view> 
 <view>{{show}}</view> 
</view>

没啥说的,就是点击“点我扫一扫”的时候,调用click函数,结果的值是show。

index.js的代码如下:

//获取应用实例 
var app = getApp()
Page({
 data: {
 show: "",
 },
 
 onLoad: function () {
 console.log('onLoad')
 },
 click: function () {
 var that = this;
 var show;
 wx.scanCode({
 success: (res) => {
 this.show = "结果:" + res.result + "二维码类型:" + res.scanType + "字符集:" + res.charSet + "路径:" + res.path;
 that.setData({
  show: this.show
 })
 wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
 })
 },
 fail: (res) => {
 wx.showToast({
  title: '失败',
  icon: 'success',
  duration: 2000
 })
 },
 complete: (res) => {
 } 
 })
 }
})

这个差不多就是微信官方文档的样板例子。

把click函数给定义了一下,赋给了show的值。

其中,wx.scancoad和wx.showToast是微信小程序的内置函数。

wx.scancoad中的result是二维码的内容。

官方文档如下:

scancode
https://mp.weixin.qq.com/debug/wxadoc/dev/api/scancode.html
showToast:
https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html

这个就改了这两个文件,wxss是空的。

二维码扫描get了,继续下一个,跳转页面。

本来是想做一个渐进式的教程,不过发现后面两个有点麻烦,附上参考资料吧,等有条件了,再写。

看资料,如果想做到跳转,二维码中要有path的值,而这个的获取,要有认证过的小程序和服务号。
access_token:

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

获取二维码:

https://mp.weixin.qq.com/debug/wxadoc/dev/api/qrcode.html

生成带参数的二维码:

https://jingyan.baidu.com/article/fdbd4277cfd0c6b89f3f485f.html

以上所述是小编给大家介绍的微信小程序扫描二维码获取信息详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
Vue数据绑定简析小结
May 07 #Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 #Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 #Javascript
webpack结合express实现自动刷新的方法
May 07 #Javascript
记录一次开发微信网页分享的步骤
May 07 #Javascript
Vue 幸运大转盘实现思路详解
May 06 #Javascript
Vue运用transition实现过渡动画
May 06 #Javascript
You might like
深入了解php4(1)--回到未来
2006/10/09 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
python抓取网页中的图片示例
2014/02/28 Python
浅谈Python的异常处理
2016/06/19 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
python2 对excel表格操作完整示例
2020/02/23 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
大学生家政服务项目创业计划书
2014/01/30 职场文书
升学宴主持词
2014/04/02 职场文书
高中生家长寄语大全
2014/04/03 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
公司收款委托书范本
2014/09/20 职场文书
作文评语怎么写
2014/12/25 职场文书
讲文明倡议书
2015/04/29 职场文书
工程进度款催款函
2015/06/24 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python