小程序初級開發實踐

以一個天氣小程序展現一下小程序開發的總體流程，使用原生開發，未使用比較流行的（如wepy、mpvue）框架。

前期準備

閱讀小程序官方文檔，熟悉開發者工具。

幾個tips：

1. 開發過程當中，在項目設置裏開啓es6轉es5，關閉域名合法、https等的校驗。
2. 開發結束後，應將項目中使用的網絡請求地址的域名，錄入到小程序的後臺的request合法域名列表中。

開發階段

項目結構

• componnets - 組件文件夾
• images - 圖片文件夾
• pages - 頁面文件夾
• utils - 工具方法
• app.js - 全局註冊小程序實例，綁定生命週期回調函數等
• app.json - 小程序全局配置，如頁面路徑，底部tab欄配置，窗口表現，使用到的插件等
• app.wxss - 全局樣式文件，全部頁面通用。
• project.config.json - 開發者工具配置文件。

小程序的每一個頁面都由以下四個文件構成：

1. 配置代碼JSON文件 - 單個頁面的配置文件，可配置窗口背景、導航欄顏色、自定義組件等。
   
2. 模板代碼 WXML 文件 - 小程序自帶的類html模板，有相似vue的數據綁定和if/else、for等控制能力。
   
3. 樣式代碼 WXSS文件 - 局部樣式文件，只對該頁面生效。
   
4. 邏輯代碼JavaScript文件 - 調用Page方法註冊頁面實例，指定頁面的初始數據、生命週期回調和事件處理函數等。

生命週期

• 小程序生命週期（執行順序由上往下）

onLaunch() {
  console.log('onLaunch監聽小程序初始化');
}

onShow() {
  console.log('onShow監聽小程序顯示');
}

onHide() {
  console.log('onLaunch監聽小程序隱藏');
}
複製代碼

• 頁面生命週期（執行順序由上往下）

onLoad(options) {
    console.log('onLoad監聽頁面加載');
  }

  onReady() {
    console.log('onReady監聽頁面初次渲染完成');
  }

  onShow() {
    console.log('onShow監聽頁面顯示');
  }

  onHide() {
    console.log('onHide監聽頁面隱藏');
  }

  onUnload() {
    console.log('onUnload監聽頁面卸載');
  }複製代碼

通常狀況下，小程序的生命週期函數執行先於頁面的生命週期函數。

自定義組件

組件文件相似頁面結構，也有四個文件。

1.  json 文件中進行自定義組件聲明

   {
     "component": true
   }
   複製代碼

2. wxml文件

   <view>
   <view class="inner">{{innerText}}</view>
   <slot></slot></view>複製代碼

3. wxss文件

   .inner {
     color: red;
   }複製代碼

4. js文件，使用 Component() 來註冊組件，並提供組件的屬性定義、內部數據和自定義方法

   Component({
     properties: {
       // 這裏定義了innerText屬性，屬性值能夠在組件使用時指定
       innerText: {
         type: String,
         value: 'default value',
       }
     },
     data: {
       // 這裏是一些組件內部數據
       someData: {}
     },
     methods: {
       // 這裏是一個自定義方法
       customMethod() {}
     }
   })複製代碼

幾個tips：

1. wxml中{{}}沒法調用js中的方法，但可以使用小程序自身的 wxs 腳本中的方法。
2. wxss擁有大部分css特性，有兩點區別於css。
• 尺寸單位-rpx（根據屏幕寬度自適應。小程序規定屏幕寬度爲750rpx，即對於寬度爲750的設計稿，1rpx對應1px）
• 樣式導入-import（可導入其餘wxss文件）

全局變量

小程序提供了globalData來存儲全局通用數據。

1. 在app.js內聲明全局變量

   globalData: {    userInfo: null,    city: ""  }複製代碼

2. 在其餘頁面獲取或修改全局變量

   const app = getApp();
   
   app.globalData.userName = "Tom"複製代碼

狀態管理

小程序經過頁面或組件各自的 setData 再加上父子、兄弟間等等組件間的通信會讓代碼很亂，若是再加上跨頁面之間的組件通信，會讓程序很是難維護和調試。

小程序的工程化已經作得十分完善，目前最大的痛點就在於狀態管理和跨頁通信了。

介紹下騰訊開源的一款狀態管理解決方案---Westore。

以天氣小程序爲例。

城市爲首頁和搜索頁都控制的數據。

1. 定義一個全局store：stroe.js（curcity初始值爲null）

   
   

2. 首頁獲取位置信息，更新curcity，獲取天氣數據

3. 搜索頁，輸入城市，更新curcity，回到首頁

   
   

4. 首頁監聽curcity變化，從新獲取天氣信息

   
   

開發完成

當小程序開發完成，真機調試結束後，即可以上上傳咱們的代碼至微信服務器。固然開發者工具也提供了git來管理咱們的代碼。

代碼上傳完畢後，可登陸微信公衆平臺小程序模塊，管理 -> 版本管理頁面，提交審覈咱們的代碼版本，待審覈完畢後，即可發佈咱們的小程序，也可延遲提交審覈咱們的代碼，先將代碼設爲體驗版本，再經過 管理 -> 成員管理 設置咱們的微信好友進行小規模體驗測試。

關於雲開發

開發者無需搭建服務器，就可根據提供的api進行核心業務的後端開發工做。

目前提供三大基礎能力支持：
雲函數：能夠認爲就是後端函數，微信私有協議自然鑑權，開發者只需編寫自身業務邏輯代碼
數據庫：一個既可在小程序前端操做，也能在雲函數中讀寫的 JSON 數據庫
文件存儲：在小程序前端直接上傳/下載雲端文件，在雲開發控制檯可視化管理

優勢： 雲開發小程序，經過提供客戶端 API 的方式，封裝了不少服務處理和管理維護的過程，使得服務架構對小程序開發者的門檻大大下降。開發者只須要使用 Javascript 一種語言，結合提供的 API，能夠完成小程序的開發、服務的業務邏輯編寫、數據管理、用戶管理，也省去了不少系統安全、服務搭建、性能維護等工做。