ionic2/3實(shí)戰(zhàn)-開發(fā)微信公眾號

微信的各種號

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

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

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

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

微信公眾號開發(fā)

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

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

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

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

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

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

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

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


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

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


設(shè)置JS接口安全域名,如下圖填寫ip+端口.由于ionic項(xiàng)目默認(rèn)啟動端口是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代碼準(zhǔn)備

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

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

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


后臺說明

  • 我們開發(fā)的微信公眾號請求的后臺是我們自己的服務(wù)器,我們的后臺服務(wù)器通過appID和appsecret去訪問微信的服務(wù)器,最終還是我們自己的服務(wù)器給我們開發(fā)的微信公眾號返回微信信息
    對微信來說我們的服務(wù)器就是第三方.所以在看微信開發(fā)文檔的時候,第三方指的是我們自己的服務(wù)器
  • 微信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)用硬件功能了


微信真機(jī)調(diào)試

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

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

    圖2

    圖3

常見問題

點(diǎn)擊返回按鈕會退出ionic微信應(yīng)用

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

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

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

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

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

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

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

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

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

緩存問題（應(yīng)用更新后，但是刷新頁面沒有看到更新，怎么辦？）

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

  • 如下以nginx為例服務(wù)端配置靜態(tài)資源緩存策略：不緩存html，長期緩存js、css

# 讓html不緩存，js、css和圖片長期緩存
# 設(shè)置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的快捷方式運(yùn)行，可以使用npm run build:prod:browser運(yùn)行
    "build:prod:browser": "ionic build --prod --engine browser && node ./scripts/use-hashname.js"
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,045評論 25贊 709
  • title: 微信公眾號開發(fā)：獲取openId和用戶信息 tags: 微信公眾號 categories: 筆記 ...
    行徑行閱讀 142,048評論 5贊 63
  • 開發(fā)前首先我們要知道一些概念 各公眾號區(qū)別：1、訂閱號：為媒體和個人提供一種信息傳播方式，主要偏于為用戶傳達(dá)資訊（...
    CoderZS閱讀 3,529評論 1贊 19
  • 老貓不是一只貓，老貓是個老頭子，一個很早之前就死了老伴的老頭子。這一片幾個小區(qū)的人都認(rèn)識老貓，因?yàn)樗莻€閑人，而且...
    斑斑的四喜丸子閱讀 753評論 0贊 2
  • 現(xiàn)在是2016年9月17日凌晨一點(diǎn)四十六分，我失眠了。昨晚喬任梁死亡的消息占據(jù)了各大網(wǎng)站的熱搜，原本我是不相信的...
    微半微半閱讀 379評論 0贊 2

友情鏈接更多精彩內(nèi)容