uniapp 使用web-view外接三方

*neverGiveUp*2023-12-01 17:08

来源

前阵子有个需求是需要在原有的项目上加入一个电子签名的功能，为了兼容性和复用性后面解决方法是将这个电子签名写在一个新的项目中，然后原有的项目使用web-view接入这个电子签名项目；

最近又有一个需求，是需要接入第三方的页面，也用到了web-view组件，那今天就来总结下这两个需求的共同点。

web-view

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

注意：

各小程序平台，web-view 加载的 url 需要在后台（微信公众平台）配置域名白名单，包括内部再次 iframe 内嵌的其他 url

代码实现

--mine.vue--

复制代码

// 跳转页面
// 如果你跳转的时候需要传参而且这个参数是url地址或者是含有特殊字符，需要用encodeURIComponent（）编码，否则会丢失参数
 uni.navigateTo({
          url: `../../pagesSub/mine/memberUnionPaySignUrl/memberUnionPaySignUrl?url=` + encodeURIComponent(res)
        })

--memberUnionPaySignUrl.vue--

复制代码

<template>
  <view class="memberUnionPaySignUrl">
    <web-view ref="mapSelect" id="_mapView" :src="paySignUrl"></web-view>
  </view>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'
@Component({
  name: 'memberUnionPaySignUrl',
  components: {}
})
export default class memberUnionPaySign extends Vue {
  paySignUrl: any = null；// 你要跳转的三方地址

// 在onLoad()生命周期中接受上一个页面的传参
  onLoad(options) {
    // console.log('url参数=》', decodeURIComponent(options.url))
    // 获取到url参数
    this.paySignUrl = decodeURIComponent(options.url) // 接受url地址需要解码
  }
}
</script>

<style  lang="scss" scoped>
</style>

推荐资料

https://uniapp.dcloud.net.cn/component/web-view.html#web-view

https://blog.csdn.net/qq_36611673/article/details/124974609