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


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脚本
Aug 04 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
vue-router的hooks用法详解
Jun 08 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
mysql+php分页类(已测)
2008/03/31 PHP
php之curl设置超时实例
2014/11/03 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
python 命令行传入参数实现解析
2019/08/30 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
python 调用Google翻译接口的方法
2020/12/09 Python
python 基于opencv实现图像增强
2020/12/23 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
医学检验专业个人求职信范文
2013/12/04 职场文书
魅力教师事迹材料
2014/01/10 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
庆六一活动总结
2014/08/29 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
大学生创业事迹材料
2014/12/30 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
Python基础之元编程知识总结
2021/05/23 Python
Python pandas之求和运算和非空值个数统计
2021/08/07 Python