微信/企业微信-本地(MAC)VUE项目调用JS-SDK,开发测试环境搭建

调用微信SDK前置条件
根据官方文档,前端在使用微信的接口前要先进行配置,配置信息得从后端获取,后端在计算signature时需要前端传入当前页面的URL,开发者要在公众平台设置JS SDK安全域名,在这个域名下才能使用微信JS SDK,所以前端需要满足下面两个条件才能成功调用JS SDK

  • js请求需要从微信配置的安全域名下发出
  • 在微信客户端或者在电脑端的微信开发者工具运行,测试

通过安全域名访问本地代码

本地配置 + vue项目代码配置

参考此文章
我们要做的就是让指定域名映射到本地,然后转发给开发服务器

  • 如果后台接口和配置的安全域名用的同一个,那么接口就会请求不到,需要改为用域名的端口去请求接口,这里ping的时候,不要加http
$ ping testwx.test.com

下面就是我们需要的ip这就是我们需要的IP

  • 在vue项目中的config/index.js把请求接口代理的域名改为此ip
dev: {
   
   // Paths
   assetsSubDirectory: 'static',
   assetsPublicPath: '/',
   proxyTable: {
   
     '/api': {
   
       target: 'http://' + 刚才获取到的ip,
       
Vue.js本身是一个前端框架,并不具备直接操作企业微信用户列表的功能。它主要用于构建用户界面,而不是处理后端服务的集成。如果你想要从企业微信获取用户列表,通常需要通过微信JavaScript SDK(例如你在问题中提到的wecom-jssdk-2.0.2.js),这个库是微信官方提供的用于网页版的企业微信应用开发。 以下是基本步骤: 1. **在HTML中引入JS文件**:将`wecom-jssdk-2.0.2.js`放在你的项目中,然后在需要获取用户列表的地方通过`<script>`标签引用。 ```html <script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-2.0.2.js" charset="utf-8"></script> ``` 2. **初始化SDK**:在window.onload或Vue实例的mounted生命周期钩子里,调用`wx.config`设置配置项,如AppID等。 ```javascript window.addEventListener('load', function () { wx.config({ debug: false, // 是否启用调试模式,一般设置为false appId: 'your_app_id', // 企业微信公众号AppID timestamp: '', // 需要后端生成并返回的时间戳 nonceStr: '', // 非敏感字符串,后端生成并返回 signature: '', // 签名,后端生成并返回 jsApiList: ['get联系人'] // 需要使用的API列表 }); // 后续可以调用wx.getContact()来获取用户列表 }); ``` 3. **调用API**:在config成功后,你可以调用`wx.getContact()`来获取用户的联系人列表。 注意,这一步骤需要用户授权,而且获取的是微信用户的联系人,不是企业通讯录。如果你需要访问企业通讯录,可能需要使用更复杂的方式来集成企业的管理后台API。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值
OSZAR »