首页/ 填坑/ 文章详情

HTML5页面跳转到微信小程序

HTML5 微信 小程序 跳转 发布于 2021-08-23

程序员与老板最大的区别:程序员会按部就班,老板会天马行空。程序员熟读文档,却不及老板对功能运用的了解。举个例子:HTML5页面跳转到微信小程序,能实现吗? 能。

HTML5能够跳转到微信小程序有一个前提:必须是微信小程序打开的HTML5网页。是否支持跳转,需要知道用户使用的代理是否是微信浏览器。

判断是否微信浏览器:

JS/**
 * 判断是否微信浏览器
 * @method isApplet
 * @return {boolean}
 */
var isApplet = function () {
    var userAgent = navigator.userAgent;
    return  /miniProgram/i.test(userAgent);
}

确定用户代理后,打开微信小程序需要引入额外的JS库:jweixin-1.3.2.js 

HTML5跳转微信小程序:

JS/**
 * HTML5跳转小程序
 * @method jumpUrl
 * @param {String} url
 * @param {String} type 类型
 */
var jumpUrl = function (url,type) {
    if(!isApplet()) {
        console.warn('你无法调用该方法',url);
        return false;
    }

    var type = type || '';
    switch (type) {
        case 1://关闭所有页面,打开到应用内的某个页面
            wx.miniProgram.reLaunch({url: url});
            break
        case 2: //关闭当前页面,跳转到应用内的某个页面
            wx.miniProgram.redirectTo({url:url});
            break;
        case 3: //tabBar导航跳转
            wx.miniProgram.switchTab({url:url});
            break;
        default: //保留当前页面,跳转到应用内的某个页面
            wx.miniProgram.navigateTo({url:url});
            break;
    }
}

※ 点击跳转到微信小程序,需要确定该链接是否存在,不然跳转会失败。

文章评论0 records

最新 最早

0

最新评论Latest comments

凡心的仙人凡心的仙人 03-18 14:35
谢谢你了!
rantrismrantrism 2023-04-03 11:27
您好~我是腾讯云开发者社区运营,关注了您分享的技术文章,觉得内容很棒,我们诚挚邀请您加入腾讯云自媒体分享计划。完整福利和申请地址请见:https://cloud.tencent.com/developer/support-plan 作者申
唐牛才是食神唐牛才是食神 2022-06-15 10:51
(*°▽°*)八(*°▽°*)♪,解决了
唐牛才是食神唐牛才是食神 2022-06-15 10:49
发现不得了的东西,今晚回去好好研究下...
胖螺胖螺 2022-02-04 00:58
( ゜- ゜)つロ 在写了在写了。看到也有些感慨。因为站长前年在我原博客的留言,让我毅然选择去深造,选择读研,曾经我想过挺多东西的,还是自己本专业的适合我自己。在这先表达感谢。新年快乐!