h5跳转小程序、短信跳转小程序＜wx-open-launch-weapp＞干货满满
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
由于微信官方限制了URL Scheme跳转，本文实现的是html跳转微信小程序，仅限微信内部调转。如果需要外部跳转微信小程序，可使用urlscheme.generate，后端获取openlink官方文档。短信、网页场景的话建议使用openlink。
提示：以下是本篇文章正文内容，下面案例可供参考
一、开发前准备
1.拥有一个认证的微信公众号（是公众号不是订阅号）
2.公众号关联（）微信小程序（关联方法可以登录微信公众平台查找）
3.配置IP白名单（也在微信公众平台）；
4.配置js安全域名（也在微信公众平台，需要把一个文件放在你的本地服务上，其实也可以写一个request。具体流程百度一下）
二、前端
1.官方文档链接: 点击这里
<wx-open-launch-weapp id="launch-btn" username="gh_*****" path="pages/home/home"><template><!-- 样式方法 --><style> </style><div class="btn-card"><h5 class="btn">打开小程序</h5></div></template></wx-open-launch-weapp>
导入<script typet="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<2.签名wx.config
代码如下（示例）：
wx.config({// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印// debug: true, // 必填，公众号的唯一标识appId: data.data.appId,// 必填，生成签名的时间戳timestamp: data.data.timestamp,// 必填，生成签名的随机串nonceStr: data.data.nonceStr,// 必填，签名signature: data.data.signature,// 必填，需要使用的JS接口列表，且任意填写jsApiList: ['scanQRCode'],// 可选，需要使用的开放标签列表，wx-open-launch-weapp 指H5跳转小程序 wx-open-launch-app 指H5跳转appopenTagList: ["wx-open-launch-weapp"],wx.ready(function () {var btn = document.getElementById('launch-btn');// launch 用户点击跳转按钮并对确认弹窗进行操作后触发btn.addEventListener('launch', function (e) {console.log(e,'success');});// error 用户点击跳转按钮后出现错误btn.addEventListener('error', function (e) {console.log(e.detail,'fail');});});wx.error(function (res) {console.log(res, 'error');// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名});1.这个就是签名了，可以用ajax请求后台拿到timestamp，nonceStr，signature，
2.拿到signature后可以在微信官方验证一下链接: 签名验证
2.打开debug：true，失败的话会返回错误信息的。我这里是js安全域名没配置
3.成功的话他会返回errMsg：config：ok，然后标签按钮就会显示出来，点击就可以跳转了，跳不了的话，btn.addEventListener（）它会返回错误信息给你的
三、后端
后端主要就是一个获取签名返回给前端进行验证的一个作用了，步骤的话：
1.获取微信access_token
2.用access_token获取jsapi_ticket
3.对jsapi_ticket等字段拼接进行sha1算法得到singature，返回给前端
1.获取access_token链接: 官方文档
// An highlighted blockpublic static String getAccessToken() {String access_token = "";String grant_type = "client_credential";//获取access_token填写client_credential String AppId="APPID";//第三方用户唯一凭证String secret="APPSECRET";//第三方用户唯一凭证密钥，即appsecret //这个url链接地址和参数皆不能变String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type="+grant_type+"&appid="+AppId+"&secret="+secret;try {URL urlGet = new URL(url);HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();http.setRequestMethod("GET"); // 必须是get方式请求http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");http.setDoOutput(true);http.setDoInput(true);System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 连接超时30秒System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 读取超时30秒http.connect();InputStream is = http.getInputStream();int size = is.available();byte[] jsonBytes = new byte[size];is.read(jsonBytes);String message = new String(jsonBytes, "UTF-8");JSONObject demoJson = JSONObject.fromObject(message);access_token = demoJson.getString("access_token");is.close();} catch (Exception e) {e.printStackTrace();}return access_token;
}2.获取jsapi_ticket链接: 官方文档
图片:
1.ticket有效期是2小时。后面你要是需要调微信api的话，有个时效性，所以我们需要放入缓存。
// An highlighted blockpublic static String getTicket(String access_token) {String ticket = null;String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+ access_token +"&type=jsapi";//这个url链接和参数不能变try {URL urlGet = new URL(url);HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();http.setRequestMethod("GET"); // 必须是get方式请求http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");http.setDoOutput(true);http.setDoInput(true);System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 连接超时30秒System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 读取超时30秒http.connect();InputStream is = http.getInputStream();int size = is.available();byte[] jsonBytes = new byte[size];is.read(jsonBytes);String message = new String(jsonBytes, "UTF-8");JSONObject demoJson = JSONObject.fromObject(message);ticket = demoJson.getString("ticket");is.close();} catch (Exception e) {e.printStackTrace();}return ticket;
}3.sha1加密 官方文档
注.sha1算法自己百度或者照着我这版敲（100%可用）
//时间戳和随机字符串String noncestr = UUID.randomUUID().toString().replace("-", "").substring(0, 16);//随机字符串String timestamp = String.valueOf(System.currentTimeMillis() / 1000);//时间戳//对str进行sha1加密，注意拼接顺序不可变，注意大小写！这个url为前端动态获取的url，url的格式要注意一下（https://******）String str = "jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"×tamp="+timestamp+"&url="+url;
图片:
把前端wx.config需要的这几个值，在controller层弄个map返回给前端就行了。
总结
坑还是不少的
1.timeStamp大小写要注意下。
2.appid为公众号appid，并不是小程序的appid。
3.wx-open-launch-weapp标签内按钮不显示，需要在onload先wx.config先验签，才会显示。
4.js安全域名配置（直接配置一级域名就行了，不要把https：加在上面了）
5.公众号和小程序都要是认证过且关联的。
6.微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。
7.其它的暂时想不起来了，有问题百度。（上面的代码，除sha1算法外，其它的要根据个人实际情况进行开发。不要全搬）
8.感谢阅读~有用的话，点个赞吧，Thanks♪(･ω･)ﾉ
h5跳转小程序、短信跳转小程序＜wx-open-launch-weapp＞干货满满相关推荐
- 微信云开发配置自有域名（短信跳转小程序）
记:微信官方文档不全,写笔记,望后人勿赴前尘: 官方文档:短信跳转小程序文档 下图是我走小程序接口发送短信的成功率(我觉得太了) 所以,对于1的文档你可以选择不可,直接看:静态网站H5跳小程序 按照上 ...
- 小程序短信验证码登录，1分钟实现小程序发短信功能，借助云开发10行代码实现短信验证码登录小程序
老规矩先看效果图 普通短信 验证码短信 今天被云开发官方告知,云开发支持发短信功能了,然后就迫不及待的来尝下鲜. 进入官方文档一看,云开发给咱们开发者的福利还真不小. 不仅仅可以很方便的使用短信功能, ...
- 微信小程序短信验证登录
首先小程序wxml页面 <!--pages/logins/logins.wxml--> <view class="container"><view c ...
- deeplink唤醒app测试软件,短信跳转app-DeepLink
在 App 运营过程中,会有大量的推广短信,里面附有链接,目的是引导用户参与活动.如果用户手机没有安装我们的 App 就引导其去下载页,如果用户已经安装了我们的 App 就直接在 App 中打开对应的 ...
- python小程序短信发送助手
文章目录 前言 一.短信发送助手是什么? 二.使用步骤 1.引入库 2.循环发送 3.全部代码 5.运行结果 总结 前言 在当今时代每个人已经离不开网络,在网上冲浪的过程中我们难免会遇到喷子.作为一名 ...
- 微信小程序短信验证码 php,微信小程序中短信验证码登录全流程及代码
才开始学习小程序,用到短信验证码登录,使用榛子云短信(smsow.zhenzikj.com) 效果: 我是java开发者,后端使用了springMvc 短信验证码实现流程 1.构造手机验证码,生成一个 ...
- 如何从应用直接跳转AppStore 电话 短信 邮件
//如何从应用直接跳转AppStore [[UIApplication sharedApplication]openURL:[NSURL URLWithString:@"应用程序的下载链接& ...
- 微信小程序-短信验证码
效果: 源码地址:链接:https://pan.baidu.com/s/17fbWUS1jrBLbPXyEgHKVcg 密码:ot16 参考:https://blog.csdn.net/Beijiya ...
- 微信小程序短信验证码登录demo
自己记录学习使用 html <view class="wrap"><view class="tel"><input type=&q ...
最新文章
- jvm性能调优 - 11J线上VM调优案例分享
- 我对模板模式和策略模式的理解
- 数据库 SQL语法一
- Js函数function基础理解
- python基础(part7)--容器类型之列表
- Eclipse 里一个 SAP Hybris Commerce 的开发插件
- 【图论】【高精】产生数（ssl 1021/ luogu 1037）
- Træfɪk入门教程
- 单片机c语言字符,单片机C语言中变量的定义方法解析
- 生成随机验证码，上传图片文件，解析HTML
- 800份h5游戏源码
- java get与post区别_POST和GET区别
- 职称计算机考试相当于几级,全国职称计算机考试与全国计算机等级考试有什么不同？...
- javascript 构造函数方式定义对象 (转载）
- Win10使用说明 - 任务栏设置、触摸板手势和使用偏好
- 游戏服务端究竟解决了什么问题
- 解决 required a bean of type ‘com.aliyun.oss.OSSClient‘ that could not be found
- matlab 固定收益证券,matlab计算固定收益证券学习(二)
- BLE 蓝牙抓包分析
- nbu Linux 邮件告警,NBU常用命令1——介质管理