用的Angular 写的SPA 页面， 扫瞄分享功能都可以成功， 服务号是认证过的，sdk用的npm 包方式引入, 名为weixin-js-sdk, 查了版本是1.6.0，其他微信版本，iOS版本都是符合的，但是wx-open-launch-weapp 按钮不显示，点击无反应，打开看Vconsole工具查看element元素，元素是在的，就是不显示，在线跪求大佬指点。贴上代码
ngOnInit() {
this.initPage();
// init wxInit code
const url = encodeURIComponent(window.location.href);
this.wxsdk.getJSAPI(url, 'offical').subscribe(res => {
this.wxsdk.initConfig(['scanQRCode'], res, ['wx-open-launch-weapp']);
});
}
ngAfterViewInit(): void {
setTimeout(()=>{
this.appTaginit();
},1000)
}
appTaginit(){
const wxOpenApp = document.getElementById('wxOpenInAPP') as Element;
wxOpenApp.innerHTML = '<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxx" path="/pages/home/home.html"><templete><div class="wx-btn">跳转小程序</div></templete></wx-open-launch-weapp>';
const launchBtn = document.getElementById('launch-btn') as Element;
if (!launchBtn) {
return
}
launchBtn.addEventListener('launch', function (e) {
console.log('launch',e);
})
launchBtn.addEventListener('error', function (e:any) {
console.log('fail', e.detail)
})
}
this.wxsdk.initConfig代码如下：
Html代码
线上图：
请问我的config：ok了，为什么加上 <script type="text/wxtag-template"> <style> .btn { width: 100%; height: 100px; padding: 12px; font-size: 16px; color: #f00; } </style> <button class="btn">打开小程序</button> </script> w微信浏览器和别的浏览器打开都不显示啊，不加<script type="text/wxtag-template"></script>标签情况下点击无效，求大神解答一下！！！我这里开发标签也不显示，
Angular 11 项目引用weixin js
正式开放帐号，配置js访问域名，配置IP白名单；wxconfig已经成功
在index.html head里配置了 meta Content-Security-Policy 添加了;frame-src https://*.qq.com webcompt:;
使用js写入 wx-open-launch-weapp
var dom = document.getElementById('wxOpenInAPP'); dom.innerHTML = '<div>test</div>' + '<wx-open-launch-weapp id="launch-btn" username="gh_047f793998c2" path="pages/mine/coupon_detail.html?reseller=43&id=65"><script type="text/wxtag-template"><style>.btn{ display: inline-block; color: #fff; text-align: center; white-space: nowrap; vertical-align: middle; touch-action: manipulation; box-sizing: border-box; height: 44px; line-height: 44px; font-size: 16px; width: 100%; background: #d84e43; border-color: #d84e43; border-radius: 4px; }</style><button class="btn">打开小程序</button></script></wx-open-launch-weapp>';
但是在iPhone 8 微信浏览页面时，此按钮不显示。
请问谁可以帮分析一下原因，谢谢
问题已解决。我的问题最后定位在本项目的response head设置content-security-policy屏蔽了jssdk内部调取的地址~~~~~期间没头没脑尝试各种方式就不说了，回头查看文档一看，才看懂玄机。
第二点，当时没看懂csp是啥专业名词，现在看真的是心中五味杂陈。这文档能不写缩略词么~~~~
而且这个样式外部可能引入不进来
// wxOpenApp.innerHTML = '<wx-open-launch-weapp id="launch-btn" username="gh_xxxx" path="/pages/home/home.html"><script type="text/wxtag-template"><style>.wx-btn { font-size: 14px; color: #666; width: 40px; height: 40px; display: block;}</style> <div class="wx-btn" style="font-size: 14px; color: #666;">跳转小程序</div></script></wx-open-launch-weapp>';wxOpenApp.innerHTML = '<wx-open-launch-weapp id="launch-btn" username="gh_xxx" path="/pages/home/home.html"><template><style> .wx-btn { color: #666; width: 100%; height:100%; display: block; text-aligin:center; }</style><button class="wx-btn">跳转小程序</button></template></wx-open-launch-weapp>';