微信小程序开发：利用web-view组件在微信小程序内跳转打开网址的方法

微信小程序开发：利用web-view组件在微信小程序内跳转打开网址的方法

利用web-view组件在微信小程序内跳转打开网址的前提要求：

1、想在微信小程序内跳转打开的必须先经过ICP网站备案。

2、在微信小程序里面添加业务域名：

操作流程：开发者登录小程序后台，选择开发管理->开发设置->业务域名，点击新增，按照要求配置业务域名，验证域名权限即可。

代码实现

1、先在 app.json 中正常注册一个页面，用来放置 web-view 组件的代码的。

2、建立web-view 组件对应的文件夹“web-view”（此处文件名可以自定义自己喜欢的），并添加上对应的文件：web.js，web.wxml，web.json，web.wxss等4个文件。

3、web.js代码如下：

// pages/web/web.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 需要跳转路径
    url: '', 
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.setData({
      url: options.url, // 从跳转页面中传过来的url在options中可以拿到
    });
  },

  OpenToURL() {
    var url = this.data.url
      wx.navigateTo({
        // 注意路径 
          url: `/pages/web/web?url=${url}`
      })
  },
});

4、web.wxml代码如下：

<web-view src="https://www.tianwenhai.com" bindload="bindload" binderror="binderror"></web-view>

5、web.json代码如下：

{
  "navigationBarTitleText": "",
  "enablePullDownRefresh": false,
  "usingComponents": {}
}

6、web.wxss可以留空。

以上就是微信小程序开发：利用web-view组件在微信小程序内跳转打开网址的方法的全部内容，如果您还有关于微信小程序开发：利用web-view组件在微信小程序内跳转打开网址的方法的更好思路或者建议，欢迎一起交流学习。