ionic 微信公众号开发 推送消息与上传图片

要实现消息推送与上传图片，需要获取微信的网页授权并引入微信的JS-JDK。

消息推送

• 首先，要实现消息推送，需要获取code，通过code获取access_token和openid，后台通过微信公众号的AppID，AppSecret与openid来实现消息的推送。
• 我在实际开发的过程中，由于调用获取access_token的方法总是存在跨域的问题，所以我只是获取了code，然后将code传给后台，由后台直接访问接口获取openid与access_token。
  首先引导关注者打开如下页面：

var weixinURL  = https://open.weixin.qq.com/connect/oauth2/authorize?appid=***&redirect_uri=***&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

appid：是微信公众号的开发者ID(AppID)；
redirect_uri：微信公众平台管理中，网页授权配置信息里面的网页授权域名， 要使用 urlEncode 对链接进行处理，ionic中由encodeURIComponent()这个方法可以实现这个功能；

图例1.png

response_type：返回类型，写死code；
scope：给snsapi_base 时不弹出授权页面，直接跳转，只能获取用户 openid，给snsapi_userinfo 时弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ；
state：重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节，我这里不传参数，直接给了STATE；

我的逻辑是在用户登录成功之后，将当前界面的路径赋值为上面提到的url

 window.location.href = weixinURL;

成功之后，用户可以访问到自己的微信公众号程序，并且url中包含code，我们将code解析出来之后，传给后台，下面是解析的方法

  //解析当前url当中name参数对应的值，没有返回null，
  getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
      return unescape(r[2]);
    }
    return null;
  }

上传图片

微信公众号当中不能直接使用ionic插件调用相机或者相册，必须使用微信提供的JDK才能实现，大致的使用步骤如下：
首先，也是微信公众号后台配置的问题，我们首先要配置一下JS接口安全域名，才能正确的拿到签名；配置安全域名时，不需要加前面的https://
1.在ionic工程的index.html文件中进入微信JS-JDK的js文件

2.执行如下命令，安装weixin-jdk模块

  npm install weixin-js-sdk

3.在目标界面引入模块

import wx from 'weixin-js-sdk';

调用微信的接口前提是要通过wx.config 配置方法，这个方法正常调用了，其他方法才能正常调用。

            wx.config({
              debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: APPID, // 必填，公众号的唯一标识
              timestamp: timestamp, // 必填，生成签名的时间戳
              nonceStr: noncestr, // 必填，生成签名的随机串
              signature: signature,// 必填，签名
              jsApiList: [
                'chooseImage',
                'previewImage',
                'uploadImage',
                'downloadImage',
                'getLocalImgData'
              ] // 必填，需要使用的JS接口列表
          });

其中，signature签名有固定的算法，微信规定的。生成签名的其他参数不做解析了，重点说一下这个url，按照要求，需要截取#好前面的部分，且末尾不能包含多余的"/",上代码：

    //微信的要求，必须是#前面的url，但是不能包括/,因为我测试了，不行
    let tempStr = encodeURIComponent(location.href.split('#')[0]) ;