uniapp路由传参使用密文_uni-app webView路由传参

web-view 是一个 web 浏览器组件，可以用来承载网页的容器

在uni-app开发中使用web-view经常单独封装做为一个页面作为承载2网页,往往app与网页间需要一些交互通讯。

用来承载网页的页面

export default {

data() {

return {

src: ''

}

},

//接收传递的参数

onload(option) {

this.src = option.src;

//打印结果在下图

console.log(this.src)

},

methods: {

}

}

首先通过路由跳转到此页面 获取到?后拼接的参数获取到要打开页面的链接，展示页面

(通常由一个事件触发)

onClick(params) {

//你要打开的网页链接

const urls = `http://192.168.43.137:8081/#/?params=${params}`

//这里是封装得统一跳转方法(兼容h5 app 小程序)

//跳转到放webview的页面拼接要打开的网页

this.ns.navigateTo({

url: `/pages/webView/?src=${urls}`

});

},

h5页面正常获取链接

问题来了 小程序端的参数丢了

经过排查发现了错误之处，两个问号在小程序这里冲突了

解决方法

在跳转到webView容器页面的参数通过encodeURIComponent编码

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码

最后不要忘了用decodeURIComponent解码哟

小程序端也正常获取到参数啦

webView网页与app通讯请参考以下链接 uni-app官网

webView详解