小程序商城筆記

時間 2019-11-21

標籤程序商城筆記简体版

原文原文鏈接

一、三端分離：javascript

服務端：主要是查詢數據庫，獲取數據；php

客戶端：向服務端發送請求，完成自身邏輯；html

CMS：向服務端發送請求，實現發貨與發送微信信息。（CMS就是公司內部用戶用的，主要功能是添加、修改商品這一類功能）前端

二、基於token管理權限：登陸和有些用戶有權限看什麼，有些用戶沒有權限看什麼。vue

三、java

ORM模型（面向對象的模型），簡單理解爲：數據庫中的一張表就是一個對象。關聯模型就是多張表有關聯，好比寫sql語句的時候，多表關聯git

四、單元測試的做用：當業務代碼複雜的時候，有可能會出現這種狀況，剛修改一個地方的Bug，結果其餘地方出問題了。要解決這種狀況，就應該用單元測試github

五、在GitHub上下載think-phpweb

https://github.com/top-think/think 下載think-5.0.7 這個裏面找到（至關於一個demo）redis

https://github.com/top-think/framework/tree/v5.0.7 下載ThinkPHP核心代碼 framework-5.0.7

下載之後，把這倆個解壓，把think-5.0.7解壓，更名爲項目名字，好比zerg，放在XAMPP下的htodcs文件夾下；把framework-5.0.7解壓，更名爲thinkphp放到zerg文件夾下，結構爲：

六、下載XAMPP https://www.apachefriends.org/zh_cn/index.html

這個表示PHP的版本

點擊這塊，選擇相應的php版本

七、微信裏的登陸、微信支付（預訂單、庫存量檢測與回調通知處理（這是重點）、微信模板信息（很是重要，這是微信小程序惟一能夠告訴用戶的消息機制，模板信息是被動的，只有用戶在小程序裏觸發了某些選項後，纔有權利向用戶發送這些消息，不能主動、隨意地向用戶推送消息））

八、Token令牌的存儲：（1）、用後端語言自帶的方法；（2）、寫到一個配置文件裏；（3）、存儲到數據庫裏

九、

Web產品矩陣：

用一個技術把上面的這些產品都凝合起來，以實現更好的複用性，讓整個架構變得合理和流暢。如今作web產品要有公共服務的概念。要有一個公共的api向這些產品提供共有的數據和服務

十、能寫出代碼和寫出易維護的代碼不是一回事

前端毫不等於作界面和特效，前端與服務器在編程思惟上的差別愈來愈小了

前端已經變得和服務器同樣須要處理大量的業務邏輯

十一、第三方組件應該合理選擇：

（1）、第三方組件封裝的層次不同，有時候引入第三方組件會引起代碼bug

（2）、不少功能咱們用不上，要浪費不少時間去學習第三方組件，並不比咱們本身實現功能消耗的時間短

（3）、第三方組件的一些功能與咱們本身所要求的功能有衝突，要花不少時間去處理

（4）、第三方組件會侵入咱們本身的代碼

（5）、用第三方組件，不利於提升本身的邏輯能力和開發能力

（6）、有一些複雜的功能，好比訪問數據庫，本身寫不出來，或者寫出來的效用很差，就可使用第三方組件庫

（7）、有的第三方組件庫沒有侵入本身的代碼，只是做爲一個類庫來使用，這樣的第三方組件庫可使用

十二、

vendor：第三方的插件就安裝到這裏

thinpphp：tp5的核心代碼，用來支持框架的運行

runtime：運行文件、日誌文件就放在runtime裏

public：外部站點的目錄，這裏面的文件，能夠被直接訪問到

extend：以前已經寫好的第三方類庫，放入這個裏面的類庫，命名空間是能夠被框架自動註冊的

application：核心代碼

1三、tp5自帶的web服務器：配置PHP環境變量，把D:\xampp\php（php.exe）添加到PATH裏面,cmd進入public文件夾，運行php -S localhost:8080 router.php

在瀏覽器中輸入localhost:8080

這個只是本地測試用，最好仍是用xampp

14。URL路徑格式

說明：藍色的：域名

index.php 入口文件，PHP默認的

綠色index：模塊名（項目中會有多個模塊）

紫色index：controller名

棕色Index：controller下面的文件

對比下面的結構

1五、建立class的時候，如何自動匹配命名空間

config.php裏定義的命名空間，默認爲app，能夠修改

使用PhpStrom配置，setting-->Directories ，選中application，點擊Sources,，而後點擊右下角的，設置爲app

實戰經驗：php中，模塊的範圍大，中小型的項目，單一模塊就夠了，不要一個功能一個模塊

1六、虛擬域名的配置

如今啓動項目，若是要訪問

Url爲：http://localhost/zerg/public/index.php/sample/test/hello

效果爲：

這樣的話太長了

如今起個虛擬域名：z.cn

點擊xampp裏的

找到D:\xampp\apache\conf\extra下的httpd-vhosts.conf文件，在最下面加入以下代碼：

1 <VirtualHost *:80>   
2     DocumentRoot "D:\xampp\htdocs\zerg\public"
3     ServerName z.cn
4 </VirtualHost>

在C:\Windows\System32\drivers\etc下找到hosts文件，最下面加入以下代碼：

1 127.0.0.1 z.cn

從新啓動Apache

輸入url：http://z.cn/sample/test/hello

顯示效果爲：

PhpStrom 斷點調試：https://coding.imooc.com/lesson/97.html#mid=3320

在項目的public下面建立一個文件infor.php

輸入phpinfo();

在瀏覽器打開 localhost/zerg(項目名)/public/infor.php（我配置了虛擬域名，因此打開的Url 是：http://z.cn/infor.php）

在打開的頁面裏搜索Xdebug，若是有就說明安裝成功了，若是沒有，就說明沒有安裝

安裝一個Xdebug 網站是：https://xdebug.org/download.php

在剛纔Infor的頁面，查找源代碼，而後複製，粘貼到下面的框裏

這樣就會出現與本地使用的php相匹配的Xdebug，不過7如下的不行

連接：https://pan.baidu.com/s/1O3tdu0rz0hA_bBC2YY3xhA
提取碼：zhwo

這個裏面有

下載好文件後，

找到這個路徑D:\xampp\php\ext，把剛纔的文件放進去

點擊

打開php.ini，把下面的代碼複製到最下面

[Xdebug]
zend_extension = D:\xampp\php\ext\php_xdebug-2.2.5-5.6-vc11.dll （這個路徑根據你本身的來）
xdebug.remote_enable=1
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_host=localhost
xdebug.remote_port=9000
xdebug.idekey="PHPSTORM"

重啓

刷新infor頁面，查找Xdebug，若是有，說明安裝成功

如今開始配置調試

點擊

配置服務器

點擊下面的啓動調試

把這個複製到postman的接口後面，請求的時候，就能夠開啓調試

1七、Postman 後端接口調試工具

https://www.getpostman.com/

1八、ThinkPHP5中支持三種路由：

（1）、默認的，PATH_INFO：

 1 //配置式路由
 2 return [
 3     '__pattern__' => [
 4         'name' => '\w+',
 5     ],
 6     '[hello]'     => [
 7         ':id'   => ['index/hello', ['method' => 'get'], ['id' => '\d+']],
 8         ':name' => ['index/hello', ['method' => 'post']],
 9     ],
10 
11 ];

（2）、強制路由（最標準的，項目中推薦用這種）

開啓強制路由：在application/config.php中，，值改成true

1 //動態路由
2 use think\Route;
3 
4 Route::rule('hello', 'sample/Test/hello');

標準路由的倆種寫法：

1 //(1)、第一種寫法
2 Route::rule('hello', 'sample/Test/hello', 'GET', ['https'=>true]);
3 Route::rule('hello', 'sample/Test/hello', 'GET|POST', ['https'=>true]);
4 //(2)、第二種寫法
5 Route::get('hello', 'sample/Test/hello');
6 Route::post();
7 Route::any();

（3）、混合模式

就是上面倆種均可以用

1九、路由參數 https://coding.imooc.com/lesson/97.html#mid=3338

20、驗證器 https://coding.imooc.com/lesson/97.html#mid=3351

2一、REST以前的重要協議是SOAP，重，使用XML描述數據

REST是用JSON描述數據

XML和JSON都是通用的，與語言無關，能夠在不一樣的語言之間交換數據

REST的出現，更多的是給我提供了一種輕量級的思惟方式，前端能夠經過javascript直接訪問後臺

2二、REST是一種思想，RESTFuL API 是基於REST的API的設計理論

無狀態：假如發生了倆個http請求，這倆個Http請求之間是沒有前後順序的，也沒有直接的關係，第二個請求是不須要依賴第一個請求的。

好比咱們在訪問數據庫的時候，是要連接和打開數據庫的，只有這個成功了，才能去作一些對數據庫的操做，刪除和增長，完成後要記得把這個連接close掉，這就不是無狀態的，必須有個前置操做。

RESTFUL 請求就沒有這些

備註：傳統開發中的GET、POST和RESTFUL中的GET、POST，用法沒有區別，可是意義上區別很大

在傳統開發中，選擇GET、POST的依據是：若是傳輸的數據簡單，不須要保密，就用GET，不然就用POST

在RESTFUL中，選擇GET仍是POST，是看對資源是作什麼操做，若是是獲取資源，就用GET，若是是建立資源，就用POST

404:找不到頁面

400：請求參數錯誤

401：沒有權限訪問

403：當前的資源被禁止。有權限訪問，可是由於某些緣由，資源被禁止

例子：有倆個用戶請求數據，A用戶請求的時候傳遞的是B用戶的ID，這時候就應該返回403

500：服務器的未知錯誤，（1）、確實不知道哪裏錯了，沒法返回具體的錯誤提示，因此就返回500；（2）、知道哪裏錯誤了，可是這是我服務器的緣由，與你客戶端無關，不想讓客戶端知道服務器出了什麼問題，返回500

豆瓣的簡單，GitHub的標準 https://developer.github.com/v3/

徹底按照標準REST不容易，尤爲是在內部開發中，好比查詢，參數不一樣，若是作成給一個接口，要各類判斷，代碼會很是複雜

2三、何時用全局異常：（1）、每級要處理上級的異常，很繁瑣，也有可能沒有捕獲，（2）、有些異常沒有預料到，沒有捕獲。須要一個全局異常，作出統一的處理

此外不少框架中已經有了全局異常，好比thinkphp5，這時候就須要咱們重寫這個錯誤

2三、thinkphp裏的數據庫三種操做方法：

（1）、原生SQL

1 Db::query('select * from banner_item where banner_id=?',[$id]);

2四、詳細：https://coding.imooc.com/lesson/97.html#mid=3576

項目運行中發現一個問題，當url錯誤的時候，會報錯：httpException不是Exception，通過調試發現，httpException繼承的是\RuntimeException，不是Exception的子類

2五、鏈接數據庫的原理

若是是直接用sql鏈接數據庫，那就是用Collection鏈接

若是用的是Query查詢，就是先用Builder（生成器）編譯成SQL，再傳給Collertion

在TP5中，不是直接訪問數據庫，是經過一箇中間層來操做數據庫，就是dal，好處：（1）、簡化sql代碼的編寫；（2）、不須要關心具體的實現，只要贊成使用中間層提供的db類，就能夠訪問不一樣的數據庫

db的原理：它是一個工廠模式，使用的時候，db根據不一樣的配置文件，來調用不一樣的驅動，這個驅動纔是真正決定Collection是什麼類型的

2七、開啓SQL日誌記錄 https://coding.imooc.com/lesson/97.html#mid=3591

index.php是入口文件，每個url請求過來，都會通過這個文件，因此能夠在這個文件進行配置

2八、https://coding.imooc.com/lesson/97.html#mid=3610

ORM Object Relational Mapping 對象關係映射設計表的時候，要當成對象來設計，操做的時候，不是在操做表，而是在操做一個個對象

在tp5中，模型不僅是一張表，更是一個業務邏輯，當業務邏輯簡單時，模型能夠是一張表，可是複雜時，是多張表的聯合

2九、Db是一個數據庫訪問層，model是創建在Db訪問層上的更加抽象的一個處理業務邏輯的模型層

30、thinkPhp5裏類和模型的區別，類是一個抽象的，模型是具體的（相似於java裏的對象）

thinkPhp5調用模型的方法有倆種：靜態調用（推薦）和實例對象調用。這個和Java裏面不同，Java都是new 一個實例對象後，調用裏面的方法

邏輯上的問題：實例化對象後，模型對象對應數據庫裏的一條數據，一條數據get一個id，這個說不過去

面向對象中，類和對象的區別，model裏面，一個類對應的是數據庫的一張表，而一個new出來的對象，對應的是表裏的一條數據

3一、查詢數據的時候，隱藏某些字段 https://coding.imooc.com/lesson/97.html#mid=3909

3二、tp5裏公開的配置項文件是extra，在這個文件添加文件(這個裏面能夠自定義一些配置，下面的這個表示返回的圖片路徑前面加上http://z.cn/image)

調用的時候

config('setting.img_prefix')

3三、在TP5裏面，若是出現router前面相似的，就須要開啓完整路由匹配

在config.php裏面

改成true

3三、8.16數據庫字段冗餘的合理利用（合理的）

在設計數據庫的時候，能夠適當的冗餘，舉個例子：product表關聯的image表，咱們要獲取img的url，就須要查詢imgage表，若是product表數量不少的話，速度會變慢，有一種優化的方法，把url存在product裏面，這樣只要查詢image表就能夠，不用再查詢image表了

3九、8-19

若是想在某個方法裏隱藏某個字段，可使用TP5框架裏的collection，它能夠把數據轉換成一個對象，這樣就可使用裏面的方法hidden來進行隱藏字段

1 $collection = collection($products);
2 $products = $collection->hidden(['summary']);

在thinkphp5中，直接修改database裏的

// 數據集返回類型
'resultset_type'  => 'collection'
這樣就可讓返回的數據爲collection對象

TP5中，判斷對象爲空，可使用isEmpty()方法

40. 9-1 token

驗證token：（1）、驗證這個token在數據庫裏；（2）、這個token沒有過時；（3）、若是token在數據庫裏，並且沒有過時，還要驗證這個token所在的分組有權限調用這個接口

4一、9-2微信身份體系設計

在小程序中，咱們是基於微信體系作的，因此登陸的時候不須要輸入帳號和密碼

小程序把code碼發送給getToken接口，getToken接口接收到code碼之後，會向微信服務器發送一個請求，把code碼傳遞到微信服務器，微信服務器接收到code碼之後，會返還openid（用戶身份的標識）和session_key

session_key的做用：在微信體系中，能夠直接訪問微信服務器拿到一個加密信息，要想解密這個信息，就須要session_key

加密信息裏面包含一個UnionID（也是用戶的標識）

UnionID和openid的區別：

openid是一個用戶針對一個小程序，它有一個openid，一個用戶在不一樣的小程序中，openid是不一樣的

UnionID在不一樣的小程序下是相同的，只要是同一個帳號註冊的小程序、公衆號、服務號，都是相同的

從微信服務器獲取到openid後，把它存儲到服務器中，生成token，而後返回給小程序端

咱們能夠把token保存到緩存中，由於咱們有可能會遇到這種狀況，打開一個頁面，就須要請求一次服務器，獲取token，驗證token是否有效，若是把token保存到緩存中，就能夠在緩存中獲取token進行驗證，減小服務器壓力

備註：緩存的維護不容易，選取技術的時候，要慎重，既要考慮到優勢，還要考慮到缺點

4二、 9-11 閉包函數構建查詢器

要求：關聯倆張表查詢數據，根據imgs表裏的order字段進行排序，通過演變後，使用了下面的寫法（多看）

model/Product.php

 1 public static function getProductDetail($id)
 2     {
 3         $product = self::with([
 4             'imgs' => function($query){
 5                 $query->with(['imgUrl'])
 6                     // order('order', 'asc') 第一個order是排序，第二個order是數據庫裏的字段
 7                 ->order('order', 'asc');
 8             }
 9         ])
10             ->with(['properties'])
11             ->find($id);
12         return $product;
13     }

4三、9-12 經過令牌獲取用戶標識

令牌Token是用戶訪問受保護的接口的必須參數

爲何不直接傳遞UID，而是經過令牌獲取UID？

uid是自增加生成的，容易被別人猜到

使用令牌獲取UID的好處是：在post提交的時候，若是提交的是倆個用戶，令牌是A用戶的，UID是B用戶的，這樣修改的地址就是B用戶的，容易出錯

4四、9-15 參數過濾

Controller/Address.php

1  // 根據規則取字段是頗有必要的，防止惡意更新非客戶端字段
2         $data = $validate->getDataByRule(input('post.'));

getDataByRule 這個方法是用來過濾客戶端傳回的參數的，uid咱們是用token獲取的，可是爲了怕客戶端傳過來uid，覆蓋token獲取的uid，因此咱們要過濾參數

4五、10-1 Scope權限做用域

用來判斷用戶的權限，能夠先建立一個配置文件，在裏面配置好幾種權限，而後代碼裏用到什麼就調用

4七、前置方法

就是請求接口時，先執行這個方法

4八、小程序下單支付流程

https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=3

小程序調用下單API，檢查庫存，若是有庫存，就下單成功；下單成功後，調用支付API，咱們本身的服務器調用微信服務器，生成預訂單，返回支付參數，而後把支付參數傳給小程序，小程序拿到支付參數後，就調用相應的接口，請求微信，進行支付，彈出支付窗口。支付成功或失敗後，一方面返回給小程序提示信息，另外一方面返回給咱們的服務器信息（異步的，會在必定時間內屢次推送）

4九、10-10 訂單快照

訂單快照保存的信息是當時下單時候的信息，地址和商品價格、數量，通常都是經過商品ID查詢獲取商品信息，這樣很差，由於商品的名稱和價格有可能改變，這樣獲取的數據和當時下單的時候的數據不同，解決辦法是下單的時候，就把訂單裏的商品信息都保存在訂單order表裏

50、TP5自動寫入時間戳

在表裏面，常常有create_time，update_time，delete_time這些屬性，若是咱們不想在保存數據的時候手動加入，能夠在對應的mode裏面寫入以下代碼，當保存數據的時候，自動加入當前時間

1 protected $autoWriteTimestamp = true;   //自動返回當前時間戳

何時TP5會給create_time自動加入時間，當檢測到新加一條數據的時候

一樣，若是作的是刪除操做的時候，會自動給delete_time自動加入時間

這裏特別說明下delete_time這個，如今咱們不少時候刪除數據，並非真實的刪除，而是假刪除，只要delete_time有值，就表示這條數據被刪除了

記住：要使用TP5自動寫入時間戳，必須用模型的方式，若是用原生SQL，是不行的

如何自定義TO5裏的create_time，update_time，delete_time這些名稱

5一、TP5中使用事務

遇到下面的問題

咱們執行一個方法的時候，在倆個表裏保存相關的數據，若是隻保存了前面的數據，後面的沒有保存成功，這樣會出問題，這裏用到的數據庫中的事務

在TP5中。要解決這個問題，就須要下面的代碼

Db::startTrans();   Db::commit();

 1 Db::startTrans();
 2         try{
 3             $orderNo = $this->makeOrderNo();
 4             $order = new \app\api\model\Order();
 5             $order->user_id = $this->uid;
 6             $order->order_no = $orderNo;
 7             $order->total_price = $snap['orderPrice'];
 8             $order->total_count = $snap['totalCount'];
 9             $order->snap_img = $snap['snapImg'];
10             $order->snap_name = $snap['snapName'];
11             $order->snap_address = $snap['snapAddress'];
12             $order->snap_items = json_encode($snap['pStatus']);
13 
14             $order->save();
15 
16             $orderID = $order->id;
17             $create_time = $order->create_time;
18 
19             foreach ($this->oProducts as &$p){
20                 $p['order_id'] = $orderID;
21             }
22             $orderProduct = new OrderProduct();
23             $orderProduct->saveAll($this->oProducts);
24             Db::commit();
25             return [
26                 'order_no' => $orderNo,
27                 'order_id' => $orderID,
28                 'create_time' => $create_time
29             ];
30         }catch (Exception $ex){
31             Db::rollback();
32             throw $ex;
33         }

5二、微信支付SDK

分爲倆端的，客戶端和服務端

客戶端：在百度搜索微信支付開發者文檔

https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=11_1

服務端：在百度搜索微信支付開發者文檔

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1

5三、 10-21

下載PHP版的SDK，解壓，在extend下建立個文件夾，把lib裏的複製到裏面

5四、在TP5中，引入extend裏的文件

5五、 10-18

生成一個微信服務器須要的訂單，不是咱們真正的訂單，用預訂單，是爲了從微信服務器返回支付參數

5六、小程序業務流程

https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=3

5七、微信支付簽名 10-26

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/payment/wx.requestPayment.html

簽名的做用：爲了保證傳送的數據不被修改（固然，這是相對的，不能保證必定不被修改）

舉例說明簽名的做用：服務端有三個參數：A。B、C，如今用這個三個參數和APPKey四個參數一塊兒，使用MD5，作成Sign簽名，而後傳送給客戶端，客戶端又傳送到微信服務端，

微信服務端用一樣的規則把傳過來的參數和APPKey生成Sign簽名，進行驗證，倆個簽名是否是同樣，若是同樣，就說明傳送過來的參數正確

5八、10-29 支付回調通知處理

 1 // 微信支付回調處理
 2     public function receiveNotify(){
 3        //通知頻率爲15/15/30/180/1800/1800/1800/3600,單位:秒
 4 
 5         //1.檢查庫存量,有可能超賣
 6         //2.更新這個訂單的status狀態
 7         //3.減庫存
 8         //若是成功處理，返回微信成功處理信息,不然返回未成功處理信息
 9 
10         //微信返回的數據特色：post,xml格式,不會攜帶參數
11         // 使用SDK的好處 能夠處理XML格式
12     }

微信支付成之後，會調用一個接口，返回處理的信息，這個接口須要咱們本身定義receiveNotify（）

備註：這個接口必須是post請求，返回的格式是xml，並且不會再裏面攜帶參數（相似url?xx=xx這種）

咱們用了SDK，能夠很容易的處理XML數據

要覆蓋WxPay.Notify.php裏的NotifyProcess方法

5九、10-30 支付回調通知

$data的說明 https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_7&index=8

肯定是否成功，要看下面這個字段

60、把本地服務轉換成外網，可使用相似ngrok，不過這種工具，通常不安全

6一、使用了代理之後，secure.php裏pay_back_url要從新配置，具體看 10-23

6二、10-34 能夠斷點調試微信支付的回調嗎？

正常狀況，微信支付後，會本身調用咱們提供的接口，這時咱們是沒法斷點調試接口信息的

有一個方法：新建立一個方法，微信服務器調用的方法裏面調這個方法，在這個方法裏面斷點調試微信服務器返回的信息

6三、10-37

要把返回的數據裏的某個字段進行json格式化處理，能夠在Model裏定義讀取器

微信端

6四、11-3

微信小程序在真機上運行時要提早配置域名

進入小程序後臺管理界面 https://mp.weixin.qq.com/wxopen/devprofile?action=get_profile&token=726946140&lang=zh_CN

只是請求的話只須要配置 request合法域名

6五、11-4 異步回調和箭頭函數

http://www.javashuo.com/article/p-qlouyqpo-bw.html

6六、11-6

1 // if(params.sCallBack){
2         //   params.sCallBack(res);
3         // }
4         // 這倆種寫法是同樣的  推薦用下面的，微信的demo中就這樣寫的
5         params.sCallBack && params.sCallBack(res.data);

6七、小程序模板template的一些注意

父文件：

1 <!--引入template文件-->
2 <import src="../tpls/products/products-tpl.wxml" />
3 
4 <!--使用data把數據傳遞到template裏面-->
5 <template is="products" data="{{products:productsArr}}"></template>

模板文件：

 1 <template name="products">
 2   <view class="products-box">
 3     <block wx:for="{{products}}">
 4       <view class="products-item">
 5         <image class="products-image" src="{{item.main_img_url}}"></image>
 6         <view class="products-item-bottom">
 7           <text class="name">{{item.name}}</text>
 8           <view class="price">￥{{item.price}}</view>
 9         </view>
10       </view>
11     </block>
12   </view>
13 </template>

（1）、父文件要引入模板文件的路徑

（2）、父文件裏的is和模板文件裏的name一致

（3）、模板文件裏不進行js操做，須要的數據是由父文件裏傳過來的，使用 data={}

（4）、模板文件的樣式，在父文件的樣式裏引入

1 @import "../tpls/products/products-tpl.wxss";

6七、底部的配置

 1 "tabBar": {
 2     "list": [
 3       {
 4         "pagePath": "pages/home/home",
 5         "text": "首頁",
 6         "iconPath": "imgs/toolbar/home.png",
 7         "selectedIconPath": "imgs/toolbar/home@selected.png"
 8       },
 9       {
10         "pagePath": "pages/category/category",
11         "iconPath": "imgs/toolbar/category.png",
12         "selectedIconPath": "imgs/toolbar/category@selected.png",
13         "text": "分類"
14       },
15       {
16         "pagePath": "pages/cart/cart",
17         "iconPath": "imgs/toolbar/cart.png",
18         "selectedIconPath": "imgs/toolbar/cart@selected.png",
19         "text": "購物車"
20       },
21       {
22         "pagePath": "pages/my/my",
23         "iconPath": "imgs/toolbar/my.png",
24         "selectedIconPath": "imgs/toolbar/my@selected.png",
25         "text": "個人"
26       }
27     ],
28     "borderStyle": "white", // 邊框的顏色
29     "selectedColor": "#AB956D", //選中之後文字的顏色
30     "color": "#989898", // 未選中文字的顏色
31     "backgroundColor": "#F5F5F5" // 背景顏色
32   }

6八、調試技巧

引入template的時候，不顯示：在template裏面隨便打一行字，若是顯示，就說麼是數據的問題，若是不顯示，就說明模板沒有引入，這時候就要檢查倆個地方：

（1）、在父組件裏，有沒有用inport引入模板文件

（2）、父組件傳入的數據key和模板裏的是否一致

在微信開發工具裏，AppData裏能夠查看當前頁面裏的數據

6九、11-16 動態設置導航欄標題

https://developers.weixin.qq.com/miniprogram/dev/api/ui/navigation-bar/wx.setNavigationBarTitle.html?search-key=setNavigationBarTitle

wx.setNavigationBarTitle(Object object)

注意：一、要在onReady裏面調用，在onLoad裏調用的時候，有可能會失效二、全局設置導航欄標題的的地方必須爲空，不然有可能先顯示全局設置的，而後顯示動態設置的，會閃一下

70、11-18 Picker組件

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

1 <picker class="" range="{{countsArray}}" bindchange="bindPickerChange" value="1">
2           <!--flex-->
3           <view>
4             <text class="counts-tips">數量</text>
5             <text class="counts-data">{{productCount}}</text>
6             <image class="counts-icon" src="../../imgs/icon/arrow@down.png"></image>
7           </view>
8 </picker>

picker對flex的支出不是很好，因此爲了讓picker裏面的值都在中間，能夠在他們外面包裹一個view，view源碼裏用的是flex佈局

7一、11-23 微信小程序數據從服務器端到前端的流程

頁面初始化時，JS層調用API，從服務器端獲取數據，而後進行數據綁定，在wxml顯示數據。

前端有時候會進行操做，經過標籤的自定義屬性（data-）把參數傳遞到js層，js層用event獲取，而後把參數經過API傳遞到服務器端，服務器端響應後把心得數據

再傳遞到J層，而後進行新的數據綁定

在小程序中，數據綁定是最重要的部分，相似的有angular,js和vue.js

7二、編譯設置

每次咱們改變代碼的時候，都會跳轉到第一頁，能夠這樣設置

這樣就會跳轉到指定頁面

7三、12-4

1  for (let i = 0; i < len; i++) {
2       //避免 0.05 + 0.01 = 0.060 000 000 000 000 005 的問題，乘以 100 *100
3       if (data[i].selectStatus) {
4         account +=
5           data[i].counts * multiple * Number(data[i].price) * multiple;
6         selectedCounts += data[i].counts;
7         selectedTypeCounts++;
8       }
9     }

注意這種寫法，在Js裏，小數相乘會出現特別的結果，能夠先乘以10的冪數，把值變成整數再相乘，最後對結果進行處理

7四、12-5 購物車頁面開發

不須要在頁面顯示，能夠是用block，相似於大括號。

wx:if和wx:else不必定非要倆個類似的標籤

7五、跳轉到tab欄下面的頁面，必須使用switchTab

7六、13-4 客戶端令牌管理機制

程序初始化的時候，先從緩存（Storage）中讀取令牌，檢測令牌，若是令牌失效或者不存在，則請求token，把獲取到的令牌保存到緩存（token）中

model（泛指全部向後端發送請求的文件）中請求後端API的時候，攜帶令牌去請求

若是在初始化的時候有令牌，在請求API的時候卻沒有，返回401，那就從新請求令牌，而後攜帶令牌去請求API

7五、13-17 獲取用戶信息

 1 wx.login({
 2       success: function () {
 3 
 4         wx.getUserInfo({
 5 
 6           success: function (res) {
 7             typeof cb == "function" && cb(res.userInfo);
 8           },
 9 
10           fail: function (res) {
11             typeof cb == "function" && cb({
12               avatarUrl: '../../imgs/icon/user@default.png',
13               nickName: '零食小販'
14             });
15           }
16 
17         });
18       },
19 
20     })

備註：wx.login獲取code，進而獲取poenid，是不須要受權的

wx.getUserInfo是須要受權的

7六、13-17 獲取用戶信息

在小程序裏面，最好不要在頁面中間自定義Loding組件，體驗效果很差；若是特別須要，能夠在頂部定義一個

7七、wx.getUserInfo 獲取用戶信息

調用這個接口前，會讓用戶受權，若是是贊成，可成功獲取用戶信息；若是是不一樣意，那將進入fail回調，並且不會再出現受權頁面

7八、13-20

合併倆個數組

1 this.data.orderArr.push.apply(this.data.orderArr, data);

7九、13-20

onReachBottom 是Page的事件，頁面滾動到最底部的時候觸發

scroll-view組件也有這種效果，不過若是須要js控制好，那麼推薦用onReachBottom

80、微信模板信息 14章的總結

微信模板信息連接：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/template-message.html

看使用說明：

步驟一：獲取模板 ID

有兩個方法能夠獲取模板 ID：

經過模板消息管理接口獲取模板 ID（詳見模板消息管理）
在微信公衆平臺手動配置獲取模板 ID

登陸 https://mp.weixin.qq.com 獲取模板，若是沒有合適的模板，能夠申請添加新模板，審覈經過後可以使用，詳見模板審覈說明

要想使用模板信息，須要先在https://mp.weixin.qq.com 這個裏面選擇須要的模板

點擊添加按鈕進行添加

添加完之後，記住模板ID，請求模板信息接口的時候，要用這個ID（對應的參數是template_id）

步驟二：頁面的 `<form/>` 組件，屬性 `report-submit` 爲 `true` 時，能夠聲明爲須要發送模板消息，此時點擊按鈕提交表單能夠獲取 `formId`，用於發送模板消息。或者當用戶完成支付行爲，能夠獲取 `prepay_id` 用於發送模板消息。

有倆種發送模板信息的狀況，一種是使用form組件，一種是支付完成後發送

如今討論支付完成這種狀況，注意prepay_id ，這也是參數之一，對應的參數是form_id

步驟三：調用接口下發模板消息（詳見 sendTemplateMessage ）

經過上面倆個步驟，獲取了template_id和form_id，再加上其餘參數，就能夠請求接口了

如今咱們來看https://developers.weixin.qq.com/miniprogram/dev/api/open-api/template-message/sendTemplateMessage.html，分析發送模板信息接口

參數分析

string access_token 小程序全局惟一後臺接口調用憑據

具體信息，查看 https://developers.weixin.qq.com/miniprogram/dev/api/open-api/access-token/getAccessToken.html

string touser 接收者（用戶）的 openid

string template_id 所需下發的模板消息的id 上面已經說了

string page 點擊模板卡片後的跳轉頁面，僅限本小程序內的頁面。支持帶參數,（示例index?foo=bar）。該字段不填則模板無跳轉。

string form_id 表單提交場景下，爲 submit 事件帶上的 formId；支付場景下，爲本次支付的 prepay_id

string data 模板內容，不填則下發空模板

string emphasis_keyword 模板須要放大的關鍵詞，不填則默認無放大

請求數據實例

 1 {
 2   "touser": "OPENID",
 3   "template_id": "TEMPLATE_ID",
 4   "page": "index",
 5   "form_id": "FORMID",
 6   "data": {
 7       "keyword1": {
 8           "value": "339208499"
 9       },
10       "keyword2": {
11           "value": "2015年01月05日 12:30"
12       },
13       "keyword3": {
14           "value": "騰訊微信總部"
15       } ,
16       "keyword4": {
17           "value": "廣州市海珠區新港中路397號"
18       }
19   },
20   "emphasis_keyword": "keyword1.DATA"
21 }