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 一样     

     

     

     
。