記一次微信小程序開發

以前在網上看到博客園新聞服務開放接口，由於本身自己有看博客園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

原文出處：https://www.cnblogs.com/kaidarwang/p/10233873.html