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

     

     。