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


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 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 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
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
php自动加载代码实例详解
2021/02/26 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
关于Python数据结构中字典的心得
2017/12/04 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
python实现多线程端口扫描
2019/08/31 Python
python 实现两个线程交替执行
2020/05/02 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
C# Debug和Testing相关面试题
2015/10/25 面试题
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
2014国庆节标语口号
2014/09/19 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
个人债务授权委托书
2014/10/17 职场文书
婚礼家长致辞
2015/07/27 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
工作服管理制度范本
2015/08/06 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
Python中time与datetime模块使用方法详解
2022/03/31 Python