我们愿意为您提供的技术支持和服务支付费用。
公司电商项目是使用的apicloud(壳子)+html5 实现的
现在因为需要将项目整体迁移至uni-app 并且需要兼容鸿蒙next系统
迁移后存在以下问题:
1、uni-app 通过webview打开应用外部界面,外部界面需要调用uni-app壳子的相关api。如:定位、扫码、权限申请、图片上传、数据缓存/获取 等功能。
问题:html5界面可以发送消息到壳子上,壳子接收后需要将定位信息同步返回至html5界面。
案例:
a. 在订单评价的的时候,用户需要上传图片,我需要调用uni-app的uni.chooseImage
,用户选择图片并给webview页面进行返回。
b. 扫码: 页面调用uni-app的uni.scanCode 然后将结果给webview页面进行返回
c. 定位:获取用户当前位置信息,同理给webview页面进行返回
d. 监听器:当前界面发送请求,告诉其它webview打开的界面进行刷新。如:退出登录、切换账户,理论上应该 其它webview界面数据应该重新刷新。
这个比较复杂
1、使用webview消息接收
2、vue组件间的通信【这里我们自己可以实现】
3、使用webview消息发送
等等
2、接收和返回消息 已同步的方式进行。
参考插件:uni-js-bridge。
插件地址:https://gitee.com/guome/uni-js-bridge【但是这个不支持鸿蒙】
案例:
客户端(壳子)
this.$refs.webViewBridge.registerHandler('nativeShow', (data, callbackFunction) => {
// data: h5给客户端的参数
uni.showToast({
title: 'nativeShow' + JSON.stringify(data),
icon: 'none'
})
// 调用此函数,触发H5回调,里面的参数是给H5用的
// 注意,如果不调用callbackFunction那么H5就无法触发回调函数
callbackFunction({
toH5Data: '这里的参数是提供给H5的回调函数的' // key是可以随便取的
})
})
H5端
UniJsBridge.callHandler(
"nativeShow", // 注意这里的名字必须和上面的对应上
{ nativeShowData: "nativeShow" }, // 这个参数是传递给uni-app的
res => {
// res:就是上面的callbackFunction的参数
// 注意:如果uni-app不调用callbackFunction,那么这个回调函数是不会执行
//这里可以执行我的业务逻辑
alert(JSON.stringify(res));
}
);
3、插件必须需要兼容鸿蒙next、安卓、ios、vue3、公众号、小程序。
公众号、小程序则调用微信的 jssdk,我们自行修改,保证webview通信正常即可
我们愿意为您提供的技术支持和服务支付费用。
为了更高效地沟通合作细节,我提供了以下联系方式:
电话:18182444388
邮箱:346747110@qq.com
微信:Johnny-Logic
请您在方便的时候与我们联系,我们期待与您进行进一步的沟通。
1 个回复
原生插件开发哦 - 插件开发 | 个人接单 | 已上线多个原生插件| iOS+Android |插件定制| 主页 https://ask.dcloud.net.cn/question/91948
可以做
专业插件开发 q 1196097915
主页 https://ask.dcloud.net.cn/question/91948