dva+ts+taro 小程序構建-資料總彙

時間 2019-11-08

標籤 dva+ts+taro dva taro 程序構建資料總彙简体版

原文原文鏈接

思路

技術選型
taro+dva+typescript
目錄設計
組件設計
ui設計規範: 抽象ui組件組件props註釋頁面公共交互行爲: 邏輯組件
頁面公共組件: 業務組件
模塊劃分 => 儘可能解藕
view劃分：模塊之間不可相互調用，只能夠經過redux事件通訊
model劃分：抽離業務模塊公共邏輯 a. 公共節點公用model(全局掛載)
b. 不共用節點model(對象合併)
腳本編寫 => 將重複的複製粘貼可完成的代碼抽離編寫腳本自動寫入 a. model，page，component新建腳本
b. actions調用fetch 腳本
utils編寫 oss，map，fetch，storage，format(number,sting,date)，hooks
types 全局state => 保證ts 靜態類型檢查
constants常量
taro方法改寫，全局enum
代碼風格統一配置 => 經過代碼風格統一保證代碼整潔，規範，可維護性和可讀性
.prettierrc ，eslint， tsconfig， readme ，husky

todo

pageModel封裝分頁搜索
全局type掛載整理
全局active 態 css調試
Divider model組件更改
moment map 打包有問題
map 單例 js單例模式的es5實現和es6實現，以及通用惰性單例實現

難點探索

上傳下載圖片 oss base64

骨架屏+上拉刷新+下拉加載分頁+emptyPage+404Page組件處理

登陸攔截和跳轉返回

把這些邏輯寫在model裏，調用只傳 logintype javascript

靜默登錄

// fetch.ts
import Taro from '@tarojs/taro'
/** * 上傳、下載 和普通請求的判斷 todo */
import { checkTokenValid, refreshToken, codeMessage, getStorage } from './index'

// const loginUrl = process.env.login_url;
// const api_url = process.env.api_url;
const api_url = 'https://likecrm-api.creams.io/'
export interface Options {
  header?: HeadersInit
  showToast?: boolean
  noToken?: boolean
  dataType?: String
  data?: any
  responseType?: String
  success?: Function
  fail?: Function
  complete?: Function
  callBack?: Function
}

export default async function fetch<T>( urlSuffix: String, method: String = 'GET', options: Options ): Promise<T> {
  // 設置token
  const defaultOptions: any = {
    header: {},
    noToken: false, // 臨時不用token
    showToast: true,
    data: {},
  }
  const currentOptions = {
    ...defaultOptions,
    ...options,
  }
  // 若是是遊客 不設置token
  const loginType = await getStorage('loginType');
  if (loginType === 'VISITOR') {
    currentOptions.header.Authorization = ``;
    return _fetch<T>(urlSuffix, method, currentOptions)
  }
  if (!currentOptions.noToken) {
    const accessToken = await getStorage('accessToken')
    currentOptions.header.Authorization = `Bearer ${accessToken}`
    const tokenValid = await checkTokenValid()
    // if (tokenValid) {
      return _fetch<T>(urlSuffix, method, currentOptions);
    // }
    // return refreshToken<T>(_fetch, urlSuffix, method, currentOptions)
  }
  return _fetch<T>(urlSuffix, method, currentOptions)
}

// 設置請求頭 不包括 token
const addRequestHeader = async function(requestOption) {
  const methods = ['POST', 'PUT', 'DELETE']
  if (methods.includes(requestOption.method)) {
    // 小程序 沒有 FormData 對象 "application/x-www-form-urlencoded"
    requestOption.header = {
      Accept: 'application/json',
      'content-Type': 'application/json; charset=utf-8',
      ...requestOption.header,
    }
    requestOption.data = JSON.stringify(requestOption.data)
  }
  return requestOption
}

// 過濾請求結果
const checkStatusAndFilter = (response): Promise<any> | undefined => {
  if (response.statusCode >= 200 && response.statusCode < 300) {
    return response.data
  } else {
    const errorText = codeMessage[response.statusCode] || response.errMsg
    const error = response.data.error
    return Promise.reject({ ...response, errorText, error })
  }
}

// 正式請求
async function _fetch<T>( urlSuffix: Request | String, method: String = 'GET', options: Options ): Promise<T> {
  const { showToast = true, ...newOption } = options
  if (showToast) {
    Taro.showLoading({
      title: '加載中',
    })
  }
  const url = `${api_url}${urlSuffix}`
  const defaultRequestOption: Object = {
    url,
    method,
    ...newOption,
  }
  const requestOption = await addRequestHeader(defaultRequestOption)
  try {
    return await Taro.request(requestOption)
      .then(checkStatusAndFilter)
      .then(res => {
        Taro.hideLoading()
        if (newOption.callBack) {
          newOption.callBack(res)
        }
        return res
      })
      .catch(response => {
        // if (response.statusCode === 401) {
        // Taro.hideLoading()
        // return response
        // // 登錄能夠攔截
        // // refreshToken<T>(_fetch, urlSuffix, method, options);
        // } else {
          Taro.hideLoading()
          if (requestOption.showResponse) {
            // 自定義 錯誤結果
            return response
          }
          Taro.showToast({
            title: response.errorText,
            icon: 'none',
            duration: 2000,
          })
          return response.data
        // }
      })
  } catch (e) {
    Taro.hideLoading()
    Taro.showToast({
      title: '代碼執行異常',
      mask: true,
      icon: 'none',
      duration: 2000,
    })
    return Promise.reject()
  }
}

複製代碼

// checkTokenValid.ts
import Taro from '@tarojs/taro'
import { CLIENT_ID, APPROACHING_EFFECTIVE_TIME, TRY_LOGIN_LIMIT } from '@/constants/index'
import {
  setStorageArray,
  getStorageArray,
  removeStorageArray,
  getStorage,
  isError,
  Options,
} from './index'

import {
  PostOauth2LoginRefreshTokenQuery,
  postOauth2LoginRefreshToken,
  postOauth2PlatformLogin,
} from '@/actions/crm-user/UserLogin'

type IRequest<T> = (urlSuffix: Request | string, method: String, options?: Options) => Promise<T>

let delayedFetches: any = [] //延遲發送的請求
let isCheckingToken = false //是否在檢查token
let tryLoginCount = 0 // 嘗試登錄次數

// 檢驗token是否快過時;
const checkTokenValid = async () => {
  const [tokenTimestamp, oldTimestamp, refreshToken] = await getStorageArray([
    'tokenTimestamp',
    'oldTimestamp',
    'refreshToken',
  ])
  const nowTimestamp = Date.parse(String(new Date())) // 當前時間
  const EffectiveTimes = tokenTimestamp ? tokenTimestamp * 1000 : APPROACHING_EFFECTIVE_TIME // 有效時間
  const oldTimes = oldTimestamp ? oldTimestamp : nowTimestamp // 註冊時間
  const valid =
    nowTimestamp - oldTimes <= EffectiveTimes - APPROACHING_EFFECTIVE_TIME && refreshToken
      ? true
      : false
  return valid
}

async function refreshToken<T>( fetchWithoutToken: IRequest<T>, urlSuffix: Request | String, method: String, options?: Options ): Promise<T> {
  return new Promise(async (resolve, reject) => {
    delayedFetches.push({
      urlSuffix,
      method,
      options,
      resolve,
      reject,
    })
    if (!isCheckingToken) {
      isCheckingToken = true
      const refreshTokenStorage = (await getStorage('refreshToken')) as string
      const query: PostOauth2LoginRefreshTokenQuery = {
        clientId: CLIENT_ID,
        refreshToken: refreshTokenStorage,
      }
      postOauth2LoginRefreshToken({
        query,
        noToken: true,
        showResponse: true,
      }).then(async data => {
        const error = isError(data) as any
        if (error) {
          // 登錄態失效報401(token失效的話)，且重試次數未達到上限
          if (
            (error.statusCode < 200 || error.statusCode >= 300) &&
            tryLoginCount < TRY_LOGIN_LIMIT
          ) {
            // 登陸超時 && 從新登陸
            await removeStorageArray([
              'accessToken',
              'refreshToken',
              'tokenTimestamp',
              'oldTimestamp',
              'userId',
            ])
            const loginInfo = await Taro.login()
            const login = async () => {
              try {
                if (tryLoginCount < TRY_LOGIN_LIMIT) {
                  const response = await postOauth2PlatformLogin({
                    query: {
                      clientId: CLIENT_ID,
                      code: loginInfo.code,
                      loginType: 'OFFICIAL',
                    },
                    body: {},
                    noToken: true,
                  })
                  const userAccessTokenModel = response.userAccessTokenModel
                  const oldTimestamp = Date.parse(String(new Date()))
                  await setStorageArray([
                    {
                      key: 'accessToken',
                      data: userAccessTokenModel!.access_token,
                    },
                    {
                      key: 'refreshToken',
                      data: userAccessTokenModel!.refresh_token,
                    },
                    {
                      key: 'tokenTimestamp',
                      data: userAccessTokenModel!.expires_in,
                    },
                    { key: 'oldTimestamp', data: oldTimestamp },
                  ])
                  tryLoginCount = 0
                } else {
                  Taro.redirectTo({
                    url: '/pages/My/Authorization/index',
                  })
                }
              } catch (e) {
                tryLoginCount++
                login()
              }
              login()
            }
          } else if (tryLoginCount >= TRY_LOGIN_LIMIT) {
            Taro.redirectTo({
              url: '/pages/My/Authorization/index',
            })
          } else {
            Taro.showToast({
              title: error.errorText,
              icon: 'none',
              duration: 2000,
              complete: logout,
            })
          }
          return
        }
        if (data.access_token && data.refresh_token) {
          const oldTimestamp = Date.parse(String(new Date()))
          await setStorageArray([
            { key: 'accessToken', data: data.access_token },
            { key: 'refreshToken', data: data.refresh_token },
            { key: 'tokenTimestamp', data: data.expires_in },
            { key: 'oldTimestamp', data: oldTimestamp },
          ])
          delayedFetches.forEach(fetch => {
            return fetchWithoutToken(fetch.urlSuffix, fetch.method, replaceToken(fetch.options))
              .then(fetch.resolve)
              .catch(fetch.reject)
          })
          delayedFetches = []
        }
        isCheckingToken = false
      })
    } else {
      // 正在登檢測中，請求輪詢稍後，避免重複調用登檢測接口
      setTimeout(() => {
        refreshToken(fetchWithoutToken, urlSuffix, method, options)
          .then(res => {
            resolve(res)
          })
          .catch(err => {
            reject(err)
          })
      }, 1000)
    }
  })
}

function logout() {
  // window.localStorage.clear();
  // window.location.href = `${loginUrl}/logout`;
}

function replaceToken(options: Options = {}): Options {
  if (!options.noToken && options.header && (options.header as any).Authorization) {
    getStorage('accessToken').then(accessToken => {
      ;(options.header as any).Authorization = `Bearer ${accessToken}`
    })
  }
  return options
}

export { checkTokenValid, refreshToken }

複製代碼

bundle大小控制

路由堆棧處理

/** * navigateTo 超過8次以後 強行進行redirectTo 不然會形成頁面卡死 */
const nav = Taro.navigateTo
Taro.navigateTo = data => {
  if (Taro.getCurrentPages().length > 8) {
    return Taro.redirectTo(data)
  }
  return nav(data)
}
複製代碼

骨架屏

小程序構建骨架屏的探索
 React 中同構（SSR）原理脈絡梳理
 react服務端渲染demo (基於Dva)
1: 問一下ui 須要多少頁面寫骨架屏採用哪一種方法css

參考項目

首個 Taro 多端統一實例 - 網易嚴選
 用 React 編寫的基於Taro + Dva構建的適配不一樣端html

坑

不能動態設置生成Jsx
Taro.pxTransform(10) // 小程序：rpx，H5：rem
在編譯時，Taro 會幫你對樣式作尺寸轉換操做，可是若是是在 JS 中書寫了行內樣式，那麼編譯時就沒法作替換了，針對這種狀況，Taro 提供了 API Taro.pxTransform 來作運行時的尺寸轉換
css module使用必須以 module.scss結尾 // 表示自定義轉換，只有文件名中包含 .module. 的樣式文件會通過 CSS Modules 轉換處理
開發前請看一遍 Taro 規範
全局process 保存後會報錯 not defined 重啓一下
static options = { // 繼承全局樣式 addGlobalClass: true }; 組件要繼承權全局樣式css才能夠生效
css {} 與選擇器之間必定要有空格否則就會編譯失敗報錯 .cssName{} ❌ .cssName {} ✅ 8.text 放view image等塊級元素不生效

參考java