ionic2/3实战-开发微信公众号

微信的各种号

• 微信公众平台有4个号,服务号,订阅号,企业号和小程序

服务号,订阅号,企业号这三个号的配置和开发文档都是一样的.只是这三个号的拥有能力不一样,如服务号每个月只能推送三条消息.订阅号可以每天推送一条消息.更多不同看这里
小程序是微信新出的开发平台.开发需要用微信定义的语言规范,配置也和以上三个号差异大.这里不多说.文档可以看这里

• 微信开放平台

微信开放平台是什么鬼?假如你公司有服务号也有小程序, 现在想要服务号和小程序有关系就要把服务号和小程序绑定在同一个微信开放平台帐号上
小明用他的微信登录你公司的服务号和小程序获取的OpenID(微信用户id)是不一样的.如果服务号和小程序都需要绑定手机号码,就需要小明绑定两次.
既然是同一个公司的产品,就应该区分出是同一个用户,这样同一个用户的资料就可以在不同的产品中共享.
当把服务号和小程序都绑定在一个微信开放平台账号下,就能获取到小明的UnionID.这个ID在服务号和小程序上获取到的值是一样的

• 现在已经有5个号.分别是服务号,订阅号,企业号,小程序和微信开放平台

如果你用[email protected]邮箱申请了服务号,就不能用它申请其他号了
如果你用[email protected]邮箱申请了小程序帐号,现在公司要开发第二个小程序.那就需要用[email protected]邮箱再申请一个小程序帐号
微信开放平台,小程序等帐号可能需要微信认证.如果需要认证.每次认证费用是300元.如果有你公司有两个小程序需要认证,那你就乖乖交600元

微信公众号开发

• 微信公众号的开发分两部分

1.公众号开发:公众号有发送消息,设置菜单等功能.这些功能都可以在公众号帐号中设置,也可以通过调用微信的接口用代码开发实现.由于运营公众号的人基本没有开发能力,现在公众号的设置功能已经很全面.没必要通过开发实现这些功能
2.公众号网页开发:公众号一般有许多菜单,有时候点击菜单需要跳转到一个网页.这个网页相当一个移动端web应用,需要完全自主开发.我们用ionic也就是开发这个网页应用

• ionic微信网页开发主要需要实现的功能

1.调用微信授权.获取用户信息
2.调用微信js-sdk.实现拍照,定位,扫一扫等js-sdk提供的硬件功能

• ionic微信网页开发需要熟读的文档

1.文档地址链接如果失效,请自行前往微信公众平台查看
2.需要熟读的文档如下图

开发环境准备

• 点击申请微信公众平台测试帐号

用微信扫描二维码即可生成测试帐号.如下图会看到appID和appsecret,这两个字符串用于我们的后台服务器请求微信的服务器.

• 配置测试帐号的js安全域名

在命令行使用ipconfig查看本机ip地址,如下图我的ip是88.128.18.144

设置JS接口安全域名,如下图填写ip+端口.由于ionic项目默认启动端口是8100,为了方便我这里配置的端口也是8100.注意:不能以 http, www开头,也不能以 /结尾

如下图,页面滚动条往下拉,还要修改一个地方.

• 所有需要测试的微信(包括你的)都需要关注测试二维码

• 由于微信公众号授权和js-sdk等功能需要在微信环境下调用.所以需要下载微信web开发者工具,我下载下来启动白屏,可能和小程序开发工具冲突.于是使用小程序开发工具开发公众号,两个工具很类似
  

  

  微信web开发者工具
  
  
  

  小程序web开发工具

• 用申请微信测试帐号的微信登录开发工具

ionic代码准备

• 去github下载ionic2_wx作为demo

本demo只提供ionic微信公众号基础开发功能和微信JsSdk调用demo,更多demo请查看ionic2_tabs

• 使用ionic serve启动ionic2_wx模版项目,前提肯定是配置好了ionic开发环境
• 默认启动地址是http://localhost:8100/.我们使用前面配置的js安全域名(ip+端口)在微信开发工具上访问

• 初始化JsSdk需要的数据,需要我们自己的服务器请求微信服务器得到

  
  
  

后台说明

• 我们开发的微信公众号请求的后台是我们自己的服务器,我们的后台服务器通过appID和appsecret去访问微信的服务器,最终还是我们自己的服务器给我们开发的微信公众号返回微信信息
  对微信来说我们的服务器就是第三方.所以在看微信开发文档的时候,第三方指的是我们自己的服务器
• 微信Java SDK开发文档-微信公众号开发文档
• 我的测试号配置如下

• java代码获取微信JsSdk配置代码demo

    @ApiOperation(value = "获取jssdk配置")
    @PostMapping("/jsConfig")
    public ResultBean jsConfig(@ApiParam(value = "页面完整url,js安全域名", required = true) @RequestBody String url) {
        WxMpInMemoryConfigStorage config = new WxMpInMemoryConfigStorage();
        config.setAppId("wx8e82d2ea44552544");
        config.setSecret("51e019a9bc09b4a46fb852bfab64d67e");
        WxMpService wxMpService = new WxMpServiceImpl();
        wxMpService.setWxMpConfigStorage(config);
        try {
            WxJsapiSignature wxJsapiSignature = wxMpService.createJsapiSignature(url);
            return ResultBean.success(wxJsapiSignature);
        } catch (WxErrorException e) {
            e.printStackTrace();
        }
        throw new BusinessException("配置生成失败");
    }

• 在微信开发者工具上调试,如下图微信JsSdk初始化成功就可以调用硬件功能了

  
  
  

微信真机调试

在微信开发工具上调试JsSdk功能有限,如扫一扫,添加照片功能都是模拟

• 由于微信安全限制,在真机微信上打开ip+端口地址会跳出微信环境使用普通浏览器模式打开页面.如下图1.所以需要域名访问,
• 配置域名映射到本地ip,如何配置？方法1：看访问自定义的域名
• 方法2：如下图2,使用natapp生成域名映射到本地ip
• 域名映射到本地ip后,记得一定要修改js安全域名,否则会报"微信授权回调域名出错"上面已经说了要修改哪里.如下图3,修改完成微信访问域名进行调试.
  
  

  图1
  
  
  

  图2
  
  
  

  图3

常见问题

点击返回按钮会退出ionic微信应用

这个问题是因为ionic是单页面应用.默认就是只有一个页面,在微信上点击返回就退出了
解决这个问题要使用ionic3提供的@IonicPage()注解,使用了@IonicPage()的组件,可以使用字符串跳转页面.如 this.navCtrl.push('字符串');

使用域名调试访问很慢

ionic是单页应用,单页应用其中一个缺点就是首屏加载文件大,导致加载慢.
如果你觉得用域名调试加载慢,那就使用npm run build --prod压缩代码.压缩后的代码在www目录下
用tomcat作为服务器访问压缩后的代码.第一步修改tomcat启动端口为8100,第二步修改tomcat默认启动路径为ionic项目www目录绝对路径.如何使用和配置tomcat?看Tomcat使用教程

如何发布ionic微信公众号项目

1.使用npm run build --prod压缩代码,压缩后的代码在www目录下
2.以生产环境用tomcat服务器为例.把整个www目录下的文件拷贝到tomcat目录下.如webapps目录或ROOT目录.Tomcat-简易使用教程
3.真机微信访问tomcat应用发布地址即可

项目发布到了正式环境有bug,怎么调试

用微信开发工具访问正式环境地址进行调试

另外一个同事也想在他的电脑上调试

方式1:修改JS接口安全域名和网页授权回调页面域名为他的电脑ip,并且他的微信要关注测试号二维码
方式2:他自己开通一个新的测试帐号.注意一定要让后台修改appID和appsecret为他新申请的

缓存问题（应用更新后，但是刷新页面没有看到更新，怎么办？）

• 如下图调用脚本根据文件内容生成hash值，这样每次更新内容生成的文件名不一样，就不存在缓存了。脚本源码
  

  

• 如下以nginx为例服务端配置静态资源缓存策略：不缓存html，长期缓存js、css

# 让html不缓存，js、css和图片长期缓存
# 设置expires会给请求同时添加Cache-Control和Expires请求头

if ($request_filename ~* \.html$){
    expires     -1;
}
if ($request_filename ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$){
    expires    max;
}

• 最后可以把脚本加入到package.json文件的scripts中，可以使用webstorm的快捷方式运行，可以使用npm run build:prod:browser运行
  "build:prod:browser": "ionic build --prod --engine browser && node ./scripts/use-hashname.js"