摘要： 怎樣將一個(gè)「服務(wù)號(hào)」改造成為「小程序」?全球首個(gè)微信應(yīng)用號(hào)開發(fā)教程第五彈。 鈦媒體注：鈦媒體作者博卡君對于“應(yīng)用號(hào)的最終形態(tài)“與“怎樣將一個(gè)「服務(wù)號(hào)」改造成為「小程序」“的話題上，有著自己的獨(dú)特的理解。他想要用第三方工具的實(shí)例，來演示開發(fā)過程。今天，他為我們帶來《微信小程序編輯名片頁面開發(fā)》的內(nèi)容。感興趣的朋友，也不要錯(cuò)過此前鈦媒體發(fā)布的第一彈、第二彈和第三彈、第四彈中的精彩內(nèi)容。 第八章：微信小程序分組開發(fā)與左滑功能實(shí)現(xiàn) 先來看看今天的整體思路： 進(jìn)入分組管理頁面--“點(diǎn)擊新建分組新建 進(jìn)入到未分組頁面基本操作 進(jìn)入到已建分組里面底部菜單欄操作--“從名片夾中添加進(jìn)行操作。 理清完基本流程我們開始開發(fā)。首先整個(gè)布局可以先看下，我再一步步講。 靜態(tài)布號(hào)局后，我們開始實(shí)現(xiàn)新增分組效果， 當(dāng)然觸發(fā)它出現(xiàn)的是 顯示窗口 點(diǎn)擊取消消失 當(dāng)里面的輸入框內(nèi)容發(fā)生改變時(shí) bindinput 事件，大家別使用 bindchange 事件，這里的 bindchange 事件只有當(dāng)失去焦點(diǎn)時(shí)才會(huì)被觸發(fā)。 當(dāng)輸入框事件發(fā)生時(shí)，確定按鈕會(huì)變成可以點(diǎn)擊狀態(tài)，為空時(shí)，addTeam 樣式數(shù)據(jù)綁定。 里面有表單就使用了 from。 創(chuàng)建分組請求交互。 創(chuàng)建分組完成，這里可能很多疑問，為什么不使用微信提供的模態(tài)框組件來實(shí)現(xiàn)，而是自己實(shí)現(xiàn)，其實(shí)我也很懶，非常想使用自帶的模態(tài)框組件，但是發(fā)現(xiàn)在模態(tài)框里面提交表單好像有點(diǎn)麻煩，直接自定義了。 接下來創(chuàng)建好的分組支持左滑刪除與重命名，今天重點(diǎn)談下左滑刪除的實(shí)現(xiàn)方式。 首先需要左滑的是被創(chuàng)建好的分組，未分組是寫死的，故而不支持的。 左滑刪除使用了兩個(gè)事件 bindtouchstart 與 bindtouchmove，這里必須綁定它的 id，這個(gè) id 都是不同的，我這使用的用戶創(chuàng)建完成后在后臺(tái)生成的一個(gè) id 號(hào)，之后我再 block 出來使用在這里，這個(gè) id 都是唯一的，不能是相同的 id。 樣式布局，父元素是絕對定位，子元素刪除是相對定位，鑒于動(dòng)畫效果，我這加了 css3 的動(dòng)畫效果，使滑動(dòng)帶點(diǎn)動(dòng)畫效果。 現(xiàn)在我們來看事件構(gòu)成： Bindtap 點(diǎn)擊之后直接是跳轉(zhuǎn)頁面。 左滑從觸摸事件開始，當(dāng)然需使用的參數(shù)在外面最好先定義一下： bindtouchStart 發(fā)生后，會(huì)執(zhí)行 bindtouchmove 事件，在這里我們可以判斷是否左右滑動(dòng)： * Var dataId = e.currentTarget.id //獲取到前面唯一的id; If(key){ //用戶左滑距離很長時(shí)會(huì)發(fā)生多次左滑事件，這里定義一個(gè)開關(guān)發(fā)生第一次之后就關(guān)閉它; * Touch是獲取觸摸點(diǎn)的一些數(shù)據(jù)，touches 是一個(gè)觸摸點(diǎn)的數(shù)組，每個(gè)觸摸點(diǎn)包括以下屬性： * pageX,pageY：距離文檔左上角的距離，文檔的左上角為原點(diǎn) ，橫向?yàn)?X 軸，縱向?yàn)?Y 軸; * clientX,clientY：距離頁面可顯示區(qū)域(屏幕除去導(dǎo)航條)左上角距離，橫向?yàn)閄軸，縱向?yàn)閅軸; * screenX,screenY：距離屏幕左上角的距離，屏幕左上角為原點(diǎn)，橫向?yàn)閄軸，縱向?yàn)閅軸; 這里使用 clientX,clientY 即可。 我們在 bindtouchstart 時(shí)記錄到開始的點(diǎn)，在 bindtouchmove 記錄到觸摸結(jié)束的點(diǎn)，如果 X 軸滑動(dòng)大于 Y 軸的，再如果結(jié)束點(diǎn)-開始點(diǎn)小于一個(gè)數(shù)值(這個(gè)數(shù)組可以自己設(shè)置，鑒于靈敏度，我這設(shè)置的很小)，右滑也是同理。 判斷到左滑與右滑事件后，我們就需要對當(dāng)前組件綁定數(shù)據(jù)了，數(shù)據(jù)從那里來?可以看下我這數(shù)組一個(gè)來歷，以及怎么被左滑事件里面獲取到(我這數(shù)據(jù)是一個(gè)數(shù)組，需要在 wxml 里面 block 的)。 這時(shí)候取到需要的數(shù)組，循環(huán)出來后，我進(jìn)行對比，如果數(shù)據(jù)的 id== 當(dāng)前被事件操作的 id，那么我給改數(shù)組再添加一個(gè) right 向右偏移 15%，否則其他都不偏移，右滑同理，直接全部設(shè)置為 0。 最后把數(shù)據(jù)到綁定到頁面上來。 OK，左滑效果實(shí)現(xiàn)。 如果出現(xiàn)全部被滾動(dòng)了，記得在外層加上，X 軸關(guān)閉即可。 這時(shí)候你點(diǎn)擊左滑會(huì)出現(xiàn)點(diǎn)透效果，官方文檔提供給我們一個(gè) catch，不冒泡點(diǎn)擊事件，即可完美解決。 點(diǎn)擊刪除事件彈出模態(tài)框供用戶確定是否刪除。 這里你點(diǎn)擊取消時(shí)還要記得把左滑刪除按鈕去掉可能用戶體驗(yàn)會(huì)好點(diǎn)。 一定記得在 data({ modalHidden:true }) 不然會(huì)出現(xiàn)一加載頁面即出現(xiàn)了模態(tài)框。 點(diǎn)擊未分組按鈕進(jìn)入到未分組名片列表頁面。 這個(gè)布局完全是 copy 首頁過來的，后面只是數(shù)據(jù)接口有變而已，大家有興趣可以回過去看下前面的。 點(diǎn)擊多選，會(huì)出現(xiàn)多選框和下面的一些操作按鈕。都是些數(shù)據(jù)綁定，顯示與隱藏類的實(shí)現(xiàn)比較簡單。 多選我們直接給 checked 設(shè)置 Boole 開關(guān)。 選擇好名片后點(diǎn)擊設(shè)置分組會(huì)彈出新建好的分組列表供用戶確定設(shè)置到那個(gè)分組里面(這里由于后臺(tái)接口方面還在完善，不繼續(xù)往下寫了)。 用戶已建分組點(diǎn)擊進(jìn)去的是點(diǎn)擊頂部菜單按鈕出現(xiàn)下拉菜單欄，這里直接使用微信提供的組件。 最后點(diǎn)擊從名片夾中添加進(jìn)入到以下頁面： 整個(gè)布局基本還是和首頁面差不多，這里不再多講， 頂部菜單直接多選綁定數(shù)據(jù)即可。 牽扯到表單類的基本全都是 from 表單提交事件。 除小部分接口方面欠缺外，寫到這里其實(shí)分組前端方面效果基本實(shí)現(xiàn)。 好了，由于目前小程序開發(fā)工具圖片上傳還有點(diǎn)問題，拍照收納無法實(shí)現(xiàn)，所以博卡君的微信小程序開發(fā)教程也先暫告一段落，等開發(fā)工具更新穩(wěn)定后，我還會(huì)再追加教程的內(nèi)容，有機(jī)會(huì)的話把成品也給大家看看。 感謝朋友們一直以來的支持和關(guān)心，大家可以拿這個(gè)教程作為參考，摸索出自己的小程序開發(fā)套路。我最近還會(huì)在論壇、微信公眾號(hào)里收集一下大家的留言和問題，統(tǒng)一給大家一些回復(fù)。大家多多在咱們的 QQ 群內(nèi)交流吧，群里每天都會(huì)有很多朋友交換代碼、答疑解惑，對大家的開發(fā)和學(xué)習(xí)很有幫助。

« 無需再忍 英特爾“雙7”PC解決方案助力VR產(chǎn)業(yè)發(fā)展 | 每日話題：今日頭條完成10億美元D輪融資？估值超110億美元 »