微信小程序（1）--新建項目

這些天看了一下最近特別火的微信小程序，發現和vue大同小異。

新建項目

爲方便初學者瞭解微信小程序的基本代碼結構，在建立過程當中，若是選擇的本地文件夾是個空文件夾，開發者工具會提示，是否須要建立一個 quick start 項目。選擇「是」，開發者工具會幫助咱們在開發目錄裏生成一個簡單的 demo。

項目建立成功後，咱們就能夠點擊該項目，進入並看到完整的開發者工具界面，點擊左側導航，在「編輯」裏能夠查看和編輯咱們的代碼，在「調試」裏能夠測試代碼並模擬小程序在微信客戶端效果，在「項目」裏能夠發送到手機裏預覽實際效果。

每個小程序頁面是由同路徑下同名的四個不一樣後綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js後綴的文件是腳本文件，.json後綴的文件是配置文件，.wxss後綴的是樣式表文件，.wxml後綴的文件是頁面結構文件。

配置

咱們使用app.json文件來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。

app.json：

{
  "pages":[
    "pages/home/home",
    "pages/read/read",
    "pages/publish/publish",
    "pages/information/information",
    "pages/me/me",
    "pages/test/test"
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "news",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "selectedColor":"#349393",
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首頁",
      "iconPath":"assets/home.png",
      "selectedIconPath":"assets/home2.png"
    }, 
    {
      "pagePath": "pages/read/read",      
      "text": "訂閱",
      "iconPath":"assets/read.png",
      "selectedIconPath":"assets/read2.png"
    },
    {
      "pagePath": "pages/publish/publish",      
      "text": "發稿",
      "iconPath":"assets/publish.png",
      "selectedIconPath":"assets/publish2.png"
    },
    {
      "pagePath": "pages/information/information",
      "text": "消息",
      "iconPath": "assets/information.png",
      "selectedIconPath": "assets/information2.png"
    },
    {
      "pagePath": "pages/me/me",
      "text": "我",
      "iconPath": "assets/me.png",
      "selectedIconPath": "assets/me2.png"
    }
    ]
  } 
}

路由：

注意app.json