最近，由于工作需要開始了解微信小程序，雖然小程序已經出了很久了，剛出的那段時間很火，看到很多關于小程序的技術文章，不過現在似乎沒那么火了，anyway，我們還是可以學習下的。

一、了解微信小程序

1.理念：小程序開發框架的目標是通過盡可能簡單、高效的方式讓開發者可以在微信中開發具有原生 APP 體驗的服務。

2.框架：框架的核心是一個響應的數據綁定系統。整個系統分為兩塊視圖層（View）和邏輯層（App Service），框架可以讓數據與視圖非常簡單地保持同步。當做數據修改的時候，只需要在邏輯層修改數據，視圖層就會做相應的更新。

3.相關資料：調試工具下載，簡易教程

初步了解這些基本信息后，我們先來看下TODOS這個應用做出來的最終效果

功能演示：

目錄結構：

主要功能模塊為：

index頁面，新建任務，可完成增刪等操作
los頁面，記錄在index頁面的操作

下面我們詳細介紹下

三、代碼詳解

1.簡單配置app.json文件：

1. {
2. "pages":[
3. "pages/index/index", // 設置頁面路徑，項目打開后找到這個路徑下的文件
4. "pages/logs/logs"
5. ],
6. "window":{ // 設置默認頁面的窗口表現
7. "backgroundTextStyle":"light",
8. "navigationBarBackgroundColor": "#fff",
9. "navigationBarTitleText": "TODOS",
10. "navigationBarTextStyle":"black"
11. },
12. "tabBar": { // 設置底部tab的表現
13. "borderStyle": "white",
14. "backgroundColor": "#f5f5f5",
15. "selectedColor": "#222",
16. "list": [ // 對應底部下面兩個菜單項；TODOS和LOGS
17. {
18. "pagePath": "pages/index/index",
19. "text": "TODOS",
20. "iconPath": "images/home.png",
21. "selectedIconPath": "images/home-actived.png"
22. },
23. {
24. "pagePath": "pages/logs/logs",
25. "text": "LOGS",
26. "iconPath": "images/note.png",
27. "selectedIconPath": "images/note-actived.png"
28. }
29. ]
30. }
31. }

2.app.js和app.wxss文件

App() 函數用來注冊一個小程序。接受一個 object 參數，其指定小程序的生命周期函數等。App() 必須在 app.js 中注冊，且不能注冊多個。
示例代碼

1. App({
2. onLaunch: function() {
3. // Do something initial when launch.
4. },
5. onShow: function() {
6. // Do something when show.
7. },
8. onHide: function() {
9. // Do something when hide.
10. },
11. onError: function(msg) {
12. console.log(msg)
13. },
14. globalData: 'I am global data'
15. })

在這個項目中不需要加什么代碼在App({})中，所以文件中只有一個App({})

app.wxss文件主要可以設置一些全局樣式

 

1. page {
2. height: 100%;
3. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
4. }

3.注冊頁面Page

Page() 函數用來注冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命周期函數、事件處理函數等。

一.初始化數據

 

1. // ===== 頁面數據對象 =====
2. data: {
3. input: '',
4. todos: [],
5. leftCount: 0,
6. allCompleted: false,
7. logs: [],
8. addOneLoading: false,
9. loadingHidden: true,
10. loadingText: '',
11. toastHidden: true,
12. toastText: '',
13. clearAllLoading: false
14. },

初始化數據作為頁面的第一次渲染。data將會以JSON的形式由邏輯層傳至渲染層，其數據可以是：字符串，數字，布爾值，對象，數組。

渲染層可以通過WXML對數據進行綁定。

<input class="new-todo" value="{{ input }}" placeholder="Anything here..." auto-focus bindinput="inputChangeHandle" bindchange="addTodoHandle"/>

二.生命周期函數

1. // ===== 頁面生命周期方法 =====
2. onLoad: function () {
3. // 從緩存獲取任務列表數據，并用setData設置
4. var todos = wx.getStorageSync('todo_list') // 調用 WX API 從本地緩存中獲取數據
5. if (todos) {
6. var leftCount = todos.filter(function (item) {
7. return !item.completed
8.