618 京东到家-小程序也狂欢
618 將至,學了這么久小程序,也該自己動手實踐一下。最近實現(xiàn)了一個京東到家小程序,我將其中比較有意思,而且常用到的功能做一個展示,大家可以參考參考,完整項目在這里 github.daojia.jd
本文的實現(xiàn)
- 小球落入購物車的拋物線動畫-createAnimation
- 跳動的小紅點-badge
- 購物車的顯示和隱藏-actionsheet
- 獲取詳細地理位置
- 模糊查詢
參考文檔:w3c小程序文檔、小程序實戰(zhàn)指南、weui.wxml
小球落入購物車的拋物線動畫
實現(xiàn)思路: 創(chuàng)造一個小球,給它一個運動軌跡,最后落入購物車區(qū)域。如果是 DOM 編程,自然是獲取點擊的位置,用 createElement 創(chuàng)建一個元素,定時器給它一個動態(tài)的坐標,讓它運動起來,但這并不是 DOM ,而是小程序,使用的是數(shù)據綁定。
那這就更好了,只要數(shù)據改變,狀態(tài)就會相應的改變,那我們趕快給它實現(xiàn)坐標的動態(tài)輸入吧。如果你真的就這樣開始做了,那你就會陷入和我之前一樣的困境,小球運動的初始位置不是固定的,你想要讓它在任何位置都能圓潤地滾到購物車,就需要用一個算法,實現(xiàn)這條拋物線。
有聰明的小伙伴可能就想到了貝塞爾曲線,是的這樣確實可行,但對與我這樣的數(shù)學“天才”來說,正余弦什么的還是不了不了,打擾了,告辭。
我就想有什么更簡單的方式,能夠動態(tài)的添加拋物線動畫呢,這時我上百度Google到了一個 api createAnimation ,就決定是你了。
這是 wx.createAnimation 的官方文檔,簡單來說就是,它會創(chuàng)建一個動畫實例,這個實例可以描述你想要的動畫,并通過頁面的 animation 屬性綁定動畫。
那就開始了
- 先在頁面文件(也就是你的wxml)寫個 view 來裝載動畫:
外層 view 實現(xiàn) x軸運動,內層 view 實現(xiàn) 縱軸y運動。 ballX,ballY是它的(坐標)位置,就是以屏幕左上為原點的坐標軸。
- js 文件實現(xiàn)動畫的創(chuàng)建和填裝 小球在x軸勻速運動,在y軸以三次貝塞爾曲線規(guī)定的加速運動,實現(xiàn)拋物線落入購物車
這段js做的事情:
關于 wx.createAnimation api 的使用,實例.運動方式.step(),step分隔動畫,export() 導出動畫,timingFunction 規(guī)定運動速度效果,詳細可見文檔。
Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案–回調函數(shù)和事件--更合理和更強大。這里只需要知道,可以讓這幾段動畫分步執(zhí)行的就行。詳細見廖雪峰Promise
另外,有一個小彩蛋就是,顯示數(shù)量的小紅點,在每次小球落入購物車的時候跳一下,以提醒用戶。是這樣實現(xiàn)的:算了,見下一段
跳動的小紅點
這個小紅點是用 weui 的 badge 效果,關于badge詳情見官方文檔:weui.wxml
<view class="weui-badge {{jump?'badgeJump':''}}" style="position: absolute; display: {{shopCar.length==0?'none':''}}">{{shopCar.length}}</view> 復制代碼動態(tài)添加類名,jump 決定是否使用 badgeJump 類。
this.runBall(e) this.setDelayTime(1000).then(() => {this.hasCarList()this.getTotalPrice()this.setData({jump: true}) }) 復制代碼.badgeJump {animation: jump 500ms; } @keyframes jump {0% {transform: translateY(0);}50% {transform: translateY(-50rpx);}100% {transform: translateY(0);} } 復制代碼同樣是在調用 runBall 方法的事件中,先調用runBall方法,在小球下落時間結束之后再將值傳入,這樣頁面的效果跟著小球的下落在改變,最后小紅點調皮地跳動一下,提示用戶有新商品加入購物車啦。
購物車的顯示和隱藏
想要實現(xiàn)的是點擊一下購物車圖標,從下而上彈出一個菜單,顯示已添加進購物車的物品。可以用 weui actionsheet 實現(xiàn),沒錯又是 weui。但是我想要的是一個滾動區(qū)域而不是固定的,所以還是自己寫一個類似原生actionsheet 的吧,還可以練手。
首先要確定的是,整個頁面就是一屏大小,頁面不能撐出滾動條,但內部可以有滾動區(qū)域。遮罩就是整個屏幕的大小,購物車區(qū)域可以自行設定一個高度,給它一個固定定位,初始位置是在整個屏幕的下面,并不顯示在可視區(qū),當用戶點擊購物車圖標時,從下方彈出來,單擊遮罩區(qū)域,縮回去回去并隱藏。來看代碼是怎么實現(xiàn)的:
<!-- 遮罩區(qū)域 類名控制隱藏與否 --> <view class="{{clicked?'weui-mask':'weui-mask-on'}}" catchtap="hideMask"></view> <!-- 購物車區(qū)域 --> <view class="weui-actionSheet {{clicked?'weui-actionsheet_toggle':''}}"><view class="cart-header"><icon class="total-select" type="{{selectAllStatus?'success':'circle'}}" color="#4DCC57" bindtap="selectAll" /><text>{{selectAllStatus?'全選':'全不選'}}</text><text class="cart-total-num"> (已選{{shopCar.length}}件)</text><text class="clear_cart" catchtap="clearCart">清空購物車</text></view><!-- 加入購物車的商品列表 --><scroll-view scroll-y style="width: 100%; height: 700rpx;"></scroll-view> </view> 復制代碼<!-- 底部購物車圖標區(qū)域 --> <view class="cart" style="margin-top: 0;"><view class="shop_ft" style="z-index: -999;"><view class="weui-cell shop_car"><view class="weui-cell__hd {{shopCar.length==0?'car-icon_empty':'car-icon_fill'}}" catchtap="{{shopCar.length==0?'':'showCart'}}"><view class="weui-badge {{jump?'badgeJump':''}}" style="position: absolute; display: {{shopCar.length==0?'none':''}}">{{shopCar.length}}</view></view><view class="weui-cell__bd car_status" style="{{shopCar.length==0?'':'color: red;'}}"><text>{{shopCar.length==0?'購物車是空的':car_status}}</text></view></view><view class="weui-cell__ft pay" style="{{shopCar.length==0?'':'background: #4DCC57'}}" catchtap="submitOrder"><text>去結算</text></view></view> </view> 復制代碼這個功能的難點應該是樣式,是整個頁面高度的控制和購物車區(qū)域的定位,這里還有一個scroll-view高度自適應的方法,可以試一試,
flex 布局 、scroll-view的容器設置 flex: auto; overflow: auto;
獲取詳細地理位置
開始做這個功能的時候,第一個想法是,這種東西肯定是有api支持的,翻文檔去。 果然有:wx.getLocation(OBJECT),nice,那不就OK了嗎?你們哪,還是 naive,too young,too simple。仔細看,該方法只是返回的位置坐標等信息,并未返回地理位置名稱。騰訊位置服務 提供的接口 SDK 可以解決問題。怎么弄官方文檔已經寫的很清楚了,接下來就看看我是怎么應用的
首先,按照文檔申請秘鑰,并下載 SDK,下載完成后,將文件解壓到 utils 文件夾,這里有兩個文件,壓縮和不壓縮的,建議壓縮的。
然后,在需要獲取位置的文件中引入
const QQMapWX = require('../../utils/qqmap-wx-jssdk') const qqmapsdk 復制代碼接下來就可以使用SDK獲取詳細位置了,如下
<view class="location"><navigator class="par" hover-class="none" url="../location/location?page=1"><image src="../../assets/images/location.png"/><!-- 顯示地址 --><text>{{address}}</text></navigator> </view> 復制代碼index.js
onLoad(options) {/*判斷是第一次加載還是從position頁面返回如果從position頁面返回,會傳遞用戶選擇的地點*/if (app.globalData.address) {//設置變量 address 的值this.setData({address: app.globalData.address});} else {// 實例化API核心類qqmapsdk = new QQMapWX({//此key需要用戶自己申請key: 'JF2BZ-DDH65-DCUIH-QU3TN-FT4UF-EEFEH'});var that = this// 調用接口qqmapsdk.reverseGeocoder({success: function (res) {that.setData({address: res.result.address // 詳細地址}) },fail: function (res) {// console.log(res)},complete: function (res) {// console.log(res)}});} }, 復制代碼我的需求是,在進入程序時,自動獲取位置信息,并顯示在頁面,所以直接放置在 onload 里,success 的回調函數(shù)返回的 res.result.address 就是詳細信息了.
而我這里另外做了一個判斷,是因為我還提供了一個用戶自主選擇地址的功能,地址顯示優(yōu)先為用戶自主選擇的。有相同需求的小伙伴可以繼續(xù)看下去。
<view class="weui-cells weui_cell__nav-chooseLocation" bindtap="chooseLocation" style="display: {{page==1?'':'none'}};"><view class="weui-cell"><view class="weui-cell__hd"><image src="http://static-o2o.360buyimg.com/daojia/new/images/icon/location-eye@2x.png" style="margin-right: 5px;vertical-align: top;width:20px; height: 20px;"></image></view><view class="weui-cell__bd">點擊定位當前地點</view><view class="weui-cell__ft weui-cell__ft_in-access"></view></view> </view> 復制代碼location.js
//選擇地點 chooseLocation: function () {wx.chooseLocation({success: res => {//選擇地點之后返回到首頁wx.switchTab({url: '/pages/index/index'})this.setData({address: res.address})// 設置全局變量app.globalData.address = res.address},fail: err => {console.log(err)}}) }, 復制代碼綁定的 catchtab 屬性觸發(fā) chooseLocation 事件,wx.chooseLocation api 將直接返回當前位置,如果沒有,檢查是否開啟定位。將位置存入全局變量,在返回首頁之后可見,地址已改為用戶選擇的。
這里的頁面跳轉選擇 switchTab 而不是常用的 navigateTo 或 redirectTo,是因為小程序為了性能消耗考慮,不允許打開超過 5 個的頁面,返回主頁 tabbar 使用 switchTab 是較好的選擇,而通過設置全局變量 address 來傳遞地址信息,也正是在這種情況下,比較適用的傳遞數(shù)據的方法之一。
搜索-模糊查詢
看起來這個查詢有很多,比如關鍵字啊,熱搜啊,歷史記錄查啊,但實際上用的都是同一個查詢器,先來看看吧
將關鍵字字符串用 split 方法,分割為字符串數(shù)組,在關鍵字列表中查詢每一個關鍵字符,使用 indexOf 方法檢索,如果存在這樣一個字符,就返回這個字符的下標,如果沒有將返回 -1,最后將檢索結果放入數(shù)組中,這就是在搜索框下部顯示的關鍵字列表了。
其實查詢功能還可以精簡很多,只是我的偽數(shù)據數(shù)組太多,需要聯(lián)合查詢,比較麻煩。感覺數(shù)據處理還是SQL語句方便多哈,多表查詢,模糊查詢。。。
以上
希望對大家有幫助
總結
以上是生活随笔為你收集整理的618 京东到家-小程序也狂欢的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 创建一个多进程(multiprocess
- 下一篇: js进阶 9-14 js如何实现下拉列