距離上次更新已經一個月了，這期間對WordPress版微信小程式 做的不少小的更新和效能的優化，此次版本更新推出了兩個比較重點的功能：點贊和讚賞。同時，優化了文章頁面的功能佈局，在評論區把常用的功能：轉發，複製，點贊，讚賞，都集中在一個操作面板，同時為了不佔用文章頁面的空間，做了隱藏。
WordPress版微信小程式開放原始碼地址：https://github.com/iamxjb/winxin-app-watch-life.net
瞭解程式的開發歷程及開發技術，建議看看相關版本的更新文章：
4.利用WordPress REST API 開發微信小程式從入門到放棄
WordPress版微信小程式開發系列(一)：WordPress REST API
對於WordPress版微信小程式的開發過程中，我最大的感受是難度不是小程式的開發，是wordpress定製化的開發，特別是把定製化的配置需要在外掛裡完成，對像我這樣wordpress的外掛開發小白開發者來說，難度是可想而知的。整個功能的開發，wordpress外掛的開發佔用了80%的工作量。因此，在這次讚賞功能開發中，我放棄使用外掛的方式，大大降低了開發和除錯的難度，外掛開發最大的問題是除錯麻煩，出現程式碼bug也難於發現。
掃描以下二維碼，開啟小程式
下面介紹WordPress版微信小程式2.2.8版本主要更新內容
1.配置檔案結構更新
考慮到很多人使用微信小程式的時候不知道在那裡修改配置檔案，導致程式無法執行，此次更新在utils資料夾下增加了config.js檔案，程式碼如下：
//配置域名
var DOMAIN = “www.watch-life.net“;
export default {
getDomain: DOMAIN
}
只要把域名修改為你網站的域名即可，無需再修改其它地方，小程式就可以執行起來了。
2.評論區整合功能按鈕
考慮到文章頁面的附加很多，比如：點贊、複製、轉發、讚賞，評論，返回首頁等，於是在這個版本里，我把這些功能集中在評論區，考慮到這些功能按鈕數量比較多，把使用頻率最高的評論和返回首頁顯示在評論面板上，而把使用頻率相對較低的點贊、複製、轉發、讚賞隱藏在評論面板下方，通過“+”號圖示觸發顯示。如下圖所示：
可能這些功能使用路徑有些深，不過我人覺得對於資訊類的小程式來說，主要是看文章，其他的功能都是錦上添花，希望不要因為錦上添花的功能影響了文章的閱讀。
3.點贊
這個功能是實現並不複雜，使用者在點選“點贊”圖示後，在wordpress後臺記錄使用者的openid和點贊記錄，考慮到點贊是和文章的id關聯的，我把點讚的記錄儲存在wordpress 的postmeta表裡。因為需要獲取用的微信openid，因此需要通過小程式的appid和AppSecret來獲取微信使用者資訊。 基於此，我調整了外掛程式wp-rest-api-for-app,需要在wordpress 後臺管理配置appid和AppSecret，具體配置在wordpress後臺管理的設定選單裡面，找到“微信小程式設定”選單，點選進入後，如下圖所示：
WordPress外掛地址：https://github.com/iamxjb/wp-rest-api-for-app
小程式要正常執行，必須安裝這個外掛，同時這個外掛目前還沒有提交到官方，安裝需要上傳資料夾到wordpress的外掛目錄進行安裝啟用，不要上傳壓縮檔案去安裝。
4.讚賞
支付的功能本身並不複雜，官方文件描述的也很清晰，但考慮程式是開源，我原來的設想是把相關配置資訊和支付功能結合到wordpress外掛裡，這樣使用程式的人只要安裝外掛就可以使用，但寫外掛的過程非常不順利，折騰了幾乎一週的時間，發現還有很多坑，於是就放棄了，搞成外掛付出的時間成本太大了。
讚賞利用了認證的微信小程式的支付功能。讚賞功能的服務端php程式我是在官方的微信公眾號的微信支付demo基礎上修改完成的。微信公眾號的微信支付官方demo地址：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1
讚賞功能必須配合使用這個支付的服務端php程式，該程式我也開源了，開源的地址：
weixin-app-wxpay程式地址：https://github.com/iamxjb/weixin-app-wxpay
安裝的方法：
1、程式wp-wxpay目錄需要放置在網站的根目錄。程式的wp-wxpay目錄是一級目錄，目錄結構如下：
├── wp-wxpay
├──────lib
├──────────WxPay.Api.php
├──────────WxPay.Config.php（配置檔案）
├──────────WxPay.Data.php
├──────────WxPay.Exception.php
├──────────WxPay.Notify.php
├──────logs
├──────pay
├──────────app.php （微信小程式呼叫讚賞呼叫程式）
├──────────log.php
├──────────notify.php
├──────────WxPay.JsApiPay.php
2、修改lib目錄下的WxPay.Config.php相關配置
const APPID = ‘wx************’; （小程式appid）
const MCHID = ‘*********’; （微信支付商戶號）
const KEY = ‘********’; （商戶支付金鑰）
const NOTIFY_URL=’https://******/wp-wxpay/pay/notify.php’; （支付回撥地址，修改域名即可）
const BODY =’守望軒Live’; （訊息體的內容，自行隨便給定）
商戶支付金鑰的獲取參見微信支付官方文件：https://pay.weixin.qq.com/index.php/account/api_cert
修改後，小程式就會呼叫這個支付程式完成讚賞功能。通過這個讚賞功能的開發，讓我對公眾號（包括小程式）的微信支付的流程，有了大致的瞭解
注意：在使用小程式讚賞支付功能時候，小程式要申請微信支付，這個申請可以把小程式和已有的支付微信商戶關聯，也可以重新申請一個微信商戶，如果不做這個關聯，是無法支付成功。
wordpress版微信小程式到目前版本，基本功能都已經完善，在整個開發過程中，對小程式的整個開發流程和核心功能有了比較深入的瞭解，也越來越對小程式的未來發展充滿信心。
----------------------------------------------------------------------------
歡迎關注我的網站和微信公眾號，文章會在我的網站和微信公眾號上同步釋出。
本文首發連結：https://www.watch-life.net/wordpress/wordpress-weixin-2-2-8.html
我的網站：守望軒
微信公眾號名稱：守望軒
微信公眾號：iwatchlife
你也可以掃描或長按以下二維碼
