微信小程序WebView与H5 通信方式

wx.miniProgram.navigateTo({ url: '/h5/loading-page', })
wx.miniProgram.navigateTo({ url: '/h5/loading-page?type=ccccc', })
wx.miniProgram.navigateTo({ url: '/h5/loading-page?type=aaaaaa', })

//js项目直接引入sdk;


//vue项目使用引入sdk //需要安装依赖 npm install weixin-webview-jssdk
//使用的页面引入 import wx from "weixin-webview-jssdk"; //H5页面

     

     



var vm = new Vue({
  el: ".container",
  data: {
    input1: "333333",
  },
  created() {},
  methods: {
    //向小程序传递参数foo
    send1() {
      wx.miniProgram.postMessage({ data: { foo: this.input1 } });
    },
  },
});

// 获取应用实例
const app = getApp()
export default {
  //页面的初始数据
  data() {
    return {
      url: '',
      Title:''
    }
  },
  //生命周期函数--监听页面加载
  onLoad: function (options) {
    if (options.from && options.from === 'electron') {
      this.url = decodeURIComponent(options?.url)
      console.log('webview url', this.url)
    } else {
      this.url = options?.url || app.globalData.H5LinkUrl
    }
  },
  // 用户点击右上角分享
  onShareAppMessage(res) {
    console.log("接收H5传入的参数this.data.Title",this.data.Title);
    return {
      title: this.data.Title,
      path: '/pages/index/index?type=index',
      imageUrl: 'https://picsum.photos/100/200'
    }
  },
  //webview 组件的三个原生事件
  bindload(){
      console.log('webview load success')
  }
  binderror(){
      console.log('webview load error')
  },
  methods: {
    //网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组
    getMessage:function(res){
      console.log("H5传递过来的参数",res.detail.data);
      this.setData({
        Title: res.detail.data[res.detail.data.length - 1].foo
      })
    }
  }
}

localStorage.setItem('h5key','value')
wx.setStorageSync('wx-key', 'value')