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


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实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
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
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
AngularJS内置指令
2015/02/04 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
Python常用模块介绍
2014/11/21 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
json跨域调用python的方法详解
2017/01/11 Python
老生常谈python中的重载
2018/11/11 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
Pygame的程序开始示例代码
2020/05/07 Python
Python列表如何更新值
2020/05/27 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
公司出纳岗位职责
2013/12/07 职场文书
开会迟到检讨书
2014/02/03 职场文书
会计的岗位职责
2014/03/15 职场文书
文案策划岗位职责
2015/02/11 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
Python实现简繁体转换
2021/06/07 Python
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers