微信小程序给webview传个参数

Posted 2023-04-27

小程序采用webview方式加载，但是那个路径是写死的，怎么在后面加个参数？
参考代码如下：
<web-view src="url"></web-view>
...
Page(
data:
url:"https....test.cc/index.php",
...
onLoad: function (options)
//能从这里面传个值给url吗？

url后面加上?id=x，加上以后再加载内容

【注意】不是异步传值wx.request，而是把url构建好后再让.wxm文件中的webview加载出来，否则在页面，输出echo $_GET["id"];一直是未定义

你从上个页面来到webView的时候将id参数传到webView当前页面，也或者你直接将带id参数的url拼接好传过来，然后webView页面在onload里面获取参数，如果只传id，那么就通过options.id获取到传过来的id然后拼接url，再setData，如果直接传拼接过来的url，那么就直接options.url 再setData就行了 参考技术A 可以用websocket，目前我也在找方法，貌似只有这个可行本回答被提问者采纳 参考技术B android webview本身的底层实现有关,和ios比起来,会慢一些,毕竟ios是使用c语言写的,本身的硬件配置也会有相差,所以慢是可以理解的.追问

慢不慢不是我关心的呀，我是想传参数给webview就像?id=1这么简单，只是这个1是变量

参考技术C

两种方式可以实现。

可以通过setData修改data里面url的值。url后面把参数拼好，使用setData修改data的url，就可以了。

如果参数是固定的值，那直接在src上面添加就好了。src="url&id=1"。如果参数值是动态的，那可以把参数值先保存到data里面，然后在src上直接调用src="url&id=id"。

参考技术D 采用js刷新追问

你的js是webview里内容还是小程序里的内容？
回答也太笼统了吧，刷新多少次也是没关系的吧，url不变，刷新有啥用
你这回答效果跟说“加油”是一样一样滴！

微信小程序webview内页面分享

需求：微信小程序内部使用webview嵌套了h5页面，现在要添加一个新的功能，用户在哪个页面进行了分享，被分享的用户从链接进来就跳转到哪个分享页面。

由于webview内部页面无法直接调起小程序的转发，所以为了实现webview中的页面分享，把h5页面地址作为参数传输，在接收的页面中取出并赋值到当前页面webview中的src中，即可进行展示。

三个注意点：

• 如何拿到webview中当前的页面链接，以及一些动态参数如何传递给小程序？

动态参数包括要跳转的h5页面地址，分享链接展示的图片
这些参数需要通过h5页面来进行获取，然后h5再传输给小程序，小程序分享的时候进行携带。

查阅开发文档webview看到bindmessage属性，网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组

H5网页需要引入JSSDK 1.3.2提供的接口wx.miniProgram.postMessage向小程序传输参数
webview通过bindmessage定义的方法接收h5传输的数据，需要注意的时，每次发送数据后数据都会添加到e.detail.data中的数组，并不会清除掉上一次传递的数据，所以我们取数组的最后一位元素。

由此，h5页面引入JSSDK 1.3.2，使用wx.miniProgram.postMessage发送参数，小程序页面使用webview的bindmessage属性接收参数即可完成动态参数的传递。

• 被分享用户打开分享链接进入跳当前页还是新建一个页面？

建议新开一个页面。

• 特殊字符的编码问题

当url作为参数传递，地址中出现”#”号时，”#”及其后面的字符串都会被忽略，不会被发送到服务器。因为浏览器将一个url视为一个html页面，而”#str”表示该页面的id为str的块

可使用encodeURIComponent和decodeURIComponent编码解码。会将这些特殊字符转义。

 

h5内代码实现

//先引入微信JS-SDK 1.3.2
wx.miniProgram.postMessage({ data: {url:\'http://www.xxx.com\',title:\'xxx\'} })

首页wxml代码实现

<!--home.wxml-->
<web-view src="{{url}}" bindmessage="getmessage"></web-view>

首页js代码实现

  
// home.js
// 接收web-view传来的数据
  getmessage(e) {
    let obj = e.detail.data[e.detail.data.length - 1];
    this.setData({
      message:obj
    })
  },
　// 配置分享
  onShareAppMessage: function () {
    let that = this;
    return {
      title: that.data.message.title,
      path: \'/pages/share/share?url=\' + encodeURIComponent(that.data.message.url),
      imageUrl: that.data.imageUrl
    }
  },

分享页js代码实现

  //share.js
　onLoad: function (options) {
    this.setData({
      url:decodeURIComponent(options.url)
    })
  },

分享页wxml代码实现

<!--share.wxml-->
<web-view src="{{url}}"></web-view>