小程序分享到朋友圈 H5打开小程序H5打开APP 「wx-open-launch-weapp」 「wx-open-launch-app」

   日期:2020-07-13     浏览:759    评论:0    
核心提示:前言微信更新了两个功能块 简单使用了下 给大家写篇文章说说 避免走弯路 欧力给!1.小程序分享到朋友圈//在页面的js里设置下就ok onShareTimeline(){ return { title: 微视宝, imageUrl: /assets/images/wsbLOGO2.png, query: /pages/homepage/homepage } },需要注意的是 (现测试阶段只能在安卓上实现 )_wx-open-launch-weapp

前言

微信更新了两个功能块 简单使用了下 给大家写篇文章说说 避免走弯路 欧力给!

1.小程序分享到朋友圈

//在页面的js里设置下就ok
 onShareTimeline(){
   return {
       title: "微视宝",  
       imageUrl: '/assets/images/wsbLOGO2.png',
      query: '/pages/homepage/homepage'
    }
  },

需要注意的是 (现测试阶段只能在安卓上实现 ) onShareTimeline() 需要自己去加 默认没有

2.H5打开小程序

我这里是vue环境 以vue举例
1.在我们的《index.html》 中引入最新的js包

 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript"></script>

2.通过config接口注入权限验证配置并申请所需开放标签 (开放标签的申请和JS接口的申请相互独立,因此是可以同时申请的

  wx.config({
           debug: false, // 是否开启调试模式
           appId: sdk.appId, //appid
           timestamp: sdk.timestamp, // 时间戳
           nonceStr: sdk.nonceStr, // 随机字符串
           signature: sdk.signature, // 签名
           jsApiList: [
             "onMenuShareTimeline",
             "onMenuShareAppMessage",
             "onMenuShareQQ",
             "onMenuShareWeibo",
             "onMenuShareQZone",
             "openLocation",
             "chooseWXPay",
           ],
           openTagList:[
             'wx-open-launch-weapp',  //跳转小程序
             'wx-open-launch-app'      //跳转app
           ]
         }); 
         //至于如何注入js sdk 这个都烂大街了就不说了  可自行查阅资料
  1. 开始写跳转页面 (需要注意以下两点)

对于Vue等视图框架,为了避免template标签冲突的问题,可使用<script type=“text/wxtag-template” < script> 进行代替,来包裹插槽模版和样式。

<wx-open-launch-weapp id="launch-btn" username="gh_11111111111" path="/pages/homepage/homepage.html">
    <script type="text/wxtag-template">
      <style>.btn { display: flex;align-items: center; width: 100%; height: 100px; margin-top: 20%; color: #FFFFFF;  background-color: #007AFF; }</style>
      <button class="btn">打开小程序<button>
    </script>
  </wx-open-launch-weapp>

1.username不是appid是以gh开头的
2.还有我们跳转的路径要带.html
3.本地会报组件未注册的错 可忽略
4.微信网页模拟器也不可以 需要在真机上才可展示出来 (若未展示出来按钮 检查自己config注入是否成功

4.效果图

3.H5打开APP

和跳转小程序一致 但需要先到开放平台配置
使用前需将「 JS 接口安全域名绑定的服务号」绑定在「移动应用的微信开放平台账号」下,并确保服务号与此开放平台账号同主体且均已认证。请前往 微信开放平台-管理中心-公众号详情-接口信息 设置域名与所需跳转的移动应用。

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服