使用小程序本身提供的小程序web-view
第一步:首先要打通小程序和内嵌h5之间交流的通道
小程序部分
<web-view id="起个自己的定义的名字" :src="`${h5Url}`" @message="通信的方法"></web-view>
import 'dingtalk-jsapi/entry/mobile';
export default {
data() {
return {
h5Url: '替换为实际的H5页面地址',
token: this.$store.state.userInfo.token,
webViewContext: ''
};
},
onLoad() {
this.webViewContext = dd.createWebViewContext('起个自己的定义的名字')
},
methods: {
test(e) { //接收来自网页的信息和传递信息的作用
this.webViewContext.postMessage({
token: this.token
// 携带token
})
console.log('内嵌网页传到小程序',e);
},
},
};
网页部分js
这里,只放部分的代码供参考使用
let token = ''; //上传时设置的文件头token
dd.onMessage = function(e) { //接收小程序传过来的token
console.log('接收消息',e)
token = e.token
}
let mess = '文件上传后想给小程序的信息';
my.postMessage({
message: mess;
})
//文件提交格式力推 'Content-Type': 'multipart/form-data',
接下来是监听文件上传的form表单,然后用axios去向后端请求,then再做处理
第二步:有几个坑,主要是不同平台的问题,安卓用起来都没什么问题,就是苹果有几个特别的坑。
1.苹果在内嵌网页(web-view)中好像做了什么特别的限制,部分js功能失效了,比如提示框之类,具体等以后的大佬解答吧
2.苹果提交formData表单数据是有问题的,需要在内嵌h5的头部导入一个同时兼容安卓和ios的js,即可
3.因为我之前选择了uniapp开发嘛,但是uni.onMessage、uni.postMessage这几个方法没有考虑ios用不了,在内嵌view开发中,我建议不止是钉钉小程序要用,什么平台的小程序就用什么开头的,比如支付宝就用my,微信就用wx,不要用uni。我就在这里,被坑了大半天。
记录一下,继续学习去了,拜拜!!!
有问题的可以在评论区或者私信我,我会给予力所能及的解答