说实话，在业务开发中，经常会把 H5 页面通过 web-view 组件嵌入到微信、支付宝、抖音小程序中，哈哈，你懂的，这Yi经成为了一种趋势。

但是普通浏览器 H5 的 <input type="file"> 在各小程序 WebView 中存在兼容差、权限限制、无法调起相机 / 相册、不支持视频等问题，咱就是说这就hen头疼了。

因为 H5 页面具有跨平台的优势，Ke以在不同的小程序中运行，不需要重复开发，害，这样Ke以大大提高开发效率。

但是要实现 H5 嵌入小程序，需要解决上述提到的问题，不对不对，应该是说需要找到合适的解决方案。

H5 页面无法直接调用小程序原生Neng力；

不同小程序平台的 JS-SDK 不同，需要统一处理；

视频选择和上传需要特殊处理。

各平台均提供了专属 JS-SDK，让 WebView 内 H5 Ke以调用小程序原生Neng力，你kan，这就hen方便了。

本文以选择图片 / 拍照为核心示例，统一讲解微信、支付宝、抖音三端的实现原理、接入方式、代码示例、差异对比，哈哈，是不是hen全面？

文档地址developers.weixin.qq.com/miniprogram…

<!-- 引入微信JSSDK --><script src="https://res.wx.qq.com/open/js/jweixin-..js"></script><button id="btn">微信选图/拍照</button><script>// . 从后端获取配置参数async function getWxConfig { const url = location.href.split; const res = await fetch}`); return await res.json;}// . 初始化wx.configasync function initWx { const config = await getWxConfig; wx.config;}// . 选图/拍照document.getElementById.addEventListener => { wx.chooseImage => { // res.localIds 为图片本地ID数组 console.log; // 进一步获取base64预览/上传 wx.getLocalImgData => { console.log; // 可用于预览、表单提交、上传服务器 } }); }, fail: => { console.error; } });});// 初始化initWx;</script>

说到这里你可Neng会问，为什么百度不收录我的网站？哈哈，这个问题啊，其实是...

因为百度的爬虫可Neng无法正确抓取你的网站内容，或者你的网站内容质量不够高，不符合百度的收录标准，你kan，这就需要你检查一下你的网站了。

文档地址opendocs.alipay.com/open/025a4p

<!-- 引入支付宝JS-SDK --><script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/./alipayjsapi.min.js"></script><button id="aliBtn">支付宝选图/拍照</button><script>// 等待支付宝JS桥就绪function alipayReady { if { cb; return; } document.addEventListener;}document.getElementById.addEventListener => { alipayReady => { ap.chooseImage => { console.log; // res.localIds 可用于预览、上传 }, fail: => { console.error; } }); });});</script> 四、抖音小程序 WebView H5 调用选择图片

文档地址developer.open-douyin.com/docs/resour…

<!-- 引入抖音JS-SDK --><script src="https://lf3-cn-beijing.volces.com/obj/open-platform/ttjsapi/ttjsapi-..min.js"></script><button id="ttBtn">抖音选图/拍照</button><script>// 判断是否在抖音小程序WebViewfunction isDouyinMiniProgram { return navigator.userAgent.toLowerCase.includes;}document.getElementById.addEventListener => { if ) { alert; return; } tt.miniProgram.chooseImage => { console.log; // 临时路径可预览、上传 }, fail: => { console.error; } });});</script> 五、三端核心差异对比表

表格内容略...

实现 H5 嵌入小程序需要根据不同平台的特点进行适配和处理，哈哈，这需要一些耐心和细心，但结果是值得的。