uni-app开发小程序（如何在UNI-APP内开发微信公众号（H5）JSSDK）

参考文章

UNI-APP 开发微信公众号（H5）JSSDK 的使用方式

微信内H5使用JSSDK分享！！！注意目前Hbuilderx2.3.7版本存在问题！！！

vue-router与location.href的用法区别

微信网页开发 JSSDK 分享功能   
    
    
，安卓和调试工具都成功


     


     


     ，IOS无法使用？

源码地址

uniapp-component

请参考 utils/wxShare.js

实现

安装

全局引入： <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

jssdk使用

全局引入之后 




 




 



，我们在微信内访问我们的网页应用时   

   

   

，会新增一个全局变量jWeixin

    
    
    
。

所有需要使用 JS-SDK 的页面必须先注入配置信息

     

     

    ，否则将无法调用    


     


     


。 wx.config({ debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来
  




  




  


，若要查看传入的参数  


  


  


，可以在 pc 端打开 
     
     
   ，参数信息会通过 log 打出

   




   




   

，仅在 pc 端时才会打印




 




 




 。 appId: , // 必填 



 



 



，公众号的唯一标识 timestamp: , // 必填              ，生成签名的时间戳 nonceStr: , // 必填


    




    




    
，生成签名的随机串 signature: ,// 必填














，签名 jsApiList: [] // 必填              ，需要使用的 JS 接口列表 });

signature（签名）生成规则


     



     



     ，可参考微信 JS 接口签名校验工具














，验签中有一个很重要的参数url（当前网页的URL   
    
    
，不包含#及其后面部分   

   

   
。注意：对于没有只有域名没有 path 的 URL 


     


     


     ，浏览器会自动加上 / 作为 path 




 




 



，如打开 http://qq.com 则获取到的 URL 为 http://qq.com/）     

     

     

。

然而   

   

   

，我们的H5应用有一个引导页

     

     

    ，用户访问域名时会先进入引导页
  




  




  


，再根据链接上的参数路由到不同功能页




  




  




 。当我从www.demo.com?type=1路由到www.demo.com/pages/main/main的时候  


  


  


，history发生改变了
  


  


  
。然后不可思议的一幕出现了 
     
     
   ，我验签使用的url时www.demo.com/pages/main/main

   




   




   

，生成的签名和微信 JS 接口签名校验工具生成的签名一样 



 



 



，但jWeixin.config一直提示我 realAuthuUrl[ www.demo.com?type=1              ，www.demo.com/pages/main/main]     
     
     
。

怎么办呢？微信社区有一篇贴子：微信网页开发 JSSDK 分享功能


    




    




    
，安卓和调试工具都成功














，IOS无法使用？里官方的一段回复引起了我的注意 




   




   




 。

我使用UNI-APP开发的是SPA应用

 



 



 
。直接说重点              ，vue-router与location.href的用法区别


     



     



     ，vue-router不会重新加载页面














，而location.href会重新加载页面               。

我使用UNI-APP开发的是SPA应用   
    
    
，并且路由变化不会重新加载页面  




    




    




 。那我在A页面给window内新增一个变量a


     


     


     ，赋值1 




 




 



，我在B页面能使用window.a吗？可以













。

我使用UNI-APP开发的是SPA应用   

   

   

，并且路由变化不会重新加载页面

     

     

    ，全局可以使用jWeixin               。用户进入A页面
  




  




  


，我在App.vue的onLaunch里执行jWeixin.config  


  


  


，jWeixin.ready成功   



     



     



 。执行完成之后再在A页面内变更路由













。在B页面继续使用jWeixin执行jWeixin.ready吗？亲测可以    
    
    
。

事情就变得简单了    


     


     


。

当用户访问H5应用时 
     
     
   ，在A页面执行jWeixin.config

   




   




   

，声明好我用到得api 



 



 



，然后无论路由到任何B页面              ，我都可以使用jWeixin.ready自由定制我的分享页了




 




 




 。

其实


    




    




    
，重点只有一个














，执行jWeixin.config时不要产生任何history   

   

   
。

补个坑吧！

微信内              ，window.location.replace 的表现形式与window.location.href 一样     

     

     

。