手把手教你製做微信小程序，開源、免費、快速搞定

最近作了個「羅孚傳車」的小程序

一時興起，作了一個小程序，將我的收集的同汽車相關的行業資訊和學習資料，分享到小程序中，既做爲歷史資料保存，又提供給更多的人學習和了解，還能裝一下:)

掃描下方小程序碼能夠體驗一下

主頁面：

文章頁：

我的頁：

關於頁：

固然，還和個人公衆號羅孚傳說關聯了：

爲何要作微信小程序？

一、微信中常常收到一些不錯的文章，我想保存並整理，同時還能分享給別人看。

二、作一個微信小程序其實不難，但能夠裝裝裝(你懂的)。

怎麼作微信小程序？

簡單的來講：WordPress+開源程序，一切免費，而且能快速搞定。

原理是：經過WordPress插件生成REST API數據，而後小程序端組織呈現。

我用的是「守望軒」提供的整套方案，WordPress端安裝wp-rest-api-for-app插件，小程序端使用winxin-app-watch-life.net代碼。

一步一步開始製做小程序

一、配置SSL，讓網站支持HTTPS

因爲小程序須要HTTPS支持，因此你必須創建一個可以HTTPS訪問的網站。

若是你使用阿里雲主機，那麼能夠免費得到SSL證書，是由Symantec提供的DV SSL證書。

PS：若是沒有找到上述免費DV SSL證書，那麼選擇Symantec品牌後，在證書類型中先選擇加強型證書試試，應該會跳出免費證書。

固然，其餘平臺也是能夠免費得到SSL證書的，Symantec的免費證書很通用，若是雲服務商不支持，那也能夠選用Let’s Encrypt提供的免費證書，自行研究一下吧。

除了得到證書外，還須要在服務器上安裝證書，安裝方法再也不贅述，百度一下試試。

特別強調：HTTPS是小程序的必須步驟，若是你沒法搞定HTTPS，那麼沒法創建小程序。

二、安裝WordPress和插件

下載WordPress並安裝，如今版本都已是4.9以上了，不要搞出一個很舊的版原本哦。

一個建議：因爲網站已經支持HTTPS，因此建議默認網站設置爲HTTPS訪問，大勢所趨。

再下載wp-rest-api-for-app插件，從GitHub上下載下來的zip文件直接可用。

在WordPress的插件功能下，使用上傳文件的方式安裝該插件，安裝完成啓用便可。

三、申請小程序，並配置

這裏申請我的小程序應該也是能夠的，就是沒法使用微信支付等功能，若是能用企業申請小程序固然更好了。

至於小程序是否進行認證，不認證也不影響使用，惟獨微信支付沒法開通罷了，若是你不差300元，那認證一下也無妨。

申請完成，填寫小程序的相關信息，名稱、頭像等，接下來在開發設置中設置服務器域名。域名默認HTTPS開頭，不支持HTTP。

配置完域名，回到WordPress中配置插件，進入設置中的「微信小程序設置」。

AppID和AppSecret均可以在微信的開發設置中得到。

除了插件設置外，建議對分類目錄增長圖片，在文章的分類目錄中有微信小程序封面設置。

四、下載並修改小程序代碼

下載winxin-app-watch-life.net代碼，導入到微信開發者工具中。

修改utils目錄下的config.js文件

var DOMAIN = "your-site-name.com";//配置域名
var MINAPPTYPE="0";//小程序的類型，若是是企業小程序請填：0 ，若是是我的小程序請填：1
var WEBSITENAME="羅孚傳車"; //網站名稱
var ABOUTID = 2; //wordpress網站"頁面"的id,注意這個"頁面"是wordpress的"頁面"，不是"文章"
var PAGECOUNT='10'; //每頁文章數目
var CATEGORIESID='all' //專題頁顯示所有的分類
//var CATEGORIESID = '1,1059,98,416,189,374,6,463';//指定專題頁顯示的分類的id
var INDEXLISTTYPE="all" //首頁顯示全部分類
//var INDEXLISTTYPE ="1" //指定首頁顯示分類的id
var PAYTEMPPLATEID = 't1YE-N';//讚揚消息模版id
var REPLAYTEMPPLATEID = 'c_Ni2';//回覆評論消息模版id
var ZANIMAGEURL = '../../images/qrcode';//微信讚揚的圖片連接，用於我的小程序的讚揚
var LOGO = "../../images/logo-icon.png"; // 網站的logo圖片
var POSTERIMGURL ="../../images/logo700.png"; //生成海報若是沒有首圖，使用此處設置的圖片做爲海報圖片。
//設置downloadFile合法域名,不帶https ,在中括號([])裏增長域名，格式：{id=,domain:'www..com'}，用英文逗號分隔。
//此處設置的域名和小程序與小程序後臺設置的downloadFile合法域名要一致。
var DOWNLOADFILEDOMAIN = [
{ id: 1, domain: 'your-site-name.com' }]

除了config文件的修改，程序中的頁面名稱等內容也須要修改，自行查找修改便可。

修改完後即時預覽，差很少了就能夠上傳代碼啦。

至此，你的小程序就算完成啦，趕快預覽一下吧。

是否是以爲內容有點少？教你一招：一小時內更新100篇文章！

好了，作小程序就這麼簡單，如今，你是否是也準備躍躍欲試小程序了呢？