WordPress版微信小程序3.0版發佈

距離WordPress版微信小程序上一個版本的發佈過去了一個月了。在此間，個人工做有些變化，加上正在開發新版本，目前開源版的完善和升級稍稍有些滯後。php

雖然這個版本是3.0版，期間有個過渡的2.8版，不過功能上目前沒有大的改動了。3.0版本最大的更新在於加入了文章海報（即分享微信朋友圈的卡片）的功能。小程序一直沒法分享到朋友圈，估計這個功能微信短時間內不會放出來，但這個需求一直是有的，把小程序的二維碼圖片轉到朋友圈，成爲微信小程序轉到微信朋友圈一種曲折實現的方法，雖然實現的路徑有些長，但總比沒有辦法好。html

儘管這個開源的版本功能愈來愈完善了，但依然有許多須要完善的地方，其中涉及WordPress插件程序的優化，好比首頁加載和列表的加載速度不快。WordPress緩存插件對對於 rest api的緩存幾乎用處不大，性能上提高的效果不明顯，須要有針對性對api進行緩存，後續我將會研究相關api的優化。git

瞭解WordPress微信小程序的的開發歷程及開發技術，建議看看相關更新文章和安裝文檔：github

WordPress版小程序開源下載地址

https://github.com/iamxjb/winxin-app-watch-life.net

若是由於某些緣由github沒法訪問，能夠選擇如下鏡像地址：
1.https://git.oschina.net/iamxjb/winxin-app-watch-life.net
2.https://code.aliyun.com/iamxjb/winxin-app-watch-life.net
3.https://coding.net/u/xjb/p/winxin-app-watch-life.net
4.https://gitlab.com/xiajianbo/winxin-app-watch-life.net小程序

配套WordPress插件：wp-rest-api-for-app 下載地址

https://github.com/iamxjb/wp-rest-api-for-app
插件鏡像下載地址：
https://gitee.com/iamxjb/wp-rest-api-for-app微信小程序

WordPress版微信小程序3.0版除了修復一些bug和性能優化外，更新的內容很是少，主要的調整是如下幾個方面：api

1.文章內容頁海報

此功能開發是在網友「名下」的開源代碼基礎上二次開發完成，感謝名下分享。主要是利用微信小程序碼的接口，生成帶文章圖的小程序碼圖片，方便轉發到朋友圈,主要的實現代碼是在WordPress的插件裏。生成的小程序二維碼海報樣式以下：
緩存

經過文章頁面下方的評論欄觸發：
性能優化

默認是第一個用戶觸發生成海報圖片，後續的用戶就會自動調用已經生成的海報連接地址，所以海報沒有個性化，也沒有針對每一個人都生成各自的海報圖，全部人看到的海報都是同樣的。一方面這能夠大大減小生成小程序碼的個數，雖然微信給了10萬個，已經足夠多了；另外一方面除了第一個用戶外，後面的用戶打開海報的速度就會加快，由於不用從新生成了，直接調用便可。

實現這個功能必須知足如下條件：

一、服務器的php須要開啓GD庫擴展。
是否啓動能夠經過的php的phpphpinfo()去查詢，若是出現相似以下圖的內容，就代表開啓了gd庫擴展

二、服務器的php須要開啓mbstring庫擴展。
三、更新wp-rest-api-for-app插件，同時在插件目錄下的poster和qrcode須要給讀寫的權限。
四、配置海報默認圖片。
爲了保證生成的海報圖包含有關文章的圖（有可能文章沒有配圖），所以須要設置默認的海報圖片，設置的位置：WordPress後臺-->設置-->微信小程序設置，以下圖所示：

海報裏的圖片取自文章的特點圖，若是沒有特點圖就取首圖。

若是你對生成海報不滿意，像生成本身喜歡的樣式，能夠直接修改插件目錄下的weixin-qrcode.php文件，這個文件對代碼有詳細的註釋，你能夠按本身的想法修改字體，調整圖片大小，加背景等等，固然這些修改須要你對php的代碼有必定的瞭解。遇到問題能夠經過微信或郵件的方式聯繫我。

2.兼容我的主體小程序

不少WordPress站長都申請的是我的主體小程序，我的主體小程序有很多的限制，好比不支持微信支付，不支持web-view，而WordPress版小程序包含這些功能，爲了兼容我的主體小程序，在這個版本里針對我的主體小程序，我作了一些處理，好比須要經過web-view在小程序裏打開網站連接的，若是判斷是我的主體小程序就改成「複製連接」，若是是調用微信支付的，就會打開我的微信讚揚碼圖片的預覽，這樣也能夠曲折實現讚揚。

爲了區分是我的主體小程序仍是企業主體小程序，須要在微信小程序的配置文件config.js（該文件在小程序的utils文件夾裏）配置小程序的類型，具體的配置以下：

var MINAPPTYPE="0";//小程序的類型，若是是企業主體小程序請填：0 ，若是是我的主體小程序請填：1

在文章頁面底部的評論欄裏的「閱讀原文」，代碼實現以下：
gotowebpage: function () { var self = this; var minAppType = config.getMinAppType; //獲取小程序的主體類型 var url =''; if (minAppType=="0") { url = '../webpage/webpage'; wx.navigateTo({ url: url + '?url=' + self.data.link }) } else { self.copyLink(self.data.link); }

}

「讚揚」的跳轉代碼以下：
praise: function () { var self = this; var minAppType = config.getMinAppType; if (minAppType == "0") { //企業主體的小程序打開微信支付的頁面 if (app.globalData.isGetOpenid) { wx.navigateTo({ url: '../pay/pay?flag=1&openid=' + app.globalData.openid + '&postid=' + self.data.postID }) } else { self.userAuthorization(); } } else { var src = config.getZanImageUrl; //我的主體小程序打開讚揚碼預覽 wx.previewImage({ urls: [src], }); } }

3.其餘小優化

1）文章分享加題圖。
原來的分享沒有啓用文章的題圖，默認使用的是微信小程序的截屏，看上去不那麼美觀，考慮若是每篇文章都有圖的話，能夠在分享里加入題圖，這樣美觀些，代碼很簡單，就是在分享代碼里加入圖片的連接地址便可：

onShareAppMessage: function (res) { return { title: '分享"' + config.getWebsiteName + '"的文章：' + this.data.detail.title.rendered, path: 'pages/detail/detail?id=' + this.data.detail.id, imageUrl: this.data.detail.post_thumbnail_image, success: function (res) { // 轉發成功 console.log(res); }, fail: function (res) { console.log(res); // 轉發失敗 } } }

分享顯示的界面以下圖

2）調整獲取openid失敗的提示
在評論、點贊、讚揚等這些有交互的功能裏，程序都須要獲取用戶的openid才能使用，所以獲取openid成爲很重要的一環。或用戶opendi的過程是須要訪問微信的相關認證服務的，這個過程一來一回可能會出現好比網絡超時等問題，致使沒法獲取openid，但之前的代碼裏這個功能提示信息不足，致使不知道獲取openid的問題出在那裏，此次更新給出了詳細的出錯信息，方便去找到緣由。

3）首頁導航，提供三種方式的跳轉
三種方式的跳轉分別是：1.小程序內頁跳轉；2.web-view內嵌網頁跳轉；3.跳轉到其餘小程序。

首頁是打開最多的頁面，爲了給重要的功能提供更多的曝光機會，首頁導航提供三種方式跳轉，就能夠更靈活快捷跳轉到重要頁面。

相關的配置在config.js,這裏就不詳細贅述了。

但願這個版本的發佈讓WordPress版微信小程序有更加好的使用體驗，但願你喜歡，也但願你提出更多的改進意見。

本文首發地址：https://www.watch-life.net/wordpress/wordpress-weixin-3-0.html