Taro 小程序實戰技術摘要

React

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

Taro

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

使用 Taro，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節跳動小程序、H5、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有嚴格的要求，基於接口規範編碼。

放入Swagger文件

執行轉化命令

sudo api-cli MINI js

得到api請求配置文件

代碼中使用

開發適配

在自動生成api請求文件後，需要更改一些配置才能在於小程序之中運行,所以我們做了以下適配：

小程序請求
- Taro.request 適配微信、支付寶小程序請求
全局請求頭添加
- userToken 用來識別用戶身份信息
- branch 後端服務路徑分支名稱
- clientType 小程序平臺名稱
- version 當前程序版本
測試調試工具
- baseURL 更改全局請求地址
- branch 更改請求頭分支名
- clear 清除緩存數據

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

資源優化

由於官方的限制，一個小程序的代碼包括資源文件大小不能超過2M，在真實迭代情況下，隨着業務的增加，功能的改變，2M大小對我們來說可能很快就要超出，我們採用以下方案：

代碼分包

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

圖片資源遠端保存

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

代碼壓縮

代碼運行終究是機器做的事，只是順便讓我們程序員看看，所以在我們編譯代碼的同時對其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 文件、統一請求封裝和自定義請求頭、處理多端授權用戶信息等，還有很多技術和流程的細節，容我後續再跟大家慢慢講解。

Taro 小程序實戰技術摘要

Taro 小程序實戰技術摘要

React

Taro

TypeScript

GitFlow

VsCode + 插件

代碼檢查

爲什麼需要代碼檢查

UI設計協作

框架搭建

全局配置文件

通過Swagger文檔生成API文件

開發適配

資源優化

線上代碼報錯日誌 fundebug

數據採集

結語

Taro 小程序實戰技術摘要

Taro 簡介

React 簡介

【5+App】第三方分享的思路

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結