uniapp---传参(对象)--web-view


1.index.vue

<template>
    <view class="content">
        <view class="text-area">
            <view class="top">本页面为index</view>
            <view class="mid">跳转信息页面(带参数)参数类型为对象数组info</view>
            <view class="bot" @click="go_info_json">点击跳转到信息页面info</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                info: [{
                        id: 1,
                        name: 'uniapp',
                        url: 'https://uniapp.dcloud.io/'
                    },
                    {
                        id: 2,
                        name: '微信开放文档',
                        url: 'https://developers.weixin.qq.com/doc/'
                    },
                    {
                        id: 3,
                        name: 'vue',
                        url: 'https://cn.vuejs.org/'
                    }
                ]
            }
        },
        onLoad() {

        },
        methods: {
            go_info_json() {
                console.log(this.info);
                var info = JSON.stringify(this.info);
                uni.navigateTo({
                    url: '../info/info?info=' + info
                })

            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .text-area>view {
        margin-top: 20rpx;
        text-align: center;
        border: 1rpx solid #4CD964;
        font-size: 20rpx;
        padding: 20rpx;
    }
</style>

2.info.vue

<template>
    <view class="content">
        <view class="text-area">
            <view class="item" v-for="(item,index) in info" :key="index">
                <text class="name">{{item.id}}.{{item.name}}</text>
                <text class="url" @click="itemClick(item.url)">{{item.url}}</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                info: []
            }
        },
        methods: {
            itemClick(data) {
                uni.navigateTo({
                    url: '../webview/webview?url=' + data
                })
            }
        },
        onLoad(options) {
            // console.log(options.info);
            if (options) {
                this.info = JSON.parse(options.info);
                console.log(this.info)
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .text-area {
        padding: 40rpx;
    }

    .item {
        display: flex;
        flex-direction: column;
        margin-top: 20rpx;
    }

    .item .name {
        font-family: Georgia, 'Times New Roman', Times, serif;
    }

    .item .url {
        color: #007AFF;
        margin-top: 20rpx;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #4CD964;
    }
</style>

3.webview.vue

<template>
    <view class="content">
        <web-view :src="url"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                url: ''
            }
        },
        methods: {

        },
        onLoad(options) {
            // console.log(options);
            this.url = options.url;
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
</style>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM