uni-app获取小程序带参

拼搏现实的明天。 2023-03-02 05:17 196阅读 0赞

## 背景 ##

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

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

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

for `uni-app` , by `HBuildx`

## 完整代码 ##

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

<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>

## 效果预览 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vc2hvd2dhbWU_size_16_color_FFFFFF_t_70 2]

[Java_SpringBoot]: https://zhengkai.blog.csdn.net/article/details/107586571
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vc2hvd2dhbWU_size_16_color_FFFFFF_t_70]: /images/20230208/18302655ca964856834e7f77e4b7b9a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vc2hvd2dhbWU_size_16_color_FFFFFF_t_70 1]: /images/20230208/68a385d571564e6f8e15227eb5b918d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vc2hvd2dhbWU_size_16_color_FFFFFF_t_70 2]: /images/20230208/3fe47794a4fc47dcb9190dc623727677.png