H5跳转微信小程序。wx-open-launch-weapp 用法
需求分析：
公众号页面内点击按钮，跳转到小程序页面。
查看官方文档。
微信开放文档
1.根据文档第一步通过config接口注入权限验证配置并申请所需开放标签
让后台提供一个接口，返回 一下数据。
appId: data.appId, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳s 必填，填任意数字即可
nonceStr: data.nonceStr, // 必填，生成签名的随机串必填，填任意非空字符串即可
signature: data.signature, // 必填，签名 必填，填任意非空字符串即可
created() {
this.wxmini();
},
methods: {
wxmini() {
let _that = this;
let params = {
hospitalCode: localStorage.getItem('hospitalCode'),
url: location.href.split('#')[0] //当前的url
}
api('/wechat/rexxxxxxt/sxxxx', 'post', params).then(res => {
console.log(res)
// {
// \"openTagList\":[\"wx-open-launch-weapp\"],\"jsApiList\":[\"openLocation\"],\"signature\":\"sdfsdfsdflsdjfsldjflsdjfsdljfsld\",
// \"appId\":\"wxxxxxxxxx\",
// \"nonceStr\":\"\",\
// "timestamp\":\"\"}"
// }j
if (res.data.data) {
// let data = JSON.parse(res.data.data)
let data = res.data.data
console.log(data)
wx.config({ // eslint-disable-line
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
appId: data.appId, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳s 必填，填任意数字即可
nonceStr: data.nonceStr, // 必填，生成签名的随机串必填，填任意非空字符串即可
signature: data.signature, // 必填，签名 必填，填任意非空字符串即可
// jsApiList: ['chooseImage', 'previewImage'],
jsApiList: ['onMenuShareTimeline',
'onMenuShareAppMessage',
'checkJsApi',
'scanQRCode',
'chooseImage', 'previewImage',
], // 必填,需要使用的JS接口列表
// jsApiList: data.jsApiList, // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
// openTagList: data.openTagList // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});
wx.ready(function () {
console.log('ready')
// alert('ready')
var btn = document.getElementById('launch-btn')
console.log(btn);
btn.addEventListener('launch', function (e) {
// alert(e)
console.log(e);
})
btn.addEventListener('error', function (e) {
// alert(e.detail)
console.log(e);
})
});
wx.error(function (res) {
console.log(res);
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
}
/* eslint-disable */
})
},
handleLaunchFn(e) {
console.log('success', e);
},
handleErrorFn(e) {
console.log('fail', e.detail);
},
},
使用的时候，打开debug ，页面弹出 config:ok，说明注入环境配置成功。
附上问后台要的代码：
/**
* @author Edward
*/
@Slf4j
@AllArgsConstructor
@RestController
@RequestMapping("/wx/ssssdfsd")
@Api(description = "微信授权")
public class WxRedirectController {
private final WxMpService wxService;
@Autowired
private WxProperties wxProperties;
@Autowired
private RedisUtil redisUtil;
/**
* 创建调用jsapi时所需要的签名.(微信扫一扫)
*/
@ApiOperation(value = "创建调用jsapi时所需要的签名.(微信扫一扫)", notes = "创建调用jsapi时所需要的签名.(微信扫一扫)")
@RequestMapping(value = "/signature", method = RequestMethod.POST)
public CommonResult<WxJsapiSignatureResDto> signature(@RequestBody WxJsapiSignatureReqDto reqDto) {
log.info("\n微信授权入口，内容：{}", JsonUtils.toJson(reqDto));
CommonResult commonResult = new CommonResult();
String appid = wxProperties.getCodeAppidMaps().get(reqDto.getHospitalCode());
if (org.apache.commons.lang.StringUtils.isBlank(appid)) {
commonResult.setResult("5000", "无法找到对应【" + reqDto.getHospitalCode() + "】的公众号配置信息，请核实！");
return commonResult;
}
boolean b = this.wxService.switchover(appid);
if (!b) {
commonResult.setResult("5000", "无法找到对应【" + appid + "】的公众号配置信息，请核实！");
return commonResult;
}
//WxMpOAuth2AccessToken accessToken = null;
//try {
// accessToken = wxService.oauth2getAccessToken(reqDto.getCode());
//} catch (WxErrorException e) {
// e.printStackTrace();
// commonResult.setCode("5002");
// commonResult.setMsg("授权失败");
// return commonResult;
//}
//log.info("\n微信授权出口，内容：{}", JsonUtils.toJson(accessToken));
if (StringUtils.isBlank(reqDto.getUrl())) {
commonResult.setResult("5000", "url不能为空");
}
WxJsapiSignatureResDto resDto = new WxJsapiSignatureResDto();
try {
WxJsapiSignature jsapiSignature = wxService.createJsapiSignature(reqDto.getUrl());
log.info("\n微信创建调用jsapi时所需要的签名.(微信扫一扫)，内容：{}", JsonUtils.toJson(jsapiSignature));
resDto.setAppId(jsapiSignature.getAppId());
resDto.setNonceStr(jsapiSignature.getNonceStr());
resDto.setSignature(jsapiSignature.getSignature());
resDto.setTimestamp(jsapiSignature.getTimestamp());
resDto.setUrl(jsapiSignature.getUrl());
} catch (WxErrorException e) {
log.error("错误：" + e.getMessage());
commonResult.setCode("5002");
commonResult.setMsg("授权失败");
return commonResult;
}
log.info(resDto.toString());
commonResult.setData(resDto);
return commonResult;
}
2.第二步，写html
官方提供的案例：
所以我们按照官方提供的案例封装成一个组件。
<template>
<!-- 关于username 与 path的值 参考官方文档 -->
<wx-open-launch-weapp id="launch-btn" username="gh_XXXXXXXXXX" :path="path" @launch="handleLaunchFn" @error="handleErrorFn">
<script type="text/wxtag-template">
<style>
.btn {
color:#1578FF;
font-size:14px;
}
</style>
<span class="btn">导航</span>
</script>
</wx-open-launch-weapp>
</template>
重点：
记得让后台处理url转码
username:’’ // 需要跳转的小程序的id，gh_开头的那个
path：’‘// 跳转的路径，小程序提供的
例：
pages/map/mapView?buildId=0AIA01&url=https%3A%2F%2Fhis.ipalmap.com%2Fnavigation%2Fdist%2Findex.html%23%2Fmap%3FappsId%3D2098%26deptId%3D" + this.headDetail.regdeptid