返回
快速导航关闭
当前搜索
网站分类
栏目推荐
实用工具
热门标签
子分类:
创奇学院 >微信 >小程序 >微信小程序 » 正文

免费的h5制作网站模板,手机端H5页面直接打开微信小程序

微信小程序 更新时间: 发布时间: 微信小程序归档 最新发布 网站地图

手机端H5页面直接打开微信小程序,相信这个功能很多同学都会用到,下面我记录一下怎么实现的

这里是用到了微信小程序自带的功能:开放能力 /获取小程序链接 /获取 URL Scheme
注意前提条件:开放范围,针对非个人主体小程序开放。

操作流程

通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序。 通过 URL Scheme 打开小程序的场景值为 1065。

生成的 URL Scheme 如下所示:weixin://dl/business/?t=*TICKET*

操作步骤

这里我就直接使用小程序的官方后台功能生成url了,首先需要扫码登陆小程序,登陆地址 https://mp.weixin.qq.com/

登陆之后,找到头部导航右上角左右的一个“工具”菜单,如图所示,有个 “生成小程序URL Scheme” 的菜单,点击它:


点击菜单之后,可以看到有几个选项需要填写,根据自己的需要填写相应的值就可以了,如下图所示:


填写完毕后,点击 “生成” 按钮,即可生成在H5中可以直接打开的链接




生成后的协议链接代码: weixin://dl/business/?t=x填写自己生成的xx

在H5页面中使用这段代码

新建一个 html 页面,把下面的代码复制到自己的html中,把生成的链接,替换成自己的,页面的样式可以自己设计修改

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>H5跳转到微信小程序</title>        <meta name="viewport" id="viewport" content="width=320, initial-scale=1, maximum-scale=1, user-scalable=no">        <meta content="yes" name="apple-mobile-web-app-capable">        <meta content="black" name="apple-mobile-web-app-status-bar-style">        
    </head>    <body>        <div id="appe">            <div class="content">                <input type="hidden" value="15" id="pageid">                <div class="banner">                    <a href="###" onclick="towxapp()">
                        点击我跳转到微信小程序                    </a>                </div>            </div>        </div>        <script>            function isIosOrAndroid() {                var u = navigator.userAgent;                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;                if (isAndroid) {                    return 1;
                }                var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);                if (isiOS) {                    return 2;
                }                return 0;
            }            function towxapp(){
                location.href = 'weixin://dl/business/?t=xx替换成自己的xx';
            }            var system = isIosOrAndroid()            if (system == 2) {
                location.href = 'weixin://dl/business/?t=xx替换成自己的xx';
            }        </script>    </body></html>

最后,把文件放到自己的web服务器上,用手机打开这个页面,就可以实现H5页面,跳转到微信小程序中!

转载请注明:文章转载自 http://www.320g.com/
本文地址:http://www.320g.com/wxxcx/4232.html
考高分网交流群

扫一扫加入QQ交流群

和更多志同道合朋友一起交流,分享干货资料!
创奇学院客服

扫一扫加客服微信

有疑问请咨询创奇学院微信号,在线为您解答!
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 Copyright 320g.com Rights Reserved. Powered · 创奇学院

ICP备案号:陇ICP备2020003353号