小程序跳转h5

小程序官方没有提供外部H5网页直接跳转到小程序的api,所以目前只支持小程序内嵌H5,并且只有内嵌的H5才能跳回小程序

举个例子

小程序上需要用web-view包裹
<!-- 地址有时候会需要传递参数 ,就先定义一个变量-->
<view class="container">
  <web-view src="{{url}}"></web-view>
</view>
//js部分
data: {
  type:'',
  member_id:'',
  org_id:'',
  url:'https://www.xxx.com/xxx/xxxx/xxx-1.html'
},
onLoad(options) {
  this.setData({
    type: options.type,
    member_id: options.member_id,
    org_id: options.org_id,
  })
  this.setData({
    url:`${this.data.url}?type=${this.data.type}&org_id=${this.data.org_id}&member_id=${this.data.member_id}`
  })
},
html
<!-- 首要引用wx开放文件https://res.wx.qq.com/open/js/jweixin-1.3.2.js!!!注意最好download到本地,速度会快些 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
小程序有传递参数过来,那么htm里面要获取参数。这个不是重点,不详细说明了。
// 官方代码示例
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })
其实里面有很多相关接口的限制,都差不多是和小程序里面的方法是一样的。但功能一般不复杂时,只涉及页面的跳转。

https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html 官方地址,最详细!

Bug & Tip

  1. tip网页内 iframe 的域名也需要配置到域名白名单。
  2. tip:开发者工具上,可以在 web-view 组件上通过右键 - 调试,打开 web-view 组件的调试。
  3. tip:每个页面只能有一个 web-viewweb-view 会自动铺满整个页面,并覆盖其他组件。
  4. tipweb-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
  5. tip:在 iOS 中,若存在JSSDK接口调用无响应的情况,可在 web-view 的 src 后面加个#wechat_redirect解决。
  6. tip:避免在链接中带有中文字符,在 iOS 中会有打开白屏的问题,建议加一下 encodeURIComponent
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。