小程序直接打开内嵌h5界面进行调试问题

小程序直接打开内嵌h5界面进行调试问题,第1张

程序直接打开内嵌h5界面进行调试问题:

当默认第一个界面就是打开内嵌h5界面,若报错,webview覆盖了vconsole控制台,看不到,可以右上角打开发送给朋友 *** 作,会打开小程序首页,进而可以查看到vconsole控制台,查看信息

需求:

1、将已开发好的H5页面,嵌入先有的小程序。

2、并且要实现H5支付功能

解决方式 :web-view

1、 登陆 小程序管理后台

a . 如果是公众号 。则进行双向绑定

完成这一步 ,那么基本上就差不多成功了一大半

2、在小程序里面嵌入h5

web-view

文档里面有的东西,就不赘述le~

a.在小程序里面定义一个你想要的H5入口

b. 新建一个页面,用来放H5的链接

ok~现在已经完成h5的嵌入

3、h5实现支付功能 - 唤醒微信支付

目前只有这种实现方式。等待微信更新 支持小程序的web-view可以唤醒微信支付

总结:

个人见解: 微信内置浏览器, 打开微信公众号H5页面,也可以唤醒微信支付。微信小程序里面web-view相当于小程序的内置浏览器,暂时不支持唤醒微信支付。虽然小程序是在微信里面,但是web-view又和微信内置浏览器不同~ 感觉微信想把小程序独立出来~

需要用到小程序的web-view, 官方文档链接

web-view是承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用。写法如下:

注:当在微信开发中工具里返回“{"base_resp":{"ret":-1}}”时,需要点左上角“设置”--“项目设置”--勾选“不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书”

因为外部h5无法跳转到小程序,因此需要把h5内嵌到小程序的web-view中。

一:首页小程序内嵌h5网页,内嵌这一步就相当于上面的小程序跳转h5:

二:然后在内嵌的网页里引入js,调用wx.miniProgram.navigateTo跳转小程序方法,可在url后拼接要传的参数:

三:小程序接受参数的页面:

index.wxml:

index.js

这样就从h5跳到小程序指定的页面并且可以拿到我们想要传的参数

原文作者技术博客: https://www.jianshu.com/u/ac4daaeecdfe

95后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。

欢迎留言交流


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/11233680.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存