微信小程序中嵌入HTML页面

微信小程序已经开放足够多的功能API，但有时因为个别需求实现起来比较麻烦或各种限制，这时可以通过嵌入html的方法转辗实现。

标签简介

web-view 标签可载入网页，当小程序页面使用时会自动铺满整个页面，别的标签会展示不出来，html页面需要在后台配置业务域名下。 注意：个人类型的小程序暂不支持使用。

＜web-view  src="https://testurl.cn/webview" bindmessage="bindmessage" bindload="bindload" binderror="binderror">＜/web-view>

参数详解

• src：https网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。
• bindmessage：网页向小程序 postMessage 时收到消息，接收的data是postMessage 的参数组成的数组消息格式：e.detail = { data }。只在特定条件下会触发：小程序后退、组件销毁、分享、复制链接。
• bindload：网页加载成功时候触发此事件
• binderror：网页加载失败的时候触发此事件 上面几个参数最重要的是src，其他其实我很少使用。

页面交互

在载入网页后完成功能后需要回到小程序主体，可编辑页面使用JS方法来进行交互。

• 引入JS库到页面，其中内置miniProgram对象可供使用。下载地址：点击保存解压后引入
• 内置对象方法
  1. wx.miniProgram.navigateTo(Object object)：保留当前页并跳转到应用内的某个页面，非导航栏页面

     wx.miniProgram.navigateTo({  
     url: '/index/index',  //跳转的小程序Page路径
     success: function(res) {
     res.eventChannel.emit('eventName', { data: 'this is from html url' })  }  //跳转后可通过事件通道传递值   })
     //-------------------------------------
     //在跳转的页面onload方法中可以获取到传递的值
     const eventChannel = this.getOpenerEventChannel();
     eventChannel.on('eventName', function(data) {
     console.log(data);  //输出 this is from html url   })

  2. wx.miniProgram.navigateBack(Object object)：关闭当前页面返回上一层

     wx.miniProgram.navigateBack({
     delta:1,  //返回层级，若数量大于堆积的页面数量则跳到首页
     success:funciton(res){ }
     })

  3. wx.miniProgram.redirectTo(Object object)：关闭当前页并跳转到应用内的某个页面，非导航栏页面。与navigate的区别是这个不会把页面压入页面栈，不能用navigateBack返回到此页

     wx.miniProgram.redirectTo({
     url: '/index/index',  //跳转的小程序Page路径
     success:function(res){ }
     })

  4. wx.miniProgram.switchTab(Object object)：转到某个导航栏页面并关闭其他所有非导航栏的页面

     wx.miniProgram.switchTab({
     url: '/index/index',  //跳转的小程序tabBar路径
     success:function(res){ }
     })

  5. wx.miniProgram.reLaunch(Object object)：转到任意页面并关闭所有页面，不是重启小程序，只是清空页面。

     wx.miniProgram.reLaunch({
     url: '/index/index',  //跳转的小程序页面路径
     success:function(res){ }
     })

  6. wx.miniProgram.postMessage(Object object)：向小程序web-view绑定的bindmessage方法传值。上面说过这只有在特定条件下会触发，所以在调用后需要实现条件才行否则无效，比如调用后主动navigateBack。

     wx.miniProgram.postMessage({
     data: JSON.stringify({
     service: 'sendMessage',
     data: 'all done'   })    });

  7. wx.miniProgram.getEnv(function)：获取当前环境，用于判断页面打开载体

     wx.miniProgram.getEnv(function(res) { 
     console.log(res.miniprogram) })
     //或者也可使用JS对象判断是否在小程序环境中
     window.__wxjs_environment === 'miniprogram'

开放API

在小程序中打开的网页也可以使用微信JS-SDK获得开放能力。和公众号H5不同可使用的API是受限的，以下列出可用的能力，具体使用方法和参数说明请查看官方相应的文档说明：JS-SDK官方说明文档

使用提示

tip：网页内 iframe 的域名也需要配置到域名白名单。 tip：开发者工具上，可以在 web-view 组件上通过右键 – 调试，打开 web-view 组件的调试。 tip：每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件。 tip：web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。 tip：在 iOS 中，若存在JSSDK接口调用无响应的情况，可在 web-view 的 src 后面加个#wechat_redirect解决。 tip：避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent