手把手教你制作微信小程序，開源、免費(fèi)、快速搞定

時(shí)間：2023-05-16 09:36:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-05-16 09:36:01 來源：網(wǎng)站運(yùn)營(yíng)

手把手教你制作微信小程序，開源、免費(fèi)、快速搞定：

最近做了個(gè)“羅孚傳車”的小程序

一時(shí)興起，做了一個(gè)小程序，將個(gè)人收集的同汽車相關(guān)的行業(yè)資訊和學(xué)習(xí)資料，分享到小程序中，既作為歷史資料保存，又提供給更多的人學(xué)習(xí)和了解，還能裝一下:)

掃描下方小程序碼可以體驗(yàn)一下







主頁(yè)面：







文章頁(yè)：







個(gè)人頁(yè)：







關(guān)于頁(yè)：







當(dāng)然，還和我的公眾號(hào)羅孚傳說關(guān)聯(lián)了：

為什么要做微信小程序？

1、微信中經(jīng)常收到一些不錯(cuò)的文章，我想保存并整理，同時(shí)還能分享給別人看。

2、做一個(gè)微信小程序其實(shí)不難，但可以裝裝裝(你懂的)。

怎么做微信小程序？

簡(jiǎn)單的來說：WordPress+開源程序，一切免費(fèi)，并且能快速搞定。

原理是：通過WordPress插件生成REST API數(shù)據(jù)，然后小程序端組織呈現(xiàn)。

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

一步一步開始制作小程序

1、配置SSL，讓網(wǎng)站支持HTTPS

由于小程序需要HTTPS支持，所以你必須建立一個(gè)能夠HTTPS訪問的網(wǎng)站。

如果你使用阿里云主機(jī)，那么可以免費(fèi)獲得SSL證書，是由Symantec提供的DV SSL證書。







PS：如果沒有找到上述免費(fèi)DV SSL證書，那么選擇Symantec品牌后，在證書類型中先選擇增強(qiáng)型證書試試，應(yīng)該會(huì)跳出免費(fèi)證書。

當(dāng)然，其他平臺(tái)也是可以免費(fèi)獲得SSL證書的，Symantec的免費(fèi)證書很通用，如果云服務(wù)商不支持，那也可以選用Let’s Encrypt提供的免費(fèi)證書，自行研究一下吧。

除了獲得證書外，還需要在服務(wù)器上安裝證書，安裝方法不再贅述，百度一下試試。

特別強(qiáng)調(diào)：HTTPS是小程序的必須步驟，如果你無法搞定HTTPS，那么無法建立小程序。

2、安裝WordPress和插件

下載WordPress并安裝，現(xiàn)在版本都已經(jīng)是4.9以上了，不要搞出一個(gè)很舊的版本來哦。

一個(gè)建議：由于網(wǎng)站已經(jīng)支持HTTPS，所以建議默認(rèn)網(wǎng)站設(shè)置為HTTPS訪問，大勢(shì)所趨。

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

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

3、申請(qǐng)小程序，并配置

這里申請(qǐng)個(gè)人小程序應(yīng)該也是可以的，就是無法使用微信支付等功能，如果能用企業(yè)申請(qǐng)小程序當(dāng)然更好了。

至于小程序是否進(jìn)行認(rèn)證，不認(rèn)證也不影響使用，唯獨(dú)微信支付無法開通罷了，如果你不差300元，那認(rèn)證一下也無妨。

申請(qǐng)完成，填寫小程序的相關(guān)信息，名稱、頭像等，接下來在開發(fā)設(shè)置中設(shè)置服務(wù)器域名。域名默認(rèn)HTTPS開頭，不支持HTTP。







配置完域名，回到WordPress中配置插件，進(jìn)入設(shè)置中的“微信小程序設(shè)置”。







AppID和AppSecret都可以在微信的開發(fā)設(shè)置中獲得。

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

4、下載并修改小程序代碼

下載winxin-app-watch-life.net代碼，導(dǎo)入到微信開發(fā)者工具中。

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

var DOMAIN = "http://your-site-name.com";//配置域名 var MINAPPTYPE="0";//小程序的類型，如果是企業(yè)小程序請(qǐng)?zhí)睿? ，如果是個(gè)人小程序請(qǐng)?zhí)睿? var WEBSITENAME="羅孚傳車"; //網(wǎng)站名稱 var ABOUTID = 2; //wordpress網(wǎng)站"頁(yè)面"的id,注意這個(gè)"頁(yè)面"是wordpress的"頁(yè)面"，不是"文章" var PAGECOUNT='10'; //每頁(yè)文章數(shù)目 var CATEGORIESID='all' //專題頁(yè)顯示全部的分類 //var CATEGORIESID = '1,1059,98,416,189,374,6,463';//指定專題頁(yè)顯示的分類的id var INDEXLISTTYPE="all" //首頁(yè)顯示所有分類 //var INDEXLISTTYPE ="1" //指定首頁(yè)顯示分類的id var PAYTEMPPLATEID = 't1YE-N';//贊賞消息模版id var REPLAYTEMPPLATEID = 'c_Ni2';//回復(fù)評(píng)論消息模版id var ZANIMAGEURL = '../../images/qrcode';//微信贊賞的圖片鏈接，用于個(gè)人小程序的贊賞 var LOGO = "../../images/logo-icon.png"; // 網(wǎng)站的logo圖片 var POSTERIMGURL ="../../images/logo700.png"; //生成海報(bào)如果沒有首圖，使用此處設(shè)置的圖片作為海報(bào)圖片。 //設(shè)置downloadFile合法域名,不帶https ,在中括號(hào)([])里增加域名，格式：{id=,domain:'www..com'}，用英文逗號(hào)分隔。 //此處設(shè)置的域名和小程序與小程序后臺(tái)設(shè)置的downloadFile合法域名要一致。 var DOWNLOADFILEDOMAIN = [ { id: 1, domain: 'your-site-name.com' } ]

除了config文件的修改，程序中的頁(yè)面名稱等內(nèi)容也需要修改，自行查找修改即可。

修改完后即時(shí)預(yù)覽，差不多了就可以上傳代碼啦。

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

是不是覺得內(nèi)容有點(diǎn)少？教你一招：一小時(shí)內(nèi)更新100篇文章！

好了，做小程序就這么簡(jiǎn)單，現(xiàn)在，你是不是也準(zhǔn)備躍躍欲試小程序了呢？