微信小程序web-view打开网页

一.小程序官网需要配置业务域名

打开官网，选择左侧开发管理，选择开发设置，往下找到业务域名，添加域名。设置时需要下载校验文件，并将文件放置在域名根目录下。

二.web-view配置完成但是打不开

web-view我使用比较多，搜索之后发现需要注意两个点，主要加了一个开关和转码

1.跳转web-view页面时

toWeb() {
    let url = "/pages/business-card/business-card?Id=" + encodeURIComponent(this.data.Id)
    wx.navigateTo({
      url: url
    })
  },

2.web-view页面使用时

web-view.js页面

Page({

  /**
   * 页面的初始数据
   */
  data: {
    webViewsrc: '',
    websiteUrl: wx.getStorageSync('websiteUrl'), //官网地址
    bool: false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      bool: true,
    })
    if (options.Id) {
      let src = encodeURI(options.Id)
      this.setData({
        webViewsrc: src
      })
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    let src = encodeURI(this.data.websiteUrl)
    this.setData({
      webViewsrc: src
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

  web-view.wxml页面

<web-view wx:if="{{bool === true}}" src="{{webViewsrc}}"></web-view>