uni_app 跳轉到外部html5 的頁面 (web-view) 的一些使用

一、不傳參數的使用

<web-view  url="./index.html"></web-view>

// 平臺差別請關注 https://uniapp.dcloud.io/component/web-view?id=web-view

二、帶有要傳遞的參數：（很少說直接上代碼）

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

<script>
export default {
　　data() {
　　　　return {
　　　　　　url:'',//定義一個url變量來存取 url路徑
　　　　　　userInfo: getApp().globalData.userInfo,
　　　　　　userName:'',
　　　　　　userGender:'',
　　　　　　createTime:'',
　　　　　　arr:[]
　　　　}
　　},
　　onLoad(option ){
　　　　this.arr = option.arr
　　　　this.init()
　　},
　　methods: {
　　　　init(){
　　　　　　this.userName = this.userInfo.userName;
　　　　　　this.userGender = this.userInfo.userGender;
　　　　　　this.createTime = this.userInfo.createTime;
　　　　　　if(this.userGender == 1){
　　　　　　　　this.userGender ="男";
　　　　　　}else if(this.userGender == 2){
　　　　　　　　this.userGender ="女";
　　　　　　}
　　　　　　this.url = "../../static/bollReport/report.html?arr="+encodeURIComponent(this.arr)+"&name="+encodeURIComponent(this.userName)+"&age="+encodeURIComponent(this.createTime)+"&gender="+encodeURIComponent(this.userGender);

}
}
}
</script>

注意： uniapp 的 web-view 的參數傳遞  的字必需要用 encodeURIComponent(str) 轉碼；

encodeURIComponent() 函數可把字符串做爲 URI 組件進行編碼。

該方法不會對 ASCII 字母和數字進行編碼，也不會對這些 ASCII 標點符號進行編碼： - _ . ! ~ * ' ( ) 。

encodeURIComponent() 函數 與 encodeURI() 函數的區別之處，前者假定它的參數是 URI 的一部分（好比協議、主機名、路徑或查詢字符串）。所以 encodeURIComponent() 函數將轉義用於分隔 URI 各個部分的標點符號。