微信小程式入門（第一天）

先體驗一下

微信小程式第一個HELLO WORD程式

1，檔案分布結構：

│ app.wxss

│ app.js

│ app.json

│

├─pages

│ ├─index

│ │ index.js

│ │ index.wxml

│ │ input.wxml

│ │ index.wxss

│ │

│ ├─main

│ │ main.wxss

│ │ main.js

│ │ main.wxml

│ │

│ └─logs

│ logs.js

│ logs.json

│ logs.wxss

│ logs.wxml

│

└─utils

util.js

2，業務邏輯部分

對于不同的項目，根據其具體的業務邏輯表現，檔案有不同的組織方式，但基本元素(頁面Page)的結構不變。
在helloworld項目中，如上圖綠色所示為：pages/utils。
pages：該檔案夾下存放不同的業務邏輯頁面，在這裡為index檔案夾(首頁面)，logs檔案夾(log頁面)。
utils：該檔案夾下存放工具類函數，并通過module.exports導出formatTime來供其他檔案調用。
           

3,程式主體部分

由三個檔案組成，必須放在項目的根目錄,就是app.wxss、app.js、app.json  
1. app.json 是微信小程式的全局配置檔案，決定頁面檔案的路徑、視窗表現、設定網絡逾時時間、設定多tab等。 

    {
      "pages":[  
        "pages/index/index",  
        "pages/logs/logs"  
      ],  
      "window":{  
        "backgroundTextStyle":"light",  
        "navigationBarBackgroundColor": "#BF0000",
        "navigationBarTitleText": "Hello Word",
        "navigationBarTextStyle":"#FFFFFF"
      },
        "debug": true
    }

說明：
*  pages：pages接受一個字元串數組，來指定小程式由哪些頁面組成。每一項代表對應頁面的【路徑+檔案名】資訊，數組的第一項代表小程式的初始頁面。  
小程式中新增/減少頁面，都需要對pages數組進行修改。pages中的路徑為相對路徑。檔案名不需要寫檔案字尾，因為MINA會自動去尋找路徑.json,.js,.wxml,.wxss的四個檔案進行整合。  

*  window：用于設定小程式的狀态欄、導覽列、标題、視窗背景色。
*  debug：是輸出調試資訊


2.app.wxss 
   WXSS(WeiXin Style Sheets)是MINA設計的一套樣式語言，用于描述WXML的元件樣式，也用來決定WXML的元件的顯示方式。從定位上講WXSS相當于css 
   /**app.wxss**/

    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 200rpx 0;
      box-sizing: border-box;
    }
    
    .mui-bar-tab {
        bottom: 0;
        display: table;
        width: 100%;
        height: 50px;
        padding: 0;
        table-layout: fixed;
        border-top: 0;
        border-bottom: 0;
    
    }
           

4.頁面代碼說明：

1.index.js       
//index.js  
//擷取應用執行個體  
           

//index.js  
//擷取應用執行個體  
 var app = getApp()  
        Page({  
            data: { 
                motto: 'Hello World',   
                userInfo: {},   
                item: { 
                    index: 0,   
                    msg: 'this is a template',  
                    time: '2016-09-15'  
                }   
            },  
            //事件處理函數      
            bindViewTap: function() {
                wx.navigateTo({
                    url: '../logs/logs' //轉到logs頁面    
                })
            },
            viewTap: function() {
                console.log('view top');
                //設定一個memberName的值  
                this.setData({
                    memberName: {
                        value: 'ylong52'
                    }
                })
                //轉到navigateTo頁面  
                wx.navigateTo({
                    url: '../index/input'
                })
            },
            onLoad: function(options) {
                console.log(options)
                var that = this
                this.setData({
                    title: options.title
                })
                //調用應用執行個體的方法擷取全局資料
                app.getUserInfo(function(userInfo) {
                    //更新資料
                    that.setData({
                        userInfo: userInfo
                    })
                    that.update()
                })
            }
        })