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的定位页面元素
Aug 29 HTML / CSS
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
css图标制作教程制作云图标
Jan 19 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 HTML / CSS
HTML中link标签属性的具体用法
May 07 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中读取文件的8种方法和代码实例
2014/08/05 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
php单例模式示例分享
2015/02/12 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
Python 流程控制实例代码
2009/09/25 Python
Python 命令行非阻塞输入的小例子
2013/09/27 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
python中类的属性和方法介绍
2018/11/27 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
python字典排序的方法
2019/10/12 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
《蒲公英》教学反思
2014/02/28 职场文书
初中新生军训方案
2014/05/13 职场文书
春节超市活动方案
2014/08/14 职场文书
赔偿协议书范本
2014/09/12 职场文书
干部培训工作总结2015
2015/05/25 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
python数字图像处理之图像的批量处理
2022/06/28 Python