本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
说我们IIS7站长博客,有一篇博文用了他们的图片。
要求我们给他们一张图片6000元。要不然法院告我们
为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!
另祝:版权碰瓷诈骗团伙,早日弃暗投明。
相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月
叹!百花齐放的时代,渐行渐远!
需求
实现
- 步骤,参见
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
官方文档去加载对应的开放标签。
- 由于框架的问题,会导致在vue和react中,加载不出来该开放标签,所以需要做特殊处理。
react处理
- 将开放标签的代码写成字符串,然后传给一个空的
div
的dangerouslySetInnerHTML
属性。
const createWeAppHtml = () => {
return {
__html: `<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx" // 这个是小程序的原始ID,直接去小程序的基本设置页面翻到最下面就能看到
path="pages/index/index.html"
>
<template>
<style>
.btn {
padding: 18px
}
</style>
<button class="btn">打开小程序</button>
</template>
</wx-open-launch-weapp>`
}
}
<div className="btn" dangerouslySetInnerHTML={createWeAppHtml()}></div>
vue
- 由于这个开放标签是支持动态加载的,所以只需要写成字符串然后动态的插入在对应的标签里面就可以了。
react
里面这样写应该也是可以的,不过既然官方提供了原生的插入html
的api
就没必要用dom
操作。
Mounted() {
const html = `
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx" // 这个是小程序的原始ID,直接去小程序的基本设置页面翻到最下面就能看到
path="pages/index/index.html"
>
<template>
<style>
.btn {
padding: 18px
}
</style>
<button class="btn">打开小程序</button>
</template>
</wx-open-launch-weapp>
`;
document.getElementById('slot-demo').innerHTML = html;
}