微信應用號來了，微信小程序開發教程！

時間 2019-11-11

標籤微信應用程序開發教程简体版

原文原文鏈接

關注，QQ羣，微信應用號社區 511389428，511389428

微信應用開放的服務和組件包含以下：

視圖容器：視圖(View)、滾動視圖、Swiper
基礎內容：圖標、文本、進度條
表單組件：按鈕、表單等等
操做反饋
導航
媒體組建：音頻、圖片、視頻。
地圖
畫布
文件操做能力
網絡：上傳下載能力、WebSocket
數據：數據緩存能力
位置：獲取位置、查看位置
設備：網絡狀態、系統信息、重力感應、羅盤
界面：設置導航條、導航、動畫、繪圖等等
開放接口：登陸，包括簽名加密，用戶信息、微信支付、模板消息

審覈：

根據《微信小程序平臺服務協議》，裏面有關描述以下：javascript

2.4 爲確保微信小程序平臺、微信公衆平臺、其餘用戶等各方的安全、穩定及良好的用戶體驗，騰訊將對須要發佈的小程序進行發佈審覈。css

「發佈審覈」是指由用戶發起，將其完成初始化開發的小程序提交至騰訊，由騰訊自行或委託第三方對該小程序的合法性、合理性、安全性、穩定性、可操做性、用戶體驗等各方面，採用包括但不限於開發信息覈對、安全測試、UI測試、隨機測試、動態測試、安全測試等方式，進行審查、甄別、試驗與評估的過程。發佈審覈結果包括審覈經過與審覈不經過兩種。審覈不經過的，該小程序將沒法發佈。html

以後小程序的審覈極有可能採起和App store相似的策略，但相比微信其餘平臺的審覈，各位嚴格和複雜。java

教程：

微信應用號（小程序，「應用號」的新稱呼）終於來了！目前還處於內測階段，微信只邀請了部分企業參與封測。想必你們都關心應用號的最終形態究竟是什麼樣子？怎樣將一個「服務號」改形成爲「小程序」？咱們暫時以一款簡單的第三方工具的實例，來演示一下開發過程吧。web

OK，爲了讓你們儘快看到這份教程，博卡君註定要熬夜了！今晚開始更新，但願明天一早就能發佈第一篇教程！記錄開始！看看幾天能完成變身吧！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，如本例的同步存儲及同步讀取本地數據。

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

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

4.建立頁面

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

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

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>

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

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

//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是頁面的樣式表：

/**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的頁面結構

<!--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 數據循環展開節點

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

運行結果以下：

5.手機預覽

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

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

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

第一章：準備工做

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

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

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

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

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

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

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

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

第二章：項目構架

微信目前用戶羣體很是龐大，微信推出公衆號之後，火爆程度你們都看獲得，也一樣推進着 Html 5 的高速發展，隨着公衆號業務的需求愈來愈複雜，應用號如今的到來也是恰到好處。

博卡君發現，微信提供給開發者的方式也在發生全面的改變：從操做 DOM 轉爲操做數據，基於微信提供的一個過橋工具實現不少 Html 5 在公衆號很難實現的功能，有點相似於 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()：關閉當前頁面，回退前一頁面。

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