记录一次使用钉钉小程序使用内嵌网页上传文件

使用小程序本身提供的小程序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。我就在这里，被坑了大半天。

记录一下，继续学习去了，拜拜!!!
有问题的可以在评论区或者私信我，我会给予力所能及的解答