github精選：微信小程序起手式DEMO仿肯德基實戰(zhàn)
小程序？大場景?微信小程序本質上來說就是一個 HTML 5（移動網頁） 應用，用view、scoll-view代替了div標簽等，換湯不換藥。在微信中運行時，微信小程序獲得更多的系統(tǒng)權限。首先是數(shù)據(jù)緩存能力，這可以讓用戶在打開 ...
小程序？大場景?
微信小程序本質上來說就是一個 HTML 5（移動網頁） 應用，用view、scoll-view代替了div標簽等，換湯不換藥。在微信中運行時，微信小程序獲得更多的系統(tǒng)權限。首先是數(shù)據(jù)緩存能力，這可以讓用戶在打開一個小程序的時候將程序的主要框架緩存到微信上，下一次就可以快速打開了。微信創(chuàng)始人張小龍曾說過，微信應用號希望實現(xiàn)的目標是“用完即走，無需安裝和卸載”，也就是說以后當你要使用一個應用時，只需要在微信里搜索就可以直接使用了，如摩拜、美團等小型使用低頻的app使用該套技術可大量節(jié)省開發(fā)成本。最近又新增了開放個人開發(fā)、公眾號關聯(lián)推送的加強，可謂使用場景不容小覷。
起手做什么？
由于本人吃貨一枚，家門口有一家KFC，之前KFC的app經常有一些福利卷，既然用慣了這個便捷實惠的app，于是就做它了。 言歸正傳，先來分析一下一步一步該做啥，做一個小demo成就感還是滿滿的。
完成的功能：
附近位置選擇-聯(lián)動菜單導航-模擬數(shù)據(jù)-抽屜式購物車-獲取用戶微信信息-頁面?zhèn)髦?數(shù)據(jù)生成訂單
體驗地址
體驗點我,比較大，請耐心等待2333，最好clone下來本地跑55555～
http://xurenjie.cn:3000/img/KFC/KFC_gif.gif
抱歉！！GIF太卡了太卡了，簡易clone下來本地跑起來效果最佳 直接點餐會自動為你找到最近的餐廳，不過離最近的kfc太遠的不太行
用到的工具和文檔：
- 開發(fā)調試工具: 微信小程序平臺教程,安裝好最基本的啦！稍微過一遍簡易文檔。
- 開發(fā)‘字典’文檔: 微信小程序開發(fā)教程手冊文檔功能使用方法都在上面挺全的。通過 閱讀文檔了解頁面的搭建、頁面路由、導航跳轉、數(shù)據(jù)綁定、條件渲染、列表渲染、scroll-view、request、radio、modal、toast、map、位置、數(shù)據(jù)緩存、動畫、驗證信息。
- easy-mock: easy-mock模擬后端數(shù)據(jù)，后面會簡單介紹配置。
- 騰訊地圖API: 騰訊地圖小程序有地點搜索、關鍵詞輸入提示、逆地址解析(坐標位置描述)地址解析(地址轉坐標)距離計算、獲取城市列表、獲取城市區(qū)縣的一步配置教程。
- WeUI WeUI github微信專用的結構樣式組件庫，加速開發(fā)速度，BEM規(guī)范代碼，增強可讀性
目錄結構
├── app.js
├── app.json
├── app.wxss
├── pages
│ ├── .DS_Store
│ ├── KFC
│ │ ├── KFC.js
│ │ ├── KFC.wxml
│ │ └── KFC.wxss
│ ├── card
│ │ ├── card.js
│ │ ├── card.wxml
│ │ └── card.wxss
│ ├── halladdress
│ │ ├── .DS_Store
│ │ ├── halladdress.js
│ │ ├── halladdress.wxml
│ │ └── halladdress.wxss
│ ├── index
│ │ ├── index.js
│ │ ├── index.wxml
│ │ └── index.wxss
│ ├── logs
│ │ ├── logs.js
│ │ ├── logs.json
│ │ ├── logs.wxml
│ │ └── logs.wxss
│ ├── menu
│ │ ├── index.html
│ │ ├── menu.js
│ │ ├── menu.wxml
│ │ └── menu.wxss
│ ├── order
│ │ ├── order.js
│ │ ├── order.wxml
│ │ └── order.wxss
│ └── takeout
│ ├── message
│ │ ├── message.js
│ │ ├── message.wxml
│ │ └── message.wxss
│ ├── qqmap-wx-jssdk.min.js
│ ├── takeout.js
│ ├── takeout.wxml
│ └── takeout.wxss
├── style
│ ├── .DS_Store
│ └── weui.wxss
└── utils
└── util.js
頁面注冊
app.json
pages: [
pages/index/index, // 首頁
pages/KFC/KFC, // K金商城頁
pages/menu/menu, // 菜單頁
pages/card/card, // 卡包頁
pages/order/order, // 訂單頁
pages/takeout/takeout, // 外賣地圖頁
pages/takeout/message/message, // 填寫外賣信息頁
pages/halladdress/halladdress, // 附近餐廳頁
pages/logs/logs // 日志頁
]
我們可以通過官網的文檔或W3C教程上初始化了一個小程序目錄，小程序的每個頁面都放在pages目錄下 每次添加一個新頁面，都需要先在app.json.page下注冊。
數(shù)據(jù)模擬
mock.js大紅大紫，讓前端獨立于后端，用它來模擬KFC數(shù)據(jù) 不太清楚使用的同學可以參考：
- mockjs前端開發(fā)獨立于后端
- 掘金：easy-mock
- mock.js那點事
easy—mock創(chuàng)建數(shù)據(jù)
因為菜單中每個左側的分類對應一組數(shù)據(jù)，在右側也需要渲染類名，因此簡單模擬結構
[{ title: 這里放左邊列表的組名,
foodsIndex: [{
name: 這里放每個食物的名字,
price: 11.0,
url: http://imgm.4008823823.com.cn/kfcmwos/img//S/269_116012.jpg
},
{},{},{}]
你可以嘗試自己去扒肯德基點餐，或者用我扒好的肯德基API
地圖API的使用
小程序地圖初始化
用toast優(yōu)化耗時加載
wx.showToast({
title: 地圖加載中,
icon: loading,
duration: 0,
mask: true
})
畫圖完成后用回調將Toast去除
this.mapCtx = wx.createMapContext(myMap, function () {
wx.hideToast();
})
WXML:
<map id=myMap longitude={{longitude}} latitude={{latitude}}
style=width: 100%; height: 100% markers={{markers}} covers={{covers}} scale=18>
map>
騰訊地圖API使用-逆地址解析
以搜附近地點渲染至頁面列表為例
- 引入核心類 騰訊地圖小程序版下載js并獲取key
let QQMapWX = require(qqmap-wx-jssdk.min.js);
let demo = new QQMapWX({
key: 5Q2BZ-O3W24-V6DUN-DZ4Z7-H427K-WCB7R // 必填
});
- 調用APIreverseGeocoder
demo.reverseGeocoder({
location: {
latitude: _latitude,
longitude: _longitude
},
get_poi: 1,
success: function (res) {
// console.log(res);
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
console.log(res);
that.setData({
pois: res.result.pois
})
}
});
通過setData() 我們的數(shù)據(jù)就傳到data上去中了便用此渲染頁面上去，that保持對原page對象的引用喲
<view class=address-item wx:for={{pois}} wx:for-item=poi
data-name={{poi.address}} catchtap=ToDetailPage>
<image src=../../image/position.png data-name={{poi.address}}
catchtap=ToDetailPage></image>
<text catchtap=ToDetailPage data-name={{poi.address}}>{{poi.address}}</text>
</view>
地名搜索
以搜周圍的KFC為例
demo.search({
keyword: 肯德基,
location: {
latitude: _latitude,
longitude: _longitude
},
success: function (res) {
// console.log(res);
},
fail: function (res) {
// console.log(res);
},
complete: function (res) {
console.log(res.data[0].location.lat,res.data[0].location.lng)
console.log(res.data[0])
// .address._distance
that.setData({
poi: res.data[0].address,
distance: res.data[0]._distance,
latitude: res.data[0].location.lat,
longitude: res.data[0].location.lng,
markers: [{
latitude: res.data[0].location.lat,
longitude: res.data[0].location.lng,
name: KFC,
desc: KFC在您身邊
}]
})
}
});
換湯不換藥核心還是通過setData改變data從而讓頁面顯示當前kfc，沒有用輸入框搜索，用設置的自動搜索
購物車部分實現(xiàn)
需要實現(xiàn)的功能：
- 側nav與內容區(qū)的聯(lián)動
- 商品的增減改變總價格并彈出購物車和抽屜詳細面板
- 抽屜的動畫
- 在抽屜面板中改變商品數(shù)量，沒有則隱藏組件
具體實現(xiàn)過程
側nav與內容區(qū)的聯(lián)動
gif炸了的話直接看下面部分的圖吧，忽略底下的購物車
左邊點擊菜單的不同種類，右邊轉到相應的的內容 這里的實現(xiàn)，用到了scroll-view的API 給每個右邊的內容對象渲染時附上id
<view class=food-list wx:for={{foodArray}} wx:for-item=item id=foodtype{{index}}>
再給每個nav的點擊事件dataset解析一下
let goPage = e.currentTarget.id
this.setData({
scroll_into_view: foodtype + goPage
})
抽屜式購物車
我在這里的做法是給每個商品都賦了一個dataset，以便點擊不同的商品讓不同的對象進入購物車數(shù)組,通過e.target.dataset拿到
// 是否有同種商品判斷
if (this.data.shoppingList.length > 0) {
// 商品名是否相同判斷，不重復添加同名商品
let isHave = this.data.shoppingList.findIndex(item => item.name == e.target.dataset.name)
if (isHave != -1) {
that.data.shoppingList[isHave].num++
} else {
// 購物車數(shù)組加進新的一樣食品
that.data.shoppingList.push({
price: e.target.dataset.price,
name: e.target.dataset.name,
num: itemNum
})
// 動畫效果的長度添加
move_length++
}
// 沒有商品時直接添加
} else {
this.data.shoppingList.push({
price: e.target.dataset.price,
name: e.target.dataset.name,
num: itemNum
})
move_length++
}
動畫的使用
可參照API 我在這里是做了一個增加商品時，抽屜往上滾動，刪除為空時抽屜向下滾動
data: {
totalCount: 0, // 購物車的總數(shù)量
movelength: 0, // 上移或下拉動畫的單位距離
cartIsHidden: true, // 購物車是否隱藏
cartIndexIsHidden: true, // 購物車詳情菜單是否隱藏
animationData: {} // 動畫動作對象
}
滾動動畫初始設置
let animation = wx.createAnimation({
duration: 400,
timingFunction: linear,
delay: 0
});
動畫產生的效果就以bottom的變化而產生
let mlength = move_length * 55;
if (move_length > 1) {
mlength = 55 + (move_length - 1) * 65;
}
this.animation = animation
animation.bottom(mlength).step()
加入動畫序列，并設置好movelength
this.setData({
animationData: animation.export()
})
this.setData({
shoppingList: shopping_list,
totalPrice: total_price,
totalCount: total_count,
// 購物車當有商品時彈出
cartIsHidden: false,
movelength: move_length
})
}
頁面?zhèn)髦?/h2>
目前本小白了解的傳值有三種：
-
設置全局的數(shù)據(jù)緩存看這API
-
url 附帶字串傳值
參考大佬掘金微信小程序多頁面?zhèn)鲄⑼ㄐ诺奶剿髋c實踐
- 引入事件訂閱和發(fā)布onfire.js（最近準備擼擼）
比如這個頁面，它的所有數(shù)據(jù)都來之于之前的選擇 我在自己項目里目前用的是本地存儲的方式，比如地址的設置獲取
在選擇頁設置本地存儲
let OrderAddress = {
address: [],
isHall: false
}
//遍歷去重
let item = OrderAddress.address.find(item=>item==event.target.dataset.name)
if(!item){
OrderAddress.address.push(event.target.dataset.name)
}
wx.setStorage({
key: OrderAddress,
data: OrderAddress,
});
wx.navigateTo({
url:/pages/takeout/message/message
})
在訂單頁拿到地址，對api不熟悉多console.log幾下，沒有什么解決不了的～
wx.getStorage({
key: OrderAddress,
success: function (res) {
console.log(res.data);
that.setData({
address: res.data.address[0],
elementToggle: res.data.isHall
})
}
})
最后總結一下踩的坑
-
因為還沒有上rpx：真機樣式有差距；同樣設置幾行文本，高度是不一致的。
-
騰訊地圖的大坑z-index，本來用地圖的api想做一個搜索自動提示，但繪制的地圖是微信內置的，z-index再高都根本無法覆蓋在地圖上面，解決辦法是另外跳入一個頁面處理
-
需要申請合法域名，請求里合法域名有個數(shù)限制。
-
頁面內跳轉不能超過5級。
