收藏
回答

angular h5跳转小程序,wx-open-launch-weapp开放标签不显示,点击无反应?

用的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代码

线上图:


回答关注问题邀请回答
收藏

4 个回答

  • G
    G
    03-04
    请问我的config:ok了,为什么加上
    <script type="text/wxtag-template">
     <style>
      .btn {
        width100%;
        height100px;
        padding12px;
        font-size16px;
        color#f00;
      }
     </style>
     <button class="btn">打开小程序</button>
    </script>
    w微信浏览器和别的浏览器打开都不显示啊,不加<script type="text/wxtag-template"></script>标签情况下点击无效,求大神解答一下!!!
    
    03-04
    有用 1
    回复
  • 湃
    07-29

    我这里开发标签也不显示,

    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 微信浏览页面时,此按钮不显示。


    请问谁可以帮分析一下原因,谢谢


    07-29
    有用
    回复
  • Lara ʚ🐷ྀིɞ
    Lara ʚ🐷ྀིɞ
    01-22

    问题已解决。我的问题最后定位在本项目的response head设置content-security-policy屏蔽了jssdk内部调取的地址~~~~~期间没头没脑尝试各种方式就不说了,回头查看文档一看,才看懂玄机。

    第二点,当时没看懂csp是啥专业名词,现在看真的是心中五味杂陈。这文档能不写缩略词么~~~~

    01-22
    有用
    回复
  • MORNINGSTART(tiezhu)
    MORNINGSTART(tiezhu)
    2020-12-30

    这个数组必须有一个元素,不能是空的这个里面加个样式吧 看下文档,有写的

    2020-12-30
    有用
    回复 6
    • Lara ʚ🐷ྀིɞ
      Lara ʚ🐷ྀིɞ
      2020-12-30
      初始化是公共函数,传了参数的,传的是同页面的扫瞄功能, 扫瞄功能是能用的。 样式的话,试了好几次,加了删,删了加的都没用。看到有人说配置没成功,标签就不会显示,不知道哪里出问题了
      2020-12-30
      回复
    • MORNINGSTART(tiezhu)
      MORNINGSTART(tiezhu)
      2020-12-30回复Lara ʚ🐷ྀིɞ
      公共方法也是手动传进去的,有些时候不需要相关的Api,只注册了开放标签,其实注册开放标签时也需要传进去一个api。
      而且这个样式外部可能引入不进来
      2020-12-30
      回复
    • Lara ʚ🐷ྀིɞ
      Lara ʚ🐷ྀིɞ
      2020-12-30回复MORNINGSTART(tiezhu)
      页面初始化的时候传入参数,在这里传入的。样式也写在Templete里,试了好多种都没显示,头大了
      2020-12-30
      回复
    • MORNINGSTART(tiezhu)
      MORNINGSTART(tiezhu)
      2020-12-30回复Lara ʚ🐷ྀིɞ
      我们之前就是因为api的问题,其他的样式也好,功能也好都是按照文档来的,在微信浏览器下是好的 除了小程序内嵌
      2020-12-30
      回复
    • Lara ʚ🐷ྀིɞ
      Lara ʚ🐷ྀིɞ
      2020-12-30回复MORNINGSTART(tiezhu)
      所以小程序内嵌不能用这个方法是么? 是不是要用小程序自己的API?
      2020-12-30
      回复
    查看更多(1)
登录 后发表内容
问题标签