美文网首页小程序
微信小程序跨网页传输数据

微信小程序跨网页传输数据

作者: lzj01231 | 来源:发表于2023-02-16 00:04 被阅读0次

开发框架:uni-app
利用url链接后的拼接部分传递数据

信息填写页面

<template>
    <view>
        <input v-model="id" type="text" @input="ID" placeholder="请输入学号">
        <input v-model="name" type="text" @input="NAME" placeholder="请输入姓名">
        <button @tap="login">登录</button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                id,
                name
            }
        },
        onload: {
            
        },
        methods: {
            ID(e){
                this.id = e.target.value
            },
            NAME(e){
                this.name = e.target.value
            },
            login() {
                console.log('登录........');
                uni.navigateTo({
                    url: `/pages/index/index?id=${this.id}&name=${this.name}`
                });
            },
        }
    }
</script>

展示页面

<template>
        <view class="info">
            <text class="id">学号:{{id}}</text>
            <text class="name">姓名:{{name}}</text>
        </view>
</template>
<script>
    export default {
        data() {
            return {
                id:"123",
                name:"123"
            }
        },
        onLoad: function (option) {     //option为object类型,会序列化上个页面传递的参数
                this.id = option.id;
                this.name = option.name
        }
    }
</script>

相关文章

网友评论

    本文标题:微信小程序跨网页传输数据

    本文链接:https://www.haomeiwen.com/subject/fczukdtx.html