小程序嵌套网页步骤 第1篇
选择“小程序项目”后,出现如下界面:
登录 ,我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。
设置后为:
确定后,弹出如下界面:
代码如下:
添加H5页面后,编译-》预览,再打开微信,扫预览二维码,就大功告成了。
自己整理的文档目录结构如下,如果有需要,可以从最下方的链接进行下载:
源码和具体的使用细则,可以到下载源码及使用说明 。
小程序嵌套网页步骤 第2篇
笔者本以为在uniapp中就可以直接调用uni的方法,结果在调用就会报错:类型“Uni”上不存在属性“postMessage”。ts(2339)
一番查看后发现uni确实没有导出postMessage方法,再次看看文档,发现需要引入文件,但是在引入过后也依然不能调用,人麻了。
花费了不少时间,最后发现引入的文件也导出了uni对象,会被uniapp本身的uni对象覆盖,改源码吧,把下载到本地,全局搜一下uni,把定义的uni与导出的uni改为webUni,这是笔者修改过的文件。然后把文件放在本地(笔者放在了src/static/js下),在文件中按官方文档正常引入
小程序嵌套网页步骤 第3篇
在webview页面加载的时候获取H5地址 并添加在web-view标签上
如果页面中很多地方需要跳转H5页面 并且H5页面是基本固定的域名 可以将进行封装处理
案例:
在其他页面就是使用navigateToWeb 跳转H5页面
H5页面中提供一下方法回到小程序页面及给小程序页面传值
小程序和网页之间的通信是单向的,即只能从网页发送消息到小程序,不能从小程序发送消息到网页。
小程序可以在跳转之前在url携带一些参数,或者直接通过后端缓存的方式 在小程序存储缓存换取缓存id,拼接在url上,跳转到H5之后通过缓存id获取缓存数据
总结