uniapp打包的h5与小程序web-view间的通讯、跳转

查询资料，网上千篇一律的都是围绕着官方文档展开的，内嵌的h5都是html，没有uniapp的写法，经过尝试，找到了一个方便快捷的方法，以下为本次成功的案例。
uniapp关于webview标签的使用 https://uniapp.dcloud.net.cn/component/web-view.html#web-view
小程序关于web-view标签的使用 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
web-view中有些功能是受限，详细可查看上链接。例如支付功能受限，可通过与小程序间通信或者跳转传值在小程序端进新支付

小程序端(此代码为小程序原生代码)
此功能用到了小程序的web-view标签，用bindmessage进行监听内嵌页面传输上来的数据

<!--pages/webview/webview.wxml-->
<web-view src="{{src}}" bindmessage="onMessage"></web-view>

js中只需添加bindmessage对应的方法即可

<!--pages/webview/webview.js-->
Page({data: {},onMessage(e) {console.log('接收到H5页面的消息:', e.detail);}
})

uniapp端
1、首先在项目根目录执行命令
$ npm install weixin-js-sdk --save
2、待安装好之后就可以在所需调用的页面进行操作

// #ifdef H5
var weixin = require('weixin-js-sdk');
// #endif
export default {...methods: {yourFunction(){// #ifdef H5weixin.miniProgram.getEnv(function(thisenv) {console.log('当前环境weixin：' + JSON.stringify(thisenv));});//向小程序发送信息weixin.miniProgram.postMessage({data: {action: 'pay',message: 'message',data: res,}});// 返回，小程序端接收信息需要特定的动作才能触发，故后进行返回操作weixin.miniProgram.navigateBack();// #endif},yourFunctionNavigateTo: async function(){// #ifdef H5weixin.miniProgram.getEnv(function(thisenv) {console.log('当前环境weixin：' + JSON.stringify(thisenv));});// 跳转到小程序的页面(注：小程序接收参数时特殊字符会被截断，所以一下把"?"转成"%3F","="转成"%3D")weixin.miniProgram.navigateTo({url : "/pages/pay/index?pages=pages/order/payment%3Forder_sn%3D123456"});// #endif },}...
}

而跳转小程序页面接收参数的方法也是比较简单的

<!--js-->
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log('接收到的参数----',options);},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},})