wepy 項目開發說明
功能清單
1 配置 window(外觀)和 tabBar(底部 tab 欄)
2 首頁頁面結構和樣式
3 首頁擷取接口資料渲染頁面
發起請求：wepy.request({})
開啟：不校驗合法域名
4 開啟 Promise/async 支援 和 封裝 fetch
5 傳回頂部
5.1 頁面滾動到一定距離後才展示傳回頂部按鈕
5.2 點選傳回頂部，實作頁面回到頂部( wx.pageScrollTo(OBJECT) )
如何開始一個新功能
1 在 app.wpy 的 pages 中配置新頁面路徑
2 在 pages 目錄中建立頁面檔案(檔案名.wpy)
3 在 頁面 中添加 template/style/script 三項内容
建立 wepy 檔案報錯說明
如果建立頁面後小程式中報錯，按以下方式處理：
1 終止 wepy build --watch 終端指令
2 關閉 微信開發者工具
3 删除 dist 檔案夾
4 重新運作 wepy build --watch 指令
5 重新打開 微信開發者工具
說明：wepy 指令行工具自身的問題，會導緻這個錯誤
小程式合法域名的說明
為了安全性的考慮，小程式中能夠通路的接口域名需要在小程式管理背景配置後，才能正常通路
可以在 微信公衆平台|小程式 中的 設定 -> 開發設定 -> 伺服器域名 添加合法域名
在開發期間，可以繞過這個配置項，隻需要在 微信開發者工具 中勾選 不校驗合法域名，那麼，小程式就可以請求任何域名的接口資料了
等到小程式真正上線的時候，就必須配置合法域名，否則，小程式無法正常擷取資料以及上線
wepy 中資料操作的說明
讀取資料
直接使用 this.swiperList 就可以通路了
設定資料
同步：this.swiperList = []
異步：
1 this.swiperList = []
2 this.$apply()
開啟 Promise 和 async
注意：開啟 Promise 支援後，原來 回調函數 的方式就不再支援了！
開啟步驟如下：
1 安裝：npm i -S wepy-async-function
2 修改 app.wpy，如下：
// 2.1 導入async包
import 'wepy-async-function'
export default class extends wepy.app {
constructor() {
super()
// 2.2 讓wepy中的API變為Promise的使用方式
this.use('promisify')
}
}
3 重新開機編譯：wepy build --no-cache
封裝 fetch 的說明
為什麼要封裝 fetch？
1 因為 wepy 提供的 request 使用繁瑣
如何封裝？
1 先開啟 wepy 的 Promise/async 支援
2 封裝 fetch，代替 wepy.request
封裝的具體操作：
1 處理 公共路徑，以後每次請求的時候，隻需要提供目前接口位址即可(BASEURL)
2 封裝擷取 data。封裝前需要 res.data.data 才能擷取到，封裝後，隻需要 res.data 就可以了
字型圖示庫
使用步驟：
1 下載下傳字型圖示樣式檔案
2 将其拷貝到項目的 assets 目錄中，并且修改檔案字尾名為：.wxss
3 修改 樣式檔案 中的 px 為 rpx
4 在 app.wpy 中通過 @impot '路徑'; 來導入字型圖示檔案
5 在需要使用字型圖示的位置，添加類名：class="iconfont icon-xiao"
小程式中的頁面跳轉
1 通過元件 navigator 來實作小程式中頁面的跳轉
2 要跳轉到的頁面一定要有，否則，就會報錯：頁面找不到
3 如果要跳轉的頁面是 tabBar 中的頁面，需要設定 open-type="switchTab"
預設 open-type 為：navigate
兩種 open-type
1 open-type="navigate"
1.1 預設值
1.2 用于普通頁面跳轉
1.3 跳轉後，可以傳回上一個頁面
2 open-type="switchTab"
2.1 用于跳轉到 tabBar 頁面
2.2 跳轉後，不能傳回上一個頁面
預設跳轉
跳轉到tabBar頁面
導航傳遞參數
導航的時候，可以直接在 url 後面指定參數：
跳轉并傳遞參數
在頁面中，通過 onLoad 這個聲明周期函數的參數 query 可以擷取到傳遞的參數
// goods_detail.wepy 頁面：
// 擷取傳遞給該頁面的參數
onLoad(query) {
console.log(query.goods_id)
}
微信開發者工具中的編譯模式
說明：預設情況下，小程式每次打開的都是首頁，這樣就導緻調試其他頁面，需要點選多次，才能進入其他頁面，很繁瑣
解決方式：在 微信開發者工具 中，添加編譯模式(比如：商品詳情編譯模式)
添加并切換到該編譯模式後，每次啟動都會從該模式制定的頁面啟動
wepy 中的事件綁定
1 在模闆中通過 @tap 方式來給小程式的元件綁定事件
說明：綁定事件的方式，模拟 Vue 中事件綁定方式
2 頁面中的事件處理程式都要放在 methods 執行個體屬性中
3 如果需要傳遞參數，應該使用 {{ 參數 }} 來處理參數，否則，就會被當作字元串來處理了
點我
點我
export default class Index extends wepy.page {
methods = {
handleClick() {
// 事件處理程式
}
}
}
圖檔預覽
wx.previewImage({ current: '', urls: [] })
商品詳情 - 圖檔詳情功能
說明：接口傳回的圖文詳情資料是 HTML 結構的字元串，但是，小程式中是不支援 HTML 結構的。是以，需要将 HTML 結構，轉化為 wxml 才能在小程式中展示出來
問題：如何将 HTML 轉化為 wxml？
解決：使用第三方插件 wxParse
解析 HTML
說明：将 HTML 解析為 wxml
使用場景：伺服器端傳回的商品詳情是 HTML 字元串，需要轉化為 wxml 才能展示
使用步驟
1 下載下傳 wxParse，git clone https://github.com/icindy/wxParse.git
2 将下載下傳的檔案中的 wxParse 目錄，拷貝到 src/vendor 檔案夾中
3 在 goods_detail.wpy 中導入 wxParse.js 檔案
// 導入 wxParse 來解析HTML -> wxml
import WxParse from '../vendor/wxParse/wxParse'
4 在 goods_detail.wpy 中導入 wxParse.wxss 檔案
// 導入 wxparse 的樣式
@import '../vendor/wxParse/wxParse.wxss';
5 在 goods_detail.wpy 的 onLoad 鈎子函數中調用一下代碼
// 表示要轉化的HTML結構
var article = '
我是HTML代碼 '
var that = this
WxParse.wxParse('article', 'html', article, that, 5)
6 在需要展示 HTML 結構的位置引入模版
微信和小程式的關系
1 小程式是微信提供的一個功能，要打開小程式必須打開微信才可以
2 微信開發接口：都是需要使用者授權給小程式，小程式才能夠使用這些開發能力
加入購物車
1 從本地存儲中擷取到購物車中的資料
2 判斷購物車中是否包含目前商品
3 如果購物車中已經有該商品，就讓商品數量加 1
4 如果購物車中沒有該商品，就直接添加到購物車中
5 将修改後的資料，儲存到本地存儲中
// 擷取資料
wepy.getStorageSync('key')
// 設定資料
wepy.setStorageSync('key', value)
導航菜單點選态
1 navigator 導航元件，點選的時候預設會提供點選态效果(使用者點選回饋)
2 如果不想要點選态，可以通過：hover-class="none"去掉點選态效果
3 也可以通過自定義類的方式，來修改預設的點選态效果：
.navigator-hover {
background-color: rgba(255, 0, 0, 0.8);
opacity: 0.7;
}
導入樣式注意點
@import 相對路徑;
注意：檔案路徑為 相對路徑，不要使用絕對路徑，否則會出現 Bug
Git 使用
剛進入公司，一般都是先通過 git 将項目 clone 到本地：git clone
實作一些功能後，需要将本地寫完的代碼，送出到git伺服器中：git push 倉庫位址
每天去公司開發前，都會使用 git pull 倉庫位址 來擷取下最新的代碼
# 克隆倉庫
git clone https://gitee.com/zqran/wepy-shop-22.git
# 推送
git push https://gitee.com/zqran/wepy-shop-22.git master
# 簡化推送位址
git remote add wepy-shop https://gitee.com/zqran/wepy-shop-22.git
git push -u wepy-shop master
# 第一次執行上面兩條指令，以後隻需要輸入以下指令即可
git push wepy-shop
# 拉取
git pull https://gitee.com/zqran/wepy-shop-22.git master
git pull wepy-shop master
購物車功能
商品總數量和總價格
說明：因為商品的數量改變會導緻 商品總數量 和 總價格 改變，是以，商品總數量和總價格應該使用 計算屬性 來總計
注意：隻要有資料發生改變，那麼計算屬性就會被重新計算，不管整個資料是否與計算屬性有關(與 Vue 不同)
商品選中狀态
1 點選商品，實作選中狀态的切換
2 全選按鈕的選中狀态處理
2.1 當所有商品都被選中了，全選按鈕就應該選中
2.2 隻要有一個商品沒有選中，全選按鈕就不應該被選中
2.3 因為切換單個商品的選中狀态，會影響到全選按鈕的選中狀态，是以，應該使用計算屬性來控制全選按鈕的選中狀态
3 (有點繞)點選全選按鈕，切換全選按鈕的選中狀态
3.1 擷取到目前全選按鈕的選中狀态(直接取計算屬性值即可 this.selectAll)
3.2 改變全選按鈕的選中狀态以及每個商品的選中狀态，但是分析後發現：隻需要修改每個商品的選中狀态即可
1 全選按鈕的選中狀态是由計算屬性來控制
2 當修改了商品狀态後，計算屬性就會被自動重新計算一次，也就能夠得到最新的商品選中狀态了
3 是以，就不要再手動改變 全選按鈕 的選中狀态，而隻需要修改每個商品的選中狀态
商品數量
1 加号/減号按鈕控制商品數量
2 減号減少商品的時候，臨界值的判斷(小于 1 ，則提示是否删除商品)
3 在文本框中直接輸入修改商品數量(注意：隻能輸入數值)
直接修改文本框中的商品數量：
1 擷取到使用者輸入的内容
2 判斷使用者輸入的内容是不是正整數(使用正則判斷)
3 如果是合法值，直接使用使用者輸入的内容來修改該商品的數量
4 如果不是合法值，直接傳回該商品的數量
在小程式中，input輸入事件如果使用return傳回一個值，那麼文本框的value就會變為這個return的值
儲存購物車資料
方式一：使用 watch 監視資料的變化，當資料發生改變，就将購物車資料儲存到本地存儲中
方式二：使用 onHide 生命周期鈎子函數，在離開購物車頁面的時候，會觸發這個鈎子函數。可以在這個鈎子函數中實作資料的儲存
結算
1 控制結算按鈕的樣式
說明：如果購物車中有商品被選中了，就讓結算按鈕可用；如果沒有任何一個商品選中，就讓結算按鈕禁用(禁用：添加 buy-disabled 類)
2 點選結算按鈕根據是否有選中商品，來決定是否跳轉到結算頁面
2.1 如果有選中商品，就跳轉到結算頁面
2.2 如果沒有選中商品，就提示用請勾選商品
微信授權登入和傳統登入的對比說明
傳統登入
使用 使用者名 和 密碼 來進行登入的
1 使用者名 是唯一的，不同使用者有不同的使用者名
2 使用者都有自己的 userId，并且不用使用者的 userId 也是不相同的
3 使用者名 和 userId 是一一對應的關系
4 使用者名是為了使用者友善記憶提供個使用者的，userId 是程式區分不同使用者時使用的
5 使用者登入成功後，伺服器會傳回一個登入狀态辨別，比如：token
微信授權登入
說明：不管是什麼登入方式，最終要達到的目的是相同的！！！
也就是說：
1 微信授權登入最終也要提供一個用來區分使用者身份的唯一辨別 openid(類似于 userId)
2 登入成功後，也應該傳回一個登入狀态辨別(類似于 token)
是以，要實作微信授權登入，就要想辦法擷取到 使用者身份的唯一辨別 以及 登入狀态
微信授權登入提供的使用者身份唯一辨別：opendId
對于登入狀态來說，實際上與 傳統登入 處理方式相同！
品優購伺服器登入接口的說明
接口需要的資料如下：
code 使用者登入憑證
encryptedData 完整使用者資訊密文
iv 加密算法的初始向量
rawData 使用者資訊原始資料字元串
signature 使用 sha1得到字元串
code 是用來做微信登入的
其他資料的作用：用于伺服器端擷取目前微信使用者的 昵稱、頭像 等資料
訂單
登入後下訂單
調用登入接口，并且傳遞登入接口需要的參數
參數：
1 擷取 code -> wx.login()
2 擷取 encryptedData 等其他 使用者資料
正确擷取 encryptedData 等使用者資料的正确方式：
說明：第一次會彈出 使用者授權視窗；以後的每次，不會再彈出授權視窗，并且可以直接擷取到使用者資料
點選登入後下單
...
methods = {
wxLogin(e) {
// 擷取使用者資訊資料
console.log(e.detail)
}
}
注意：擷取使用者資料時不能直接調用 wx.getUserInfo() 方法！！！
調用 wx.getUserInfo() 的問題說明：
直接調用 wx.getUserInfo() 方法來
擷取使用者資訊(encryptedData 等資料)會出現左側(警告)的提示。
這個提示說明這種擷取使用者資訊的方式已經過時了，将來這種方式會被棄用，需要修改為全新的使用方法！！！
解決方式：
不再直接調用 getUserInfo() 方法來擷取使用者資訊資料，而應該使用官方推薦的最新方式(參考小程式的文檔)
https://developers.weixin.qq.com/miniprogram/dev/api/open.html#wxgetuserinfoobject
調用登入接口報錯的說明
說明：這個錯誤隻在開發小程式期間會有，小程式上線後就不會再出現這個問題了
錯誤資訊：Error: invalid code, hints: [ req_id: cm32804974123 ]
為什麼會出現 code 錯誤？？？
原因是：小程式項目中配置的 appid 和 伺服器中配置的 appid/appsecret 不一緻
解決方式：本地搭建服務接口，保證 小程式項目使用的 appid 和 本地接口服務中的 appid 一緻即可
訂單支付的流程總結
1 判斷使用者有沒有指定收貨位址
1.1 如果使用者指定了收貨位址，直接繼續下一步
1.2 如果使用者沒有指定收貨位址，就提示使用者填寫收貨位址
2 建立訂單
2.1 組裝建立訂單需要的資料
2.2 發起請求
2.3 伺服器根據資料建立訂單，并且傳回結果( 訂單編号 )
3 支付訂單 - 預支付
目的：為了擷取微信支付需要的資料
3.1 拿到 訂單編号 傳遞給預支付接口
3.2 發起請求
3.2 伺服器根據資料進行預支付，并且傳回結果( wxorder 微信支付需要的資料 )
4 支付訂單 - 發起微信支付
4.1 拿到 微信支付需要的資料
4.2 調用 wx.requestPayment(wxorder) 開發接口，發起微信支付
5.3 微信伺服器傳回支付的結果
5 查詢支付結果
目的：上一步微信支付成功表示 微信伺服器 已經收到使用者支付的錢，但是，我們自己的伺服器還不知道到底有沒有支付成功，是以，需要再查詢一次，檢視自己的伺服器中是否真正的支付成功
5.1 拿到上面的訂單編号
5.2 發起請求
5.3 拿到伺服器傳回的資料，就知道 伺服器 中是否确定支付成功了
6 支付成功，跳轉到訂單頁面；支付是白，就提示使用者重新支付
微信支付
說明：小程式開通微信支付功能後，才能使用微信支付的功能
配置攔截器
在 app.wpy 中，添加以下代碼：
export default class extends wepy.app {
constructor() {
super()
// ... 省略其他代碼
// 攔截request請求
// 配置攔截器後，将來所有通過 wx.request 發送的請求，都會
// 先經過攔截器，然後，才會真正的發送請求
// 是以，可以在 攔截器 中，給 請求頭 添加 token
this.intercept('request', {
config(p) {
// 将 token 添加到請求頭中
p.header.Authorization = wepy.getStorageSync('token')
// 必須傳回OBJECT參數對象，否則無法發送請求到服務端
return p
}
})
}
// ... 省略其他代碼
}
CSS 文字溢出省略
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
wepy 中 methods 配置的說明
注意：1 methods中的方法隻能用在 wxml 中給元件綁定事件
是以，在 methods 中不能直接通過 this.方法名 來調用 methods 中的其他方法！！！
注意：2 如果要封裝一個自定義方法，不能放在 methods 中，而應該與 methods 同級
methods = {
fn () {
// 調用自定義方法 foo
this.foo()
},
// 錯誤示範！！！
// foo() {}
}
// 自定義方法！！！
foo() { }
onLoad() {
this.foo()
}
我的 - 個人中心
問題：從哪擷取目前使用者的頭像和昵稱？？？
通過微信開發接口 getUserInfo 提供的
登入/注冊
weui 的使用
WeUI 是一套同微信原生視覺體驗一緻的基礎樣式庫，由微信官方設計團隊為微信内網頁和微信小程式量身設計，令使用者的使用感覺更加統一。
我們使用的是：WeUI for 小程式
weui 使用步驟
1 在 weui-wxss/dist/example 目錄中找到要使用的功能
比如：weui-wxss/dist/example/searchbar
2 将 searchbar 目錄中的 js/wxml/wxss 拷貝到項目中
3 在 app.wpy 中導入 weui.wxss 樣式
4 将預設的效果，修改為适合我們自己項目的效果
wepy 中的元件使用
注意：1 元件繼承自 wepy.component 頁面繼承自 wepy.page
注意：2 元件中沒有 config 以及 一些鈎子函數(比如：onPageScroll，onShow) 等配置，除此之外，其他的配置與頁面相同
建立元件：
搜尋框元件
import wepy from 'wepy'
// 注意：元件繼承自 wepy.component
export default class Com extends wepy.component {}
使用元件：
// JS代碼邏輯
import wepy from 'wepy'
// 1 導入元件
import SearchBar from '../components/SearchBar'
// 頁面
export default class Search extends wepy.page {
// ... 省略其他配置
// 2 注冊元件：
components = {
SearchBar
}
}
wepy 中的元件通訊
父 -> 子：props
export default class SearchBar extends wepy.component {
// ... 省略其他代碼
// 元件接收傳遞過來的資料
props = {
searchTxt: {
// 類型：
type: String,
// 預設值
default: ''
}
}
}
子 -> 父：twoWay
props = {
parentAddress: {
// 子元件修改 parentAddress 這個props的時候，父元件會自動接收到修改後的資料
twoWay: true,
default: {}
}
}
搜尋清單頁面 - 觸底加載更多資料
1 觸底加載下一頁的資料
1.1 先封裝一個加載資料的方法
1.2 每次調用該方法，都讓頁碼加 1，也就是加載下一頁的資料
2 觸底加載下一頁的資料，應該判斷是否還有更多資料
2.1 如果還有更多資料，就加載
2.2 如果沒有更多資料，就提示使用者：沒有資料了
3 添加加載資料的提示效果
加載提示效果
1 資料加載中的提示效果
直接根據 isLoading 就可以控制
isLoading 表示：資料加載中
2 沒有更多資料的提示效果
描述：當頁面觸底加載分頁資料到達最後一頁的時候，就展示沒有更多數的提示
根據 !hasMore && total !== 0 就可以控制
3 查詢不到資料的提示效果
描述：調用接口查詢資料，但是，沒有結果，就展示查詢不到資料的提示
根據 !isLoading && list.length <= 0 就可以控制
封裝 收貨位址 元件
1 在 components 目錄中建立 Address 元件
2 因為 收貨位址元件 在不同頁面中，結構不同，是以，我們使用 slot 的方式來指定元件結構
具體的結構作為子節點
3 将原來頁面中綁定的擷取收貨位址事件和資料 移動到 Address 元件中
4 将子元件中的資料傳遞給父元件，由父元件來渲染資料
通過 twoWay: true 來将元件接收到的資料同步到父元件中
props = {
parentAddress: {
// 子元件修改 parentAddress 這個props的時候，會自動将父元件中對應的資料也修改掉
twoWay: true,
default: {}
}
}
![wepy公共樣式_Weex——公共樣式[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)