寫在前面
周末兩天在家搭建WordPress博客，就想到在微信小程序里展示自己的博客內(nèi)容球凰，于是到萬能的網(wǎng)上搜索了下壶笼，早就有人在這么做了神僵。于是就找到了相關內(nèi)容，把自己的微信小程序博客搭建了起來覆劈。
技能要求
懂一點代碼最后保礼，熟悉域名，博客最佳
有搭建WordPress责语，制作過小程序的可以跳過此段炮障。
準備工作
1.一個域名，
2.一個云服務器主機坤候，阿里云胁赢，騰訊云或百度云或其他都可以。
若沒有白筹，先領券智末，再購買。云產(chǎn)品通用代金券徒河，可疊加官網(wǎng)常規(guī)優(yōu)惠使用
3.一個微信小程序
一系馆、 WordPress下載、安裝與配置
建議你使用最新版的WordPress4.9.8版本虚青，下載地址：https://wordpress.org/download/
安裝步驟參考：五分鐘安裝
終點來了它呀，wordpress配置
1.設置WordPress 的固定鏈接(permalink).
image.png
不過注意一點：最好在固定鏈接的最后加上html的為后綴，雖然不加并不影響json api的使用棒厘，但考慮到小程序里的站內(nèi)鏈接目前是通過判斷html的后綴來獲取文章slug值纵穿，如果不加html后綴會導致小程序的站內(nèi)鏈接無法跳轉(zhuǎn)，后續(xù)我會考慮完善兼容不帶html后綴的固定鏈接的方式奢人。
2谓媒、URL重寫（url rewrite），也就是設置WordPress的偽靜態(tài)何乎。
設置完固定鏈接后句惯，就可以可以通過以下的鏈接方式來訪問REST API 了土辩，比如查看文章列表的json：
https://你的域名/index.php/wp-json/wp/v2/posts
但是這種方式看上去并不是那么優(yōu)雅，中間還夾雜這index.php,如果去掉就是就感覺完美一些抢野，這就需要通過URL 重寫來實現(xiàn)拷淘，具體重寫的原理就不詳細闡述了，下面給出在不同的web服務器下URL重寫代碼指孤。
1.IIS 7服務器
需要安裝URL Rewrite Module启涯。在web.config 文件 加入 URL重寫代碼：
2.Apache服務器
在WordPress網(wǎng)站根目錄下增加.htaccess文件，加入 URL重寫代碼：
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress`
3.nginx服務器
增加一個conf文件比如wordpress.conf,加入 URL重寫代碼：
location / {
try_files $uri $uri/ /index.php?$args;`
}
經(jīng)過URL重寫后恃轩，REST API訪問的鏈接的地址就變成這樣了：
https://你的域名/wp-json/wp/v2/posts结洼。是不是要優(yōu)雅很多。
二叉跛、WordPress插件下載松忍，安裝與配置
插件的下載地址：https://github.com/iamxjb/wp-rest-api-for-app
插件安裝啟用后，需要在后臺配置一些參數(shù)：
1）wordpress后臺 => 設置 =>微信小程序設置
在這個配置界面配置AppID,AppSecret,小程序首頁滑動文章ID, 前面兩個參數(shù)在微信小程序的后臺可以查到筷厘，這里就不贅述鸣峭。“小程序首頁滑動文章ID”這個參數(shù)是為了顯示首頁滑動輪播的文章敞掘。這里的設計我偷了懶叽掘，良好的設計應該彈出一個選擇框，讓用戶來選擇文章玖雁，而不是給個輸入框輸入id。
文章id如何在wordpress后臺找到呢盖腕？其實很簡單赫冬，看下圖你就明白了：
2）wordpress后臺 => 分類目錄 =>選擇一個分類進行編輯
這里設置后，在小程序里“專題”頁就會看到封面圖片了溃列。
2.配置微信小程序的服務器域名和業(yè)務域名
在微信小程序公眾平臺的后臺里劲厌，選擇“設置”=>“開發(fā)設置”，對“服務器域名”和“業(yè)務域名”進行配置听隐，如下圖：
其中request合法域名必須配置补鼻，這個參數(shù)保證了小程序可以正常發(fā)送request請求，程序才能運行起來雅任。同時风范，這個域名必須備案。
“業(yè)務域名”主要用于web-view內(nèi)嵌網(wǎng)頁時沪么，用作域名白名單硼婿，如果不是業(yè)務域名里的域名，在web-view內(nèi)嵌里訪問網(wǎng)頁時禽车，就會報無法訪問的錯誤寇漫。
注意：個人小程序是沒有“業(yè)務域名”這個配置的刊殉。
3.配置HTTPS
如果你的網(wǎng)站支持HTTS就可以忽略這步，由于小程序的request等請求是需要HTTPS的州胳，因此需要網(wǎng)站支持HTTPS记焊，關于WordPress網(wǎng)站開啟請參考我寫過的文章：WordPress整站輕松開啟HTTPS。
注意：一定要保證https和http兩種方式都能正常訪問網(wǎng)站栓撞，才能改這個配置亚亲，否則可能導致網(wǎng)站無法訪問。
三腐缤、Wordpress版微信小程序下載捌归、安裝與配置
小程序下載的地址：https://github.com/iamxjb/winxin-app-watch-life.net
有關在微信小程序的開發(fā)工具新建項目，導入程序岭粤，我就不贅述了惜索，可以去搜索微信小程序的官方文檔，有詳細的介紹剃浇。
微信小程序項目創(chuàng)建好了后巾兆，打開config.js文件，config.js文件的路徑如下圖：
var DOMAIN = "www.watch-life.net";//配置域名,域名只修改此處
var WEBSITENAME="守望軒"; //網(wǎng)站名稱
var ABOUTID= 1136; //wordpress網(wǎng)站關于頁面的頁面id虎囚，不是文章id哦
var TEMPPLATEID = 'hzKpxuPF2rw7O-qTElkeoE0lMwr0O4t9PJkLyt6v8rk';//模版消息id
配置好以上參數(shù)角塑，可以讓小程序正常運行。其中：
DOMAIN就是wordpress所在服務器的域名淘讥；
ABOUTID是wordpress的“頁面”的id圃伶，這個頁面id的獲取和上面說的文章id類似。
TEMPPLATEID是模版消息的id 蒲列，是發(fā)送模版消息的必須使用的id窒朋，有關模版消息參看文檔：
四、微信支付服務端程序安裝與配置
微信支付服務端程序下載地址：https://github.com/iamxjb/weixin-app-wxpay
安裝的方法：
1蝗岖、程序wp-wxpay目錄需要放置在網(wǎng)站的根目錄侥猩。程序的wp-wxpay目錄是一級目錄，目錄結(jié)構(gòu)如下：
├── wp-wxpay
├──────lib
├──────────WxPay.Api.php
├──────────WxPay.Config.php（配置文件）
├──────────WxPay.Data.php
├──────────WxPay.Exception.php
├──────────WxPay.Notify.php
├──────logs
├──────pay
├──────────app.php （微信小程序調(diào)用贊賞調(diào)用程序）
├──────────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’; （支付回調(diào)地址欺劳，修改域名即可）
const BODY =’守望軒Live’; （消息體的內(nèi)容，自行隨便給定）
商戶支付密鑰的獲取參見微信支付官方文檔：https://pay.weixin.qq.com/index.php/account/api_cert
修改后铅鲤，小程序就會調(diào)用這個支付程序完成贊賞功能划提。通過這個贊賞功能的開發(fā)，讓我對公眾號（包括小程序）的微信支付的流程彩匕，有了大致的了解
注意：在使用小程序贊賞支付功能時候腔剂，小程序要申請微信支付，這個申請可以把小程序和已有的支付微信商戶關聯(lián)驼仪，也可以重新申請一個微信商戶掸犬，如果不做這個關聯(lián)袜漩，是無法支付成功。
五湾碎、小程序代碼提交審核
運行預覽后宙攻，可以提交代碼并提請審批。
資料參考與插件和小程序來源：https://www.watch-life.net
