小程序?大場景?微信小程序本質上來說就是一個 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ù)生成訂單
http://xurenjie.cn:3000/img/KFC/KFC_gif.gif
抱歉!!GIF太卡了太卡了,簡易clone下來本地跑起來效果最佳 直接點餐會自動為你找到最近的餐廳,不過離最近的kfc太遠的不太行
├── 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
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下注冊。
mock.js大紅大紫,讓前端獨立于后端,用它來模擬KFC數(shù)據(jù) 不太清楚使用的同學可以參考:
因為菜單中每個左側的分類對應一組數(shù)據(jù),在右側也需要渲染類名,因此簡單模擬結構
[{ title: 這里放左邊列表的組名,
foodsIndex: [{
name: 這里放每個食物的名字,
price: 11.0,
url: http://imgm.4008823823.com.cn/kfcmwos/img//S/269_116012.jpg
},
{},{},{}]
你可以嘗試自己去扒肯德基點餐,或者用我扒好的肯德基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>
以搜附近地點渲染至頁面列表為例
let QQMapWX = require(qqmap-wx-jssdk.min.js);
let demo = new QQMapWX({
key: 5Q2BZ-O3W24-V6DUN-DZ4Z7-H427K-WCB7R // 必填
});
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,沒有用輸入框搜索,用設置的自動搜索
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)鲄⑼ㄐ诺奶剿髋c實踐
比如這個頁面,它的所有數(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級。