准备工作,见传送门:UNI-APP 开发微信公众号(H5)JSSDK 的使用方式 - DCloud问答
主要是导入 jweixin 和配置注册信息
1. main.js添加以下代码
Vue.config.ignoredElements = [\'wx-open-launch-weapp\'];
2. 示例
如果 <script type="text/wxtag-template"> 标签需要放入图片,传统的渲染实现不了 需要用
用微信小程序原生的渲染方式
<img src="{{item.xx}}" />
<template>
<view class="content">
<!-- 样式类的话貌似只能在style的内联样式或行内样式才生效 -->
<wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError" username="gh_cxxxxx" path="pages/index/index.html">
<script type="text/wxtag-template">
<style>
.btn { padding: 12px;opacity:0 }
</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
</view>
</template>
<script>
// 这里做个示例,实际上的jweixin sdk是需要你看第一步通过npm或yarn安装
import wx from \'jweixin-module\';
export default {
data() {
return {};
},
onLoad() {
this.getConfig();
},
methods: {
// wx api 注册
getConfig() {
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: appId, // 必填,公众号的唯一标识,填自己的!
timestamp: timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名,见附录1
jsApiList: [\'wx-open-launch-weapp\'],
openTagList: [\'wx-open-launch-weapp\'] // 跳转小程序时必填
});
wx.ready(res => {
console.log(res);
this.$nextTick(() => {
let btn = document.getElementById(\'launch-btn\');
btn.addEventListener(\'launch\', e => {
console.log(\'success\');
});
btn.addEventListener(\'error\', e => {
alert(\'小程序打开失败\');
console.log(\'fail\', e.detail);
});
});
});
wx.error(res => {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
console.log(res);
});
},
// 监听跳转
handleLaunch() {
console.log(\'跳转\');
},
// 监听错误
handleError() {
console.log(\'失败\');
}
}
};
</script>
<style></style>
请发表评论