微信H5拉起（跳转）微信小程序

main.js配置忽略wx-open-launch-weapp

Vue.config.ignoredElements = ['wx-open-launch-weapp'];

template

<template><view class="index-wrapper"><!-- 这里必须要设置宽高,否则渲染出来没有宽高 wx-open-launch-weapp--><view class="wrapper"><view class="">点击下面按钮跳转</view><wx-open-launch-weappid="launch-btn"class="wx-weapp-wrapper":username="zzh.appId":path="zzh.path"@launch="handleLaunch"@error="handleError"><script type="text/wxtag-template"><button class="btn">销售云（不会被显示出来）</button></script><view class="btn">销售云</view></wx-open-launch-weapp></view></view>
</template>

script

<script>import wechat from '@/utils/wechat';export default {created() {const oScript = document.createElement('script');oScript.type = 'text/javascript';//需要注意的是，我把jweixin-1.6.0.js下载到本地引用，总是报错//换成引用远程的方式就可以，一定要注意oScript.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';oScript.onload = this.wxminidocument.body.appendChild(oScript);},methods: {wxmini(){const _this = this;if (!_this.$mWechat.isWechat()) {_this.$mHelper.toast('请在微信客户端打开');return;}const hrefURL = window.location.href;const signURL = encodeURIComponent(hrefURL.indexOf("#") > -1 ? hrefURL.split('#')[0] : hrefURL);wechat.getH5Sign(signURL).then(data => {wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印...data,jsApiList: ['onMenuShareTimeline'], // 必填，需要使用的JS接口列表openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']});wx.ready(function () {console.log('ready')});});},//监听跳转handleLaunch() {console.log('跳转');this.$mHelper.toast('小程序跳转成功handleLaunch');},//监听错误handleError() {console.log('失败');this.$mHelper.toast('小程序跳转失败');}}}
</script>

style

<style lang="scss">.wrapper {position: absolute;width: 100%;height: 100px;top: 0;left: 0;opacty: 0;text-align: center;margin-top: 50px;.wx-weapp-wrapper {display: block;text-align: center;font-size: 16px;border: 1px solid #d8d8d8;border-radius: 20px;margin: 0 50px;box-shadow: 2px 2px 4px 2px #d8d8d8;padding: 10px;}}
</style>

结果
如果开发者工具弹出下面提示，就可以把代码打包到服务器上测试了（微信开发者工具是不会又真正效果展示的）
后端处理签名等数据

public ResponseResult getAccessToken() {String accessTokenStr = redisHelper.getStr("mpshop-h5-access_token_expires_in");if (StringUtils.isNotEmpty(accessTokenStr)) {logger.info("access_token已缓存：" + accessTokenStr);return new ResponseResult(ResponseResult.SUCCESS, "成功", accessTokenStr);}//如果缓存中没有就去微信官方获取String[] apps = new String[]{"wechatH5AppId", "wechatH5AppSecret"};List<MpshopConfig> configs = configMapper.getByCodes(apps);final String[] appId = {h5AppId};final String[] appSecret = {h5AppSecret};if (!CollectionUtils.isEmpty(configs)) {configs.stream().forEach(item -> {if ("wechatH5AppId".equals(item.getCode())) {appId[0] = item.getValue();}if ("wechatH5AppSecret".equals(item.getCode())) {appSecret[0] = item.getValue();}});}String url = h5AccessTokenUrl.replace("APPID", appId[0]).replace("APPSECRET", appSecret[0]);String result = HttpRequest.get(url).timeout(6000).execute().body();logger.info("获取accessToken的返回：" + result);if (StringUtils.isEmpty(result)) {return new ResponseResult(ResponseResult.ERROR_400,"获取accessToken失败");}JSONObject data = JSON.parseObject(result);if (data.containsKey("access_token")) {//说明返回成功if (data.containsKey("expires_in")) {//微信官方的默认过期时间应该是7200秒，我们这里设置一定要小于7200秒，但是不能太小，请求太频繁，会被微信拦截掉redisHelper.setStr("mpshop-h5-access_token_expires_in", data.getString("access_token"), 3600, TimeUnit.SECONDS);}return new ResponseResult(ResponseResult.SUCCESS, "成功", data.getString("access_token"));}if (data.containsKey("errcode")) {return new ResponseResult(ResponseResult.ERROR_400, data.getString("errmsg"));}return new ResponseResult(ResponseResult.ERROR_400, "获取accessToken失败");
}public ResponseResult getJsApiTicket() {String jsApiTicketStr = redisHelper.getStr("mpshop-h5-jsapi_ticket_expires_in");if (StringUtils.isNotEmpty(jsApiTicketStr)) {logger.info("jsapi_ticket已缓存：" + jsApiTicketStr);return new ResponseResult(ResponseResult.SUCCESS, "成功", jsApiTicketStr);}ResponseResult responseResult = this.getAccessToken();if (ResponseResult.SUCCESS != responseResult.getCode() || null == responseResult.getData()) {return responseResult;}String accessToken = String.valueOf(responseResult.getData());String url = h5JsApiTicketUrl.replace("ACCESS_TOKEN", accessToken);String result = HttpRequest.get(url).timeout(6000).execute().body();logger.info("获取jsApiTicket的返回：" + result);if (StringUtils.isEmpty(result)) {return new ResponseResult(ResponseResult.ERROR_400,"获取TICKET失败");}JSONObject data = JSON.parseObject(result);if (0 != data.getIntValue("errcode") && !data.containsKey("ticket")) {return new ResponseResult(ResponseResult.ERROR_400,"获取TICKET失败");}//说明返回成功if (data.containsKey("expires_in")) {//微信官方的默认过期时间应该是7200秒，我们这里设置一定要小于7200秒，但是不能太小，请求太频繁，会被微信拦截掉redisHelper.setStr("mpshop-h5-jsapi_ticket_expires_in", data.getString("ticket"), 3600, TimeUnit.SECONDS);}return new ResponseResult(ResponseResult.SUCCESS,"成功", data.getString("ticket"));
}public ResponseResult getH5Signature(String hrefURL) {ResponseResult responseResult = this.getJsApiTicket();if (ResponseResult.SUCCESS != responseResult.getCode() || null == responseResult.getData()) {return responseResult;}String jsApiTicket = String.valueOf(responseResult.getData());String nonceStr = StringUtil.getRandom(10);//需要注意的是，这里的时间戳是秒级时间戳（10位），不是毫秒级（13位）String timestamp = String.valueOf(System.currentTimeMillis() / 1000);//时间戳try {String url = URLDecoder.decode(hrefURL, "UTF-8");//String signature = SignUtil.createSignature(jsApiTicket, nonceStr, timestamp, signURL);String signature = DigestUtil.sha1Hex("jsapi_ticket=" + jsApiTicket + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url=" + url);logger.info("获取到的signature：" + signature);if (StringUtils.isEmpty(signature)) {return new ResponseResult(ResponseResult.ERROR_400,"获取签名失败");}Map<String, Object> data = new HashMap<>(4);data.put("appId", h5AppId);data.put("nonceStr", nonceStr);data.put("timestamp", timestamp);data.put("signature", signature);logger.info("data数据：" + JSONUtil.toJsonStr(data));return new ResponseResult(ResponseResult.SUCCESS,"成功", data);} catch (UnsupportedEncodingException e) {e.printStackTrace();}return new ResponseResult(ResponseResult.ERROR_400,"未知错误");
}

微信H5拉起（跳转）微信小程序相关推荐

实现微信扫一扫跳转到小程序指定页面
使用微信扫一扫进入小程序内的指定页面文章目录使用微信扫一扫进入小程序内的指定页面前言一.微信小程序平台配置二.前端uniapp中的获取二维码信息三.后端处理参数总结前言使用场景:例如 ...
微信H5 使用浏览器不能唤起支付宝小程序
记录一下,自己遇到的一些问题: 业务需求: h5放在微信公众号和支付宝生活号里面, 在公众号登录H5时,点击付款需要进入支付宝小程序遇到的问题 : 1.微信直接无法调起支付宝: 这边可以参 ...
微信公众号菜单跳转到小程序教程-客服系统对接公众号配置菜单JSON
现在客服系统的后台,对接微信公众号菜单功能,可视化编辑菜单界面有些不足只能跳转链接,没有其他点击事件以及跳转小程序功能其实,生成公众号菜单只是一个JSON的形式,具体的JSON内容可以参照下面示例 ...
新版微信不停跳转到小程序_如何设置跳转微信小程序
一.功能效果手机网站常用模块:文本.图片.按钮支持设置点击跳转微信小程序. 可实现手机微信端下,打开手机网站可与微信小程序的实现相互跳转. 二.注意事项 [版本]展示中级版及以上版本支持开通. [条 ...
h5网页url跳转微信链接，小程序外链跳转任意站技术大揭秘
见多识广的你,想必也领略过"跳一跳"小游戏的魅力! 但你未必知道,小程序也能"跳"上那么一"跳"! 怎么个"跳"法? 来 ...
如何在微信H5页面链接跳转到第三方小程序的任意页面？
在微信内的H5界面,跳转到第三方小程序的前提条件: 佣有已认证的服务号,服务号添加"JS接口安全域名", 即访问H5界面的域名获得第三方小程序的原始ID 这个只能手动获取,微信官 ...
H5静态页面跳转微信小程序；从外部浏览器，点击H5链接跳转打开微信小程序；以及在微信内直接点击H5链接打开微信小程序；
参考链接需求:从外部浏览器,点击H5链接跳转打开微信小程序:以及在微信内直接点击H5链接打开微信小程序: 步骤1: 小程序开发需要使用云开发创建项目,使用云开发生成的项目会自带云函数文件夹: 步骤2 ...
h5跳转到小程序总是出现页面不存在-微信小程序开发
官方文档看了一下很简单: <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" pat ...
微信支付，JSAPI支付，APP支付，H5支付，Native支付，小程序支付功能详情以及回调处理
一.支付相关文档地址支付wiki:https://pay.weixin.qq.com/wiki/doc/apiv3/index.shtml 支付api: https://pay.weixin.qq. ...
Android APP跳转微信小程序和APP跳转支付宝小程序传参
Android APP跳转微信小程序和APP跳转支付宝小程序传参微信开放文档链接 MINIPROGRAM_TYPE_PREVIEW:体验版. MINIPROGRAM_TYPE_TEST:开发版 MI ...

微信H5拉起（跳转）微信小程序

微信H5拉起（跳转）微信小程序相关推荐

最新文章

热门文章