1. WeChat ???? AppID? ?????. ( ??? AppID? ?? ??? ??? ID?, WeChat ?? ??? ????? ????? ??? ? ????. AppID? ??? ?? ??? ?????! )

??????. ????? "??" - "??? ??"?? WeChat ???? AppID? ??? ? ????. ??? ???? ?? ??? AppID? ?? ??? ? ????.

??: ???? ?? WeChat ID? ????? ?? ????? ????? "Bind Developer"? ???? ???. ?, "??? ID"-"???" ???? ?? ????? ???? ? ??? WeChat ID? ??????. ????? ? ??????? ???? WeChat ID? ???? ??? ??? ?????.

2. ???? ??? (???? ??? ?? ??? ??????. ???? ???? ???. ??? ??? ? ????)

?? ???? ??? ?? ??? ????? ??? ??? ???? ???.

??? ??? ??? ? WeChat? ?? QR ??? ???? ??????. Create "Project"? ???? ??? ?? AppID? ???? "My First Project"? ?? ?? ???? ??(?? ???? ?? ??)? ??? ?? ?? ??? ??? ??? ????? ???? ????? ?? ???. "? ????".

???? WeChat ???? ?? ?? ??? ?? ??? ? ??? ?? ???? ??? ?? ??? ? ??? ?? ??? ??? ?? ?? ????? ???? ??? ??? ?? ???? ?????. "?"? ???? ??? ??? ???? ?? ????? ??? ??? ??? ? ????.

????? ????? ???? ????? ???? ?? ??? ?? ?????? ??? ? ? ????. ?? ??? ???? "??" ? "???"?? ??? ?? ??? ? ????. ????'??? ??? ????? WeChat ??????? ?? ????? ??? ?????? ? ???, '????'??? ?? ????? ?? ?? ??? ?? ? ? ????.

3. ?? ??(?? ?????? ??? ??? ????)

?? ???? ???? ???

??? ??? ?? ???? "??"? ???? ? ????? ????? ??? ?? ? ? ????. ?? ??? ?? ??. ?? ???? ???? ?? app.js, app.json ? app.wxss???. ? ? .js ???? ???? ??, .json ???? ?? ??, .wxss suffix? ??? ?? ?????. WeChat ???? ??? ??? ?? ??? ????? ?????. .js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件。微信小程序會讀取這些文件，并生成小程序?qū)嵗?/p>

下面我們簡單了解這三個文件的功能，方便修改以及從頭開發(fā)自己的微信小程序。

app.js是小程序的腳本代碼。我們可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。調(diào)用框架提供的豐富的 API，如本例的同步存儲及同步讀取本地數(shù)據(jù)。想了解更多可用 API，可參考?API 文檔

//app.js
App({
  onLaunch: function () {//調(diào)用API從本地緩存中獲取數(shù)據(jù)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{      //調(diào)用登錄接口
      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.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導(dǎo)航條樣式，配置默認標題。注意該文件不可添加任何注釋。更多可配置項可參考配置詳解

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

app.wxss 是整個小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規(guī)則。

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

創(chuàng)建頁面

在這個教程里，我們有兩個頁面，index 頁面和 logs 頁面，即歡迎頁和小程序啟動日志的展示頁，他們都在 pages 目錄下。微信小程序中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中，且 pages 中的第一個頁面是小程序的首頁。

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

index.wxml 是頁面的結(jié)構(gòu)文件：

<!--index.wxml--><view class="container">  <view  bindtap="bindViewTap" class="userinfo"><image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text>  </view>  <view class="usermotto"><text class="user-motto">{{motto}}</text>  </view></view>

本例中使用了<view/>、<image/>、<text/>

??? ???? ?? ???? WeChat ???? ???? ??? ? ??? ? ? ??? ??? ???? ??? ?????.

app.js? ?? ????? ???? ?????. ? ????? ???? ?????? ??? ???? ? ???? ?? ??? ??? ? ????. ? ???? ?? ???? ?? ?? ? ?? ??? ?? ??????? ???? ??? API? ?????. ?? ??? API? ?? ??? ????? API ???

//index.js//獲取應(yīng)用實例var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },  //事件處理函數(shù)
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {console.log('onLoad')var that = this//調(diào)用應(yīng)用實例的方法獲取全局數(shù)據(jù)
    app.getUserInfo(function(userInfo){      //更新數(shù)據(jù)
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

app.json? ?????. app.json? ?? ???? ?? ?????. ? ????? ?? ????? ?? ???? ???? ??? ????, ?? ????? ? ???? ????, ?? ??? ???? ????, ?? ??? ??? ? ????. ? ???? ??? ??? ? ????. ? ?? ?? ??? ?? ????? ???????

/**index.wxss**/.userinfo {  display: flex;  flex-direction: column;  align-items: center;
}.userinfo-avatar {  width: 128rpx;  height: 128rpx;  margin: 20rpx;  border-radius: 50%;
}.userinfo-nickname {  color: #aaa;
}.usermotto {  margin-top: 200px;
}

??app.wxss? ?? ?? ????? ?? ??? ?????. ??? ?? ??? ??? ??? ?? app.wxss? ??? ??? ??? ?? ??? ? ????. ??

<!--logs.wxml--><view class="container log-list">  <block wx:for="{{logs}}" wx:for-item="log"><text class="log-item">{{index + 1}}. {{log}}</text>  </block></view>

????? ???????? ?????? ??? ???? ?? ???, ? ?? ???? ?? ???? ?? ??? ?? ????? ? ???? ??? ? ? ??? ????? ????. ?? ?? ????? ? ???? [?? + ??? ??]? app.json? ???? ???? ??, ???? ? ?? ???? ?? ????? ???????. ????? ?? ???? ???? index.js, index.wxml, index.wxss, index.json? ?? ??? ??? ??? ??? ?? 4?? ?? ?? ??? ??? ?????. ???? .js? ??? ???? ????, ???? .json? ??? ?? ????, ???? .wxss? ??? ??? ?????. ?? ? .wxml? ??? ?? ?????. ????index.wxml? ???? ?? ?????. ??

//logs.jsvar util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {return util.formatTime(new Date(log))
      })
    })
  }
})

??? ???? <view/>, <image/>, ??? ??? ???? ???? ????? ??? ?? ??? ???? ? <text/>? ?????. ????index.js? ???? ???? ?????. ? ????? ???? ?? ?? ??? ???? ? ????, ?? ???? ????? ????, ???? ?? ? ????, ??? ?? ?? ???? ??? ? ????. ??rrreee??index.wxss? ???? ??? ?????. ??

/**index.wxss**/.userinfo {  display: flex;  flex-direction: column;  align-items: center;
}.userinfo-avatar {  width: 128rpx;  height: 128rpx;  margin: 20rpx;  border-radius: 50%;
}.userinfo-nickname {  color: #aaa;
}.usermotto {  margin-top: 200px;
}

頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規(guī)則會層疊覆蓋 app.wxss 中的樣式規(guī)則。如果不指定頁面的樣式表，也可以在頁面的結(jié)構(gòu)文件中直接使用 app.wxss 中指定的樣式規(guī)則。

index.json 是頁面的配置文件：

頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。

logs 的頁面結(jié)構(gòu)

<!--logs.wxml--><view class="container log-list">  <block wx:for="{{logs}}" wx:for-item="log"><text class="log-item">{{index + 1}}. {{log}}</text>  </block></view>

logs 頁面使用 <block/> 控制標簽來組織代碼，在 <block/> 上使用 wx:for 綁定 logs 數(shù)據(jù)，并將 logs 數(shù)據(jù)循環(huán)展開節(jié)點

//logs.jsvar util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {return util.formatTime(new Date(log))
      })
    })
  }
})

運行結(jié)果如下：

4. 手機預(yù)覽（加入開發(fā)者或者運營者可以生成二維碼直接掃碼進入！）

開發(fā)者工具左側(cè)菜單欄選擇"項目"，點擊"預(yù)覽"，掃碼后即可在微信客戶端中體驗。

? ??? WeChat Mini ???? ?? ??? ???? 1? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!