微信小程序跳转第三方H5的方法

原创已于 2024-11-26 10:51:51 修改 · 1.1w 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #前端 #小程序

于 2022-11-12 01:50:13 首次发布

使用web-view标签进行跳转

首先建立一个新的页面，这个页面就是为了第三方H5页面准备的。

在index.wxml中，写以下代码

<web-view src="{{h5url}}"></web-view> // 微信小程序提供的标签

在index.js中，写一下代码

data: {
        h5url:"https://www.*********.com:8443/uiap/ccs/chath5.html"
    }

// 微信小程序的data中，h5url为第三方h5的链接

在需要点击跳转第三方页面的地方，js文件中用以下代码实现跳转

 wx.navigateTo({
            url: "../serviceH5/index"
        })
// wx.navigateTo是小程序提供的跳转方法，url是新建h5页面的路径

以上代码就实现了跳转第三方链接/H5页面

项目中大部分时候，需要链接拼接token进行跳转，那么在封装好接口之后用以下方式跳转

请求token的页面绑定点击事件用wx.navigateTo进行跳转

 toService: function () {
        API.queryUserInfoFor( params ).then ( res => {
            const serviceToken = encodeURIComponent(res.userinfoForCCMiniModel.token)
            console.log(serviceToken)
            wx.navigateTo({
              url: `../ser/index?h5url=https://****.com/uiap/ccs/chath5.html?token=${serviceToken}`,
            })
        })
    },