精华内容
下载资源
问答
  • 网页打开小程序
    千次阅读
    2020-07-24 19:23:07

    在微信SDK里面你会发现,微信新增了开发标签的列表,通过这个 我们可以在网页打开同个商务号下的小程序和 商务绑定的APP

    这个两个方法,这里我们用的是从网页打开小程序

    第一步,获取SDK配置,在配置里面添加一个

      openTagList: [] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']

    这个字段有两个选择  wx-open-launch-weapp 打开小程序和 wx-open-launch-app 打开APP  可以两个都填写 或者是 两选一,看你项目需求

    第二步  绑定按钮在页面上 

     1. 普通html页面的话  就是这种  template这个不能漏掉

    <wx-open-launch-weapp
      id="launch-btn"
      username="gh_xxxxxxxx"
      path="pages/home/index.html?user=123&action=abc"
    >
      <template>
        <style>.btn { padding: 12px }</style>
        <button class="btn">打开小程序</button>
      </template>
    </wx-open-launch-weapp>
    <script>
      var btn = document.getElementById('launch-btn');
      btn.addEventListener('launch', function (e) {
        console.log('success');
      });
      btn.addEventListener('error', function (e) {
        console.log('fail', e.detail);
      });
    </script>

    2.vue页面或者其他的MVC页面上,因为会跟template冲突 所以要用成script来代替,样式的话 在script 加个style 写入

    <wx-open-launch-weapp id="launch-btn" username="gh_原始ID" path="/pages/index/index.html?参数=1&参数=12456">
    	<script type="text/wxtag-template">
    		<style>.btn { width: 129rpx;height: 44rpx;font-size: 22rpx; color: #fff; background-color: #2D8BFF; border: none; border-radius: 100rpx; margin-top: 30rpx; }</style>
    		<button class="btn"  type="default">打开直播</button>
    	</script>
    </wx-open-launch-weapp>

     第三步  调用微信SDK微信配置参数,记得要在回调成功后 ,不然的会显示不出来,还有的话 安全接口,请求域名都要配置一致,加入对应的白名单

    debug

    在配置的时候 有时候会出现这个错误  加载小程序信息超时  无法启动这个问题

    是因为参数username造成的  这里 gh_后面加入的原始ID 而不是 小程序的APPID,换好之前就可以直接打开了

     

     

     

    更多相关内容
  • 网页js打开微信小程序js-SDK
  • 小程序内直接打开网页教程.zip小程序内直接打开网页教程.zip小程序内直接打开网页教程.zip小程序内直接打开网页教程.zip小程序内直接打开网页教程.zip小程序内直接打开网页教程.zip小程序内直接打开网页教程.zip...
  • URL Scheme——适用于从短信、邮件、微信外网页等场景打开小程序。 通过 URL Scheme 打开小程序的场景值为 1065。 生成的 URL Scheme 如下所示: weixin://dl/business/?t= *TICKET* 如何获取URL Scheme,请参考...

    URL Scheme——适用于从短信、邮件、微信外网页等场景打开小程序。 通过 URL Scheme 打开小程序的场景值为 1065。


    生成的 URL Scheme 如下所示:

    weixin://dl/business/?t= *TICKET*

    如何获取URL Scheme,请参考:

    URL Scheme获取帮助文档https://www.mrnaas.com/797.html

    URL Scheme获取帮助文档_MN乐享-CSDN博客URL Scheme获取帮助文档方式一:小程序管理后台工具生成一、生成步骤1、地址微信公众平台2、扫码登录3、登陆后进入首页「工具」(在右上角)–「生成 URL Scheme」4、进入生成 URL Scheme5、生成 URL Scheme(1)参数说明属性值说明有效期到期失效(可以自己选择失效时间)、永久有效生成的 scheme 码类型小程序页面路径示例:pages/index/inde...https://blog.csdn.net/wangtong0211/article/details/121028378

    兼容性:

    1、iOS系统是可以支持识别 URL Scheme,在短信等应用场景中可以直接通过Scheme跳转小程序。


    2、Android系统是不支持直接识别 URL Scheme,用户无法通过 Scheme 正常打开小程序,所以需要使用 H5 页面作为中转来跳转到 Scheme 来实现打开小程序。

    跳转代码示例如下:

    location.href = 'weixin://dl/business/?t= *TICKET*'

    中转页可以自己根据实际需求来选择是立即调用还是等用户触发事件后调用。

    不过值得注意的是,URL Scheme是分为短期有效(单个小程序不设上限)和长期有效(是有调用上限的,不过这上限基本上足够用户使用了)两种形式,只能跳转上线的小程序。

    功能示例代码如下:

    1、页面加载立即调用:

    $(function(){
    
        location.href = 'weixin://dl/business/?t= *TICKET*';
    
    });

    2、用户触发事件后调用:

    $(function(){
    
        $("#jump").click(function(){
    
              location.href = 'weixin://dl/business/?t= *TICKET*';
    
         });
    
    });

    示例代码获取方法:

    关注公众号发送:【demo】

    展开全文
  • h5打开小程序的方法 总结

    千次阅读 2021-07-12 20:36:31
    t=加scheme码生成一个链接,跳转进入小程序,参数在生成scheme码时就要固定,适合在短信、邮件、微信外网页跳转小程序并传固定参数的情况下使用 wx-open-launch-weapp: 需要对接微信的jssdk,获取wx-open-launch-...

    两种方法,一种是通过Url Scheme进行跳转,另一种是通过wx-open-launch-weapp标签进行跳转

    1. Url Scheme: 需要生成scheme码,weixin://dl/business/?t=加scheme码生成一个链接,跳转进入小程序,参数在生成scheme码时就要固定,适合在短信、邮件、微信外网页跳转小程序并传固定参数的情况下使用

    2. wx-open-launch-weapp: 需要对接微信的jssdk,获取wx-open-launch-weapp标签权限后才可以使用,可以在生成标签前更改参数,适合在项目中跳转小程序使用


    以下是使用方法

    Url Scheme方法

    官方文档

    生成小程序的scheme链接,通过scheme链接跳转小程序

    优点:该方法可以实现短信、邮件、微信外网页跳转小程序(短信打开h5链接,通过h5作为中介,跳转到小程序)

    缺点:
    该方法每一个scheme码只能对应固定的传参
    单个小程序每日生成 Scheme 上限为50万个,有效时间超过31天的 Scheme 或永久有效的 Scheme 为长期有效Scheme,单个小程序总共可生成长期有效 Scheme 上限为10万个,有效时间不超过31天的 Scheme 为短期有效Scheme,单个小程序生成短期有效 Scheme 不设上限

    1. 打开微信公众平台,登录后在右上角找到生成 Url Scheme,输入相应的路径和参数就可以了
      在这里插入图片描述
      在这里插入图片描述

    2. 在h5中跳转weixin://dl/business/?t=你的scheme码就可以了

    因为浏览器支持的原因,部分浏览器不支打开后自动跳转,可以做一个点击跳转的按钮供用户手动跳转

    例:

    <body>
        <div class="box">
            正在跳转...
            <a href="weixin://dl/business/?t=你的scheme码" class="button">点击手动跳转</div>
        </div>
        <script>
            function toWx() {
                location.href = 'weixin://dl/business/?t=你的scheme码'
            }
            window.onload = function () {
                toWx()
            }
        </script>
    </body>
    

    wx-open-launch-weapp方法

    官方文档

    1. 首先需要绑定JS接口安全域名

    【公众号设置】->【功能设置】->【JS接口安全域名】-> 输入要配置的域名 -> 将文件给后端放到服务器上
    在这里插入图片描述
    在这里插入图片描述

    1. 接jssdk,调用wx.config获取权限,注意要写openTagList: ["wx-open-launch-weapp"]来获取标签

    wx.config 例:

    wx.config({
        debug: false,
        appId: xxxxxx,
        timestamp: xxxxxx,
        nonceStr: xxxxxx,
        signature: xxxxxx,
        jsApiList: [
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "checkJsApi",
            "scanQRCode",
            "chooseImage",
            "previewImage",
        ],
        openTagList: ["wx-open-launch-weapp"],
    });
    

    详细的wx.config方法可参考之前的博文(之前的博文里没有写获取wx-open-launch-weapp,需要在项目中自己加上)

    1. 写DOM(例子使用的是VUE框架,原生或其他框架大同小异)
    <wx-open-launch-weapp
        id="launch-btn2"
        username="gh_小程序原始id"
        path="pages/index"
    >
        <script type="text/wxtag-template">
            <div style="width: 100%; height: 100%;">打开小程序</div>
        </script>
    </wx-open-launch-weapp>
    

    wx-open-launch-weapp中的节点会在页面加载完成后过一会才会显示,并且script标签生成的节点不会应用页面中css的样式,所以需要在节点中写样式或者写成下边这种方式

    ...
    <script type="text/wxtag-template">
        <style>.btn { padding: 12px }</style>
        <button class="btn">打开小程序</button>
    </script>
    ...
    

    初次配置容易出现的问题:
    可以为wx-open-launch-weapp标签添加样式形成更好的页面效果
    点击事件是声称在script标签所生成的节点上的,注意不要只修改wx-open-launch-weapp标签的样式导致用户点击不到节点
    只有在微信环境下才会展示改标签所产生的节点
    wx.config不要重复调用导致wx-open-launch-weapp失效(一般不会犯这种错误吧)
    系统错误,错误码:40048 :配好安全域名!!!!!!

    展开全文
  • H5网页跳转打开微信小程序详解(含完整代码)

    万次阅读 热门讨论 2021-01-10 15:31:37
    已认证的非个人主体的小程序,使用小程序云开发的静态网页托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。 01 绑定安全域名 登录微信公众平台进入【公众号设置】-->【功能设置...

    图片

    限制条件:

    1. 目前仅支持在微信内打开H5页面;

    2. 已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序;

    3. 已认证的非个人主体的小程序,使用小程序云开发的静态网页托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。

     

     

     

    01

     

    绑定安全域名

     

    登录微信公众平台进入【公众号设置】-->【功能设置】里设置好 “js接口安全域名”。

     

    图片

     

    02

     

    IP白名单设置

    登录微信公众平台进入【开发】-->【基本配置】,这里填写你服务器的IP

     

    03

     

    完整代码

    后面直接伸手就给,已经给大家准备了完整的DEMO,填一下自己的信息就可以了。公众号回复『h5跳转小程序』,即可获取完整代码。遇到其他问题可以留言,看到了第一时间会回复大家。

     

    图片

     

    图片

     

    <!--=========================================================公众号:被动睡后收入==========================================================-->
    <!--==========================================================PHP --start==========================================================-->
    <?php
    // 微信 JS 接口签名校验工具: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
    $appid = 'AppID'; //填入服务号AppID
    $secret = 'AppSecret'; //填入服务号AppSecret
    
    // 获取token
    $token_data = file_get_contents('./wechat_token.txt');
    if (!empty($token_data)) {
        $token_data = json_decode($token_data, true);
    }
    $time = time() - $token_data['time'];
    if ($time > 3600) {
        $token_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}";
        $token_res = https_request($token_url);
        $token_res = json_decode($token_res, true);
        $token = $token_res['access_token'];
        $data = array(
            'time' => time(),
            'token' => $token
        );
        $res = file_put_contents('./wechat_token.txt', json_encode($data));
        if ($res) {
            echo '更新 token 成功';
        }
    } else {
        $token = $token_data['token'];
    }
    
    // 获取ticket
    $ticket_data = file_get_contents('./wechat_ticket.txt');
    if (!empty($ticket_data)) {
        $ticket_data = json_decode($ticket_data, true);
    }
    $time = time() - $ticket_data['time'];
    if ($time > 3600) {
        $ticket_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$token}&type=jsapi";
        $ticket_res = https_request($ticket_url);
        $ticket_res = json_decode($ticket_res, true);
        $ticket = $ticket_res['ticket'];
        $data = array(
            'time' => time(),
            'ticket' => $ticket
        );
        $res = file_put_contents('./wechat_ticket.txt', json_encode($data));
        if ($res) {
            echo '更新 ticket 成功';
        }
    } else {
        $ticket = $ticket_data['ticket'];
    }
    
    // 进行sha1签名
    $timestamp = time();
    $nonceStr = createNonceStr();
    
    // 注意 URL 建议动态获取(也可以写死).
    $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
    $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; // 调用JSSDK的页面地址
    
    // $url = $_SERVER['HTTP_REFERER']; // 前后端分离的, 获取请求地址(此值不准确时可以通过其他方式解决)
    $str = "jsapi_ticket={$ticket}&noncestr={$nonceStr}&timestamp={$timestamp}&url={$url}";
    $sha_str = sha1($str);
    
    function createNonceStr($length = 16)
    {
        $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        $str = "";
        for ($i = 0; $i < $length; $i++) {
            $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
        }
        return $str;
    }
    
    /**
     * 模拟 http 请求
     * @param  String $url 请求网址
     * @param  Array $data 数据
     */
    function https_request($url, $data = null)
    {
        // curl 初始化
        $curl = curl_init();
        // curl 设置
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
        // 判断 $data get  or post
        if (!empty($data)) {
            curl_setopt($curl, CURLOPT_POST, 1);
            curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
        }
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        // 执行
        $res = curl_exec($curl);
        curl_close($curl);
        return $res;
    }
    
    ?>
    <!--==========================================================PHP --end==========================================================-->
    
    <!--==========================================================HTML --start==========================================================-->
    <html>
    <head>
        <title>被动睡后收入-->微信公众号</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=0.5">
    </head>
    <body>
    <div id="app">
        <wx-open-launch-weapp
                id="launch-btn"
                username="gh_xxx"  <!-- 需要跳转的小程序的原生id gh_开头 -->
                path="pages/index/index.html?uid=16" <!-- 需要跳转的小程序的路径以及参数 -->
        >
            <template>
                <style>
                    .btn {
                        padding: 12px;
                        width: 10rem;
                        height: 10rem;
                    }
                </style>
                <div style="text-align: center;align-items: center;margin: 8rem">
                    <button class="btn">打开小程序</button>
                </div>
            </template>
        </wx-open-launch-weapp>
        <script>
            var btn = document.getElementById('launch-btn');
            btn.addEventListener('launch', function (e) {
                console.log('success');
            });
            btn.addEventListener('error', function (e) {
                console.log('fail', e.detail);
            });
        </script>
    </div>
    <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script type="text/javascript">
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: '<? echo $appid ?>', // 必填,公众号的唯一标识
            timestamp: <? echo $timestamp ?>, // 必填,生成签名的时间戳
            nonceStr: '<? echo $nonceStr ?>', // 必填,生成签名的随机串
            signature: '<? echo $sha_str ?>',// 必填,签名
            jsApiList: ['onMenuShareTimeline', 'scanQRCode'],// 必填,需要使用的JS接口列表,
            openTagList: ['wx-open-launch-weapp']
        });
        wx.ready(function () {
            console.log('接口配置成功');
        });
    </script>
    </body>
    </html>
    
    <!--==========================================================HTML --end==========================================================-->
    

     

    查看APPID、原始ID、页面路径请详见文末更多推荐

    展开全文
  • 《URL Scheme打开小程序》 2. 《获取 access_token》 请求地址 https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET 请求参数 属性 类型 默认值...
  • 原标题:小程序新功能直接打开网页喜讯小程序终于又开放新功能了,小程序的功能越来越强大了。我想这个功能不管对对商家还是对开发人员都是非常好的功能,因为可以打开网页代表他可以链接更多,小程序最多可以关联...
  • 这种需求在小程序中很常见,如下图所示: 第一步 首先,需要有一个页面,并且在 app.json → page[] 中正常注册,它用于承载 webview 组件。 在 page 目录新建一个页面(与创建普通页面方法一致),如下图所示: ...
  • 微信H5网页跳转小程序

    千次阅读 2020-12-02 11:19:50
    小程序跳转测试 path="/pages/index/index.html"> 打开小程序 开放对象: 1、已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。 2、已认证的非个人主体的小程序,使用...
  • 微信公众号H5网页跳转小程序方法

    千次阅读 2020-11-06 14:19:26
    要在微信公众号H5网页跳转到小程序,需要使用微信JS-SDK,引入JS文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js ,在服务端验签获取配置信息,获取成功以后,引入开放标签openTagList: [‘wx-open-launch-...
  • 推广的web页面大多是在百度App/手机原生浏览器被打开,而我们推广的一款产品是基于微信小程序,用户在百度App/手机原生浏览器看到推广页,只能下载小程序码到手机,然后用微信扫码打开小程序,体验太繁琐。...
  • 微信网页开发:微信内h5使用wx-open-launch-weapp打开小程序,微信内h5使用wx-open-launch-app打开App的方案
  • web页面跳转微信小程序

    千次阅读 2021-10-31 09:43:54
    现在微信开放程度比较宽松了,所以web页面跳转小程序需求很大,接下来咱们看看怎么实现: 1、需要引入微信jssdk:http://res.wx.qq.com/open/js/jweixin-1.6.0.js(支持https) 需要使用到js-sdk-1.6.0的版本才有...
  • 扫描二维码 打开 小程序或是H5网页

    千次阅读 2021-01-21 16:23:06
    最近在做一个的项目,有一个需求是扫码查看信息详情 扫描的情况可能是使用微信扫描,或是其他扫描 ...方案二:H5+微信小程序的普通二维码跳转小程序 方案三:使用微信小程序生成无限制二维码 首先去.
  • 微信小程序如何打开网页

    万次阅读 2019-12-07 14:09:56
    在微信小程序打开网页需要满足两个条件: 1、在小程序管理后台设置跳转的域名为业务域名,注意这个域名必须是https协议的; 2、需要下载一个校验文件放置跳转域名的服务器根目录下,也就是讲这个跳转域名的...
  • 公众号网页跳转到小程序

    千次阅读 2019-10-11 14:11:34
    <scripttype="text/javascript"src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> wx.miniProgram.navigateTo({url:'/path/to/page'})
  • 背景有时候,因为业务需求,在小程序当中,需要跳转到 h5 网页,或跳转到公众号,形成流量的闭环,那在小程序当中怎么实现呢?实例效果前提条件该小程序与需要跳转至的公众号(订阅号/服务号)进行了绑定关联使用小程序开放...
  • 微信小程序使用webview打开pdf文档及显示网页内容

    千次阅读 热门讨论 2022-03-10 14:50:02
    微信小程序使用webview显示pdf文档及显示网页内容
  • 小程序内嵌h5网页: <web-viewsrc="你的网页地址"bindmessage="bindmessage"/> 网页地址要配置在小程序的业务域名里。不配置的话,本地测试可以勾选开发者工具右上角详情-本地设置-不校验合法域名。但是不...
  • 微信小程序跳转第三方网页、第三方小程序。微信小程序跳转第三方网页跳转第三方网页的问题微信小程序跳转第三方小程序 微信小程序跳转第三方网页 最近需要做一个小程序跳转携程的功能,首先考虑到的是跳转到携程的h5...
  • H5页面跳转至微信小程序(含完整代码)

    千次阅读 热门讨论 2020-09-25 18:47:46
    H5 通过开放标签打开小程序的场景值为 1167. 此功能的开放对象: 已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。 已认证的非个人主体的小程序,使用小程序云开发的...
  • uniapp h5打开微信小程序

    千次阅读 2022-03-15 14:30:11
    1、当获取不到微信小程序APPID和微信小程序APPSECRET时只能在微信浏览器打开小程序 2、此代码只要是在微信环境打开小程序 3、需要在线上域名调试,本地看不到效果,可将本地host反向代理到线上域名进行调试 4、wx-...
  • 这种比较简单,一句代码搞定: <a href="weixin://" >打开微信<...当用户打开网页后,通过一个提示,等待几秒,自动跳转到小程序。 具体代码如下: <a href="weixin://dl/business/?t=
  • 小程序显示H5网页教程

    千次阅读 2021-06-11 00:51:12
    小程序显示H5网页教程介绍小程序里显示Html代码,目前插件(wxParse ...之前由于需要验证原因,很多人把Bmob的素材页面填写到微信的业务域名,提示:小程序设置web-view业务域名,解决“不支持打开非业务域名,请重新...
  • 小程序打开网页(webview)自动登录

    千次阅读 2019-10-14 09:18:48
    网页的登录态是根据cookie上的sessionId 字段来判断 1.小程序登录后拿到sessionId; 2.打开webView页面,将sessionId在url后带上;...1.小程序的sessionId和网页的sessionId需要能够通用; 2.因为小程序没有...
  • 微信小程序开发(四)打开web网页

    千次阅读 2019-03-03 17:42:53
    一、微信小程序打开外部web链接 1、在设置-&amp;amp;gt;项目设置中勾选不校验合法域名...,方便调试 2、在index.wxml删掉里面内容,改为: &amp;amp;lt;view class=&amp;quot;container&amp;quot;&...
  • 最近有个需求:移动端网站某个页面,需要实现点击某个按钮能直接打开微信小程序,避免打开中间页打开小程序的方式,这种方式对用户更友好,避免用户流失。 这时候就得动动自己的小脑筋了,由于该开放能力是微信小...
  • h5打开小程序,h5跳转到小程序

    千次阅读 2020-12-30 18:12:01
    业务背景:在h5中直接打开小程序(注意不是返回小程序) 业务背景:在h5中直接打开小程序(注意不是返回小程序) 直接上码: 一、config注入: wx.config({ debug: true, appId: '<?php echo $signPackage[...
  • H5页面打开微信小程序

    千次阅读 2022-04-27 20:56:44
    采用的技术是URL Scheme,是微信小程序后台生成一种地址,适用于从短信、邮件、微信外网页等场景打开小程序任意页面。通过URL Scheme打开小程序的场景值为 1065 整体思路:前端调用后端接口,后端调用微信接口生成...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 237,179
精华内容 94,871
关键字:

网页打开小程序