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


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 相关文章推荐
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
jquery append与appendTo方法比较
May 24 jQuery
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
前端性能优化建议
Sep 17 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
js实现简单的倒计时
Jan 28 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
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
详解如何较好的使用js
2016/12/16 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
windows下添加Python环境变量的方法汇总
2018/05/14 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
pycharm的python_stubs问题
2020/04/08 Python
快速了解Python开发环境Spyder
2020/06/29 Python
python 8种必备的gui库
2020/08/27 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
什么是Web Service?
2012/07/25 面试题
综合测评自我鉴定
2013/10/08 职场文书
军训自我鉴定
2013/12/14 职场文书
如何客观的进行自我评价
2013/12/17 职场文书
迟到检讨书1000字
2014/01/15 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
《春雨》教学反思
2014/04/24 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
2014年统计工作总结
2014/11/21 职场文书
先进个人推荐材料
2014/12/29 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书