微信小程序嵌入H5页面
前言
需求:在小程序中嵌入一个H5页面,并提供一个可跳转小程序其他页面的按钮。
主要用到微信小程序的 web-view 组件,详细用法: web-view 微信官方文档。
需要注意的是个人小程序不支持!
1. 嵌入H5
当我们写好H5后,可以在小程序页面中通过以下代码嵌入页面,页面会自动铺满,需要做好移动端适配:
1 | |
上线后,这里的域名需要加入小程序的合法域名中才可嵌入。本地测试时,在小程序本地设置中勾选不校验域名即可!
2. 跳转小程序内页面
需要引入微信SDK,可以直接引入官方提供的CDN:
1 | |
或使用npm:
1 | |
在H5页面上中引入:
1 | |
调用微信开放接口进行页面跳转:
tabbar页面:
1 | |
非tabbar页面:
1 | |
思考
看了一些资料,发现有跳到其他小程序的需求,目前看到的解决方案就是跳到一个中继页(小程序自身页面),然后通过小程序跳转到其他小程序。
以上!
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!