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 相关文章推荐
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
CSS的calc函数用法小结
Jun 25 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
操作Oracle的php类
2006/10/09 PHP
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
Python入门篇之文件
2014/10/20 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
护士进修自我鉴定
2014/02/07 职场文书
公司投资建议书
2014/05/16 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
2014年度安全工作总结
2014/12/04 职场文书
2015年推普周活动总结
2015/03/27 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
民事调解协议书
2016/03/21 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android