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>

效果预览