最新文章:

您的位置: 富录-前端开发|web技术博客 > 系统环境 > 微信小程序与外部互跳能力汇总

微信小程序与外部互跳能力汇总

发布时间:2022年08月30日 评论数:抢沙发阅读数: 2907

    点击查看原图

    外部跳微信小程序

    H5链接跳小程序

    App跳小程序

    短信跳小程序

    微信扫码跳小程序

    微信公众号跳小程序


    小程序跳外部

    小程序跳H5链接

    小程序跳APP

    小程序跳小程序

    小程序分享到微信


    H5链接跳小程序

    开放标签

    跳转小程序:wx-open-launch-weapp

    用于页面中提供一个可跳转指定小程序的按钮。使用此标签后,用户需在网页内点击标签按钮方可跳转小程序。H5通过开放标签打开小程序的场景值为1167。


    开放对象

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

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


    代码用例

    <wx-open-launch-weapp
    
     id="launch-btn"
    
     username="gh_xxxxxxxx"
    
     path="pages/home/index?user=123&action=abc"
    
    >
    
     <script type="text/wxtag-template">
    
       <style>.btn { padding: 12px }</style>
    
       <button class="btn">打开小程序</button>
    
     </script>
    
    </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>
    
    

    静态网站H5跳小程序

    非个人主体并且已认证的(微信认证) 小程序,使用云开发 静态网站托管的网页,可以免鉴权跳转任意合法合规的小程序。即可以在微信内部浏览器的 H5 跳转小程序,也可以在微信外部浏览器或其他部分 App (如企业微信、QQ 等)跳转微信小程序。参考链接


    参考链接

    开放标签说明文档

    demo体验

    静态网站 H5 跳小程序


    App跳小程序

    1、App主动分享小程序卡片

    配置小程序原始id

    配置 小程序页面路径

    配置小程序消息title、desc、图片等信息

    WXMiniProgramObject miniProgramObj = new WXMiniProgramObject();
    
    miniProgramObj.webpageUrl = "http://www.qq.com"; // 兼容低版本的网页链接
    
    miniProgramObj.miniprogramType = WXMiniProgramObject.MINIPTOGRAM_TYPE_RELEASE;// 正式版:0,测试版:1,体验版:2
    
    miniProgramObj.userName = "gh_d43f693ca31f";     // 小程序原始id
    
    miniProgramObj.path = "/pages/media";            //小程序页面路径;对于小游戏,可以只传入 query 部分,来实现传参效果,如:传入 "?foo=bar"
    
    WXMediaMessage msg = new WXMediaMessage(miniProgramObj);
    
    msg.title = "小程序消息Title";                    // 小程序消息title
    
    msg.description = "小程序消息Desc";               // 小程序消息desc
    
    msg.thumbData = getThumb();                      // 小程序消息封面图片,小于128k
    
    
    
    SendMessageToWX.Req req = new SendMessageToWX.Req();
    
    req.transaction = buildTransaction("miniProgram");
    
    req.message = msg;
    
    req.scene = SendMessageToWX.Req.WXSceneSession;  // 目前只支持会话
    
    api.sendReq(req);


    2、App拉起小程序功能

    对于已通过认证的开放平台账号,其移动应用可以跳转至任何合法的小程序,且不限制跳转的小程序数量。

    对于未通过认证的开放平台账号,其移动应用仅可以跳转至同一开放平台账号下小程序。

    若移动应用未上架,则最多只能跳转小程序100次/天,用于满足调试需求。

    String appId = "wxd930ea5d5a258f4f"; // 填移动应用(App)的 AppId,非小程序的 AppID
    
    IWXAPI api = WXAPIFactory.createWXAPI(context, appId);
    
    
    
    WXLaunchMiniProgram.Req req = new WXLaunchMiniProgram.Req();
    
    req.userName = "gh_d43f693ca31f"; // 填小程序原始id
    
    req.path = path;                  ////拉起小程序页面的可带参路径,不填默认拉起小程序首页,对于小游戏,可以只传入 query 部分,来实现传参效果,如:传入 "?foo=bar"。
    
    req.miniprogramType = WXLaunchMiniProgram.Req.MINIPTOGRAM_TYPE_RELEASE;// 可选打开 开发版,体验版和正式版
    
    api.sendReq(req);

    参考链接

    分享与收藏功能 /Android开发手册

    APP拉起小程序功能 /Android开发示例


    短信跳小程序

    短信跳小程序境内非个人主体的认证的小程序,开通静态网站后,可以免鉴权下发支持跳转到相应小程序的短信。短信中会包含支持在微信内或微信外打开的静态网站链接,用户打开页面后可一键跳转至你的小程序。

    微信扫码跳小程序

    为方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序能力。


    配置二维码规则

    点击查看原图

    测试环境生成扫码链接后,需在小程序后管配置下扫码链接,方可进入体验版;生产环境无需每次都配置。

    点击查看原图

    配置成功后用测试链接二维码扫码即可跳转到小程序,小程序 onLoad options.q 可确定为扫码场景,并获取到对应参数。

    onLoad: function (options) {
    
     if (options.q) {
    
       // 扫码进来的
    
       ...
    
     }
    
    }

    微信公众号跳小程序

    小程序后管、公众号后管都须做依赖关联


    小程序跳H5链接

    使用web-view

    承载网页的容器。会自动铺满整个小程序页面。

    小程序跳APP

    使用button组件的open-type=launchApp

    <button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button>
    
    Page({
    
     launchAppError (e) {
    
       console.log(e.detail.errMsg)
    
     }
    
    })


    小程序分享到微信

    onShareAppMessage(Object object)

    分享分2种:页面内转发按钮、右上角转发菜单。二者都定义标题、转发路径、自定义图片。

    /**
    
    * 用户点击右上角分享
    
    */
    
    onShareAppMessage() {
    
     const { defaultShareTitle, query, defaultShareImg } = GlobalData;
    
     return {
    
       title: defaultShareTitle,
    
       path: `pages/lauch/index?${queryString.stringfy(query)}`,
    
       imageUrl: defaultShareImg,
    
     };
    
    }


二维码加载中...
本文作者:DGF      文章标题: 微信小程序与外部互跳能力汇总
本文地址: https://arbays.com/post/191     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论