uni-app web-view简单示例

初学app开发，登记下，以后使用方法。

pages.json中pages下添加

{
            "path": "pages/main",
            "style": {
                "navigationBarTitleText": "首页"
            }
        },
        {
            "path": "pages/webview",
            "style": {
                "navigationBarTitleText": "浏览"
            }
        },

 

main.vue页面代码：

<template>
    <view class="history">
        <view class="list">
			<button v-for="(item, index) in list" @click="itemClick(item)" >
				{{item.title}}
			</button>
        </view>
	</view>
</template>

<script>
    export default {
        data() {
            return {
				userToken:'',
				webUrl:'',
				index:0,
                list: [
					{
						title:'标题1',
						link:'http://172.88.1.20:803/page1'
					},
					{
						title:'标题2',
						link:'http://172.88.1.20:803/page2'
					}
				]
            }
        },
        methods: {
            itemClick (data) {
				console.log(data.link);
                 // 跳转到内部窗口并且传递链接
                uni.navigateTo({
                    url: `webview?url=${data.link}&title=${data.title}`
                })
            },
			setToken(){
				uni.setStorageSync('user_token', this.userToken);
				
			},
			getToken(){
				const token = uni.getStorageSync('user_token');
				    if (token) {
				        console.log(token);
						this.userToken=token;
						this.webUrl=webUrl+"?token="+token
				    }
				
			}
        },
        created() {

        }
    }
</script>

 

webview.vue页面代码：

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

<script>
    export default {
        data() {
            return {
                url: '',
				title:''
            }
        },
        onLoad(e) {
             // 获取传递过来的链接
            this.url = e.url
			this.title=e.title;
			uni.setNavigationBarTitle({
			            title:this.title
			        });
        }
    }
</script>