微信小程式版部落格開發彙總（附原始碼）

yanthink發表於2019-02-24
微信小程式原始碼

從 PC端部落格 釋出開始，一直就有做個部落格小程式版的想法，剛好今年比較空閒，於是就花了近半個月的時間將小程式版部落格開發完了，這裡做個簡單的分享和總結。

專案介紹

個人小程式--平凡的部落格 歡迎開啟微信小程式搜尋“平凡的部落格”

或者掃描此小程式二維碼

file

軟體架構

開發工具：微信開發者工具
語言：直接使用原生的
專案地址：https://github.com/yanthink/mpblog

小程式後端

開發工具：PhpStorm
語言：PHP
框架：Laravel 5.6
資料庫：Mysql 8.0
佇列：Redis
全文搜尋：Elasticsearch
websocket：Redis + websockets/ws
專案地址：https://github.com/yanthink/blog-api

後臺管理

開發工具：WebStorm
語言：JavaScript
框架：ant design pro 2.0.0-beta.1
專案地址：https://github.com/yanthink/blog

運維

反向代理：Nginx 1.12.2
SSL證照：Symantec 免費版
伺服器：阿里雲輕量級伺服器 CentOS 7.3

構建過程

第一次開發小程式，一開始想著採用WePY、Mpvue、Taro等框架來開發的，這些框架都是採用 vuejs 或者 react 語法開發的，而我剛好對 vuejs、react 有一定的基礎，開發起來效率肯定會比較快。但是後面閱讀微信官方文件api發現原生的上手也挺簡單的，所以最終就直接選擇了用原生的開發了。

當然，用原生的開發過程中也踩了不少坑，但總的來說還不算太壞，基本上都能找到解決辦法，所以也沒耽誤太多時間。

踩坑記錄

1、 微信小程式不支援async-await

關於非同步處理，ES5的回撥使我們陷入地獄，ES6的Promise使我們脫離魔障，終於、ES7的async-await帶我們走向光明。

雖然微信小程式目前還不支援async-await，但是我們可以引入Facebook的 regenerator js庫來解決這個問題。

下載 packages/regenerator-runtime 這個路徑下的 runtime.js 到專案中，然後在要使用 async-await 的 js 中 import 就可以了。

import { stringify } from 'qs'
import regeneratorRuntime from '../../utils/runtime'
const { wxRequest } = require('../../utils/helpers')

Page({
  data: {
    article: {},
  },
  async onLoad({ id }) {
    const params = {
      include: 'user',
    }
    const { data: article } = await wxRequest(`/api/wechat/article/${id}?${stringify(params)}`)
    this.setData({ article })
  },
})

2、 關於wxs

wxs 不依賴於執行時的基礎庫版本，可以在所有版本的小程式中執行。
wxs 與 javascript 是不同的語言，有自己的語法，並不和 javascript 一致。
wxs 的執行環境和其他 javascript 程式碼是隔離的，wxs 中不能呼叫其他 javascript 檔案中定義的函式，也不能呼叫小程式提供的API。

在 wxs 生成 date 物件需要使用 getDate 函式, 返回一個當前時間的物件。由於沒有仔細看文件，一開始我使用的是Date，這導致在 ios 裝置中 呼叫 Date.parse('YYYY-MM-dd HH:mm:ss') 會返回 NaN（替換成'YYYY-MM-ddTHH:mm:ss+8:00'就可以正常返回了）。

wxs 中不能引入外部的工具類，比如 moment。

3、富文字的問題

Towxml 是一個可將 HTML、markdown 轉換為WXML(WeiXin Markup Language)的渲染庫。

由於微信小程式不能直接渲染 HTML，因此富文字編輯器生成的 HTML 內容無法直接在小程式中展示。

可能是出於安全因素考慮，即使 WXML 文字在小程式中也是以字串方式進行渲染。

網上有很多解析外掛可以使用，這裡我選擇的是 html2wxml 外掛，在此感謝外掛開發作者！

4、ios pre 程式碼塊字型會被自動放大

這個問題在模擬器上不會出現，一開始我還以為是 html2wxml 外掛樣式的問題，後面也嘗試強制給 pre 程式碼塊樣式設定字型大小，結果還是沒效果。

後來在網上查了一些資料，得知這是ios的一個bug，解決辦法就是在樣式裡新增 -webkit-text-size-adjust: 100% !important; 這個屬性就可以了

5、textarea 相容性問題

textarea 元件在 ios 和 android 端樣式是不一致的，ios預設有padding，android沒有。

解決辦法：通過 wx.getSystemInfoSync() 獲取 platform 資訊，然後針對不同的 platform 做樣式處理

6、關於微信 websocket

websocket 早在幾年前就有了解過，但還沒真正用在產生上。

一開始我選用socket.io來做為websocket服務端，之所以socket.io是因為Laravel官方文件和網上大部分教程提供的demo都是用socket.io實現的。

socket.io 服務啟動還是比較順利的，接著就是利用Nginx配置實現ssl反向代理（微信小程式websocket只支援wss協議）。

配置和服務都沒問題了，但，微信小程式 websocket 就是連不上，折騰了我2、3天才找到問題所在。

socket.io 支援的協議版本（4）和 微信小程式 websocket 協議版本（13）不一致，微信小程式 websocket 無法連上服務。
解決辦法：選用支援協議版本13的websocket包，比如 websockets/ws

後續的開發遇到再做新增。

總結

1、小程式原生框架和MVVM框架非常相似，有其他MVVM開發經驗的上手都比較容易。
2、微信小程式三端（iOS（iPhone/iPad）、Android 和 用於除錯的開發者工具）的指令碼執行環境以及用於渲染非原生元件的環境是各不相同的，所以開發過程中一定要在多個不同型號的手機上測試，以防出現相容性問題。
3、平時習慣了React開發，現在用微信小程式原生的開發體驗還真是不太好，所以有時間還是去學習下其他幾個類Vue、React的框架。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章