vue开发企业微信应用-开发必读

vue开发企业微信应用-开发必读

一、一个第三方服务的使用流程

第一步:第三方服务商注册发布应用

注册成为第三方服务商之后,即可登录“第三方官网”创建第三方应用。具体的注册细节请参见“第三方服务商注册应用”。

第二步:企业管理员授权应用(只有企业管理员才可以安装第三方应用)

在服务商官网或企业微信官网找到适用的第三方应用后,管理员可发起一键授权。系统将展示第三方应用授权页面,管理员根据授权页面的引导,确认授权内容,完成授权操作。

第三步:第三方服务商提供服务

完成授权后,第三方即可获取企业赋予的永久授权码。通过此授权码,第三方可以换取到企业的访问凭证,从而可以调用通讯录管理、消息推送、身份验证、移动端SDK、素材、OA数据接口、企业支付、电子发票等相关接口。

二、一个第三方服务的开发流程

第一步:注册成为第三方服务商身份

  • 企业微信系统管理员身份在“企业微信服务商官网”进行申请
  • 填写注册信息

  • 配置开发信息(重要):

    开发者完成注册之后,即可登录进入服务商管理后台
    在后台主页->应用管理->通用开发参数栏->点击编辑按钮,配置基本开发信息

    参数内容说明
    ProviderSecret服务商的密钥(不同于下文的应用secret),相关的接口调用需要使用。
    系统事件接收URL用于接收跟应用无关的系统消息(如注册完成)。(填写URL时需要正确响应企业微信验证URL的请求。请参考接收消息
    Token可任意填写,用于生成签名,校验回调请求的合法性。
    EncodingAESKey回调消息加解密参数,是AES密钥的Base64编码,用于解密回调消息内容对应的密文。

    在后台主页->服务商信息->IP白名单->点击修改按钮,添加白名单IP列表

    参数内容说明
    白名单IP列表服务商调用企业微信API时的合法IP列表,只有白名单内的IP才能正常调用企业微信API,修改后立即生效。支持“222.209.201.*” 这样用通配符表示IP段;多个IP以英文分号;分隔

       凡是涉及到服务端调用企业微信API时都需要把服务端的IP配置到IP白名单中,可以用";"分割多个IP;此白名单对当前服务商所有的服务端调用企业微信API通用有效。

第二步:创建第三方服务的应用

包含两种应用类型:网页应用、小程序应用

这里有几个非常值得注意的地方:在创建应用的过程中的配置信息

  • 基本信息:主要是应用检索展示方面的标识
  • 开发信息:当前应用的开发配置(针对网页应用)
    1.应用主页-企业员工从企业微信工作台进入对应应用时的网页链接。
       对应的格式https://open.weixin.qq.com/connect/oauth2/authorize?appid=基本信息的SuiteID&redirect_uri=开发者的首页&response_type=code&scope=snsapi_userinfo&state=WEW_ECHE_STATE#wechat_redirect
    2.可信域名-OAuth2授权、JSSDK调用(强烈建议OAuth2授权采用后端授权,为了方便前后端开发灵活性这个两个可以分开设置不同的域名或者同一域名不同端口
    3.安装完成回调域名-企业微信管理员在企业微信应用市场安装完成回调域名(建议后端OAuth2授权的可信域名)
    4.业务设置URL-企业的管理员使用(可填写OAuth2授权可信域名)
  • 如何在开发时调试我们的应用或者说企业微信的调试方式是什么呢?在下一篇详解

第三步:测试应用

  1. 安装测试版本的方式-服务商管理后台-应用管理-应用详情-安装测试

    该测试授权流程必须响应并处理授权成功的通知的回调消息。

  2. 在企业微信客户端操作体验调试应用

第三步:应用上线(略过)

 

下一篇:企业微信开发环境的调试

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在 Vue 中使用微信 JS-SDK 实现分享功能,需要完成以下步骤: 1. 获取微信公众号的 appid 和 appsecret,以及当前页面的 url。 2. 在服务器端配置好微信 JS-SDK 的权限验证,获取到 signature、timestamp 和 noncestr 等参数。 3. 在 Vue 中引入微信 JS-SDK 的 SDK 文件,并初始化。 4. 调用微信 JS-SDK 的接口,完成分享功能。 下面是一个简单的示例代码: ```html <template> <div class="share"> <button @click="shareToWechat">分享到微信</button> </div> </template> <script> import wx from 'weixin-js-sdk' export default { data() { return { appId: '', timestamp: '', nonceStr: '', signature: '', imgUrl: '', shareUrl: '' } }, created() { // 获取微信 JS-SDK 配置参数 this.getWechatConfig() }, methods: { // 获取微信 JS-SDK 配置参数 async getWechatConfig() { const url = window.location.href.split('#')[0] const res = await this.$api.getWechatConfig({ url }) if (res.code === 0) { const data = res.data this.appId = data.appId this.timestamp = data.timestamp this.nonceStr = data.nonceStr this.signature = data.signature this.imgUrl = data.imgUrl this.shareUrl = data.shareUrl this.initWechatSDK() } }, // 初始化微信 SDK initWechatSDK() { wx.config({ debug: false, appId: this.appId, timestamp: this.timestamp, nonceStr: this.nonceStr, signature: this.signature, jsApiList: [ 'updateAppMessageShareData', 'updateTimelineShareData' ] }) wx.ready(() => { // 配置分享信息 wx.updateAppMessageShareData({ title: '分享标题', desc: '分享描述', link: this.shareUrl, imgUrl: this.imgUrl, success() { // 分享成功回调 } }) wx.updateTimelineShareData({ title: '分享标题', link: this.shareUrl, imgUrl: this.imgUrl, success() { // 分享成功回调 } }) }) }, // 分享到微信 shareToWechat() { wx.chooseWXPay({ // ... }) } } } </script> ``` 在上面的代码中,我们首先通过 `getWechatConfig` 方法获取微信 JS-SDK 的配置参数,然后在 `initWechatSDK` 方法中初始化微信 SDK,并配置分享信息。最后,在 `shareToWechat` 方法中调用微信 JS-SDK 的 `chooseWXPay` 接口,实现分享功能。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值