微信小程序的學習

微信小程序的開始嘗試 TodoList

---

微信開發者工具生成 目錄如下：

. |-- app.js |-- app.json |-- app.wxss |-- pages | |-- index # 主頁 | | |-- index.js | | |-- index.json | | |-- index.wxml | | `-- index.wxss | `-- log # 日志頁面 | | |-- log.js | | |-- log.json | | |-- log.wxml | | `-- log.wxss `-- utils # 工具`-- util.js

大體為:
每一個page即是一個頁面文件 ，每個頁面有一個js/wxml/wxss/json文件 規定：描述頁面的這四個文件必須具有相同的路徑與文件名。

全局下同路，為公共的邏輯，樣式，配置

與html不同:用view text navigator 代替 div span a
官方文檔

*.wxml: 數據驅動的視圖層 + 微信提供了大量的組件 表單 導航 媒體 ...

好，那現在正式嘗試TodoList~

---

開始完成wxml ,我在這里主要分成三部分
1.titleBar

<view class="titleBar"> <div class="status"><!-- wxml 是一個模板 {{數據狀態}} 數據的綁定 動態的 可編譯的 活的 data 是活的 setData 只要狀態一變 界面立即改變 --><text class="{{status=='1'?'active':''}}" data-status="1" bindtap="showStatus">全部</text><!--用data- 表示數據屬性--><text class="{{status=='2'?'active':''}}" data-status="2" bindtap="showStatus">未完成</text><text class="{{status=='3'?'active':''}}" data-status="3" bindtap="showStatus">已完成</text> </div> <div class="add"><button class="mini-btn" size="mini" type="warn" bindtap="addTodoShow">添加</button></div>

</view>

2/scoll-view scroll-y class="lists"

<scoll-view scroll-y class="lists"> <view class="item" wx:for="{{curLists}}" wx:key="index"><div class="content"><icon class="icon-small" bindtap="changeTodo" data-item="{{index}}" size="23" type="{{item.status ==='1'? 'success':'circle'}}"></icon><text class="title">{{item.title}}</text><text class="time">{{item.time}}</text></div></view>

</scoll-view>

3/addForm

<view class="addForm {{addShow?'hide':''}}"> <view class="addForm-div"><input type="text" placeholder="請輸入任務" class="weui-input" bindinput="setInput" value="{{addText}}" /><view class="addForm-btn"><button type="warn" size="mini" class="weui-btn mini-btn" bindtap="addTodo">確定添加</button><button type="default" size="mini" class="weui-btn mini-btn" bindtap="addTodoHide">取消</button></view></view> </view>

</view>

---

wxml 是一個模板 {{數據狀態}} 數據的綁定

動態的 可編譯的 活的 data 是活的 setData 只要狀態一變 界面立即改變 我們在這里使用了data 來表示數據屬性

寫完了wxml 那讓我們加上wxss樣式看看效果把

TodoList wxss

在wxss中我們使用了彈性布局flex:1, 這種布局的方式使得我們不用計算大小了

我們當然不能只做一個切圖仔啦

---

話不多說看看js的實現部分

數據 對應著 界面狀態

默認的status是1是全部setData改變 比如改成2 setData 2 已完成 3 未完成

界面狀態,全部被data接管起來
當前點擊條目的status要變成 success 數據 lists 跟當前條目相關的數據
將status的值 更新為 1

---

這樣一個簡單的TodoList框架就做好了

總結

以上是生活随笔為你收集整理的初学微信小程序 TodoList的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。