uniapp 小程序嵌套H5开发总结

项目需求是在uniapp小程序项目中嵌套H5页面,H5返回小程序需要传值给小程序进行通信。

好,百度一查确实可以实现 用的uniapp提供的web-view(https://uniapp.dcloud.io/component/web-view.html#web-view经验证实,做功能之前先看官网, 能少走很多弯路 )就可以与外部链接通信。

那如何实现呢?

1.在uniapp小程序项目创建web-view页面uniapp 小程序嵌套H5开发总结_第1张图片

项目代码 







2.创建一个html项目写H5页面

uniapp 小程序嵌套H5开发总结_第2张图片

H5首页代码 




    
    
    
    
    
	
	



	

几个关键点

1.引入JS-SDK uniSDK 必须引入,顺序不能错

uniapp 小程序嵌套H5开发总结_第3张图片

 2.调用uniapp api之前  先加载一段代码

uniapp 小程序嵌套H5开发总结_第4张图片

 3.跳转传值

uniapp 小程序嵌套H5开发总结_第5张图片

小程序在onload(options)里接收 

这里其实官网推荐@message传值  但是

@message: 网页向应用 postMessage 时,会在特定时机(后退、组件销毁、分享)触发并收到消息。 H5 暂不支持(可以直接使用)

我做的时候用的uni.naviageTo跳转会小程序  小程序端并不会立即打印  而是在跳转一个页面才打印,所以我才用了路由传参 。(其实把naviageTo变成redirectTo或者switchTab 也可以在web-view拿到传值,这也是后来才知晓的  )

你可能感兴趣的:(小程序,前端,html5)