咫尺资讯站一一为您提供时下热门前沿动态

查看更多
首页> 支付宝小程序资讯> 小程序跳转小程序,H5页面方法总结

小程序跳转小程序,H5页面方法总结

阅读:797支付宝小程序


小程序现在日渐成熟,功能也越来越强大,我们今天来一起看看小程序跳转H5页面的问题。 小程序组件中有一个web-view,是一个可以用来承载网页的容器,会自动铺满整个小程序页面。 

注意:个人类型与海外类型的小程序暂不支持使用。 好的,我们直接上代码,然后再进行讲解。

小程序跳转小程序的配置:

重点需要在配置文件app.json 添加 属性navigateToMiniProgramAppIdList:['appid1','appid2']最低10个


wx.navigateToMiniProgram({ appId: '',//小程序appid path: 'page/index/index?id=123',//跳转关联小程序app.json配置里面的地址extraData: {//需要传递给目标小程序的数据,目标小程序可在 App.onLaunch(),App.onShow() 中获取到这份数据。 foo: 'bar' }, //**重点**要打开的小程序版本,有效值 develop(开发版),trial(体验版),release(正式版)  envVersion: 'develop', success(res) { // 打开成功 } }) 
appd-id:小程序appid
path:小程序路径extra-data:跳转小程序携带的参数


小程序跳转H5页面的wxml
        点击跳转到H5页面    wxml2:        
ok,没有任何废代码,但是可能有的小伙伴有疑问了,为什么一个跳转需要两个页面的wxml呢?别着急,且听我娓娓道来~
1.首先,web-view组件的属性src,正如你说看到的,这个就是设置网页链接的,但是需要特别注意的是web-view的src必须配置https协议的链接; 
2.其次,就是web-view组件只要配置了链接,它是铺满全屏且自动跳转的,所以这也就是为什么我这边需要先写一个navigator按钮,自主操作之后再让它跳转的原因; 
3.最后,web-view跳转的接口域名,需要配置在小程序开发设置的业务域名列表中。

【温馨提示】即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至1223636800@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎