Angular4+Ionic3-企业微信应用开发

Angular4+Ionic3-企业微信应用开发

一、搭建Ionic3项目工程

（1）、配置环境：

node安装：参照node官网（http://nodejs.cn/download/）

cnpm淘宝镜像安装：

npm install -g cnpm --registry=https://registry.npm.taobao.org

ionic安装：cnpm install -g ionic

（2）、创建项目：

创建带tab栏项目：Ionic start project tabs

创建空白页项目：Ionic start project blank

（3）、运行项目：

安装依赖：cnpm install

启动项目：ionic serve

二、企业微信应用开发步骤

（1）、企业微信API：

    推荐参考：https://work.weixin.qq.com/api/doc#90000/90003/90556

（2）、具体开发

    1、项目目录构成

    2、引入企业微信相关文件

    a、在index.html页面，引入微信的js文件。

    b、因项目使用的是亚马逊的服务器，所以要在开发企业微信时，需要使用由API Gateway 为 REST API 生成的 JavaScript 开发工具包（此包是由后端生成，前端引用），从后端处获取到JavaScript包后，放置在assets文件夹下，在index.html页面中一一引入这些js文件。

    c、从后端处获取的js文件，给改文件下的config加上accessKey和secretKey。

    3、调用企业微信API的文件配置

        在app文件夹下，新建一个d.ts文件，在该文件下定义全局的变量，例如wechat.d.ts，具体如下：

        配置完成后，可在具体页面中进行企业微信API的调用，例如监听页面返回操作：

    4、获取code

    在index.html页面，使用缓存的方式存储code，如下：

    5、在app.component.ts文件下，调用从后端获取的api文件下的方法，获取token、个人信息等等，以下就是怎么调用后端企业微信接口，获取token、个人信息，在本项目中，所调用的接口全部是取自后端集成的JavaScript包。

三、开发中遇到的一些问题

（1）、集成js-sdk失败的问题，出现invalid signature签名抛错。

    处理：是URL的问题，根据js-sdk上面签名算法的生成上，URL参数是为解码后的URL，后端没解码URL，所以导致签名抛错，前端传给后端是通过encodeURIComponent()方法转码过后的URL，而后端拿到前端转码过后的URL，是需要解码才能生成正确的签名。