正在阅读：怎么在微信小程序中制作条形码和二维码？怎么在微信小程序中制作条形码和二维码？

　　今天给大家讲的是如何在微信小程序制作条形码和二维码?对微信小程序很感兴趣的同学们就一起学习下吧!

　　开发前准备

　　本文首先假定开发者已经粗略阅读过微信小程序的开发文档，所以注册小程序的流程就不介绍了。不过需要注意，小程序现在只允许企业用户注册，所以认证需要企业营业执照复印件和加盖公章的小程序申请公函。如果是选择对公账户认证，则不需要公函。另外，如果需要使用微信支付接口，则需要另外进行一次微信认证，这个就必须使用300块的方式了，感觉靠给微信认证的公司就挣钱不少。。。

　　开发工具介绍

　　我使用的开发工具就是微信官方提供的IDE，现在也有了很多第三方的IDE或者插件，但是用起来感觉整合度不如官方版，索性不换了。新建项目需要输入注册小程序时获取的AppId。需要注意的是设置页面：其中有一项是开发环境不校验请求域名以及TLS版本。这一项需要勾选上，因为微信只支持HTTPS的协议而且必须是指定域名，这让开发者使用localhost调试变的很麻烦，勾选此项之后就没有这种限制了。但只有在开发环境才可以。

　　功能设计

　　如图：

　　功能设计图

　　会员卡

　　个人信息

　　注册

　　开发过程

　　首先是目录结构：

　　目录结构

　　pages：用于存放会员卡、个人信息和注册三个页面的文件

　　utils：放置公共js文件

　　app.js

　　varrequest=require('utils/requestfun.js');//封装了ajax的实现

　　App({

　　data:{//app.js中使用的data

　　},

　　globalData:{//全局使用的data

　　REQUEST_BASE_URL:'',//后台服务器域名

　　GET_VIP_BR_CODE:'',//请求条形码接口

　　GET_VIP_QR_CODE:'',//请求二维码接口

　　channelid:'',

　　vipcode:null,//初始设置会员卡号为null

　　wxuserkey:''//后台返回的解密后信息

　　},

　　//获取会员信息

　　getVipInfo:function(cb){

　　varthat=this;

　　if(!that.globalData.vipcode){

　　//调用登录接口

　　wx.login({//微信提供的login接口，可以获得openid及code

　　success:function(res){

　　varcode=res.code;

　　wx.getUserInfo({//微信提供的接口，使用code获取用户信息，包括unionid

　　success:function(res){

　　varparams={

　　'channelid':that.globalData.channelid,

　　'code':code,

　　'res':res

　　}

　　request.mnsrequest(that.globalData.REQUEST_BASE_URL+'weixin/miniappgetvipinfo.action',params,function(mnsres){//请求项目后台服务器返回会员信息

　　if(mnsres.data){

　　if(mnsres.data.returndata.isregistered){

　　varvipcode=mnsres.data.returndata.vipcode;

　　that.globalData.vipcode=vipcode;

　　typeofcb=="function"&&cb();

　　}else{

　　that.globalData.wxuserkey=mnsres.data.returndata.wxuserkey;//此处为后台返回的会员微信信息key，通过此key与后台通信

　　wx.redirectTo({//微信提供的路由接口，重定向。

　　url:'/pages/reg/reg'

　　})

　　}

　　}else{

　　returnmnsres.errMsg;

　　}

　　})

　　}

　　})

　　}

　　})

　　}else{

　　typeofcb=="function"&&cb();

　　}

　　}

　　})

　　这里强调几点：

　　微信路由接口有三个，分别是wx.redirectTo、wx.navigateTo和wx.switchTab

　　wx.navigateTo全局最多调用5次

　　如果某页面设置为tab页，则只支持wx.switchTab，不支持其他两种路由方式访问

　　app.json

　　app.json是全局配置文件。

　　{

　　"pages":[//所有页面都需要在这里注册后才能使用

　　"pages/index/index",

　　"pages/vipinfo/vipinfo",

　　"pages/reg/reg"

　　],

　　"window":{//设置小程序窗体样式及显示文字

　　"backgroundTextStyle":"light",

　　"navigationBarBackgroundColor":"#fff",

　　"navigationBarTitleText":"会员卡",

　　"navigationBarTextStyle":"black"

　　},

　　"tabBar":{//设置Tab页样式

　　"list":[//设置Tab页列表，最大支持5个

　　{

　　"pagePath":"pages/index/index",

　　"text":"会员卡",

　　"iconPath":"pages/img/vip.png",

　　"selectedIconPath":"pages/img/vip2.png"

　　},

　　{

　　"pagePath":"pages/vipinfo/vipinfo",

　　"text":"个人信息",

　　"iconPath":"pages/img/info.png",

　　"selectedIconPath":"pages/img/info2.png"

　　}

　　],

　　"borderStyle":"white"

　　},

　　"networkTimeout":{

　　"request":10000,

　　"downloadFile":10000

　　},

　　"debug":true

　　}

　　app.wxss

　　app.wxss控制全局样式。

　　/**app.wxss**/

　　page{//需要设置page高度，才能正常让空间高度显示为100%

　　height:100%;

　　}

　　.container{

　　font-family:'FranklinGothicMedium','ArialNarrow';

　　/*border:1pxsolidblack;*/

　　background-color:#48c23d;

　　width:100%;

　　height:100%;

　　display:flex;//小程序推荐使用flex布局

　　flex-direction:column;

　　align-items:center;

　　justify-content:flex-end;

　　box-sizing:border-box;

　　overflow:hidden;

　　padding:50rpx;

　　}

　　.reg_container{

　　font-family:'FranklinGothicMedium','ArialNarrow';

　　width:100%;

　　height:100%;

　　display:flex;

　　flex-direction:column;

　　align-items:flex-start;

　　justify-content:flex-start;

　　box-sizing:border-box;

　　overflow:hidden;

　　padding:50rpx;

　　}

　　.info_container{

　　font-family:'FranklinGothicMedium','ArialNarrow';

　　font-size:30rpx;

　　width:100%;

　　height:100%;

　　display:flex;

　　flex-direction:column;

　　align-items:flex-start;

　　justify-content:flex-start;

　　box-sizing:border-box;

　　overflow:hidden;

　　padding:50rpx;//小程序推荐的自适应长度单位

　　}

　　reg.wxml

　　wxml为微信创造的xml标记语言。

　　//view可以简单理解为html中的块状元素

　　手机号：

　　//使用bind绑定事件

　　验证码：

　　{{vertical.value}}//使用双大括号语法进行数据绑定，但只支持单向绑定，若要实现双向绑定，需要借助事件

　　注册

　　提交审核

　　按照官方操作说明进行即可。参照下图：

　　提交审核

　　总结

　　有其他MVVM开发经验的话，小程序上手很快，可以将其理解为简化版VUE.js

　　微信数据解密是难点，必须严格按照微信提供的解密流程，java需要引入新jar包

　　设定页面高度时，必须设置page的height为100%，否则高度设置无效

　　重定向路径写法：“/pages/index/index”

　　若同一页面中两个input都设置了“focus”属性，则会导致小程序闪退

　　在tab中注册的页面，不可使用重定向及新页面接口，只可使用tab切换

　　微信规定，整体代码大小不得超过1M，所以图片需使用云存储链接获取