微信小程序打开外部链接_invokeappservice postmessage-CSDN博客

本文链接：https://blog.csdn.net/qq_40830369/article/details/119753789

本文详细介绍了如何在微信小程序中使用web-view组件，通过WXML事件处理和JS函数调用来打开外部链接，包括设置数据、触发跳转、配置APP.JSON及webview页面的逻辑处理，助您轻松完成小程序内的网页跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果是个人类型的小程序就没法打开外部链接了。

首先要了解下微信提供的容器web-view。

web-view | 微信开放文档 (qq.com)

具体的操作步骤这样，首先在WXML文件里某个需要触发点击事件的标签里面加上点击事件。记得带上参数data-url="{{item.url}}"

在JS文件中写上对应的函数

  navigateToURL (e) {
    // console.log(e);
    let elements = this.data.elements;
      let navigateURL = e.currentTarget.dataset.url;
      wx.navigateTo({
        url: '/pages/webview/webview?url=' + navigateURL,
        success: (result) => {},
        fail: (res) => {},
        complete: (res) => {},
      })
  },

我们这边跳转到了一个webview页面，所以记得在APP.JSON文件中加上路径。

然后在webview.wxml文件中写上一句代码

在webview.js文件中写上逻辑

const app = getApp()
Page({
  data: {
    url: '',
  },
//decodeURIComponent()函数可以识别并且分立出url
  onLoad: function (options) {
    console.log('options',options);
    let fromPath=decodeURIComponent(options.url);
    this.setData({
      url:fromPath
    })
  }
})

大功告成！