我的小程序入門筆記（一）目錄結構

一、微信web開發者工具

            歡迎使用微信Web開發者工具，通過該工具，你可以更加便捷的調試微信上的網頁：
                        1. 你可以使用自己的微信號來調試微信網頁授權;
                        2. 你可以調試、檢驗頁面的JS-SDK相關功能與權限，模擬大部分 SDK 的輸入和輸出;
                        3. 你可以使用 X5 Blink 調試，或者是基於 weinre 的移動調試功能;
                        4. 你可以利用集成的Chrome DevTools協助開發。

二、項目目錄結構介紹

                        1.pages(文件夾)
                                    index(文件夾)
                                         index.js(配置頁面入口)
                                         index.wxml(配置佈局和UI,同html頁面)
                                         index.wxss(頁面樣式文件，同css頁面)
                                  logs(文件夾)
                                         log.js
                                         log.json
                                       log.wxml
                                       log.wxss

                            2.utils(文件夾)
                                        util.js

                            3.app.js 定義每個頁面的js事件（即各種函數）

                            4.app.json：可自定義每個頁面的配置信息
                                            若頁面有自己的配置信息(xxx.json)，則由頁面目錄下的配置信息爲準，也就是說頁面自己擁有的.json文件會覆蓋app.json的內容
        /*app.json-eg*/
        {
                                "pages":{
                                    "pages/index/index",
                                        "pages/logs/logs"
                                },

                                "window":{
                                    “backgroundTextStyle”:"light",
                                        "navigationBarBackgroundColor":"#fff",
                                        "navigationBarTitleText":"WeChat",
                                        "navigationBarTextStyle":"black"
                                }
        }

                    5.app.wxss：可自定義每個頁面的樣式
                                                        若頁面有自己的樣式文件（xxx.wxss），則由頁面目錄下的樣式文件爲準，也就是說頁面自己擁有的.wxss會覆蓋app.wxss的內容
                                    /*app.wxss-eg*/
                                    .container{
                                                height:100%;
                                                        display:flex;
                                                        flex-direction:column;
                                                        align-items:center;
                                                        justify-content:space-between;
                                                        padding:200rpx 0;
                                                            box-sizing:border-box;
                                    }

    簡單來說：
                                .wxml文件是用來定義頁面內容，與網頁開發中html頁面的效果相同
                                .wxss文件是用來定義頁面樣式，同樣，與css效果相同
                                .js文件是用來定義頁面的交互功能（即定義函數），然後利用標籤的bindtap屬性綁定對應的函數名即可執行你所定義的函數體

 舉個栗子：
            /*首先我在index.js文件中（即小程序默認index頁面）定義了一個toTest函數，如下：*/
                                     toTest: function(){
                                                        wx.navigateTo({
                                                            url: '../Test/Test',
                                                        })
                                        }
             /* 函數說明：
                                        function wx.navigateTo(object: _navigateToObject): void
                                        保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。
            */
           接着，我在index.wxml頁面定義了一個button按鈕(value爲進入測試頁面),設置bindtap屬性的值爲toTest,完成toTest函數和button標籤的綁定
                                <view>
                                                    <button class='testindex' bindtap='toTest'>進入測試頁面</button>
                                </view>
           ps：其中，testindex是類選擇器名字，寫在index.wxss頁面中
                                                             view標籤是一個組件，會在頁面上做渲染，稱爲視圖容器，個人覺得類似於div。

    這兩個簡單的步驟實現了一個點擊按鈕跳轉到相應頁面並可以返回原頁面的功能。