[总结]测试了小程序的内嵌网页及例子

[总结]测试了小程序的内嵌网页

1. 内嵌网页的域名需要在小程序管理后台设置为业务域名，也就是需要先加入白名单
一个小程序最多可以添加 20 个业务域名，且一年只可修改 50 次业务域名。
2. 内嵌的网页用起来跟微信内打开体验差不多，下拉也会显示“网页由 XX 域名提供”
3. 内嵌的网页可以播放视频，但是视频必须是在白名单域名内的
我测试把视频放在七牛，就无法播放，一直在加载中
4. 内嵌的网页可以嵌入 iframe，而且 iframe 打开的页面可以不在白名单内
iframe 我试了百度首页，淘宝宝贝详情页，我自己的另一个不在白名单域名下页面，都能够打开。
这应该是 bug 而不是 feature。
5. 内嵌网页想与小程序通信，只能通过 JSSDK，但是目前只开放了部分接口，具体看开发文档
也就是如果你之前基于微信服务号授权做的页面，就没办法直接在小程序内嵌网页使用了，因为没办法授权。
6. 但是，如果已经微信打开并且授权过的页面，在小程序打开也是登录状态
也就是说，微信内置浏览器和小程序内置浏览器其实是同一个实例，至少都共享 cookie 了

H5嵌入例子

自从微信小程序支持内嵌网页之后，呼声高涨得不得了。的确，这个确实让我开发我们公司的小程序高效了很多，主要是可以引入现有的功能完整的普通网页。

需求是这样子的：小程序启动授权等操作成功后直接跳转到内嵌网页，内嵌的网址也就是公司的官网产品项目，而后，产品项目里面的各个网页都能支持分享操作，当然，对方打开的一定是你分享的那个页面而不是整个小程序初始页面。

解决思路：官方提供的转发接口 onShareAppMessage 中自定义路径即可转发指定的页面。使用 web-view 存放内嵌网页，路径以参数的形式传递，但初始化加载页面的时候再填充路径。

<web-view src="web_src"></web-view>
一开始是想着既然内嵌网页的路径可以动态添加，那我转发时再重新跳转回内嵌网页，附上我转发的这个地址就好了，但是，但是，打开转发了的页面时，竟然提示找不到路径，可谓愁死人了。控制台打印检查发现，onShareAppMessage(options) 中 options 携带了一个参数 webViewUrl，即当前转发的文件的路径，在转发成功之后，通过

this.setData({
    web_src: options.webViewUrl
})
赋值后，打开的转发页面依旧提示找不到页面。经仔细研究 onShareAppMessage 接口中各个值的含义和功能后，得出以下结论

onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      success: function(res) {
        // 转发成功
      },
      fail: function(res) {
        // 转发失败
      }
    }
  }
path：转发路径，  注：当前页面 path ，必须是以 / 开头的完整路径
个人对这个 path 的理解是这样子的，微信小程序接口里面的path，是不是 指代微信小程序里跳转到其他页面的路径，如果一个内嵌路径无法实现转载操作页面和分享页面，那我就分开好了，再加一个内嵌路径来专门存放转发的结果。果不其然，这样子一处理，还真能实现了需求，话不多说，上代码：

步骤一：准备工作，在 app.js里 定义一个全局变量，用于存放 内嵌网页的地址，如，

globalData: {
    userInfo: null,
    ctxPath: 'https://xxxxxx',
}
步骤二：在初始化页面，即首页存放一个按钮，定义跳转到内嵌网页的事件，如，

<button class="welcom-button" bindtap="toHome">开启</button> 

对应的事件为：

toHome:function(){
        let that = this;
        wx.redirectTo({
            url: '../pcweb/pcweb'
        })
    },
步骤三：使用 web-view 加载内嵌网页，（注：pcweb.wxml 中）

<web-view src="{{web_src}}"></web-view>
对应的事件为：

//生命周期函数--监听页面加载
onLoad: function (options) {  //初始化页面的时候加载补充内嵌网页的路径
    let that = this;
    that.setData({
        web_src: ctxPath  
    })
  },
备注：因为内嵌网页网址之前存放成全局变量在app.js里，故我们要先引入全局变量

var app = getApp();
var ctxPath = app.globalData.ctxPath;  //内嵌网页的路径
分享操作实现：
onShareAppMessage: function (options) {
      let that = this
      let return_url = options.webViewUrl        //分享的当前页面的路径
      var path = 'pages/sharepage/sharepage?shareUrl=' + return_url   //小程序存放分享页面的内嵌网页路径
      console.log(path, options)
      return {
          title: '内嵌网页分享',
          path: path,
          success: function (res) {
              // 转发成功
              wx.showToast({
                  title: "转发成功",
                  icon: 'success',
                  duration: 2000
              })
          },
          fail: function (res) {
              // 转发失败
          }
      }
  },

步骤四：定义存放分享页面的内嵌网页路径，即 sharepage.wxml,附上如下代码：

<web-view src="{{share_src}}"></web-view>    //share_src：分享后的路径
定义事件：

onLoad: function (options) {
        console.log(options)
        let that = this;
        that.setData({
            share_src: options.shareUrl,
        })
},
打开分享的页面时获取之前分享操作时传递的参数，即路径，并在打开分享的初始化函数中填充路径值options.shareUrl ，

同样，倘若想要在打开分享的页面中进行分享操作的话，然后需要补充分享事件，只是这次跳转的路径指向本身，

并且分享成功时将分享时的路径再次赋值给share_src，

onShareAppMessage(options) {
        var that = this
        var return_url = options.webViewUrl
        var path = 'pages/sharepage/sharepage?shareUrl=' + return_url   //分享成功后跳转回本页面
        console.log(path, options)
        return {
            title: '内嵌网页分享',
            path: path,
            success: function (res) {
                // 转发成功
                wx.showToast({
                    title: "转发成功",
                    icon: 'success',
                    duration: 2000
                })
                that.setData({              
                    share_src: return_url    //再次赋值分享内嵌网页的路径
                }) 
            },
            fail: function (res) {
                // 转发失败
            }
        }
    },
至此，小程序内嵌网页的分享就完成了。