初學微信小程式 TodoList
阿新 • • 發佈:2018-11-05
微信小程式的學習
微信小程式的開始嘗試 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框架就做好了