18910140161

uni_app跳转到外部html5页面(网页视图)的一些用法

顺晟科技

2021-09-23 10:50:50

58

1、不传参数的使用

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

// 平台差异请关注 https://uniapp.dcloud.io/component/web-view?id=web-view

2、带有要传递的参数:(不多说直接上代码)

<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 各个部分的标点符号。

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航