微信小程序開發教程-微信小程序入門

轉自http://blog.jobbole.com/106049/html

 

 

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

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

咱們暫時以一款簡單的第三方工具的實例，來演示一下開發過程吧——小程序

序言

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

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

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，如本例的同步存儲及同步讀取本地數據。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

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

1 2 3 4 5 6 7 8 9 10 11 12

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

app.wxss 是整個小程序的公共樣式表。咱們能夠在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則。

1 2 3 4 5 6 7 8 9 10

/**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 是頁面的結構文件：

1 2 3 4 5 6 7 8 9 10

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

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

index.wxss 是頁面的樣式表：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

/**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 中指定的樣式規則。

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

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

logs 的頁面結構

 

1 2 3 4 5 6

<!--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 頁面使用 控制標籤來組織代碼，在 上使用 wx:for-items 綁定 logs 數據，並將 logs 數據循環展開節點

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

運行結果以下：

4. 手機預覽

開發者工具左側菜單欄選擇「項目」，點擊「預覽」，掃碼後便可在微信客戶端中體驗。

目前，預覽和上傳功能尚沒法實現，須要等待微信官方的下一步更新。

如你所見，微信官方給出的開發指南還很是簡單，不少細節、代碼和功能都沒有明確的展現，因此接下來就到博卡君展現實力的時候啦！開發教程正式開始！

第一章：準備工做

作好準備工做很重要。開發一個微信應用號，你須要提早到微信的官方網站（weixin.qq.com）下載開發者工具。

1. 下載最新微信開發者工具，打開後你會看到該界面：

2. 點擊「新建 web+」項目，隨後出現以下畫面：

3. 該頁面內的各項內容須要注意——

• AppID：依照官方解釋來填。
• Appname: 項目最外層文件夾名稱，如你將其命名爲「ABC」，則以後的所有項目內容均將保存在「/ABC/…」目錄下。
• 本地開發目錄：項目存放在本地的目錄。

注：再次強調，若是你和團隊成員共同開發該項目，則建議大家使用一樣的目錄名稱及本地目錄，以確保協同開發的統一性。若是你以前已有項目，則導入過程與以上內容近似，再也不贅述。

4. 準備工做所有完成後，點擊「新建項目」按鈕，彈出框點「肯定」。

5. 如上圖所示，此刻，微信開發者工具已經爲你自動構建了一個初始的 demo 項目，該項目內包含了一個微信應用項目所需具有的基本內容和框架結構。點擊項目名稱（圖中即「cards」）進入該項目，就能看到整個項目的基本架構了：

第二章：項目構架

微信目前用戶羣體很是龐大，微信推出公衆號之後，火爆程度你們都看獲得，也一樣推進着 h5 的高速發展，隨着公衆號業務的需求愈來愈複雜，應用號如今的到來也是恰到好處。咱們團隊具體看了一兩次文檔後發現，它提供給開發者的方式也在發生全面的改變，從操做 DOM 轉爲操做數據，基於微信提供的一個過橋工具實現不少 h5 在公衆號很難實現的功能，有點相似於 hybrid 開發，不一樣於 hybrid 開發的方式是：微信開放的接口更爲嚴謹，結構必須採用他提供給咱們的組件，外部的框架和插件都不能在這裏使用上，讓開發者徹底脫離操做 DOM，開發思想轉變很大。

工欲善其事，必先利其器。理解它的核心功能很是重要，先了解它的整個運做流程。

生命週期：

在index.js裏面：

開發者工具上 Console 能夠看到：

在首頁 console 能夠看出順序是 App Launch–>App Show–>onload–>onShow–>onReady。

首先是整個 app 的啓動與顯示，app 的啓動在 app.js 裏面能夠配置，其次再進入到各個頁面的加載顯示等等。

能夠想象到這裏能夠處理不少東西了，如加載框之類的均可以實現等等。

路由：

路由在項目開發中一直是個核心點，在這裏其實微信對路由的介紹不多，可見微信在路由方面通過很好的封裝，也提供三個跳轉方法。

wx.navigateTo(OBJECT)：保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack能夠返回到原頁面。

wx.redirectTo(OBJECT)：關閉當前頁面，跳轉到應用內的某個頁面。

wx.navigateBack()：關閉當前頁面，回退前一頁面。

這三個基本上使用足夠，在路由方面微信封裝的很好，開發者根本不用去配置路由，每每不少框架在路由方面配置很繁瑣。

組件：

這次微信在組件提供方面也是很是全面，基本上知足項目需求，故而開發速度很是快，開發前能夠認真瀏覽幾回，開發效率會很好。

其它：

任何外部框架以及插件基本上沒法使用，就算原生的 js 插件也很難使用，由於之前咱們的 js 插件也基本上所有是一操做 dom 的形式存在，而微信應用號這次的架構是不容許操做任何 dom，就連之前咱們習慣使用的動態設置的rem.js也是不支持的。

這次微信還提供了 WebSocket，就能夠直接利用它作聊天，能夠開發的空間很是大。

跟公衆號對比咱們發現，開發應用號組件化，結構化，多樣化。新大陸老是充滿着驚喜，更多的彩蛋等着你們來發現。

接下來開始搞一些簡單的代碼了！

1. 找到項目文件夾，導入你的編輯器裏面。在這裏，我使用了 Sublime Text 編輯器。你能夠根據本身的開發習慣選擇本身喜歡的編輯器。

2. 接下來，你須要根據本身的項目內容調整項目結構。在範例項目中，「card_course」目錄下面主要包含了「tabBar」頁面以及該應用的一些配置文件。

3. 示例項目的「tabBar」是五個菜單按鈕：

4. 找到「app.json」文件，用來配置這個五個菜單。在代碼行中找到「」tabBar」」：

你能夠根據實際項目需求更改，其中：

• 「Color」是底部字體顏色，「selectedColor」是切換到該頁面高亮顏色，「borderStyle」是切換菜單上面的一條線的顏色，「backgroundColor」是底部菜單欄背景顏色。文字描述較爲抽象，建議你一一調試並查看其效果，加深印象。
• 「「list」」下的代碼順序必須依次放置，不能隨便更改。
• 「」pagePath」」以後的文件名內，「.wxml」後綴被隱藏起來了，這是微信開發代碼中人性化的一點——幫你節約寫代碼的時間，無須頻繁聲明文件後綴。
• 「」iconPath」」爲未得到顯示頁面的圖標路徑，這兩個路徑能夠直接是網絡圖標。
• 「」selectedIconPath」」爲當前顯示頁面高亮圖標路徑，能夠去掉，去掉以後會默認顯示爲「」iconPath」」的圖標。
• 「」Text」」爲頁面標題，也能夠去掉，去掉以後純顯示圖標，如只去掉其中一個，該位置會被佔用。

注意：微信的底部菜單最多支持五欄（五個 icons），因此在你設計微信應用的 UI 和基本架構時就要預先考慮好菜單欄的排布。

5. 根據以上代碼規則，我作好了示例項目的基本架構，供你參考：

 

6. 「Json」文件配置好後，「card_course」的基本結構入上圖所示，不須要的子集均可以暫時刪除，缺乏的子集則須要你主動新建。刪除子集時記得順帶檢查一下「app.json」裏的相關內容是否已經一併刪除。

注意：我我的建議你新建一個「wxml」文件的同時，把對應的「js」和「wxss」文件一塊兒新建好，由於微信應用號的配置特色就是解析到一個「wxml」文件時，會同時在同級目錄下找到同文件名的「js」和「wxss」文件，因此「js」文件需及時在「app.json」裏預先配置好。

編寫「wxml」時，根據微信應用號提供的接口編碼便可，大部分就是之前的「div」，而咱們如今就用「view」便可。須要用其它子集時，能夠根據微信提供的接口酌情選擇。

使用「class」名來設置樣式，「id」名在這裏基本沒有什麼用處。主要操做數據，不操做「dom」。

7. 以上是示例項目首頁的「wxml」編碼。從圖中就能夠看出，實現一個頁面代碼量很是少。

8. 「Wxss」文件是引入的樣式文件，你也能夠直接在裏面寫樣式，示例中採用的是引入方式：

 

9. 修改代碼後刷新一次，能夠看到未設背景的「view」標籤直接變成了粉色。

注意：修改「wxml」和「wxss」下的內容後，直接 F5 刷新就能直接看到效果，修改「js」則需點擊重啓按鈕才能看到效果。

10. 另外，公共樣式能夠在「app.wxss」裏直接引用。

 

11. 「Js」文件須要在「app.json」文件的「」page」」裏預先配置好。爲了項目結構清晰化，我在示例項目中的「index」首頁同級目錄新建其它四個頁面文件，具體以下：

通過以上步驟，案例中的五個底部菜單就所有配置完畢了。