uni-app获取小程序带参-向日葵屋

uni-app获取小程序带参

背景

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

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

核心代码" class="reference-link">关于怎么生成可以看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>