微信小程序开发:利用web-view组件在微信小程序内跳转打开网址的方法_百业营销网

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

微信小程序开发 238℃ 0

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

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

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

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

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

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

image.png

image.png


image.png

代码实现

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组件在微信小程序内跳转打开网址的方法的更好思路或者建议,欢迎一起交流学习。