現(xiàn)學(xué)現(xiàn)賣微信小程序開發(fā)（一）
現(xiàn)學(xué)現(xiàn)賣微信小程序開發(fā)（三）：引入Rx，為小程序插上翅膀

一個(gè)Todo應(yīng)用的小程序版

好的，那么下一步我們就先照貓畫虎，新建一個(gè)todos文件夾，然后一套四樣同名文件準(zhǔn)備齊全

新建todos目錄和相關(guān)文件

先在app.json中報(bào)個(gè)到，在pages中加入 "pages/todos/todos"。接下來把首頁 index.js 中的導(dǎo)航改為 ../todos/todos

//事件處理函數(shù)bindViewTap: function() {wx.navigateTo({url: '../todos/todos'})},復(fù)制代碼

然后呢，我們簡單的先寫一個(gè)界面，其實(shí)什么都沒有，就是一個(gè)view。把 todos.wxml 改成下面的模樣：

<!--todos.wxml--> <view class="container todo-list"></view>復(fù)制代碼

然后把導(dǎo)航欄標(biāo)題設(shè)置一下，叫 Awesome Todos吧，把 todos.json 改成下面的樣子：

{"navigationBarTitleText": "Awesome Todos" }復(fù)制代碼

樣式呢，也非常簡單粗暴的來一個(gè)吧：

.todo-list {display: block;padding: 40rpx;width: 100vw;margin: 0 auto; }復(fù)制代碼

快速搭建一個(gè)Web API

好的，下面我們要寫關(guān)鍵的 todos.js 了。在寫之前，我們需要一個(gè)服務(wù)器提供數(shù)據(jù)，這里介紹一個(gè)可以非常快速便捷的搭建一個(gè)仿真Web API的利器：json-server。 使用 npm i -g json-server 安裝，然后隨便挑一個(gè)目錄建一個(gè)todos-data.json 文件：

{"todos": [{"id": 1,"desc": "have breakfast","completed": false},{"id": 2,"desc": "have lunch","completed": false},{"id": 3,"desc": "take a break","completed": false},{"id": 4,"desc": "having fun","completed": false},{"id": 5,"desc": "新的服務(wù)器版本不錯(cuò)","completed": true}] }復(fù)制代碼

這個(gè)時(shí)候，你的Web API就差一步之遙了，現(xiàn)在在命令行窗口敲入 json-server ./todos-data.json就大功告成了。

json-server服務(wù)啟動(dòng)了

你可以打開瀏覽器輸入 http://localhost:3000/todos 看看是否返回的是我們的數(shù)據(jù)。這個(gè)Web API是完全RESTful的，也就是說

• 查詢所有待辦事項(xiàng)：以GET方法訪問http://localhost:3000/todos
  • 查詢單個(gè)待辦事項(xiàng)：以GET方法訪問http://localhost:3000/todos/id，比如id是1，那么訪問http://localhost:3000/todos/1
  • 更新某個(gè)待辦事項(xiàng)：以PUT方法訪問http://localhost:3000/todos/id
  • 刪除某個(gè)待辦事項(xiàng)：以DELETE方法訪問http://localhost:3000/todos/id
  • 增加一個(gè)待辦事項(xiàng)：以POST方法訪問http://localhost:3000/todos

回到正題，開始Todo的開發(fā)

我們一開始的 todos.js 是這個(gè)樣子的：

const URL = 'http://localhost:3000/todos'let pageParams = {data: { todos: [], desc: '' } }pageParams.onLoad = function () {const that = thiswx.request({url: URL,data: JSON.stringify({}),header: { 'content-type': 'application/json' },method: 'GET',success: res => {console.log(res.data)that.setData({todos: res.data})},fail: () => console.error('something is wrong'),complete: () => console.log('todos loaded')}) }Page(pageParams)復(fù)制代碼

這段代碼非常簡單，創(chuàng)建一個(gè)pageParams對象并給本地?cái)?shù)據(jù)初始化。然后定義onLoad生命周期函數(shù)，利用 wx.request 創(chuàng)建一個(gè) HTTP GET 請求取得返回的數(shù)據(jù)，然后用setData去更新本地?cái)?shù)據(jù)。注意一點(diǎn) const that = this 是一個(gè)常用的避免 this 的context出現(xiàn)切換時(shí)出現(xiàn)問題的小技巧。再有就是我們無法直接寫入data，只能使用setData方法來進(jìn)行更新。

那么我們看看是否成功吧，點(diǎn)擊左側(cè)的調(diào)試，然后點(diǎn)首頁的頭像進(jìn)入我們的todo頁面，當(dāng)然現(xiàn)在界面上啥也沒有，但Console中還是有料滴。

Console中可以看到我們的Web API返回的結(jié)果

既然API調(diào)通了，我們就來讓結(jié)果顯示到頁面上吧，首先改造頁面如下。

<!--todos.wxml--> <view class="container todo-list"><block wx:for="{{todos}}" wx:for-item="todo" wx:key="todo.id"><view class="todo-item"><text class="desc">{{todo.desc}}</text></view></block> </view>復(fù)制代碼

這段代碼中，view 是個(gè)視圖容器，感覺可以把它想象成HTML中的div。微信小程序中除了 view 之外，目前還提供了 scroll-view 和 swiper 兩種容器，顧名思義 scroll-view 是用于可滾動(dòng)的場景，而 swiper 是用于可以手指滑動(dòng)切換內(nèi)容的場景。

在組件上使用 wx:for 綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。wx:for-item 意思是設(shè)定數(shù)組當(dāng)前元素的變量名。wx:key 設(shè)置列表中項(xiàng)目的唯一的標(biāo)識(shí)符。注意提供wx:key可以提升重新渲染時(shí)的性能，所以盡量提供。

block 是一個(gè)挺怪的設(shè)計(jì)，它不是一個(gè)可視化的元素，感覺純粹為提供數(shù)據(jù)綁定而準(zhǔn)備，在數(shù)據(jù)綁定時(shí)，以 block 來組織比較復(fù)雜的組件組合。所以block這一段的意思就是對于數(shù)組todos中的每一個(gè)todo，重復(fù)渲染下面這段

<view class="todo-item"><text class="desc">{{todo.desc}}</text> </view>復(fù)制代碼

當(dāng)然我們也需要拓展一下css，哦，不對，是wxss。

.todo-list {display: block;padding: 40rpx;width: 100vw;margin: 0 auto; } .todo-item {display: flex;flex-direction: row;flex-basis: 1;justify-content: space-around;align-items: stretch;width: 80 vw;padding: 20rpx;border-bottom: 1rpx solid #ededed; } .desc {vertical-align: middle;flex-grow: 1; }復(fù)制代碼

現(xiàn)在看一下效果，列表成功顯示了。

todos列表

事件的處理

現(xiàn)在我們給Todos添加兩個(gè)功能吧：Toggle（切換完成狀態(tài)）和Remove（刪除該事項(xiàng)）。這樣的話，需要給todo的描述之前加一個(gè)完成狀態(tài)的復(fù)選框以及一個(gè)在todo的描述之后的刪除按鈕。我們沒有使用微信提供的 checkbox ，而是用 icon 組件和 wx:if 來做處理，目的也是多展示一些特性。

<!--todos.wxml--> <view class="container todo-list"><block wx:for="{{todos}}" wx:for-item="todo" wx:key="todo.id"><view class="todo-item"><icon bindtap="toggleTodo" data-todo="{{todo}}" class="icon" type="success" wx:if="{{todo.completed}}"></icon><icon bindtap="toggleTodo" data-todo="{{todo}}" class="icon" type="success_circle" wx:if="{{!todo.completed}}"></icon><text bindtap="toggleTodo" data-todo="{{todo}}" class="desc">{{todo.desc}}</text><icon bindtap="removeTodo" data-todo="{{todo}}" class="remove" type="clear"></icon></view></block> </view>復(fù)制代碼

上面的模版中，我們看到多了一些新面孔：

• wx:if：這個(gè)比較好理解，就是條件渲染，在todo已完成的狀態(tài)下顯示一個(gè)icon，未完成狀態(tài)下顯示另一個(gè)icon。
• bindtap：這個(gè)是什么呢？它是微信小程序提供的綁定事件的機(jī)制，其綁定表達(dá)式為：bind+事件="事件處理函數(shù)"。我們上面的例子中的 bindtap="toggleTodo" 就是對于tap（觸碰后馬上離開）事件處理是一個(gè)在Page中定義的叫 toggleTodo 的函數(shù)。
• data-todo：很多時(shí)候我們需要在事件傳遞時(shí)攜帶一些數(shù)據(jù)過去，比如Toggle這個(gè)功能，我們需要在事件處理函數(shù)中知道是哪個(gè)todo要切換完成狀態(tài)。data-todo就是定義要傳輸?shù)臄?shù)據(jù)用的，data表明是要在 事件中傳輸?shù)臄?shù)據(jù)，而后面的todo表明這個(gè)數(shù)據(jù)在dataset中的key，通過這個(gè)key我們可以在Page中使用 event.target.dataset.todo得到這個(gè)數(shù)據(jù)。這也意味著我們可以通過多個(gè)key傳遞多個(gè)數(shù)據(jù)。

值的注意的一點(diǎn)是除了 bindXXX 這種綁定事件的形式外，還有一種形式是 catchXXX，它們的區(qū)別是 bind 事件綁定不會(huì)阻止冒泡事件向上冒泡，catch 事件綁定可以阻止冒泡事件向上冒泡。什么是冒泡呢？事件會(huì)繼續(xù)向上（父組件或父節(jié)點(diǎn)）傳遞就是冒泡，反之就是非冒泡。

在微信小程序中，冒泡的事件如下表列出的，其他如沒有特殊的聲明都是非冒泡事件

事件觸發(fā)條件

touchstart	手指觸摸動(dòng)作開始
touchmove	手指觸摸后移動(dòng)
touchcancel	手指觸摸動(dòng)作被打斷，如來電提醒，彈窗
touchend	手指觸摸動(dòng)作結(jié)束
tap	手指觸摸后馬上離開
longtap	手指觸摸后，超過350ms再離開

對于這些冒泡事件來說，如果我們要阻止其冒泡的行為，可以使用 catchXXX 來綁定事件。

const URL = 'http://localhost:3000/todos'let pageParams = {data: { todos: [], desc: '' } }pageParams.onLoad = function () {const that = thiswx.request({url: URL,data: JSON.stringify({}),header: { 'content-type': 'application/json' },method: 'GET',success: res => {console.log(res.data)that.setData({todos: res.data})},fail: () => console.error('something is wrong'),complete: () => console.log('get req completed')}) }pageParams.toggleTodo = function (event) {const that = thisconst selectedTodo = event.target.dataset.todoconst url = `${URL}/${selectedTodo.id}`const updatedTodo = Object.assign({}, selectedTodo, {completed: !selectedTodo.completed})wx.request({url: url,data: JSON.stringify(updatedTodo),header: { 'content-type': 'application/json' },method: 'PUT',success: res => {console.log(res.data)that.setData({todos: that.data.todos.map(todo => {if(todo.id === updatedTodo.id){return updatedTodo}return todo})})},fail: () => console.error('something is wrong'),complete: () => console.log('toggle req completed')}) }pageParams.removeTodo = function (event) {const that = thisconst selectedTodo = event.target.dataset.todoconst url = `${URL}/${selectedTodo.id}`;wx.request({url: url,data: JSON.stringify(selectedTodo),header: { 'content-type': 'application/json' },method: 'DELETE',success: res => {console.log(res.data)that.setData({todos: that.data.todos.filter(todo => todo.id !== selectedTodo.id)})},fail: () => console.error('something is wrong'),complete: () => console.log('delete req completed')}) }Page(pageParams)復(fù)制代碼

接下來的事情就變的很簡單，我們在 todos.js 中增加兩個(gè)處理函數(shù)用于處理toggle和remove，事件處理函數(shù)有一個(gè)參數(shù)就是event。處理邏輯還是先提交HTTP請求處理服務(wù)器端數(shù)據(jù)，處理成功后再處理本地內(nèi)存數(shù)據(jù)。

當(dāng)然 wxss 再更新一下：

.todo-list {display: block;padding: 40rpx;width: 100vw;margin: 0 auto; } .todo-item {display: flex;flex-direction: row;flex-basis: 1;justify-content: space-around;align-items: stretch;width: 80 vw;padding: 20rpx;border-bottom: 1rpx solid #ededed; } .icon {vertical-align: middle; } .remove {float: right;align-self: flex-end; } .desc {vertical-align: middle;flex-grow: 1; }復(fù)制代碼

現(xiàn)在的效果是這樣滴

可以工作的todo，當(dāng)然還沒有新增todo的功能

新增Todo、過濾器、優(yōu)化代碼結(jié)構(gòu)、引入Rx等話題我們后面繼續(xù)，這次就先到這里。

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的现学现卖微信小程序开发（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。