微信小程序踩坑+客服功能實現

最近在開發一款微信小程序，其中也是踩了不少坑，部分的坑小東還是發出來瞅瞅吧，還有更多的坑還沒來得及記錄，都在腦子裏，歡迎付費諮詢，啊哈哈哈哈…

0x01 tabBar排序

tabBar 排序根據 app.json中的 pages 順序

---

0x02 引號 & 花括號

花括號和引號之間如果有空格，將最終被解析成爲字符串

---

0x03 wx:for循環key綁定

對象中，可以綁定unique-key值，數組使用 wx:key="*this"，多層嵌套循環使用wx:for-item="i"來指定成員的別名；默認index變量爲數組下標，使用wx:for-index="idx" 來指定下標別名

---

0x04 多個組件在if，for等渲染

如果要一次性判斷多個組件標籤，可以使用一個 <block/> 標籤將多個組件包裝起來，並在上邊使用 wx:if控制屬性。

**wx:if與hidden的開銷：**一般來說，wx:if 有更高的切換消耗而 hidden有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好。

---

0x05 列表組件中的圖片頭像高度佔位問題

我在實現工作列表的過程中，點擊文字區域，可以正常傳值跳轉，但是點擊圖片發現跳轉的是下一行的內容，經過審查元素，發現圖片是一個高度佔位的，它的高度有240px，但是寬度只有60px，解決辦法是：設置固定高度即可；

---

0x06 PHP substr()函數問題

substr()截取字符串的時候，會因爲中英文混雜，導致中文字符缺失，json編碼會返回false，所以不使用？？？？查看文檔，還有mb_substr()這個函數，第四個參數設置編碼即可。

---

0x07 scrolltolower事件觸發問題

scroll-view以及page的高度都設置爲100%，可以解決scrolltolower事件觸發不了的問題。另一種方式可以使用 onReachBottom()來監聽觸底操作。swiper與scroll-view配合使用可以實現頁面滑動，TAB切換的效果

---

0x08 編碼問題

在小程序中，獲取用戶暱稱，或者與用戶的輸入有交互的時候，最好是採用BASE64編碼的方式，對用戶的輸入進行編碼存儲數據庫，然後再解碼輸出，解決部分圖標字符（emoji表情）等導致寫數據庫失敗的問題

---

0x09 小程序的生命週期

下面的圖引用自官方文檔，個人理解是：onLoad、onShow、onReady、onHide、onUnload，很容易理解的字面意思，如果在子頁面有更細數據的操作，父級頁面的數據需要刷新，那麼可以使用onShow監聽事件內寫需要更新數據的一些操作函數，非常方便。

---

0x0a Json數據

一般json數據的大小最好控制在64Kb內

---

0x0b 微信小程序客服參考

一個參考案例，小東對PHP熟悉，所以下面是個PHP的例子，方便給大家Copy，哈哈~，官方的參考文檔並不是很全面，下面這個大家直接套用就好了。另外官方文檔位置->【戳我】

<?php
// AUTHOR: DYBOY
// EMAIL: [email protected]

define("TOKEN","blogdyboycn");//填寫自己設置的Token

class wechatAPI{

    const APP_ID = 'APPID';				//填寫微信小程序的APPID
    const APP_SECRET = 'APPSECRET';		//填寫微信小程序的APPSECRET

    //用於小程序第一步驗證返回
    public function isValid(){
        $echoStr = $_GET["echostr"];
        if ($this->checkSignature()) {
            echo $echoStr;
            exit;
        }
    }

	// 驗證簽名
    public function checkSignature(){
        $signature = $_GET["signature"];
        $timestamp = $_GET["timestamp"];
        $nonce = $_GET["nonce"];
        $token = TOKEN;
        $tmpArr = array($token, $timestamp, $nonce);
        sort($tmpArr, SORT_STRING);
        $tmpStr = implode( $tmpArr );
        $tmpStr = sha1( $tmpStr );
        if( $tmpStr == $signature ){
            return true;
        }else{
            return false;
        }
    }

    // 發送消息
    public function send($data){
        $url = "https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token=".$this->getAccessToken();
        $data = urldecode(json_encode($data));
        $this->curl_post($url,$data);
    }

    //xml數據轉數組
    public function xml2Array($contents = NULL, $encoding = 'UTF-8', $get_attributes = 1, $priority = 'tag'){
        if (!$contents)
        {
            return array();
        }
        if (!function_exists('xml_parser_create'))
        {
            return array ();
        }
        $parser = xml_parser_create('');
        xml_parser_set_option($parser, XML_OPTION_TARGET_ENCODING, $encoding);
        xml_parser_set_option($parser, XML_OPTION_CASE_FOLDING, 0);
        xml_parser_set_option($parser, XML_OPTION_SKIP_WHITE, 1);
        xml_parse_into_struct($parser, trim($contents), $xml_values);
        xml_parser_free($parser);
        if (!$xml_values)
            return array();
        $xml_array = array ();
        $parents = array ();
        $opened_tags = array ();
        $arr = array ();
        $current = & $xml_array;
        $repeated_tag_index = array ();
        foreach ($xml_values as $data)
        {
            unset ($attributes, $value);
            extract($data);
            $result = array ();
            $attributes_data = array ();
            if (isset ($value))
            {
                if ($priority == 'tag')
                    $result = trim($value);
                else
                    $result['value'] = trim($value);
            }
            if (isset ($attributes) && $get_attributes) {
                foreach ($attributes as $attr => $val)
                {
                    if ($priority == 'tag')
                        $attributes_data[$attr] = $val;
                    else
                        $result['attr'][$attr] = $val; 
                }
            }
            if ($type == "open")
            {
                $parent[$level -1] = & $current;
                if (!is_array($current) || (!in_array($tag, array_keys($current)))) {
                    $current[$tag] = $result;
                    if ($attributes_data)
                        $current[$tag . '_attr'] = $attributes_data;
                    $repeated_tag_index[$tag . '_' . $level] = 1;
                    if (isset($tag) && $tag && isset($current[$tag])) {
                        $current = & $current[$tag];
                    }
                }
                else
                {
                    if (isset ($current[$tag][0]))
                    {
                        $current[$tag][$repeated_tag_index[$tag . '_' . $level]] = $result;
                        $repeated_tag_index[$tag . '_' . $level]++;
                    }
                    else
                    { 
                        $current[$tag] = array (
                            $current[$tag],
                            $result
                        ); 
                        $repeated_tag_index[$tag . '_' . $level] = 2;
                        if (isset ($current[$tag . '_attr']))
                        {
                            $current[$tag]['0_attr'] = $current[$tag . '_attr'];
                            unset ($current[$tag . '_attr']);
                        }
                    }
                    $last_item_index = $repeated_tag_index[$tag . '_' . $level] - 1;
                    $current = & $current[$tag][$last_item_index];
                }
            }
            elseif ($type == "complete")
            {
                if (!isset ($current[$tag]))
                {
                    $current[$tag] = $result;
                    $repeated_tag_index[$tag . '_' . $level] = 1;
                    if ($priority == 'tag' && $attributes_data) {
                        $current[$tag . '_attr'] = $attributes_data;
                    }
                }
                else
                {
                    if (isset ($current[$tag][0]) && is_array($current[$tag])) {
                        $current[$tag][$repeated_tag_index[$tag . '_' . $level]] = $result;
                        if ($priority == 'tag' && $get_attributes && $attributes_data) {
                            $current[$tag][$repeated_tag_index[$tag . '_' . $level] . '_attr'] = $attributes_data;
                        }
                        $repeated_tag_index[$tag . '_' . $level]++;
                    }
                    else
                    {
                        $current[$tag] = array (
                            $current[$tag],
                            $result
                        );
                        $repeated_tag_index[$tag . '_' . $level] = 1;
                        if ($priority == 'tag' && $get_attributes) {
                            if (isset ($current[$tag . '_attr']) && is_array($current[$tag]))
                            {
                                $current[$tag]['0_attr'] = $current[$tag . '_attr'];
                                unset ($current[$tag . '_attr']);
                            }
                            if ($attributes_data)
                            {
                                $current[$tag][$repeated_tag_index[$tag . '_' . $level] . '_attr'] = $attributes_data;
                            }
                        }
                        $repeated_tag_index[$tag . '_' . $level]++; //0 and 1 index is already taken
                    }
                }
            }
            elseif ($type == 'close')
            {
                $current = & $parent[$level -1];
            }
        }
        return ($xml_array);
    }

    //獲取accesstoken
    public function getAccessToken() {
        $tokenFile = "access_token.txt";
        $data = json_decode(file_get_contents($tokenFile,FILE_USE_INCLUDE_PATH));
        //accesstoken有效期是7200秒，這裏用到的文件緩存
        //注意：文件權限問題
        if (!$data->expire_time || $data->expire_time < time()) {

            $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".self::APP_ID."&secret=".self::APP_SECRET;

            $res =  json_decode(file_get_contents($url));
            if($res) {
                $arr = array();
                $access_token = $res->access_token;
                $arr['expire_time'] = time() + 7000;
                $arr['access_token'] = $access_token;
                $fp = fopen($tokenFile, "w");
                fwrite($fp, json_encode($arr));
                fclose($fp);
            }
        } else {
            $access_token = $data->access_token;
        }

        return $access_token;
    }

	//post發送json數據
    public function curl_post($url,$post_data){
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data);
        $res = curl_exec($ch);

        if(!$res){
            throw new Exception('發送消息失敗:'.curl_error($ch));
        }
        curl_close($ch);
    }


};


$wechatObj = new wechatAPI();

//注意：第一步驗證時打開，驗證完成之後就可以註釋了
// $wechatObj->isValid();

if($wechatObj->checkSignature() === true){

    $xmlstring = @file_get_contents("php://input");
    $accept_info = $wechatObj->xml2Array($xmlstring)['xml'];

    if($accept_info){
        $ToUserName = $accept_info['ToUserName'];
        $FromUserName = $accept_info['FromUserName'];
        $CreateTime = $accept_info['CreateTime'];
        $MsgType = $accept_info['MsgType'];
        $data = array();
        if($MsgType == 'text'){//接收文本
            $Content = $accept_info['Content'];//文本內容
            if($Content === '介紹') {
                $data['touser'] = $FromUserName;
                $data['msgtype'] = 'link';
                $data['link']['title'] = urlencode('DYBOY');
                $data['link']['description'] = urlencode('DYBOY是一個菜雞博主！');
                $data['link']['url'] = 'https://blog.dyboy.cn';
                $data['link']['thumb_url'] = 'https://ww2.sinaimg.cn/large/005PdFYUly1g22m1obu42j30hs0hstd7.jpg';
                $wechatObj->send($data);
				exit;
            }
            //else if 可以做好多事

        }else if($MsgType === 'image') {//接收圖片
			$data['touser'] = $FromUserName;
			$data['msgtype'] = 'text';
			$data['text']['content'] = urlencode('~*^_^*~');//urlencode 解決中文亂碼問題
			$wechatObj->send($data);
			exit;

        }else if($MsgType === 'event') {//進入客服窗口事件
            $Event = $accept_info['Event'];
            $SessionFrom = $accept_info['SessionFrom'];
            if($Event == 'user_enter_tempsession') {
                $data['touser'] = $FromUserName;
                $data['msgtype'] = 'text';
                $data['text']['content'] = urlencode('您好很高興爲您服務');//urlencode 解決中文亂碼問題
                $wechatObj->send($data);
				exit;
            }
        }

        echo '<xml><ToUserName><![CDATA['.$FromUserName.']]></ToUserName><FromUserName><![CDATA['.$ToUserName.']]></FromUserName><CreateTime>'.$CreateTime.'</CreateTime><MsgType><![CDATA[transfer_customer_service]]></MsgType></xml>';
    }

}

---

0x0C 總結

最後總結一下，基本就是上面這樣子了，還有的小東沒想起來，如果有微信小程序及後臺管理開發的可直接聯繫，價格從500到30000之間，價格可接受的可以直接聯繫。另外，寫了一個小程序，不過沒上線，也把碼子發出來瞅瞅吧，萬一哪天上線了吶？？？

原文地址：https://blog.dyboy.cn/program/123.html