相关文章（看这个老哥的就够了）

developers.weixin.qq.com/community/p…

遇到的坑

• 一定要添加白名单（在正式环境用手机）才能看见
• 白名单csp最好放在css样式之后，因为它可能过滤掉你的样式啥的，导致样式不生效
• 在渲染的时候一定要保证它以及它的父级元素display不是none

//csp加在对应页面的meta中

 <meta http-equiv="Content-Security-Policy" content="script-src * 'self' 'unsafe-inline' 'unsafe-eval'  https://img.yzcdn.cn https://ssl.google-analytics.com  https://assets.zendesk.com https://connect.facebook.net;default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src * data: content:; connect-src *;  font-src * data: content:;frame-src https://*.qq.com webcompt:;">
 

代码展示

• 本人使用的是动态添加的方法(在想要显示的地方调用btnHtml即可)
• 👇👇👇👇👇👇👇👇

 <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
created(){
    this.initWx()
},
 methods: {
     initWx(){
           $.post("<%=basePath%>wxWebAction/getSignature",{"url":window.location.href},(data,status)=>{
                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: data.appId, // 必填，公众号的唯一标识
                            timestamp:data.timestamp , // 必填，生成签名的时间戳
                            nonceStr: data.nonceStr, // 必填，生成签名的随机串
                            signature:data.signature,// 必填，签名，见附录1
                            jsApiList: ["updateTimelineShareData"],
                            openTagList: ['wx-open-launch-weapp']
                        });
                    });
                    wx.ready(()=> {

                    })
                    wx.error(function (res) {
                        console.log(res)
                    });
                },
     btnHtml() {
      let con =
        `<wx-open-launch-weapp
                              id="launch-btn"
                              username="gh_0bd6c703XXXX"
                              path="pages/courseDetail/courseDetail.html?id=` +
        this.courseId +
        `"
                              @launch="handleLaunchFn"
                              @error="handleErrorFn">
                          <template>
                              <style>.btn{    position: relative;
                                  display: block;
                                  background-color: #07c160;
                                  width: 184px;
                                  margin-left: auto;
                                  margin-right: auto;
                                  padding: 8px 24px;
                                  box-sizing: border-box;
                                  font-weight: 700;
                                  font-size: 17px;
                                  text-align: center;
                                  text-decoration: none;
                                  color: #fff;
                                  line-height: 1.88235294;
                                  border-radius: 8px;
                                  -webkit-tap-highlight-color: rgba(0,0,0,0);
                                  -webkit-user-select: none;
                                  user-select: none;}</style>
                              <a class="btn">前往课程页面</a>
                          </template>
                      </wx-open-launch-weapp>`;
      this.$refs.btn.innerHTML = con;
    },

    handleLaunchFn(e) {},
    handleErrorFn(e) {}, 
 
 }