uniapp微信小程序与h5页面_uniapp h5打开微信小程序
小程序调用本地文件管理器
在小程序中不支持Plus等对象,在app端可以进行使用来调用出相关的文件管理器,但是在小程序不可以,想要打开如图的文件管理器,可以通过使用web-view跳转到h5页面之后通过h5页面中input type=\"file\"来打开,h5页面获取到参数之后将数据传递给小程序需要使用额外引入的js文件
h5页面向小程序传递信息
在vue项目中index.html页面中
document.addEventListener(\"UniAppJSBridgeReady\", function () { uniWebview.getEnv(function (res) { console.log(\"当前环境:\" + JSON.stringify(res)); }); });
这个在uniapp文档中的webview中可以看到。
同时需要修改uni.webview.1.5.3.js文件。
也可以看这个uniapp中微信小程序和H5相互跳转及传参(webview)_webview向h5传值-CSDN博客
在需要触发的地方调用
uniWebview.postMessage({ data: { action: \"我要向微信端传递的数据\", phoneNumber: result.res.requestUrls[0], }, }); uniWebview.navigateBack();
我在使用的时候没有navigateBack();传递的数据是没有返回给小程序的。需要返回到小程序页面
在小程序中接受传递过来的数据
其中的@message是接受方法
线上情况问题
想要h5页面可以通过wx.miniProgram.navigateBack跳转回小程序,首先需要将h5页面的域名添加到小程序的业务域名内。其次webview的使用是要在公司主题的情况下,个人是不支持的。
h5页面无法跳转回小程序
由于,我不能自己发布线上h5页面,所以出现的问题,我都改了,我猜测不能传递的问题。
第一点:要使用线上的https://res.wx.qq.com/open/js/jweixin-1.6.0.js,因为我这里只有微信小程序不需要考虑其他所以就只用小程序的线上。
第二点:navigateBack的顺序问题,将postMessage放在了后面。还有其他的类型方式
const weChatGo = () => { console.log(\"跳转\"); wx.miniProgram.navigateBack({ delta: 1 }); console.log(\"跳转成功\"); wx.miniProgram.postMessage({ data: { action: \"我要向微信端传递的数据\", phoneNumber: pathLoad, }, });};const weChatGo2 = () => { console.log(\"跳转1\"); wx.miniProgram.navigateBack(); console.log(\"跳转成功1\"); wx.miniProgram.postMessage({ data: { action: \"我要向微信端传递的数据\", phoneNumber: pathLoad, }, });};const UniGo = () => { console.log(\"跳转2\"); wx.miniProgram.postMessage({ data: { action: \"我要向微信端传递的数据\", phoneNumber: pathLoad, }, }); console.log(\"跳转成功2\"); wx.miniProgram.navigateTo({ url: \"/pageUpload/order/order?filePath=\" + `${pathLoad}` + \"&filename=\" + `${dayjs().format(\"YYYY-MM-DD_HH.mm.ss\")}_${Math.random() .toString(36) .slice(2, 15)}`, });};