本周擼了兩款小程序驹饺，在這里總結(jié)下開發(fā)過(guò)程中的小經(jīng)驗(yàn)，希望對(duì)大家有用缴渊。
小程序端
我們先說(shuō)小程序要注意的地方赏壹。
默認(rèn)入口轉(zhuǎn)發(fā)問(wèn)題
當(dāng)一個(gè)小程序Page的js文件中存在?onShareAppMessage?方法時(shí)，可以觸發(fā)轉(zhuǎn)發(fā)功能衔沼，但是通過(guò)小程序開發(fā)者工具生成的模板中蝌借，入口文件的js中并沒(méi)有此方法，為了發(fā)布后方便對(duì)小程序進(jìn)行分享指蚁，建議在pages/index/index.js中添加菩佑。
當(dāng)然默認(rèn)情況下，我們需要點(diǎn)擊小程序右上角的...才能看到轉(zhuǎn)發(fā)凝化，這樣并不能對(duì)用戶起到引導(dǎo)作用稍坯，通常的做法是使用一個(gè)button，并且設(shè)置open-type為share搓劫，這樣就可以通過(guò)按鈕啟動(dòng)分享瞧哟。
但是原生按鈕很難看，我們可以設(shè)置一個(gè)圖片枪向，在wxml內(nèi)的代碼一般如下
<button open-type="share"><image src="/images/icon-share.png"></image></button>
當(dāng)然需要通過(guò)wxss將button的樣式去掉勤揩，背景、邊框等等秘蛔，代碼如下
button {
? ? padding:0;
? ? margin:0 auto;
? ? width:70rpx;
? ? height:70rpx;
? ? display:block;
? ? border:0;
? ? background: transparent;
}
button::after {
? ? border:0;
}
尤其是對(duì) button::after 要進(jìn)行設(shè)置陨亡，否則按鈕的邊框是無(wú)法去掉的傍衡。
關(guān)于登錄
關(guān)于小程序登錄邏輯都差不多，從小程序發(fā)一個(gè)請(qǐng)求（含code）給服務(wù)器代碼负蠕，服務(wù)器通過(guò)code換取open_id和session_key聪舒，其中open_id我們需要存儲(chǔ)，用來(lái)表示用戶身份虐急，session_key用來(lái)獲取用戶基本信息時(shí)解密使用箱残。
當(dāng)服務(wù)器端進(jìn)行了存儲(chǔ)后要生成一個(gè)key，將其返給小程序止吁，以后小程序凡是發(fā)起需要用戶認(rèn)證的請(qǐng)求被辑，都帶這個(gè)key用來(lái)判斷用戶身份，在yii2中敬惦，這個(gè)key就是我們r(jià)estful中的access_token盼理。
以上是關(guān)于小程序登錄的前后臺(tái)邏輯，如果你使用yii2類框架俄删，很多都內(nèi)置了宏怔，并不復(fù)雜。
但是這里還有幾個(gè)問(wèn)題
1. 小程序端何時(shí)進(jìn)行登錄邏輯畴椰？
2. 發(fā)起請(qǐng)求時(shí)access_token過(guò)期了如何處理臊诊？
小程序端何時(shí)進(jìn)行登錄邏輯？
在登錄判斷上斜脂，我們先進(jìn)行小程序是否含有access_token來(lái)判斷抓艳，當(dāng)然即便存在，還需要對(duì)checkSession進(jìn)行一次判斷帚戳。
var session = Session.get();// 獲取access_token
if (session) {
? ? wx.checkSession({
? ? ? ? success: function () {
? ? ? ? },
? ? ? ? fail: function () {
? ? ? ? ? ? doLogin();
? ? ? ? },
? ? });
} else {
? ? doLogin();
}
這里Session是對(duì)access_token的一次封裝玷或。
發(fā)起請(qǐng)求時(shí)access_token過(guò)期了如何處理？
這個(gè)問(wèn)題最常發(fā)生的場(chǎng)景就是我們發(fā)送了一次需要用戶認(rèn)證的請(qǐng)求片任，此刻如果服務(wù)器端發(fā)現(xiàn)收到的access_token已經(jīng)失效偏友，會(huì)返回異常，此刻小程序一般要如何處理那对供？
我的推薦方式是靜默狀態(tài)的自動(dòng)登錄一次再位他，先看代碼。
if (response.statusCode === 401) {
? ? Session.clear();
? ? if (!hasRetried) {
? ? ? ? hasRetried = true;
? ? ? ? doRequestWithLogin();//
? ? ? ? return;
? ? }
}
我來(lái)解釋一下這段代碼犁钟，當(dāng)小程序發(fā)起一次需要用戶認(rèn)證的請(qǐng)求但是被服務(wù)器駁回為401錯(cuò)誤（一般為用戶認(rèn)證失斃庥铡），此刻我先清理掉小程序端自身對(duì)access_token（Session.clear()方法實(shí)現(xiàn)）涝动，然后在進(jìn)行登錄后再發(fā)起請(qǐng)求（doRequestWithLogin()）迈勋。
但是我們不能一直在執(zhí)行請(qǐng)求失敗就登錄操作，因此可以設(shè)置一個(gè)開關(guān)hasRetried醋粟，只進(jìn)行一次嘗試靡菇。
客服消息
在小程序開發(fā)中重归，客服消息的重要性不言而喻，它除了作為客服服務(wù)外厦凤，還作為小程序到微信瀏覽器的一個(gè)渠道鼻吮，比如本次在[「寶寶愛(ài)識(shí)圖」](https://nai8.me/images/bao-say-qrcode.png)的開發(fā)中，我用它來(lái)實(shí)現(xiàn)將收款微信號(hào)到用戶的推送工作较鼓，這主要是解決在ios端虛擬產(chǎn)品不能進(jìn)行微信支付事情椎木。
一般的策略是讓客戶點(diǎn)擊客服按鈕然后輸入一個(gè)關(guān)鍵詞，服務(wù)器端通過(guò)客服消息接口識(shí)別用戶身份博烂，結(jié)合關(guān)鍵詞給予響應(yīng)的消息推送香椎。
模板消息
很多人認(rèn)為很雞肋的方法，畢竟需要獲取form_id和prepay_id后才能下發(fā)模板消息禽篱，似乎很受限制畜伐，但是我們可以建立一個(gè)formId的種子表，將盡可能多的用戶和后臺(tái)的行為都采用form表單提交的形式躺率，并且獲取formID玛界，對(duì)，要變態(tài)的多悼吱，這樣你的formId表數(shù)據(jù)起來(lái)了慎框，以后想發(fā)消息的時(shí)候用就好了。
關(guān)于如何設(shè)置能獲取formId的小程序表單也很簡(jiǎn)單舆绎，設(shè)置report-submit為真即可鲤脏，如下代碼
<form bindsubmit="abc" report-submit="{{true}}">
</form>
然后在js端通過(guò)如下代碼獲取
abc(event) {
? ? var formId = event.detail.formId;
? ? xxx
},
盡可能多的。
服務(wù)器端
接下來(lái)總結(jié)下服務(wù)器端吕朵，我使用yii2的restful組件作為接口支持，關(guān)于restful的基本功能請(qǐng)參考yii2官方文檔或我之前錄制的課程[《Yii2的RESTful講解》](https://nai8.me/book/view.html?id=13)窥突，在這里分享我認(rèn)為關(guān)鍵的點(diǎn)努溃。
讓yii2能解析json的請(qǐng)求內(nèi)容
默認(rèn)情況下yii2并不能識(shí)別請(qǐng)求中的json格式，而我們小程序在發(fā)起請(qǐng)求時(shí)喜歡用它阻问，因此我們要對(duì)yii2進(jìn)行一下配置梧税。
config/web.php
'request' => [
? ? 'cookieValidationKey' => 'xxx',
? ? 'parsers' => [
? ? ? ? 'application/json' => 'yii\web\JsonParser',
? ? ],
],
對(duì)，在web.php中對(duì)組件request增加內(nèi)容解析yii\web\JsonParser称近。
用戶認(rèn)證
小程序的登錄需要服務(wù)端的用戶認(rèn)證配合第队，當(dāng)然我使用yii2框架，內(nèi)置的restful已經(jīng)支持了刨秆，如果你的系統(tǒng)不支持用戶認(rèn)證凳谦，可以自行建立access_token的生成機(jī)制，具體可以參考騰訊開放的小程序服務(wù)端框架wafer衡未。
在yii2的restful中的用戶認(rèn)證使用了行為機(jī)制尸执，我們來(lái)看下流程代碼
// 在需要授權(quán)的控制器內(nèi)
class CardController extends ActiveController {
? ? public $modelClass = 'app\modules\say\models\Card';
? ? public function behaviors() {
? ? ? ? $behaviors = parent::behaviors();
? ? ? ? $behaviors['authenticator'] = [
? ? ? ? ? ? 'class'=>HttpBearerAuth::className(),
? ? ? ? ? ? 'only'=>[
? ? ? ? ? ? ? ? 'index'
? ? ? ? ? ? ],
? ? ? ? ];
? ? ? ? return $behaviors;
? ? }
? ? ...
}
就如上面的代碼家凯，我們生命index動(dòng)作是需要用戶認(rèn)證的，并且認(rèn)證機(jī)制為[HttpBearerAuth類型](https://nai8.me/video/detail.html?id=175)如失，在小程序端需要在header內(nèi)包含如下代碼
header: {
'Authorization': 'Bearer ' + access_token
},
當(dāng)服務(wù)器驗(yàn)證通過(guò)后绊诲，在action的代碼內(nèi)直接使用 **Yii::$app->user->id** 就可以獲得用戶ID。
ok~
這就是前幾天小程序開發(fā)過(guò)程中給大家分析的點(diǎn)褪贵，后續(xù)升級(jí)過(guò)程中會(huì)繼續(xù)分享給大家掂之。
