微信小程序开发之扫码和带参数跳转 VUE前后分离调起微信支付
之所以把扫码和带参数跳转放到一起是因为这两个都涉及到页面间传参。
1.小程序之扫码在现在的移动互联网中，扫码是一个非常重要的应用场景。在眼查查中也得到广泛应用，从最开始的扫会员二维码到扫描预约码到现在的扫描带筛查码的菊花码。
在小程序中扫码需要使用微信官方提供的api，其底层是使用的微信的扫一扫，通过调起微信客户端的扫码界面进行扫码。
具体的Api使用请参考官方文档。需要注意的是在这个过程中，扫描二维码和扫描菊花码是不同处理过程。
扫描普通二维码结果在result中拿，扫描菊花码结果在path中拿。在下一节中将会具体说明。
2.实际项目中的扫码上代码进行说明
scan(){
letthat=this;
wepy.scanCode({
onlyFromCamera:false,//是否只能从相机扫码，不允许从相册选择图片,
success:res=>{}
}).then(res=>{
that.onScanResult(res);
});
},
在调用wepy.scanCode后，将结果交由onScanResult方法处理
/**
*扫描成功
*/
onScanResult(res){
if(res==null){
return;
}
//扫到了二维码
if(res.scanType=="QR_CODE"){
this.getDataByCode(res.result)
this.$Apply();
}elseif(res.scanType=="WX_CODE"){
if(stringUtils.isNullOrEmpty(res.path)){
this.getScreenDetail(res.result);
this.$apply();
}else{
letpath=decodeURIComponent(res.path)
letsenceIndex=path.indexOf("=")
letcode=path.substring(senceIndex+1,path.length);
this.getDataByCode(code);
this.$apply();
}
}
}
在具体的处理中根据scanType的不同从不同的字段中取数据。
此处需要特别注意的是菊花码的生成，如果只是小程序的二维码可以在微信小程序后台中直接下载物料，但是如果是需要生成自定义的带参数的小程序二维码则需要调用对应的接口才能实现。获取自定义的小程序码有如下两种方式：
l使用官方工具：
https://mp.weixin.qq.com/wxamp/wxaqrcode/weappcode?simple=1&token=2009620926&lang=zh_CN
但是这种方式只能生成指定页面的小程序码，无法再带参数。
l使用https接口获取：可通过后台调用或者使用网络请求工具模拟。除了可以指定页面路径外还可以指定接口。官方提供了ABCD4个接口我们使用的是B接口，page指定页面路径，scene指定页面参数。
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html
此外还需要注意使用时需要用到accessToken
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183
3.页面带参数跳转页面带参数跳转这个功能主要用于小程序被外部应用打开时使用，比如从公众号的自定义菜单项和眼查查App中跳转二来。
由于小程序的页面栈逻辑，如果直接跳转至对应页面，在退出这个页面后将直接退出小程序无法进入其他页面，所以我们采用的方案是所有跳转交由home页面执行，在home页面拿到对应的参数后做出跳转动作。
varpage,param;
console.log("option",option)
if(option!=null){
if(option.src){
this.enablePageSwitch=true;
page=option.src;
}
if(option.param){
param=option.param
}
}
this.$parent.loginToServer().then(()=>{
if(page){
this.switchToPage(page,param)
this.enablePageSwitch=false;
}else{
this.bannerList();
this.getHomeTags();
}
})
/**
*跳转至页面
*/
switchToPage(page,param){//TODO:跳转至具体的页面
}参考资料
1.微信小程序扫码说明
https://developers.weixin.qq.com/miniprogram/dev/api/device/scan/wx.scanCode.html
2.小程序码的参数获取
https://www.jianshu.com/p/108233ed7ed0
VUE前后分离调起微信支付
支付很简单,但每次都是在网上直接扒下来使用,老年人记忆,于是就自己记录一下,方便以后快速的粘贴复制;
第一步:VUE需要安装微信支付模块
//npminstallweixin-js-sdkimportwxfrom"weixin-js-sdk";
第二步封装微信支付方法
wexinPay(data,cb,errorCb){//获取后台传入的数据letAppId=data.appId;lettimestamp=data.timeStamp;letnonceStr=data.nonceStr;letsignature=data.signature;letpackages=data.package;letpaySign=data.paySign;letsignType=data.signType;console.log('发起微信支付')//下面要发起微信支付了wx.config({debug:false,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId:appId,//必填，公众号的唯一标识timestamp:timestamp,//必填，生成签名的时间戳nonceStr:nonceStr,//必填，生成签名的随机串signature:signature,//必填，签名，见附录1jsApiList:['chooseWXPay']//必填，需要使用的JS接口列表，所有JS接口列表见附录2});wx.ready(function(){wx.chooseWXPay({timestamp:timestamp,//支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符nonceStr:nonceStr,//支付签名随机串，不长于32位package:packages,//统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）signType:signType,//签名方式，默认为'SHA1'，使用新版支付需传入'MD5'paySign:paySign,//支付签名success:function(res){//支付成功后的回调函数cb(res);},fail:function(res){//失败回调函数errorCb(res);}});});wx.error(function(res){//config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。/*alert("config信息验证失败");*/});}
第三步向后台请求数据成功获取转入微信支付方法调起微信支付
//请求后台接口获取数据准备进行微信支付that.axIOS.post("user/recommend",data).then(res=>{//成功状态下if(res.data.status){//存储微信支付数据dataletdata=res.data.data;console.log("即将跳转微信支付");//函数为分装过得(就是调用微信支付)http.wexinPay({appId:data.appId,nonceStr:data.nonceStr,package:data.package,paySign:data.paySign,signType:data.signType,timeStamp:data.timeStamp},//成功回调函数res=>{that.$router.push({path:"/vip"});});}else{that.$message.error(res.data.message);}});
信息转载自网络，更多相关信息请点击：微信营销技巧http:///shhmt/wxyx/
相关文章
-
速卖通规则可以在哪里查看？哪些违反了知识产权规则？
AliExpress可以通过关键词搜索轻松地收集这些产品的名称，一旦发现侵权行为速卖通就会给予惩罚。,这意味着，卖方不允许在6个月内销售带有非法商店名称的产品。,一些卖家可能会在AliExpress上销售DVD、CD甚至视频格式的音频或视频产品。
2024-03-22 11:08 -
速卖通店铺类型选什么好？有哪些运营思路？
官方店：商户凭自有品牌或权利人独家授权进入Aliexpress开设的店铺(仅商标为R标志)。,这些都不是AliExpress对每一个大型促销活动的排挤，成本高昂，交易显而易见。,只有这样，你才能在下一个发展中不被落在后面。
2024-03-22 10:55 -
速卖通卖家不能发布什么产品？怎么选好产品？
AliExpress可以通过关键词搜索轻松地收集这些产品的名称，一旦发现侵权行为速卖通就会给予惩罚。,这意味着，卖方不允许在6个月内销售带有非法商店名称的产品。,一些卖家可能会在AliExpress上销售DVD、CD甚至视频格式的音频或视频产品。
2024-03-22 10:43 -
速卖通有什么站点？站点选择技巧有哪些？
速卖通平台主要是做的外贸业务，对于新手卖家朋友来说，需要选择一个合适的站点进行注册开店，那么先去了解一下速卖通有什么站点？,你可以通过搜索关键词、查看热销产品、分析竞争对手等方式，了解不同站点的竞争程度和市场空间，从而选择更有优势的站点。,速卖通开店的话，还有必要了解一下可以销售的品类有哪些哦。
2024-03-22 09:36 -
速卖通有多少个站点？速卖通针对哪些国家？
这些站点在语言、货币、服务等方面进行了定制，为用户提供更好的体验。,二、速卖通针对哪些国家速卖通的覆盖范围涵盖了全球许多国家和地区，为各地的商家和买家提供贸易服务。,以上只是速卖通覆盖的一部分国家和地区，实际上速卖通还涵盖了更多国家和地区，为全球用户提供了多样化的服务。
2024-03-22 09:28 -
内链服务公司预测提高页面动产关键熟练的几条
下载好今后按步调装置好，装置胜利今后就关上软件咱们就能够看到如下界面：下载wordpress建站法式在wordpress官网下载最新建站法式，下载上去的是一个装置包，而后将装置包解压一下咱们就能够看到如下下这些文件如下图所示：将wordpress建站法式一切文件放到当地服务器把phpStudy关上，而后点击“其余选项菜单”关上“网站根目录”，将wordpress建站法式一切文件也便是第二点中所看到
2024-03-22 09:23 -
5个方法在营销中使用幽默
对于这些企业，在遵守规定下能走多远是很难的，更不要说他们需要还要有法律许可来完成。,比如没有盖克保险公司用一只骆驼问员工，“今天是什么日子?”当然还有很多，这些广告不仅会出现在电视上，也会在视频网站上被数以万计的人观看。,拿你的Logo取乐Google一直都在做这个事情。
2024-03-22 09:22 -
在教堂，电能供应商飞速发展的框架短信下
目前回归金融业负责前端技术、大数据、云计算在互联网金融、股票交易系统的应用。,目前日本国内共有8家宜家实体店铺，包括千叶县船桥市和神奈川县横滨市港北区等。,虽然很想去店里买，但是那么大的家具拿不回来，运送费用又太高，每次想想都作罢了。
2024-03-22 09:21 -
其次，是家装电能厂商无止境全新重点项目的开销业务量
今日晨讯的主要内容有：奥康国际7700万美元战略入股电商企业兰亭集势。,华视传媒董事局主席及首席执行官李利民表示：“我们非常高兴顺利完成此次融资交易，并获得百度和其他顶级私募投资者的支持，同时我们欢迎熊振先生加入公司董事会。,有货CEO钮丛笑进行了互动，深入了解电商与大数据背后的故事。
2024-03-22 09:21 -
家装电能厂商这三条网络平台没多久步入，且不留世上可循
就京东在物流扩充上可谓是下足了的功夫。,中投顾问高级研究员薛胜文表示：“宜家在定位、营销手法、选品上应该致力于提高消费者体验，定位可以走中低端道路，营销可以凸显线下体验优势，而在选品上可以不与线下相同，避免价格竞争。,一种观点认为，为了满足消费者对家居产品注重体验的特性，可以在线上运用3D展示技术，将线下场景照搬到PC端。
2024-03-22 09:20