牛掰！我是這么把個人博客粉絲轉到公眾號的

// DOM 完全就緒時執行
$(function() {
// 找到文章所在的容器
var $article = $("article.article-content");
if ($article.length > 0) {
// 文章的實際高度
var article = $article[0], height = article.clientHeight;
// 文章隱藏后的高度
var halfHeight = height * 0.3;

$article.css('height', halfHeight + 'px');
$article.addClass('lock');
}
});

.lock {
position: relative;
overflow: hidden;
padding-bottom: 30px;
}

$article.addClass('lock');

.asb-post-01 {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
display: block;
z-index: 10000;
margin-bottom: 0;
}

.asb-post-01 .mask {
height: 240px;
width: 100%;
background: -webkit-gradient(linear, 0 top, 0 bottom, from(rgba(255, 255, 255, 0)), to(#fff));
}

<div class="info">
<div>掃碼或搜索：<span style="color: #E9405A; font-weight: bold;">沉默王二</span></div>
<div>
<span>發送 </span><span class="token" style="color: #e9415a; font-weight: bold; font-size: 17px; margin-bottom: 45px;">290992</span>
</div>
<div>
即可<span style="color: #e9415a; font-weight: bold;">立即永久</span>解鎖本站全部文章
</div>
<div>
<img class="code-img" style="width: 300px;display:unset" src=https://www.cnblogs.com/qing-gee/p/"http://www.itmind.net/wp-content/uploads/2019/09/cmower.jpg">

再來兩行 CSS 代碼，設定掃碼區域的高度和背景，

.asb-post-01 .info {
background: white;
height: 370px;
}

呈現出來的頁面效果圖如下所示，是不是感覺很完美了？簡直天衣無縫好不好，忍不住給自己點個贊，

6）生成口令

頁面效果已經搞定了，接下來就很關鍵了，怎么確定讀者的身份標識呢？

當然是 Cookies，Cookies 里面保存了瀏覽網頁時自動生成的 Session ID，而且每一個用戶都是不一樣的，這樣不就可以來唯一標識一臺瀏覽設備了嗎？

這是崔慶才大佬給出的解決方案，我舉雙手贊同，怎么獲取呢？代碼如下所示，

function getCookie(name) {
var value = https://www.cnblogs.com/qing-gee/p/"; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2)
return parts.pop().split(";").shift();
}

function getToken() {
let value = getCookie('UM_distinctid');
if (!value) {
return defaultToken;
}
return value.substring(value.length - 6).toUpperCase();
}

7）輪循監聽解鎖或者隱藏文章

前端還有最后一個作業要做，就是輪循監聽，每隔一段時間向后端發送一個查詢，查詢讀者的口令是否已經保存到資料庫，如果保存過了，隱藏的文章就要重現江湖了；如果沒有保存，文章當然要繼續隱藏著，

具體的代碼如下所示，

var _lock = function() {
$article.css('height', halfHeight + 'px');
$article.addClass('lock');
$('.asb-post-01').css('display', 'block');
}

var _unlock = function() {
$article.css('height', 'initial');
$article.removeClass('lock');
$('.asb-post-01').css('display', 'none');
}

// 查詢后端的結果
var _detect = function() {
console.log('Detecting Token', token);
$.ajax({
url : 'http://qingmiaokeji.cn/jfinal/wx/',
method : 'GET',
data : {
token : token
},
success : function(data) {
console.log('locked', data.locked);

if (data.locked === true) {
_lock();
} else {
_unlock();
}
},
error : function(data) {
_unlock();
}
})
}

_detect();
setInterval(function() {
_detect();
}, 5000);

①、_lock 方法的作用是隱藏文章，

②、_unlock 方法的作用是顯示文章，

③、_detect 方法的作用是查詢口令有沒有保存，如果保存就解鎖文章，如果沒有就隱藏文章，

④、setInterval 是一個定時器，每隔 5 秒執行一次 _detect 方法，

03、后端

前端的作業已經完成了，那后端的作業都包括哪一些呢？

1）將讀者發送的口令保存到資料庫，

2）回應前端的定時查詢，把要解鎖還是繼續鎖定的結果回傳，

這兩個作業看起來平淡無奇，但如果從零開發的話，還是非常耗時耗力的，我們應該珍惜站在巨人肩膀上的機會，不是嗎？

這次我采用的后端框架是 JFinal，配合其微信開發 SDK，省時省力省心，簡單介紹一下 JFinal，它是基于 Java 語言的極速 WEB + ORM 框架，其核心設計目標是開發迅速、代碼量少、學習簡單、功能強大、輕量級、易擴展、Restful——非常適合我們這次的開發任務，

為了減輕大家的開發成本，我已經將專案開源到了 GitHub 上，地址如下所示：

https://github.com/qinggee/jfinal_weixin_demo_for_maven

大家可以直接將專案匯出到 IDE 中，只需要把資料庫鏈接地址、用戶名和密碼，以及微信訂閱號相關配置修改一下就行了，截個圖大家參照一下，

為了方便大家的實操，我把關鍵的內容詳細地說明一下，

1）創建資料庫和表

創建資料庫就不再贅述了，就說創建表吧，SQL 如下所示，

DROP TABLE IF EXISTS `weixin`;
CREATE TABLE `weixin` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`openid` varchar(255) NOT NULL,
`token` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

weixin 表有三個欄位：

①、id 為主鍵；

②、openid 為微信用戶的關鍵標識，當用戶取消關注訂閱后，可根據該欄位洗掉記錄，

③、token 為博客讀者的唯一標識，當用戶關注訂閱號后，可根據該欄位判定博客是否需要解鎖，

2）讀者關注訂閱號后，保存口令

WeixinMsgController 類的 processInTextMsg() 方法用來處理接收到的文本訊息，我們可以在這個方法里保存 openid 和 token，成功后提示讀者：恭喜您已經解鎖博客全部文章~

protected void processInTextMsg(InTextMsg inTextMsg) {
String msgContent = inTextMsg.getContent().trim();

if ("2048".equals(msgContent)) {

} else if (msgContent.length() == 6) {
Weixin param = new Weixin();
param.setOpenid(inTextMsg.getFromUserName());
param.setToken(msgContent);
param.save();

OutTextMsg outMsg = new OutTextMsg(inTextMsg);
outMsg.setContent("恭喜您已經解鎖博客全部文章~");
render(outMsg);
} else {
renderDefault();
}
}

3）回應前端的定時查詢

WeixinController 類的 index() 方法用來回應前端的定時查詢，

public void index() {
// 跨域
getResponse().addHeader("Access-Control-Allow-Origin", "*");

String token = getPara("token");
String openid = service.findByToken(token);
if (openid == null || "".equals(openid)) {
renderJson("locked", true);
} else {
renderJson("locked", false);
}
}

①、getResponse().addHeader("Access-Control-Allow-Origin", "*") 這行代碼可以解決跨域的問題，

②、根據 token 查詢讀者是否已經關注了公眾號，關注過的話回傳 false，否則回傳 true，

4）讀者取消關注訂閱號后洗掉記錄

WeixinMsgController 類的 processInFollowEvent() 方法用來處理接收到的關注/取消關注事件，如果取消關注的話，根據 openid 洗掉記錄，

protected void processInFollowEvent(InFollowEvent inFollowEvent) {
if (InFollowEvent.EVENT_INFOLLOW_SUBSCRIBE.equals(inFollowEvent.getEvent())) {

else if (InFollowEvent.EVENT_INFOLLOW_UNSUBSCRIBE.equals(inFollowEvent.getEvent())) {
log.debug("取消關注：" + inFollowEvent.getFromUserName());
service.deleteByOpenid(inFollowEvent.getFromUserName());
}
}

04、注意事項

后端的作業完成后，就需要將其打包運行到服務器上了，

1）打包專案

命令列進入專案根目錄，然后運行 mvn clean package 即可打包，

打包完成后，可以在 target 目錄下看到以下內容，

tar.gz 檔案為 target/jfinal_weixin_demo_for_maven-release/jfinal_weixin_demo_for_maven 目錄的壓縮包，方便上傳至服務器，

2）將 tar.gz 檔案上傳至服務器，并啟動服務，

上傳工具可以使用 FileZilla，上傳成功后可以通過 tar -xzvf xxx.tar.gz 命令進行解壓，然后進入 jfinal_weixin_demo_for_maven 目錄下，輸入 ./jfinal.sh start 即可啟動服務，

3）配置 Nginx

由于服務器上 80 埠已經被占用，所以我們需要 Nginx 反向代理一下，簡單介紹一下 Nginx（發音同 engine x），它是異步框架的網頁服務器，也可以用作反向代理、負載平衡器和 HTTP 快取，

打開 nginx.conf 檔案，增加以下內容，

location ^~ /jfinal/ {
proxy_pass http://127.0.0.1:8089/;
rewrite http://127.0.0.1:8089/ last;
}

配置之前，假如域名是 itwanger.com，訪問該服務的地址為：http://itwanger.com:8089，配置之后，訪問該服務的地址就可以是：http://itwanger.com/jfinal，這樣請求的 URL 中就不需要指定埠了——有沒有感覺到 Nginx 的一絲牛逼之處？

4）啟用微信訂閱號服務器配置

一切準備就緒后，就可以進入微信訂閱號后臺，填寫服務器地址、令牌，然后啟用服務器配置了，

5）實際效果

可能大家想知道效果如何，這里截幾張圖大家看看，這個功能已經在小白學堂（itmind.net）上線了，感興趣的可以進去體驗一把，測到 bug 有獎勵喲，

首先進去文章是這個樣子的：

然后關注了訂閱號，發送了口令：

于是同時，博客上的文章也解鎖了！

牛掰！

05、后記

一周時間，我幾乎把所有的事情都滯后了，但總算是把這個方案落地了！內心還是非常激動的，再次感謝崔慶才大佬的思路，也為自己頑強的斗志點個贊！

謝謝大家的閱讀，希望能給你在技術的實作上提供一些思路，

標籤：其他

上一篇：為什么我要寫博客

下一篇：微信小程式新服務訊息推送 —— 訂閱訊息