uni-app获取小程序带参

背景

继上一篇我们使用springboot生成带参数的小程序码之后,我们就需要在小程序里面接收对应的scene参数,在uni-app里面怎么接收小程序scene参数,网上很多攻略讲不清楚,在哪里调用,怎么调用也没讲,这里特地捋了一下思路。

这里DEMO是以一个证书查询系统来弄。微信扫码带参的二维码/小程序码,自动跳转到小程序,并且识别和填充参数到界面上,这里是填充证书编号certNumber=xxxx

关于怎么生成可以看Java/SpringBoot获取小程序带参二维码并保存到本地
在这里插入图片描述
核心代码

for uni-app , by HBuildx

<script>
	export default {
		onLoad (query) {
			//by zhengkai.blog.csdn.net
		    // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
		    const scene = decodeURIComponent(query.scene);
			//类型为string,所以只能判断不叫"undefined"
			//console.log(typeof(scene));
			if(scene!="undefined"&&scene.length>4){
				console.log(scene);
				uni.showModal({
					content: '证书编码:'+scene+',点击查询查看详情',
					showCancel: false
				});
				this.certNumber=scene;
			}else{
				console.log("没有启动参数");
			}
		},
		data() {
			return {
				//这个参数用于接收和存储传过来的scene
				certNumber:'',
			}
		},
		methods: {
			//......
		}
	}
</script>

完整代码

我是简单的单页面应用,直接往index加就完事。如果非单页面,建议存储起来供其他页面调用。
在这里插入图片描述
部分代码做了处理

<template>
	<view class="container">
		<view v-if="show1">
			<image src="../../static/xxxx.png" mode="widthFix"></image>
			<br><br>
			<label v-text="label" style="font-size: large;padding-top: 140px;"></label>
			<input type="text" class="flex" @focus="onBlur()" v-model="certNumber" placeholder="请输入证书编号,格式EGAG-SAL0*-2020****"/>
			<button type="default" @click="onSearch()">查询</button>
			<br>
		</view>
		<view v-if="show2">
			<image src="../../static/xxxxx.jpg" mode="widthFix"></image><br>
			<text>证 书 编 号:{{certInfo.certNumber}}</text><br>
			<text>公 司 名 称:{{certInfo.certCompany}}</text><br>
			<text>有 效 时 间:{{certInfo.certValidateStart}}{{certInfo.certValidateEnd}}</text><br><br><br><br><br><br>
			<button type="default" @click="onBack()">返回</button>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad (query) {
			//by zhengkai.blog.csdn.net
		    // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
		    const scene = decodeURIComponent(query.scene);
			//类型为string,所以只能判断不叫"undefined"
			//console.log(typeof(scene));
			if(scene!="undefined"&&scene.length>4){
				console.log(scene);
				uni.showModal({
					content: '证书编码:'+scene+',点击查询查看详情',
					showCancel: false
				});
				this.certNumber=scene;
			}else{
				console.log("没有启动参数");
			}
		},
		data() {
			return {
				label:"证书编号:",
				certNumber:'',
				show1: true,
				show2: false,
				certInfo:{
					 certId: 0, certNumber: "EGAG-SAL03-******", certCompany: "******有限公司", certAddress: "******", certLevel: "叁",certService: "***",
					 certValidateEnd: "2022-10-12",certValidateStart: "2020-10-12"
				}
			}
		},
		methods: {
			onSearch: function(e) {
				let that=this;
				//console.log("click:"+this.certCompanyNumber);
				if(this.certNumber.length>11){
					new Promise((resolve, reject) => {
							uni.request({
								url: "https://xxxxxx/certInfo?certNumber="+that.certNumber.trim(),
								/* data: {"cert_number"},*/
								header: {
									"Access-Control-Allow-Origin": "*"
								}, 
								method:"POST",
								success: (res) => {
									resolve(res);
									console.log(res.data);
									if(res.data===null||res.data.length<1){
										uni.showModal({
											content: '请输入有效证书编码',
											showCancel: false
										});
									}else{
										that.certInfo=res.data;
										that.show2=true;that.show1=false;
									}
								}
							});
						})
				}else{
					uni.showModal({
						content: '请输入正确的证书编码',
						showCancel: false
					});
				}
			},
			onBlur:function(e) {
				//console.log("blur");
				if(this.certNumber.length<1){
					this.certNumber="EGAG-SAL03-";
				}
			},
			onBack:function(e) {
				this.show1=true;this.show2=false;
			},
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

效果预览

在这里插入图片描述

已标记关键词 清除标记
//微信充值 //支付接口测试 function balance(url, data) { uni.request({ url: cfg.originUrl + '/wx/mp/js_sig.do', data: { route: url }, method: 'GET', success: (res) => { jweixin.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来 appId: res.data.appId, // 必填,公众号的唯一标识 timestamp: res.data.timestamp, // 必填,生成签名的时间戳 nonceStr: res.data.nonceStr, // 必填,生成签名的随机串 signature: res.data.signature, // 必填,签名 jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表 }); jweixin.ready(function() { uni.request({ url: cfg.originUrl + '/wx/recharge/pay.do', method: 'POST', header: { 'Content-type': "application/x-www-form-urlencoded", }, data: JSON.stringify(data), success: function(res) { alert("下单成功"); alert(JSON.stringify(res)); alert(res.data.order_id); all.globalData.orderId = res.data.order_id; uni.setStorageSync('orderId', res.data.order_id); jweixin.chooseWXPay({ timestamp: res.data.payParams.timeStamp, // 支付签名时间戳 nonceStr: res.data.payParams.nonceStr, // 支付签名随机串 package: res.data.payParams.package, // 接口返回的prepay_id数 signType: res.data.payParams.signType, // 签名方式 paySign: res.data.payParams.paySign, // 支付签名 success: function(e) { alert("支付成功"); alert(JSON.stringify(e)); // 支付成功后的回调函数 } }); } }) }); jweixin.error(function(res) { // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res数中查看,对于SPA可以在这里更新签名。 console.log("验证失败!") }); } }) }
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页