1. 取得微信小程式的AppID（注意這裡的AppID是小程式專門的id，可以在登入微信公眾號(hào)的小程式裡面看到，無?AppID某些功能會(huì)受到限制！）

登入??，就可以在網(wǎng)站的「設(shè)定」-「開發(fā)者設(shè)定」中，檢視到微信小程式的AppID 了，注意不可直接使用服務(wù)號(hào)碼或訂閱號(hào)碼的AppID 。

注意：如果要以非管理員微訊號(hào)在手機(jī)上體驗(yàn)該小程序，那麼我們還需要操作「綁定開發(fā)者」。即在「使用者身分」-「開發(fā)者」模組，綁定上需要體驗(yàn)該小程式的微訊號(hào)。本教學(xué)預(yù)設(shè)註冊(cè)帳號(hào)、體驗(yàn)都是使用管理員微訊號(hào)。

2. 創(chuàng)建專案（專案的名稱一般是英文，盡量不使用中文，可能會(huì)報(bào)錯(cuò)）

#我們需要透過開發(fā)者工具，來完成小程序建立和程式碼編輯。

開發(fā)者工具安裝完成後，開啟並使用微信掃碼登入。選擇建立“專案”，填入上文取得到的AppID ，設(shè)定一個(gè)本機(jī)專案的名稱（非小程式名稱），例如“我的第一個(gè)專案”，並選擇一個(gè)本機(jī)的資料夾作為程式碼儲(chǔ)存的目錄，點(diǎn)選「新建項(xiàng)目」就可以了。

為方便初學(xué)者了解微信小程式的基本程式碼結(jié)構(gòu)，在建立過程中，如果選擇的本機(jī)資料夾是個(gè)空資料夾，開發(fā)者工具會(huì)提示，是否需要建立一個(gè) quick start 專案。選擇“是”，開發(fā)者工具會(huì)幫助我們?cè)陂_發(fā)目錄中產(chǎn)生一個(gè)簡單的 demo。

專案創(chuàng)建成功後，我們可以點(diǎn)擊該項(xiàng)目，進(jìn)入並看到完整的開發(fā)者工具介面，點(diǎn)擊左側(cè)導(dǎo)航，在「編輯」裡可以查看和編輯我們的程式碼，在「調(diào)試」裡可以測試程式碼並模擬小程式在微信客戶端效果，在「專案」裡可以發(fā)送到手機(jī)裡預(yù)覽實(shí)際效果。

3. 編寫程式碼（小程式有自己特定的標(biāo)籤）

#建立小程式實(shí)例

點(diǎn)擊開發(fā)者工具左側(cè)導(dǎo)航的“編輯”，我們可以看到這個(gè)項(xiàng)目，已經(jīng)初始化並包含了一些簡單的程式碼檔案。最關(guān)鍵也是不可或缺的，是 app.js、app.json、app.wxss 這三個(gè)。其中，.js後綴的是腳本文件，.json後綴的文件是設(shè)定文件，.wxss後綴的是樣式表檔。微信小程式會(huì)讀取這些文件，並產(chǎn)生小程式實(shí)例。

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

app.js是小程式的腳本程式碼。我們可以在這個(gè)檔案中監(jiān)聽並處理小程式的生命週期函數(shù)、宣告全域變數(shù)。呼叫框架提供的豐富的 API，如本例的同步儲(chǔ)存及同步讀取本機(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 是整個(gè)小程式的全域設(shè)定。我們可以在這個(gè)檔案中配置小程式是由哪些頁面組成，配置小程式的視窗背景色，配置導(dǎo)航條樣式，配置預(yù)設(shè)標(biāo)題。注意該文件不可添加任何註釋。更多可設(shè)定項(xiàng)目可參考配置詳解

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

app.wxss 是整個(gè)小程式的公共樣式表。我們可以在頁面元件的 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;
}

建立頁面

在這個(gè)教學(xué)裡，我們有兩個(gè)頁面，index 頁面和logs 頁面，即歡迎頁和小程式啟動(dòng)日誌的展示頁，他們都在pages 目錄下。微信小程式中的每一個(gè)頁面的【路徑+頁面名稱】都需要寫在 app.json 的 pages 中，且 pages 中的第一個(gè)頁面是小程式的首頁。

每一個(gè)小程式頁面是由同路徑下同名的四個(gè)不同後綴檔案的組成，如：index.js、index.wxml、index.wxss、index.json。 .js後綴的文件是腳本文件，.json後綴的文件是設(shè)定文件，.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/>來建立頁面結(jié)構(gòu)，綁定資料和互動(dòng)處理函數(shù)。

index.js 是頁面的腳本文件，在這個(gè)文件中我們可以監(jiān)聽並處理頁面的生命週期函數(shù)、取得小程式實(shí)例，聲明並處理數(shù)據(jù)，回應(yīng)頁面互動(dòng)事件等。

//index.js//獲取應(yīng)用實(shí)例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ǐn)?shù)據(jù)
    app.getUserInfo(function(userInfo){      //更新數(shù)據(jù)
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

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;
}

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

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

頁面的配置文件是非必要的。當(dāng)有頁面的配置文件時(shí)，配置項(xiàng)在該頁面會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認(rèn)配置。

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/> 控制標(biāo)簽來組織代碼，在 <block/> 上使用 wx:for 綁定 logs 數(shù)據(jù)，并將 logs 數(shù)據(jù)循環(huán)展開節(jié)點(diǎn)

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

運(yùn)行結(jié)果如下：

4. 手機(jī)預(yù)覽（加入開發(fā)者或者運(yùn)營者可以生成二維碼直接掃碼進(jìn)入?。?/h3>

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

以上是微信小程式開發(fā)簡易教程一的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！