記一次微信小程序開發
之前在網上看到博客園新聞服務開放接口,因為自己本身有看博客園IT新聞的習慣,為了能隨時隨地簡潔方便的瀏覽新聞,於是萌生了一個利用開放API開發一個微信小程序的想法。
1. mpvue初探
平時技術棧有用到Vue,這個小程序功能也比較簡單,用 mpvue 再合適不過了。mpvue 基於 Vue.js 核心,修改了 Vue.js 的 runtime 和 compiler 實現,使其可以運行在小程序環境中,獲得完整的 Vue.js 開發體驗,組件化代碼復用、Vuex 數據管理、webpack 構建機制、開發階段 hotReload 等等。查看官方文檔,一步一步來構建項目,可以說相當快速。
2. 接口HTTPS化
微信小程序明確規定服務端必須用HTTPS,博客園提供的接口都是HTTP協議的,而且這個老的API返回的數據格式都是XML的,索性這裏自己轉一遍接口,配置個HTTPS證書。
2.1 koa2寫個接口服務
部分代碼如下:
const http = require('http'); const url = require('url'); const host = 'http://wcf.open.cnblogs.com' class cnblogsCtrl { //分頁獲取最新新聞 static async recent (ctx, next) { let pageIndex = ctx.params.pageIndex; let pageSize = ctx.params.pageSize; let options = { host: url.parse(host).hostname, path: `/news/recent/paged/${pageIndex}/${pageSize}`, method: 'GET', headers:{ "Content-Type":"application/x-www-form-urlencoded; charset=UTF-8", "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8" } } return new Promise((resolve, reject) => { const req = http.request(options, (res) => { try { res.setEncoding('utf8'); let result = '' res.on('data', (chunk) => { result += chunk }); res.on('end', () => { ctx.response.status = 200; ctx.body = { code: 200, msg: '查詢成功', data: result } resolve(next()) }); } catch (err) { ctx.response.status = 500; ctx.body = { code: 500, msg: '請求遇到問題', data: err } reject(next()) } }); req.write(''); req.end(); }) } } module.exports = cnblogsCtrl
2.2 免費HTTPS證書申請
FreeSSL去申請了一個免費一年的ssl證書,至於如何配置 HTTPS ,網上教程應該有很多,我的服務是用了nginx做反向代理,因此是在nginx配置中增加ssl相關配置。
server { listen 80; listen 443 ssl; server_name api.kwin.wang; ssl on; ssl_certificate xxx-full_chain.pem; ssl_certificate_key xxx-private.key; ... }
3. XML轉JSON
上面也提到了博客園舊的API返回的數據格式是XML的,因此需要在服務端對request的結果做處理,Node.js 處理 XML 一般借助 xml2js
這個模塊。
安裝依賴:
npm install xml2js
const xmlParse = require('xml2js').parseString;
//result為上面request的結果
xmlParse(result, { explicitArray : false, ignoreAttrs : true }, (err, jsonData) => {
if (err) {
console.log(`xml parse error ${err}`);
ctx.body = {
code: 200,
msg: 'xml parse error',
data: null
}
} else {
ctx.body = {
code: 200,
msg: '查詢成功',
data: jsonData.feed.entry
}
}
resolve(next())
})
4. wxParse
最後小程序頁面寫的差不多了,到獲取到新聞詳情展示的時候發現新聞內容在頁面上展示不出來,因為接口獲取到的新聞詳情是HTML格式的富文本內容,小程序默認是不支持的,需要轉為小程序原生的WXML才能正常顯示,這裏需要一個mpvue-wxparse
依賴。
安裝依賴:
npm install mpvue-wxparse --save
import wxParse from 'mpvue-wxparse'
export default {
...
components: {
wxParse
}
}
HTML代碼:
<wxParse :content="newsDetail.Content" />
大功告成!小程序主頁面:
5. 個人主體無法發布 文娛-資訊
小程序版本提交審核的時候被駁回,當前小程序屬於 文娛-資訊 類目,個人主體無法發布該類目,反正自己用用,體驗版倒也無所謂了,手動滑稽(???)
體驗版掃碼體驗:
新版博客園開放API:https://api.cnblogs.com/help
記一次微信小程序開發