摘要:微信小程序的學(xué)習(xí)微信小程序的開始嘗試微信開發(fā)者工具生成目錄如下主頁日志頁面工具大體為每一個即是一個頁面文件,每個頁面有一個文件規(guī)定描述頁面的這四個文件必須具有相同的路徑與文件名。
微信小程序的學(xué)習(xí) 微信小程序的開始嘗試 TodoList 微信開發(fā)者工具生成 目錄如下:
. |-- 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文件 規(guī)定:描述頁面的這四個文件必須具有相同的路徑與文件名。
全局下同路,為公共的邏輯,樣式,配置
與html不同:用view text navigator 代替 div span a
官方文檔
*.wxml: 數(shù)據(jù)驅(qū)動的視圖層 + 微信提供了大量的組件 表單 導(dǎo)航 媒體 ...
開始完成wxml ,我在這里主要分成三部分
1.titleBar
全部 未完成 已完成
2/scoll-view scroll-y class="lists"
{{item.title}} {{item.time}}
3/addForm
wxml 是一個模板 {{數(shù)據(jù)狀態(tài)}} 數(shù)據(jù)的綁定
動態(tài)的 可編譯的 活的 data 是活的 setData 只要狀態(tài)一變 界面立即改變 我們在這里使用了data 來表示數(shù)據(jù)屬性寫完了wxml 那讓我們加上wxss樣式看看效果把
TodoList wxss
在wxss中我們使用了彈性布局flex:1, 這種布局的方式使得我們不用計算大小了
話不多說看看js的實現(xiàn)部分
數(shù)據(jù) 對應(yīng)著 界面狀態(tài)
默認(rèn)的status是1是全部 setData改變 比如改成2 setData 2 已完成 3 未完成
界面狀態(tài),全部被data接管起來
當(dāng)前點擊條目的status要變成 success 數(shù)據(jù) lists 跟當(dāng)前條目相關(guān)的數(shù)據(jù)
將status的值 更新為 1
這樣一個簡單的TodoList框架就做好了
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/94961.html
摘要:微信小程序列表頁面簡單的列表頁面和數(shù)據(jù)添加,此時有一些問題在清除一些用戶交互的頁面的時候有些問題。一個微信小程序,同時只能有個網(wǎng)絡(luò)請求連接。可能要在服務(wù)器上配置一些參數(shù),可以讓微信小程序調(diào)用基本上是沒有問題的。 weixinApp 微信小程序toDoList 列表頁面 簡單的列表頁面和數(shù)據(jù)添加,此時有一些問題 setData在清除一些用戶交互的頁面的時候有些問題。 inputA 是一...
摘要:項目規(guī)劃本項目為基于微信手機應(yīng)用平臺的一款運動互動型小程序,實現(xiàn)了用戶即時運動步數(shù)群內(nèi)與個人動態(tài)的發(fā)布,小程序前端采用原生框架,后端采用基于的框架,數(shù)據(jù)庫采用,對象存儲采用七牛云,服務(wù)器采用阿里,域名采用認(rèn)證。 1. 項目規(guī)劃 本項目為基于微信手機應(yīng)用平臺的一款運動互動型小程序,實現(xiàn)了用戶即時運動步數(shù)群內(nèi)PK與個人動態(tài)的發(fā)布,小程序前端采用原生框架,后端采用基于Node的koa2框架,...
摘要:微信開發(fā)工具僅用于調(diào)試。下面可以配置一個微信小程序的參數(shù),文件就是我們要編輯的頁面了。補充一下,調(diào)用之后獲取了經(jīng)緯度之后,還可以玩玩微信的組件。試著用微信寫一個組件。 下周公司要搞黑客馬拉松了,組里可能會做個小程序。然后看到了mpvue感覺還不錯,于是就打算試試水。用vue寫小程序聽上去美滋滋。那么先開始吧! 全局安裝 vue-cli $ npm install --global vu...
閱讀 3428·2021-10-20 13:49
閱讀 2803·2021-09-29 09:34
閱讀 3700·2021-09-01 11:29
閱讀 3087·2019-08-30 11:01
閱讀 844·2019-08-29 17:10
閱讀 883·2019-08-29 12:48
閱讀 2786·2019-08-29 12:40
閱讀 1358·2019-08-29 12:30