初學微信小程序 TodoList

BearyChat 發布于2019-08-22 17:12 / 2387人閱讀

摘要：微信小程序的學習微信小程序的開始嘗試微信開發者工具生成目錄如下主頁日志頁面工具大體為每一個即是一個頁面文件，每個頁面有一個文件規定描述頁面的這四個文件必須具有相同的路徑與文件名。

微信小程序的學習 微信小程序的開始嘗試 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


    
    全部
    
    未完成
    已完成

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

    
        
            
            {{item.title}}
            {{item.time}}

3/addForm

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框架就做好了

GPU云服務器云服務器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94961.html

微信小程序todolist

摘要：微信小程序列表頁面簡單的列表頁面和數據添加，此時有一些問題在清除一些用戶交互的頁面的時候有些問題。一個微信小程序，同時只能有個網絡請求連接。可能要在服務器上配置一些參數，可以讓微信小程序調用基本上是沒有問題的。 weixinApp 微信小程序toDoList 列表頁面簡單的列表頁面和數據添加，此時有一些問題 setData在清除一些用戶交互的頁面的時候有些問題。 inputA 是一...

XUI 2019-08-20 12:24 評論0 收藏0
微信小程序實現運動步數排名與發布個人動態&服務器部署

摘要：項目規劃本項目為基于微信手機應用平臺的一款運動互動型小程序，實現了用戶即時運動步數群內與個人動態的發布，小程序前端采用原生框架，后端采用基于的框架，數據庫采用，對象存儲采用七牛云，服務器采用阿里，域名采用認證。 1. 項目規劃本項目為基于微信手機應用平臺的一款運動互動型小程序，實現了用戶即時運動步數群內PK與個人動態的發布，小程序前端采用原生框架，后端采用基于Node的koa2框架，...

laoLiueizo 2019-08-26 13:22 評論0 收藏0
用mpvue寫個玩意兒玩玩

摘要：微信開發工具僅用于調試。下面可以配置一個微信小程序的參數，文件就是我們要編輯的頁面了。補充一下，調用之后獲取了經緯度之后，還可以玩玩微信的組件。試著用微信寫一個組件。下周公司要搞黑客馬拉松了，組里可能會做個小程序。然后看到了mpvue感覺還不錯，于是就打算試試水。用vue寫小程序聽上去美滋滋。那么先開始吧！全局安裝 vue-cli $ npm install --global vu...

lauren_liuling 2019-08-22 16:32 評論0 收藏0