## 開發入門知識 1，當你準備開發一個微信小程序的時候，你首先需要一個小程序的 APPId ，在微信公眾號官網可以獲得。 2，你還需要準備微信開發者工具，官網同樣有下載，下載安裝即可，支持windows，linux，和MAC平臺。 3，小程序使用的微信自己開發 MINA 框架,提供了視圖層描述語言，WXML 和 WXSS 以及基于JavaScript的邏輯層框架，并在視圖層與邏輯層間提供了數據傳輸和事件系統，可以讓開發者可以方便的聚焦于數據與邏輯上。 打開的時候會自動提示創建一個demo，demo結構文件樹如下：  4，其中app.js、app.json、app.wxss 是必不可少的，是小程序生成的依賴文件。 app.js 監聽并控制這整個程序的生命周期，也是全局變量聲明的地方。 ### 1.微信小程序目錄結構  ### 1.1 小程序的文件格式介紹 在項目中我們可以看到四種文件類型： .js后綴的文件是腳本文件，頁面的交互等代碼在這里實現； .json后綴的文件是配置文件，主要是json數據格式存放，用于設置程序的配置效果； .wxss后綴的是樣式表文件，類似于前端中的css,用于對界面進行美化； .wxml后綴的文件是頁面結構文件，用于構建頁面，在頁面上增加控件。 ### 1.1 pages目錄介紹 pages:主要存放小程序的頁面文件，其中每個文件夾為一個頁面，每個頁面包含四個文件，.wxml文件是界面文件，.js是事件交互文件，用于處理界面的點擊事件等功能；.wxss為界面美化文件，讓界面顯示的更加美觀；.json為配置文件，用于修改導航欄顯示樣式等，小程序每個頁面必須有.wxml和.js文件，其他兩種類型的文件可以不需要。 注意：文件名稱必須與頁面的文件夾名稱相同，如index文件夾，文件只能是index.wxml、index.wxss、index.js和index.json. ### 1.2 utils #### 微信小程序-調用工具js文件/utils文件中的函數/變量 在小程序中，定義了一項工具文件utils,此文件的js旨在本文件之內有效，當其他子頁面想調用其中的js方法或者變量時，需要兩步驟： 1：在utils被調用的js文件中，面向對象的方式模型輸出： module.exports={要調用的函數名稱：要調用的函數名稱 }； 2：在要調用的js文件中模塊化引入utils的js文件 var object=require("utils被調用的js文件地址")； 可以輸出一下object就能看到被調用的方法了； 例子如下： utils中被調用的js： var paycenter = { [k1]: 'http://paycenter.yuanfeng021.com/', [k2]: 'aaaaaabbb', [k3]: 105 } // 要引用這個文件的函數或者變量，除了在要引用的的js文件中模塊化之外（var utils=require('js地址')）， // 在被引用的的js中要通過 module.exports={a:a}作為面向對象的變量輸出函數如下： module.exports={ URl:paycenter,//要引用的函數 xx:xx } 要調用的js文件： // 獲得工具utils工具js里面函數,先模塊化引用utils里面的js地址 reqiure('js地址')成一個面向對象 var fileData=require('../../utils/config.js') // console.log(fileData) 可查看獲得的函數 console.log(fileData.URL) 輸出結果：  該文件件主要用于存放全局的一些.js文件，公共用到的一些事件處理代碼文件可以放到該文件夾下，用于全局調用。 ### 1.3 app.js、app.json、app.wxss app.js : 系統的方法處理文件，主要處理程序的聲明周期的一些方法；例如：程序剛開始運行時事件處理等 app.json : 系統全局配置文件，設置導航頭的顏色，字體大小，下面有沒有tabbar等功能，具體頁面的配置在頁面的json文件中單獨修改； app.wxss : 全局的界面美化代碼 ### 此項目目錄結構 ### 目錄結構概覽 小程序 目錄 ├─component 自定義插件目錄 │ ├─toastTest 自定義插件文件夾 │ │ └─toastTest.wxml │ │ └─toastTest.js │ │ └─toastTest.wxss ├─image 存放圖片 ├─pages 存放小程序的頁面文件 │ ├─address_list.php 收貨地址列表頁面 │ │ └─address_list.wxml │ │ └─address_list.js │ │ └─address_list.wxss │ │ └─address_list.json │ ├─address_opera 新增收貨地址頁面 │ │ └─address_opera.wxml │ │ └─address_opera.js │ │ └─address_opera.wxss │ │ └─address_opera.json │ ├─address_opera_edit 編輯收貨地址頁面 │ │ └─address_opera_edit.wxml │ │ └─address_opera_edit.js │ │ └─address_opera_edit.wxss │ │ └─address_opera_edit.json │ ├─address_select 選擇收貨地址 │ │ └─address_select.wxml │ │ └─address_select.js │ │ └─address_select.wxss │ │ └─address_select.json │ ├─buy_step1 結算頁面 │ │ └─buy_step1.wxml │ │ └─buy_step1.js │ │ └─buy_step1.wxss │ │ └─buy_step1.json │ ├─cart 購物車頁面 │ │ └─cart.wxml │ │ └─cart.js │ │ └─cart.wxss │ │ └─cart.json │ ├─favorites 商品收藏頁面 │ │ └─favorites.wxml │ │ └─favorites.js │ │ └─favorites.wxss │ │ └─favorites.json │ ├─favorites_store 店鋪收藏頁面 │ │ └─favorites_store.wxml │ │ └─favorites_store.js │ │ └─favorites_store.wxss │ │ └─favorites_store.json │ ├─index 首頁頁面 │ │ └─index.wxml │ │ └─index.js │ │ └─index.wxss │ │ └─index.json │ ├─member 我的（個人中心）頁面 │ │ └─member.wxml │ │ └─member.js │ │ └─member.wxss │ │ └─member.json │ ├─member_evaluation 評價訂單頁面 │ │ └─member_evaluation.wxml │ │ └─member_evaluation.js │ │ └─member_evaluation.wxss │ │ └─member_evaluation.json │ ├─member_evaluation_again 查看商品評價 │ │ └─member_evaluation_again.wxml │ │ └─member_evaluation_again.js │ │ └─member_evaluation_again.wxss │ │ └─member_evaluation_again.json │ ├─order_detail 訂單詳情頁面 │ │ └─order_detail.wxml │ │ └─order_detail.js │ │ └─order_detail.wxss │ │ └─order_detail.json │ ├─order_list 訂單列表頁面 │ │ └─order_list.wxml │ │ └─order_list.js │ │ └─order_list.wxss │ │ └─order_list.json │ ├─product_detail 商品詳情頁面 │ │ └─product_detail.wxml │ │ └─product_detail.js │ │ └─product_detail.wxss │ │ └─product_detail.json │ ├─product_evalute 商品評價頁面 │ │ └─product_evalute.wxml │ │ └─product_evalute.js │ │ └─product_evalute.wxss │ │ └─product_evalute.json │ ├─product_first_categroy 分類頁面 │ │ └─product_first_categroy.wxml │ │ └─product_first_categroy.js │ │ └─product_first_categroy.wxss │ │ └─product_first_categroy.json │ ├─search 搜索頁面 │ │ └─search.wxml │ │ └─search.js │ │ └─search.wxss │ │ └─search.json │ ├─search_list 搜索結果列表頁面 │ │ └─search_list.wxml │ │ └─search_list.js │ │ └─search_list.wxss │ │ └─search_list.json │ ├─search_store 店鋪搜索頁面 │ │ └─search_store.wxml │ │ └─search_store.js │ │ └─search_store.wxss │ │ └─search_store.json │ ├─select 綁定賬號頁面 │ │ └─select.wxml │ │ └─select.js │ │ └─select.wxss │ │ └─select.json │ ├─store 店鋪首頁頁面 │ │ └─store.wxml │ │ └─store.js │ │ └─store.wxss │ │ └─store.json │ ├─store_goods 店鋪全部商品頁面 │ │ └─store_goods.wxml │ │ └─store_goods.js │ │ └─store_goods.wxss │ │ └─store_goods.json │ ├─store_goods_list 店鋪搜索結果列表頁面 │ │ └─store_goods_list.wxml │ │ └─store_goods_list.js │ │ └─store_goods_list.wxss │ │ └─store_goods_list.json │ ├─store_goods_update 店鋪上新商品頁面 │ │ └─store_goods_update.wxml │ │ └─store_goods_update.js │ │ └─store_goods_update.wxss │ │ └─store_goods_update.json │ ├─store_list 店鋪列表頁面 │ │ └─store_list.wxml │ │ └─store_list.js │ │ └─store_list.wxss │ │ └─store_list.json │ ├─utils 工具文件 │ │ └─config.js 配置文件 │ │ └─utils.js │ ├─wxParse 插件 ├─app.js 配置接口地址前綴 ├─app.json 全局json配置 ├─app.wxss 全局css配置 ├─ project.config.json 小程序系統配置