uni-app写的H5页面,其中在最后的一个页面中需要点击跳转到指定的小程序中,百度了一下都是没有找到uni-app的适合版本。
1.在项目的根目录下,建个文件夹,将微信的weixin-js-sdk文件放进去,在要用的页面中引进来
引进来后就可以使用了。
我想要的结果是这样的,一个图片可以直接点击,然后跳转到相应的小程序中,但是我直接在这里面写是不生效的,不知道是不是图片找不到,还是wx-open-launch-weapp标签找不到。
<wx-open-launch-weapp>
<script type="text/wxtag-template">
<style>#image{width: 100px; height: 50px;} </style>
<img src="../../static/btn1x.png" mode="" id="image">
</script>
</wx-open-launch-weapp>
后来换了一种,将image标签扣出来,作为模板字符串,操作DOM节点动态添加上去还是不行,最后我把这个图片放到了服务器的静态资源上面,才显示出来,(这里面提一个很重要的点)script标签有闭合的话,给的 type=“text/wxtag-template”,最后图片还是显示不出来,我看好多都是原生的直接在body里面直接写<wx-open-launch-weapp></wx-open-launch-weapp>
标签里面写东西,然后都可以运行出来,但是我的H5页面是用uni-app来写的,我的也显示不出来。
所以重要的一点就是script标签给开始标签,不要写闭合结束的标签,百度了一下,好像uni-app自动給补全剩下的闭合标签。样式的话也是写必须写到<wx-open-launch-weapp></wx-open-launch-weapp>
里面的,
结果就是出来了,
var dom = document.getElementById('moreCat')
dom.innerHTML ='<wx-open-launch-weapp id="launch-btn" username="gh_ce96b419ae7e" path="/pages/root/coffee/index.html"><script type="text/wxtag-template"><style>.btnMore { width: 100px; height: 50px; }</style><image src="https://static。。。。。。/staticImage/test/btn1x.png" class="btnMore" style="width:' +width +'px;height: ' + height + 'px;z-index:100" ></image></wx-open-launch-weapp>'
完整的代码是:
html代码:
<view class="endPage-cont-foot-btn-button" id="moreCat">
</view>
JS代码:
onLoad() {
this.$nextTick(function() {
var img = document.getElementById('shareImgBtn')
const width = img.clientWidth
const height = img.clientHeight
// console.log(width, height)
var dom = document.getElementById('moreCat')
dom.innerHTML ='<wx-open-launch-weapp id="launch-btn" username="gh_ce96b419ae7e" path="/pages/root/coffee/index.html"><script type="text/wxtag-template"><style>.btnMore { width: 100px; height: 50px; }</style><image src="https://static.mdaren.cn/staticImage/test/btn1x.png" class="btnMore" style="width:' +width +'px;height: ' + height + 'px;z-index:100" ></image></wx-open-launch-weapp>'
let paramData = { url: encodeURIComponent(window.location.href.split('#')[0])}
uni.request({
type: "GET",
//请求的媒体类型
contentType: "application/json;charset=UTF-8",
url: '跳转小程序的权限请求接口',
beforeSend: function(xhr) {
// 设置请求头
xhr.setRequestHeader("Authorization","设置的请求头");
},
data: paramData,
success: (data) => {
console.log('请求成功', data.data.data)
const res = data.data.data
wx.config({
debug: false,
appId: res.appid,//小程序的appId
timestamp: res.timestamp,//生成签名的时间戳
nonceStr: res.nonceStr,//生成签名的随机串
signature: res.signature,//签名
jsApiList: ['onMenuShareTimeline'],
openTagList: ['wx-open-launch-weapp']
})
wx.ready((e) => {
console.log(e, '成功验证')
})
wx.error((e) => {
console.log(e, '失败信息')
})
},
//请求失败,包含具体的错误信息
error: function(e) {
console.log(e.status, '----');
console.log(e.responseText);
},
})
})
},
写在this.$nextTick()里面是因为我那个图片是从服务器请求过来的,比本地的加载的慢了很多