初學微信小程式 TodoList

你也很棒哦發表於2019-02-16
微信小程式

微信小程式的學習

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

相關文章