初學微信小順序 TodoList

2023年7月8日 146次阅读 来源: 你也很棒哦

微信小順序的進修

微信小順序的最先嘗試 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框架就做好了

    原文作者：你也很棒哦
    原文地址: https://segmentfault.com/a/1190000014840393
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞