微信小程序開發的基本流程

一,微信小程序簡介

1,微信小程序簡稱小程序，張小龍在微信公開課 Pro 上發布的小程序正式上線，時間是2017年1月9日。

2,微信小程序這個詞可以分解為“微信”和“小程序”兩部分

(1),其中“微信”可以理解為“微信中的”，指的是小程序的執行環境；當然微信在提供執行環境的同時也延長了用戶使用微信的時間。

(2),“小程序”是說它首先是程序，然后具備輕便的特征。小程序並不像其他應用那樣，它不需要安裝，而是通過掃描二維碼等打開后直接執行；用完以后也不需要卸載。這就是所謂用完即走的原則。

3,微信小程序，很多類似形態的應用都采用類似的架構：

• 使用 JSON 技術來表現應用的配置信息。包含應用的基本信息，頁面配置和路由，應用全體的信息等。
• 使用經過定制 CSS+XML 技術來實現視圖層的描述。畫面元素，例如列表、按鈕、文本框、選擇框等都通過 XML 語言來描述，遵從 XML 語法，對於頁面的共同風格，使用 CSS 進行定義。
• 使用 JavaScript 語言來實現邏輯層結構。包括用戶操作的處理，系統 API 的調用等。
• 架構在視圖層和邏輯層之間提供數據和事件傳輸功能，從而盡量減少難度。由於類似應有都屬於輕應用，所以提供的功能都比較單一。

4,JSON（JavaScript Object Notation）是一種輕量級的數據交換格式。它基於 ECMAScript（W3C 制定的 JavaScript 規范）的一個子集，采用完全獨立於編程語言的文本格式來存儲和表示數據。簡潔和清晰的層次結構使得 JSON 成為理想的數據交換語言。易於人閱讀和編寫，同時也易於機器解析和生成，並有效地提升網絡傳輸效率。

5,XML（Extensible Markup Language），中文名為可擴展標記語言，標准通用標記語言的子集，是一種用於標記電子文件使其具有結構性的標記語言。

在電子計算機中，標記指計算機所能理解的信息符號，通過此種標記，計算機之間可以處理包含各種的信息，比如文章等。它可以用來標記數據、定義數據類型，是一種允許用戶對自己的標記語言進行定義的源語言。它非常適合萬維網傳輸，提供統一的方法來描述和交換獨立於應用程序或供應商的結構化數據。是 Internet 環境中跨平台的、依賴於內容的技術，也是當今處理分布式結構信息的有效工具。早在1998年，W3C 就發布了 XML1.0 規范，使用它來簡化 Internet 的文檔信息傳輸。

6,CSS層疊樣式表（英文全稱：Cascading Style Sheets）是一種用來表現 HTML 或 XML 等文件樣式的計算機語言。CSS 不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。

7,JavaScript 一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為 JavaScript 引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在 HTML 網頁上使用，用來給 HTML 網頁增加動態功能。

二,注冊微信小程序

在創建自己的微信小程序之前,首先需要注冊小程序賬號,有如下賬號類型：

具體的注冊流程,可以參考官方的簡易教程

 

三,安裝工具,創建項目

第一步：下載微信小程序開發者工具並安裝，下載路徑：

 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

進到下載界面后，根據自己的操作系統選擇相應的鏈接進行下載，下載完成后進行安裝。

第二步：安裝登錄工具

開發者工具安裝完成后我們就可以將其打開，初次打開會需要用微信掃碼登錄，如下圖，用手機微信掃一掃后確認登錄就可以了。

第三步：選擇一個項目類型

登錄成功后，如果是第一次使用該工具會彈出選擇項目類型的窗口，如下圖：

第四步：創建一個項目

選擇項目類型成功后，會彈出創建項目的窗口，如下圖：

​ 在創建過程中，如果選擇的本地文件夾是個空文件夾會出來一個勾選項“建立雲開發快速啟動模版”，為方便初學者了解微信小程序的基本代碼結構，請勾選此項，勾選后，開發者工具會幫助我們在開發目錄里生成一個簡單的 demo，如下圖：

四,項目代碼結構說明與開發

4.1,項目代碼結構

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

下面我們簡單了解這三個文件的功能，方便修改以及從頭開發自己的微信小程序。

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

2、​ app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何注釋。

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

　　我們注意到，在實例程序的代碼中還有2個文件夾，一個是pages,一個是style,其中style是放通用樣式的一個文件夾，pages是存放所有頁面的文件夾。我們着重講一下這個pages.

4.2,小程序頁面文件構成

　在這個示例中，我們有七個頁面，index 頁面，即歡迎頁，他們都在 pages 目錄下。微信小程序中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中，且 pages 中的第一個頁面是小程序的首頁。

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

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

<!--index.wxml-->
<view class="container">

  <!-- 用戶 openid -->
  <view class="userinfo">
    <button 
      open-type="getUserInfo" 
      bindgetuserinfo="onGetUserInfo"
      class="userinfo-avatar"
      style="background-image: url({{avatarUrl}})"
    ></button>
    <view>
      <text>jackson影琪</text>
</view> 
</view> 

<view class="text-title">
      <text>Hello world</text>
</view>  
</view>

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

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

//index.js
const app = getApp()

Page({
  data: {
    avatarUrl: './user-unlogin.png',
    userInfo: {},
    logged: false,
    takeSession: false,
    requestResult: ''
  },

  onLoad: function() {
    if (!wx.cloud) {
      wx.redirectTo({
        url: '../chooseLib/chooseLib',
      })
      return
    }

    // 獲取用戶信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框
          wx.getUserInfo({
            success: res => {
              this.setData({
                avatarUrl: res.userInfo.avatarUrl,
                userInfo: res.userInfo
              })
            }
          })
        }
      }
    })
  },

  onGetUserInfo: function(e) {
    if (!this.logged && e.detail.userInfo) {
      this.setData({
        logged: true,
        avatarUrl: e.detail.userInfo.avatarUrl,
        userInfo: e.detail.userInfo
      })
    }
  },

  onGetOpenid: function() {
    // 調用雲函數
    wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        console.log('[雲函數] [login] user openid: ', res.result.openid)
        app.globalData.openid = res.result.openid
        wx.navigateTo({
          url: '../userConsole/userConsole',
        })
      },
      fail: err => {
        console.error('[雲函數] [login] 調用失敗', err)
        wx.navigateTo({
          url: '../deployFunctions/deployFunctions',
        })
      }
    })
  },

  // 上傳圖片
  doUpload: function () {
    // 選擇圖片
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {

        wx.showLoading({
          title: '上傳中',
        })

        const filePath = res.tempFilePaths[0]
        
        // 上傳圖片
        const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            console.log('[上傳文件] 成功：', res)

            app.globalData.fileID = res.fileID
            app.globalData.cloudPath = cloudPath
            app.globalData.imagePath = filePath
            
            wx.navigateTo({
              url: '../storageConsole/storageConsole'
            })
          },
          fail: e => {
            console.error('[上傳文件] 失敗：', e)
            wx.showToast({
              icon: 'none',
              title: '上傳失敗',
            })
          },
          complete: () => {
            wx.hideLoading()
          }
        })

      },
      fail: e => {
        console.error(e)
      }
    })
  },

})

index.wxss 是頁面的樣式表：

/**index.wxss**/

page {
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.userinfo, .uploader, .tunnel {
  margin-top: 40rpx;
  height: 140rpx;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-left: none;
  border-right: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: all 300ms ease;
}

.userinfo-avatar {
  width: 100rpx;
  height: 100rpx;
  margin: 20rpx;
  border-radius: 50%;
  background-size: cover;
  background-color: white;
}

.userinfo-avatar:after {
  border: none;
}

.userinfo-nickname {
  font-size: 32rpx;
  color: #007aff;
  background-color: white;
  background-size: cover;
}

.userinfo-nickname::after {
  border: none;
}

.uploader, .tunnel {
  height: auto;
  padding: 0 0 0 40rpx;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}

.uploader-text, .tunnel-text {
  width: 100%;
  line-height: 52px;
  font-size: 34rpx;
  color: #007aff;
}

.uploader-container {
  width: 100%;
  height: 400rpx;
  padding: 20rpx 20rpx 20rpx 0;
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.uploader-image {
  width: 100%;
  height: 360rpx;
}

.tunnel {
  padding: 0 0 0 40rpx;
}

.tunnel-text {
  position: relative;
  color: #222;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.tunnel-text:first-child {
  border-top: none;
}

.tunnel-switch {
  position: absolute;
  right: 20rpx;
  top: -2rpx;
}

.disable {
  color: #888;
}

.service {
  position: fixed;
  right: 40rpx;
  bottom: 40rpx;
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  background: linear-gradient(#007aff, #0063ce);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-content: center;
  justify-content: center;
  transition: all 300ms ease;
}

.service-button {
  position: absolute;
  top: 40rpx;
}

.service:active {
  box-shadow: none;
}

.request-text {
  padding: 20rpx 0;
  font-size: 24rpx;
  line-height: 36rpx;
  word-break: break-all;
}
.text-title{
margin-top: 50%;
}
.text-title text{
  font-size: 96rpx;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用 app.wxss 中指定的樣式規則。

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

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

{
  "pages": [
    "pages/index/index",
    "pages/userConsole/userConsole",
    "pages/storageConsole/storageConsole",
    "pages/databaseGuide/databaseGuide",
    "pages/addFunction/addFunction",
    "pages/deployFunctions/deployFunctions",
    "pages/chooseLib/chooseLib"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "jackson影琪",
    "navigationBarTextStyle": "black"
  }
}

運行結果如下：

手機預覽

​ 開發者工具上側菜單欄，點擊"預覽"，掃碼后即可在微信客戶端中體驗。