微信小程序開發教程

程序猿們微信小程序時代來了！乾貨:微信應用號開發教程

字數2030 閱讀3774 評論5 喜歡4

微信應用號開發教程

可持續發佈更新微信應用號相關資料，對微信應用號感興趣的開發者可加羣:159134802共同窗習分享。

——第一篇

微信應用號（小程序，「應用號」的新稱呼）終於來了！

目前還處於內測階段，微信只邀請了部分企業參與封測。想必你們都關心應用號的最終形態究竟是什麼樣子？怎樣將一個「服務號」改形成爲「小程序」？

咱們暫時以一款簡單的第三方工具的實例，來演示一下開發過程吧。（公司的項目保密還不能分享代碼和截圖。小白是邊加班邊偷偷給你們寫教程。感謝「名片盒」團隊提供他們的服務號來動這個手術，因此小白的教程就用「名片盒」的公衆號滾動更新發布吧）

OK，爲了讓你們儘快看到這份教程，小白註定要熬夜了！今晚開始更新，但願明天一早就能發佈第一篇教程！記錄開始！看看幾天能完成變身吧！

序言

開始開發應用號以前，先看看官方公佈的「小程序」教程吧！（如下內容來自微信官方公佈的「小程序」開發指南）

本文檔將帶你一步步建立完成一個微信小程序，並能夠在手機上體驗該小程序的實際效果。這個小程序的首頁將會顯示歡迎語以及當前用戶的微信頭像，點擊頭像，能夠在新開的頁面中查看當前小程序的啓動日誌。

1. 獲取微信小程序的 AppID

首先，咱們須要擁有一個賬號，若是你能看到該文檔，咱們應當已經邀請併爲你建立好一個賬號。注意不可直接使用服務號或訂閱號的 AppID。 利用提供的賬號，登陸 https://mp.weixin.qq.com ，就能夠在網站的「設置」-「開發者設置」中，查看到微信小程序的 AppID 了。

注意：若是咱們不是用註冊時綁定的管理員微信號，在手機上體驗該小程序。那麼咱們還須要操做「綁定開發者」。即在「用戶身份 - 開發者」模塊，綁定上須要體驗該小程序的微信號。本教程默認註冊賬號、體驗都是使用管理員微信號。

2. 建立項目

咱們須要經過開發者工具，來完成小程序建立和代碼編輯。

開發者工具安裝完成後，打開並使用微信掃碼登陸。選擇建立「項目」，填入上文獲取到的 AppID，設置一個本地項目的名稱（非小程序名稱），好比「個人第一個項目」，並選擇一個本地的文件夾做爲代碼存儲的目錄，點擊「新建項目」就能夠了。

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

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

3. 編寫代碼

點擊開發者工具左側導航的「編輯」，咱們能夠看到這個項目，已經初始化幷包含了一些簡單的代碼文件。最關鍵也是必不可少的，是 app.js、app.json、app.wxss 這三個。其中，.js 後綴的是腳本文件，.json 後綴的文件是配置文件，.wxss 後綴的是樣式表文件。微信小程序會讀取這些文件，並生成小程序實例。

下面咱們簡單瞭解這三個文件的功能，方便修改以及從頭開發本身的微信小程序。

app.js 是小程序的腳本代碼。咱們能夠在這個文件中監聽並處理小程序的生命週期函數、聲明全局變量。調用 MINA 提供的豐富的 API，如本例的同步存儲及同步讀取本地數據。

//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.json 是對整個小程序的全局配置。咱們能夠在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口  背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何註釋。

/**app.json*/

{

 "pages":[

   "pages/index/index",

   "pages/logs/logs"

 ],

 "window":{

   "backgroundTextStyle":"light",

   "navigationBarBackgroundColor": "#fff",

   "navigationBarTitleText": "WeChat",

   "navigationBarTextStyle":"black"

 }

}

app.wxss 是整個小程序的公共樣式表。咱們能夠在頁面組件的 class 屬性上直接使用 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;

}

3. 建立頁面

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

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

index.wxml 是頁面的結構文件：

{{userInfo.nickName}}{{motto}}

本例中使用了 、 來搭建頁面結構，綁定數據和交互處理函數。

index.js 是頁面的腳本文件，在這個文件中咱們能夠監聽並處理頁面的生命週期函數、獲取小程序實例，聲明並處理數據，響應頁面交互事件等。

可持續發佈更新微信應用號相關資料，對微信應用號感興趣的開發者可加羣:159134802共同窗習分享

（引用http://www.jianshu.com/p/ab3bd73496b9?utm_campaign=haruki&utm_content=note&utm_medium=reader_share&utm_source=qq）