HTML5跳转小程序wx-open-launch-weapp的示例代码


Posted in HTML / CSS onJuly 16, 2020

注意事项

微信开放标签有最低的微信版本要求,以及最低的系统版本要求。
微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。

绑定域名

微信安全域名只能修改绑定3次/每月
登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

引入JS文件

在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)
如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)

通过config接口注入权限验证配置

wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
          appId: "XXXXXXXXXXX", // 必填,公众号的唯一标识
          timestamp: this.timestamp, // 必填,生成签名的时间戳
          nonceStr: this.nonceStr, // 必填,生成签名的随机串
          signature: this.signautre, // 必填,签名
          jsApiList: [
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "checkJsApi",
            "scanQRCode"
          ], // 必填,需要使用的JS接口列表
          openTagList:['wx-open-launch-weapp']
        });
        wx.ready(function() {
          //config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
        });
        wx.error(function(res) {
          console.log('res',res);
          // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
        });

wx-open-launch-weapp开放标签属性

HTML5跳转小程序wx-open-launch-weapp的示例代码

开放标签使用(angular2/4项目)

<div id="wxOpenInAPP" class="wexin-launch-btn">
  </div>
var dom = document.getElementById('wxOpenInAPP') 
    dom.innerHTML = '<wx-open-launch-weapp id="launch-btn" username="gh_XXXX" path="pages/login/login/main.html"><template><style>  .wx-btn {   color: #666; width: 100%; height:100%; display: block; text-aligin:center; }</style><button class="wx-btn">跳转小程序</button></template></wx-open-launch-weapp>'
    var launchBtn = document.getElementById('launch-btn')
    if (!launchBtn) {
      return
    }
    launchBtn.addEventListener('launch', function (e) {
      console.log('eee',e);
    })
    launchBtn.addEventListener('error', function (e:any) {
      console.log('fail', e.detail)
    })

开放标签使用(vue项目)

<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxxxxx"  path="pages/login/login/main.html" @error="handleErrorFn" @launch="handleLaunchFn">
        <script type="text/wxtag-template">
            <style>.btn { display: flex;align-items: center; }</style>								
            <div> <button class="wx-btn">跳转小程序</button>	</div>			
        </script>
    </wx-open-launch-weapp>
handleErrorFn(e){
        console.log('fail', e.detail);
    }

    handleLaunchFn(e){
        console.log('success');
    }

到此这篇关于HTML5跳转小程序wx-open-launch-weapp的文章就介绍到这了,更多相关HTML5跳转小程序内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3模块的目前的状况分析
Feb 24 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 #HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 #HTML / CSS
HTML5 背景的显示区域实现
Jul 09 #HTML / CSS
HTML5图片层叠的实现示例
Jul 07 #HTML / CSS
HTML5 层的叠加的实现
Jul 07 #HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 #HTML / CSS
html5启动原生APP总结
Jul 03 #HTML / CSS
You might like
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
php流量统计功能的实现代码
2012/09/29 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
jQuery 回车事件enter使用示例
2014/02/18 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
跟老齐学Python之编写类之三子类
2014/10/11 Python
python保存文件方法小结
2018/07/27 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
如何清空Session
2015/02/23 面试题
护理中职生求职信范文
2014/02/24 职场文书
毕业横幅标语
2014/10/08 职场文书
公司授权委托书
2014/10/17 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python
Java Spring Lifecycle的使用
2022/05/06 Java/Android