初學微信小程序 TodoList

微信小程序的學習

微信小程序的開始嘗試 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框架就作好了