Taro 小程序實戰技術摘要

Taro 小程序實戰技術摘要

React

一個用於構建用戶界面的 JAVASCRIPT 庫。採用聲明範式，能夠輕鬆描述應用。經過對DOM的模擬，最大限度地減小與DOM的交互。組件複用，可以很好的應用在大項目的開發中。單向響應的數據流，使得開發變得清晰。

Taro

Taro 是一套遵循 React 語法規範的 多端開發 解決方案。現現在市面上端的形態多種多樣，Web、React-Native、微信小程序等各類端大行其道，當業務要求同時在不一樣的端都要求有所表現的時候，針對不一樣的端去編寫多套代碼的成本顯然很是高，這時候只編寫一套代碼就可以適配到多端的能力就顯得極爲須要。

使用 Taro，咱們能夠只書寫一套代碼，再經過 Taro 的編譯工具，將源代碼分別編譯出能夠在不一樣端（微信/百度/支付寶/字節跳動小程序、H五、React-Native 等）運行的代碼。

TypeScript

TypeScript 是 JavaScript 的一個超集，主要提供了類型系統和對 ES6 的支持，它由 Microsoft 開發，代碼開源於 GitHub 上。

GitFlow

git-flow 是一個 git 擴展集，按 Vincent Driessen 的分支模型提供高層次的庫操做

VsCode + 插件

Visual Studio Code（簡稱VsCode）是一個輕量且強大的代碼編輯器，支持Windows，OS X和Linux。內置JavaScript、TypeScript和Node.js支持，並且擁有豐富的插件生態系統，可經過安裝插件來支持C++、C#、Python、PHP等其餘語言。以及更多豐富便捷的插件庫。

代碼檢查

代碼檢查主要是用來發現代碼錯誤、統一代碼風格。

在 JavaScript 項目中，咱們通常使用 ESLint 來進行代碼檢查。它經過插件化的特性極大的豐富了適用範圍，搭配 typescript-eslint-parser 以後，甚至能夠用來檢查 TypeScript 代碼。

TSLint 與 ESLint 相似，不過除了能檢查常規的 js 代碼風格以外，TSLint 還可以經過 TypeScript 的語法解析，利用類型系統作一些 ESLint 作不到的檢查。

爲何須要代碼檢查

有人會以爲，JavaScript 很是靈活，因此須要代碼檢查。而 TypeScript 已經可以在編譯階段檢查出不少問題了，爲何還須要代碼檢查呢？

由於 TypeScript 關注的重心是類型的匹配，而不是代碼風格。當團隊的人員愈來愈多時，一樣的邏輯不一樣的人寫出來可能會有很大的區別：

• 縮進應該是四個空格仍是兩個空格？
• 是否應該禁用 var？
• 接口名是否應該以 I 開頭？
• 是否應該強制使用 === 而不是 ==？

這些問題 TypeScript 不會關注，可是卻影響到多人協做開發時的效率、代碼的可理解性以及可維護性。

下面來看一個具體的例子：

let myName = 'Tom';

console.log(`My name is ${myNane}`);
console.log(`My name is ${myName.toStrng()}`);
console.log(`My name is ${myName}`)

// tsc 報錯信息：
//
// index.ts(3,27): error TS2552: Cannot find name 'myNane'. Did you mean 'myName'?
// index.ts(4,34): error TS2551: Property 'toStrng' does not exist on type 'string'. Did you mean 'toString'?
//
//
//
// eslint 報錯信息：
//
// /path/to/index.ts
//   3:27  error  'myNane' is not defined         no-undef
//   5:38  error  Missing semicolon               semi
//
// ✖ 2 problems (2 errors, 0 warnings)
//   1 errors, 0 warnings potentially fixable with the `--fix` option.
//
//
//
// tslint 報錯信息：
//
// ERROR: /path/to/index.ts[5, 36]: Missing semicolon

下圖表示了 tsc, eslint 和 tslint 能覆蓋的檢查：

上圖中，tsc, eslint 和 tslint 之間互相都有重疊的部分，也有各自獨立的部分。

雖然發現代碼錯誤比統一的代碼風格更重要，可是當一個項目愈來愈龐大，開發人員也愈來愈多的時候，代碼風格的約束仍是必不可少的。

UI設計協做

藍湖是一款設計圖共享平臺,幫助互聯網團隊管理設計圖。藍湖能夠自動生成標註,與團隊共享設計圖,展現頁面之間的跳轉關係。支持從Sketch一鍵分享、在線討論、自動爲設計圖生成標註，並且只需簡單幾步就能將設計圖變成一個能夠點擊的演示原型，支持分享給同事，讓他也能夠在手機中查看設計效果。藍湖已經成爲新一代產品設計的工做方式。

直接在線編輯和預覽的方式，讓產品與設計師的交流反饋獲得極大的提高，同時開發者能夠獲得詳細的標註，以及不一樣平臺的支持提示，使得開發效率變快。

框架搭建

全局配置文件

（ps: 截圖中的祕鑰配置和配置都是測試，你們看一下大概配置就好）
經過 Config 文件，區分開發、生產環境，動態的編譯代碼後，使用相應正確的配置，還有小程序不一樣的標識，同時保存了微信、支付寶、神策等第三方平臺的密鑰。統一的配置文件能讓後期更好維護。

經過Swagger文檔生成API文件

在需求評審後，先後端人員將會在一塊兒制定接口結構，這點體如今Swagger文檔之中，隨後前端使用腳手架工具把Swagger文檔yaml文件生成可調用的fetch請求文件集成到項目，避免了手動編寫接口代碼的錯誤風險，這點前提是對Swagger有嚴格的要求，基於接口規範編碼。

1. 放入Swagger文件

1. 執行轉化命令

sudo api-cli MINI js

1. 獲得api請求配置文件

1. 代碼中使用

開發適配

在自動生成api請求文件後，須要更改一些配置才能在於小程序之中運行,因此咱們作了如下適配：

• 小程序請求

  • Taro.request 適配 微信、支付寶小程序請求

• 全局請求頭添加

  • userToken 用來識別用戶身份信息
  • branch 後端服務路徑分支名稱
  • clientType 小程序平臺名稱
  • version 當前程序版本

• 測試調試工具

  • baseURL 更改全局請求地址
  • branch 更改請求頭分支名
  • clear 清除緩存數據

以上適配讓小程序的可拓展、可維護性獲得大大提升。

資源優化

因爲官方的限制，一個小程序的代碼包括資源文件大小不能超過2M，在真實迭代狀況下，隨着業務的增長，功能的改變，2M大小對咱們來講可能很快就要超出，咱們採用如下方案：

1. 代碼分包

此方式是官方推薦的方法，經過把不一樣業務代碼資源分離出來，主要的功能先行下載運行，如：主頁商鋪列表、商鋪詳情、訂單列表等，而相對低頻的功能能夠後續異步下載運行，如：退款列表/詳情、會員權益說明等，可是官方仍是限制了最多爲4個分離包，每一個大小限制也爲2M。

1. 圖片資源遠端保存

這是一種經常使用的包大小減少體積的方案，超過30k大小的文件放入阿里雲OSS資源倉庫保存，代碼中使用遠程路徑方式引入，但同時要考慮首屏渲染的平衡

1. 代碼壓縮

代碼運行終究是機器作的事，只是順便讓咱們程序員看看，因此在咱們編譯代碼的同時對其js、css等文件內容壓縮，去除運行中沒必要要的註釋、打印、多餘空格等，同時用編譯環境控制是否開啓壓縮功能，這樣平時開發調試的時候能夠關閉壓縮功能，更好的進行調試、測試、排錯。

線上代碼報錯日誌 fundebug

在真實線上的環境，不免會遇到很隱性的BUG，經過集成fundebug的方式。來檢測到線上程序報錯的信息。

fundebug 能夠快速復現出錯場景，記錄出錯前點擊、頁面跳轉、網絡請求，控制檯打印等信息。經過 Source Map 還原生產環境中的壓縮代碼，提供完整的堆棧信息，準肯定位到出錯源碼，幫助咱們快速修復Bug。

一鍵還原出錯代碼

數據採集

Sensors（神策分析）針對企業級客戶的自助式用戶行爲分析平臺。實時數據採集、建模、分析，驅動市場營銷、產品優化、用戶運營、管理監控。

神策官方提供了小程序的SDK，可是咱們須要配合產品提供的事件和邏輯，本身編寫埋點。

• 埋點事件模型和抽象類

// 點擊優惠券列表
export interface IClickCouponMerchantList extends IClickCoupon {}

// 點擊兌換優惠券
export interface IClickToExChange {}

// 使用商品
export interface IConsume extends IOrder, IMerchant, ICommodity {}

// 點擊小程序首頁banner
export interface IClickMiniBanner {}

// ... 

export interface IStatisEvents {
  ClickCouponMerchantList?: (params: IClickCouponMerchantList) => any
  ClickToExChange?: (params: IClickToExChange) => any
  Consume?: (params: IConsume) => any
  ClickMiniBanner?: (params: IClickMiniBanner) => any
  // ...
}

• 數據採集封裝

interface IStatis extends IStatisEvents {
  sensors: any;
  init: () => any;
  defaultTrack: (eventName: string, eventParams: any) => any;
}
const loadStatisEvent = (statis: Statis): IStatis => {
  return new Proxy(statis, {
    get(obj, prop) {
      const target = obj[prop];
      if (obj.hasOwnProperty(prop)) {
        return target;
      }
      if (!SaConfig.enable) {
        return noop;
      }
      if (typeof target === "function") {
        return target.bind(obj);
      }
      // 默認採集
      return obj.defaultTrack.bind(obj, prop);
    }
  });
};

class Statis implements IStatis {
  public sensors: any;

  constructor(sensors) {
    this.sensors = sensors;
  }

  init() {
    this.sensors.init();
  }

  defaultTrack(eventName: string, eventParams: any) {
    this.sensors.track(eventName, eventParams);
  }

  Login(id: string) {
    this.sensors.login(id);
  }

  RegisterApp(params: IRegisterApp) {
    const param = Object.assign(
      {
        platform: AppConfig.CLENT_TYPE
      },
      params
    );
    this.sensors.registerApp(param);
  }
}

const sa = loadStatisEvent(new Statis(sensors_));

• 事件採集

結語

微信/支付寶 雙端發佈，雖然說是一套代碼，可是作了滿多兼容，主要在兩端受權用戶信息不太同樣，須要封裝統一，再一個是樣式寫的不規範，兩端表現的也不一致。 swagger API文件生成 可調用的 fetch 文件、統一請求封裝和自定義請求頭、處理多端受權用戶信息等，還有不少技術和流程的細節，容我後續再跟你們慢慢講解。