潍坊软件网站开发,商务互联 网站,wordpress多用途主题排行,做海关授权的网站uniapp 可以同时兼容 APP 和 H5#xff0c;但有时候有些功能在 APP 中实现不了而在 H5 中可以实现#xff0c;就可以采用 web-view 的方式在 APP 模式下显示 H5 页面。但是 APP 和 H5 储存的参数是不能共享的#xff0c;例如token#xff0c;就涉及到 APP 与 H5 之间的参数…uniapp 可以同时兼容 APP 和 H5但有时候有些功能在 APP 中实现不了而在 H5 中可以实现就可以采用 web-view 的方式在 APP 模式下显示 H5 页面。但是 APP 和 H5 储存的参数是不能共享的例如token就涉及到 APP 与 H5 之间的参数传递。 H5 向 APP 传参引入 webview.js 调用 uni.postMessage({})如果提示uni.postMessage 不是function就在 webview.js 里面将 uni 替换掉如替换成 webUni在使用webview的页面通过 webview 上的 message 方法获取H5传递过来的参数。代码如下
// H5 页面部分代码
import webUni from /common/js/webview.js // 根据实际路径引入webview.js
// 传参数到app
webUni.postMessage({data: {name: 孙悟空,},
})// APP 页面部分代码
!-- #ifdef APP-PLUS --
web-view refwebView :srcwebUrl :webview-styles{progress: {color: #07cd88}} messagehandleMessage/web-view
!-- #endif --
// app 获取 H5传递过来的参数
handleMessage(data){console.log(data.detail.data[0].name, handleMessage)
}APP 向 H5 传参可以将参数拼接到 webUrl 上但是这种方法参数改变时 webUrl 如果存在就不太会自动更新参数如果参数改变时修改webUrl的话页面会重新加载还有一种方法是通过create webview来创建 H5 页面但是这种方式不能使用 message 方法获取 H5 传过来的参数2种方式代码如下
// 1. 拼接参数方式
// APP 页面部分代码
!-- #ifdef APP-PLUS --
web-view refwebView :srcwebUrl :webview-styles{progress: {color: #07cd88}} messagehandleMessage/web-view // webUrl H5_url?token token
!-- #endif --
// H5 获取 app传递过来的参数
// 通过location.href 即可获取// 2. 创建webview方式不能使用 message 方法
// APP 页面部分代码
let wv plus.webview.create(webUrl, // urlsipview, // id{// 这里是style},{token: token,name: 孙行者,}
)
const pages getCurrentPages()
const page pages[pages.length - 1]
const currentWebview page.$getAppWebview()
currentWebview.append(wv)// H5 获取 app 传递过来的参数
getAppMsg(){if (window.plus) {plusReady();}function plusReady() {if (plus.webview.getWebviewById(sipview)) {const token plus.webview.getWebviewById(sipview).tokenconsole.log(token) }}
},
