微信的各種號

• 微信公眾平臺有4個號,服務號,訂閱號,企業(yè)號和小程序

服務號,訂閱號,企業(yè)號這三個號的配置和開發(fā)文檔都是一樣的.只是這三個號的擁有能力不一樣,如服務號每個月只能推送三條消息.訂閱號可以每天推送一條消息.更多不同看這里
小程序是微信新出的開發(fā)平臺.開發(fā)需要用微信定義的語言規(guī)范,配置也和以上三個號差異大.這里不多說.文檔可以看這里

• 微信開放平臺

微信開放平臺是什么鬼?假如你公司有服務號也有小程序, 現(xiàn)在想要服務號和小程序有關(guān)系就要把服務號和小程序綁定在同一個微信開放平臺帳號上
小明用他的微信登錄你公司的服務號和小程序獲取的OpenID(微信用戶id)是不一樣的.如果服務號和小程序都需要綁定手機號碼,就需要小明綁定兩次.
既然是同一個公司的產(chǎn)品,就應該區(qū)分出是同一個用戶,這樣同一個用戶的資料就可以在不同的產(chǎn)品中共享.
當把服務號和小程序都綁定在一個微信開放平臺賬號下,就能獲取到小明的UnionID.這個ID在服務號和小程序上獲取到的值是一樣的

• 現(xiàn)在已經(jīng)有5個號.分別是服務號,訂閱號,企業(yè)號,小程序和微信開放平臺

如果你用a@xxx.com郵箱申請了服務號,就不能用它申請其他號了
如果你用b@xxx.com郵箱申請了小程序帳號,現(xiàn)在公司要開發(fā)第二個小程序.那就需要用c@xxx.com郵箱再申請一個小程序帳號
微信開放平臺,小程序等帳號可能需要微信認證.如果需要認證.每次認證費用是300元.如果有你公司有兩個小程序需要認證,那你就乖乖交600元

微信公眾號開發(fā)

• 微信公眾號的開發(fā)分兩部分

1.公眾號開發(fā):公眾號有發(fā)送消息,設置菜單等功能.這些功能都可以在公眾號帳號中設置,也可以通過調(diào)用微信的接口用代碼開發(fā)實現(xiàn).由于運營公眾號的人基本沒有開發(fā)能力,現(xiàn)在公眾號的設置功能已經(jīng)很全面.沒必要通過開發(fā)實現(xiàn)這些功能
2.公眾號網(wǎng)頁開發(fā):公眾號一般有許多菜單,有時候點擊菜單需要跳轉(zhuǎn)到一個網(wǎng)頁.這個網(wǎng)頁相當一個移動端web應用,需要完全自主開發(fā).我們用ionic也就是開發(fā)這個網(wǎng)頁應用

• ionic微信網(wǎng)頁開發(fā)主要需要實現(xiàn)的功能

1.調(diào)用微信授權(quán).獲取用戶信息
2.調(diào)用微信js-sdk.實現(xiàn)拍照,定位,掃一掃等js-sdk提供的硬件功能

• ionic微信網(wǎng)頁開發(fā)需要熟讀的文檔

1.文檔地址鏈接如果失效,請自行前往微信公眾平臺查看
2.需要熟讀的文檔如下圖

開發(fā)環(huán)境準備

• 點擊申請微信公眾平臺測試帳號

用微信掃描二維碼即可生成測試帳號.如下圖會看到appID和appsecret,這兩個字符串用于我們的后臺服務器請求微信的服務器.

• 配置測試帳號的js安全域名

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

設置JS接口安全域名,如下圖填寫ip+端口.由于ionic項目默認啟動端口是8100,為了方便我這里配置的端口也是8100.注意:不能以http,www開頭,也不能以/結(jié)尾

如下圖,頁面滾動條往下拉,還要修改一個地方.

• 所有需要測試的微信(包括你的)都需要關(guān)注測試二維碼

• 由于微信公眾號授權(quán)和js-sdk等功能需要在微信環(huán)境下調(diào)用.所以需要下載微信web開發(fā)者工具,我下載下來啟動白屏,可能和小程序開發(fā)工具沖突.于是使用小程序開發(fā)工具開發(fā)公眾號,兩個工具很類似
  

  微信web開發(fā)者工具
  
  
  小程序web開發(fā)工具

• 用申請微信測試帳號的微信登錄開發(fā)工具

ionic代碼準備

• 去github下載ionic2_wx作為demo

本demo只提供ionic微信公眾號基礎開發(fā)功能和微信JsSdk調(diào)用demo,更多demo請查看ionic2_tabs

• 使用ionic serve啟動ionic2_wx模版項目,前提肯定是配置好了ionic開發(fā)環(huán)境
• 默認啟動地址是http://localhost:8100/.我們使用前面配置的js安全域名(ip+端口)在微信開發(fā)工具上訪問

• 初始化JsSdk需要的數(shù)據(jù),需要我們自己的服務器請求微信服務器得到

  
  

后臺說明

• 我們開發(fā)的微信公眾號請求的后臺是我們自己的服務器,我們的后臺服務器通過appID和appsecret去訪問微信的服務器,最終還是我們自己的服務器給我們開發(fā)的微信公眾號返回微信信息
  對微信來說我們的服務器就是第三方.所以在看微信開發(fā)文檔的時候,第三方指的是我們自己的服務器
• 微信Java SDK開發(fā)文檔-微信公眾號開發(fā)文檔
• 我的測試號配置如下

• java代碼獲取微信JsSdk配置代碼demo

    @ApiOperation(value = "獲取jssdk配置")
    @PostMapping("/jsConfig")
    public ResultBean<WxJsapiSignature> 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("配置生成失敗");
    }

• 在微信開發(fā)者工具上調(diào)試,如下圖微信JsSdk初始化成功就可以調(diào)用硬件功能了

  
  

微信真機調(diào)試

在微信開發(fā)工具上調(diào)試JsSdk功能有限,如掃一掃,添加照片功能都是模擬

• 由于微信安全限制,在真機微信上打開ip+端口地址會跳出微信環(huán)境使用普通瀏覽器模式打開頁面.如下圖1.所以需要域名訪問,
• 配置域名映射到本地ip,如何配置？方法1：看訪問自定義的域名
• 方法2：如下圖2,使用natapp生成域名映射到本地ip
• 域名映射到本地ip后,記得一定要修改js安全域名,否則會報"微信授權(quán)回調(diào)域名出錯"上面已經(jīng)說了要修改哪里.如下圖3,修改完成微信訪問域名進行調(diào)試.
  
  圖1
  
  
  圖2
  
  
  圖3

常見問題

點擊返回按鈕會退出ionic微信應用

這個問題是因為ionic是單頁面應用.默認就是只有一個頁面,在微信上點擊返回就退出了
解決這個問題要使用ionic3提供的@IonicPage()注解,使用了@IonicPage()的組件,可以使用字符串跳轉(zhuǎn)頁面.如 this.navCtrl.push('字符串');

使用域名調(diào)試訪問很慢

ionic是單頁應用,單頁應用其中一個缺點就是首屏加載文件大,導致加載慢.
如果你覺得用域名調(diào)試加載慢,那就使用npm run build --prod壓縮代碼.壓縮后的代碼在www目錄下
用tomcat作為服務器訪問壓縮后的代碼.第一步修改tomcat啟動端口為8100,第二步修改tomcat默認啟動路徑為ionic項目www目錄絕對路徑.如何使用和配置tomcat?看Tomcat使用教程

如何發(fā)布ionic微信公眾號項目

1.使用npm run build --prod壓縮代碼,壓縮后的代碼在www目錄下
2.以生產(chǎn)環(huán)境用tomcat服務器為例.把整個www目錄下的文件拷貝到tomcat目錄下.如webapps目錄或ROOT目錄.Tomcat-簡易使用教程
3.真機微信訪問tomcat應用發(fā)布地址即可

項目發(fā)布到了正式環(huán)境有bug,怎么調(diào)試

用微信開發(fā)工具訪問正式環(huán)境地址進行調(diào)試

另外一個同事也想在他的電腦上調(diào)試

方式1:修改JS接口安全域名和網(wǎng)頁授權(quán)回調(diào)頁面域名為他的電腦ip,并且他的微信要關(guān)注測試號二維碼
方式2:他自己開通一個新的測試帳號.注意一定要讓后臺修改appID和appsecret為他新申請的

緩存問題（應用更新后慕嚷，但是刷新頁面沒有看到更新，怎么辦异旧？）

• 如下圖調(diào)用腳本根據(jù)文件內(nèi)容生成hash值仅讽，這樣每次更新內(nèi)容生成的文件名不一樣磁椒，就不存在緩存了。腳本源碼
  

• 如下以nginx為例服務端配置靜態(tài)資源緩存策略：不緩存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"