官方教程

本文檔將帶你創(chuàng)建完成一個微信小程序，并可以在手機上體驗該小程序的實際效果再沧。這個小程序的首頁將會顯示歡迎語以及當前用戶的微信頭像炒瘸，點擊頭像，可以在新開的頁面中查看當前小程序的啟動日志拐邪。

1.獲取微信小程序的 AppID

2.創(chuàng)建項目

項目創(chuàng)建成功后，我們就可以點擊該項目扎阶，進入并看到完整的開發(fā)者工具界面，點擊左側(cè)導(dǎo)航，在「編輯」里可以查看和編輯我們的代碼啡邑，在「調(diào)試」里可以測試代碼并模擬小程序在微信客戶端效果井赌，在「項目」里可以發(fā)送到手機里預(yù)覽實際效果。

3.編寫代碼

最關(guān)鍵的流部，是 app.js纹坐、app.json耘子、app.wxss 這三個。其中:

• .js 后綴的是腳本文件
• .json 后綴的文件是配置文件
• .wxss 后綴的是樣式表文件绒障。

微信小程序會讀取這些文件捍歪，并生成小程序?qū)嵗?/p>

app.js

app.js 是小程序的腳本代碼糙臼。我們可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量焚鹊。調(diào)用 MINA 提供的豐富的 API韧献，如本例的同步存儲及同步讀取本地數(shù)據(jù)。

//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

app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成探橱，配置小程序的窗口背景色，配置導(dǎo)航條樣式哗讥，配置默認標題胞枕。注意該文件不可添加任何注釋腐泻。

{

  "pages":[
      "pages/index/index",   
    "pages/logs/logs"
  ],

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

app.wxss

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

.container {

    height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center; 
      justify-content: space-between;
      padding: 200rpx 0;
      box-sizing: border-box;
}

4.創(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)文件：

<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來搭建頁面結(jié)構(gòu)倦零，綁定數(shù)據(jù)和交互處理函數(shù)。

index.js 是頁面的腳本文件

在這個文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)吨悍、獲取小程序?qū)嵗暶鞑⑻幚頂?shù)據(jù)，響應(yīng)頁面交互事件等育瓜。

//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
          })
    })
 }
})

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-items="{{logs}}" 
           wx:for-item="log"> 
        <text class="log-item">{{index + 1}}. {{log}}</text> 
    </block> 
</view>

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

logs頁面腳本

//logs.js
var 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ā)者工具左側(cè)菜單欄選擇「項目」，點擊「預(yù)覽」工猜，掃碼后即可在微信客戶端中體驗缤剧。

不過，目前域慷，預(yù)覽和上傳功能尚無法實現(xiàn)荒辕，需要等待微信官方的下一步更新汗销。

微信應(yīng)用開放的服務(wù)和組件包含如下：

• 視圖容器：視圖(View)、滾動視圖抵窒、Swiper
• 基礎(chǔ)內(nèi)容：圖標弛针、文本、進度條
• 表單組件：按鈕李皇、表單等等
• 操作反饋
• 導(dǎo)航
• 媒體組建：音頻削茁、圖片、視頻掉房。
• 地圖
• 畫布
• 文件操作能力
• 網(wǎng)絡(luò)：上傳下載能力茧跋、WebSocket
• 數(shù)據(jù)：數(shù)據(jù)緩存能力
• 位置：獲取位置、查看位置
• 設(shè)備：網(wǎng)絡(luò)狀態(tài)卓囚、系統(tǒng)信息瘾杭、重力感應(yīng)、羅盤
• 界面：設(shè)置導(dǎo)航條哪亿、導(dǎo)航粥烁、動畫、繪圖等等
• 開放接口：登錄蝇棉，包括簽名加密讨阻，用戶信息、微信支付篡殷、模板消息