什麼是微信小程式？

對我們開發者的影響？

一些基本要求

小程式大小要求： 基本安裝包小於2M

效能上： WebApp< Hybrid< Native 效能上

關注問題：開放平臺，生態，格局和眼光

現在的App哪些適合？

知乎不適合，頻率、不支援訊息推送，不像原生的一樣，不支援webview,使得不能載入一些詳情頁，比如是靜態好的html頁面。

直播==不適合，停留時長太久，任務會被打斷。

遊戲== 開發不出來，html5 canvas小遊戲。

一句話就能說明了業務需求，就是提交了一個表單。

可能的前景，現在的大應用==拆分功能，搶佔流量入口（比如美團App的外賣入口，銀行的賬單查詢入口）

第一步 (下載開發工具)

在這裡請注意，下載下來這個程式和以前的“微信web開發者工具”是同名同目錄的，也就是說，如果你正在使用以前的“微信web開發者工具”的話你就需要將該程式的安裝目錄修改成別的名字，以免覆蓋

第二步（建立第一個程式）

開啟剛才安裝的開發工具，然後按照下圖流程操作

填寫專案名稱及選擇專案目錄後點擊新增專案即可

第三步（認識開發工具佈局）

整個開發工具基本分為三塊。

第一列：table-item 每個按鈕代表一個頁

第二列： webview 你的頁面在這裡實時展示

第三列：chrome除錯工具，暫且這樣叫吧，因為確實是使用了charome的除錯工具， 在這裡可以除錯頁面的樣式,js，網路檢測，輸入輸出等等。

第四步：專案結構

微信小程式建立之後會生成一個專案模板，如下圖所示（基本如此，但並不侷限於此）

現在分別來說明一下每個檔案及目錄的意思

app.js

App({
  onLaunch: function () {
    //呼叫API從本地快取中獲取資料
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
 

    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //呼叫登入介面
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

程式的入口檔案，必須存在。

app.js是小程式的指令碼程式碼。我們可以在這個檔案中監聽並處理小程式的生命週期函式、宣告全域性變數。呼叫框架提供的豐富的 API，如本例的同步儲存及同步讀取本地資料。

app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

app.json 是對整個小程式的全域性配置。我們可以在這個檔案中配置小程式是由哪些頁面組成，配置小程式的視窗背景色，配置導航條樣式，配置預設標題。注意該檔案不可新增任何註釋

app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

app.wxss 是整個小程式的公共樣式表。我們可以在頁面元件的 class 屬性上直接使用 app.wxss 中宣告的樣式規則。

Pages（開發者自行建立）目錄是你的頁面目錄，但不是一定需要叫Pages

Utils （開發者自行建立）在本例中是工具類庫目錄，不是一定需要存在

在開發過程中最好遵循以上目錄結構，特別Pages，每個頁面獨立一個資料夾，因為每個頁面有自己獨立的樣式或者Js。為了方便管理，最好取名為一樣，比如index頁面，分別取名為index.js，index.wxss,index.wxml和index.json。 但是，如果有公共樣式的存在，請寫在app.wxss，為了程式不過與複雜，頁面的巢狀不能超過5層。