[移动开发] 记一次微信小程序从原生到Taro的迁移

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 记一次微信小程序从原生到Taro的迁移 -> 正文阅读

[移动开发]记一次微信小程序从原生到Taro的迁移

前言

之前小程序用原生开发的，业务比较简单的时候是采用原生开发是比较高效的，但是随着业务的沉淀，场景逐渐复杂化，后续的维护及开发就会感觉到吃力。于是考虑采用taro框架，我这里用的是 taro（react）工程模板，下面记录一下工程配置及一些问题。

1. taro 项目拉取

这里比较简单，注意一下自己node 环境（>=12.0.0），按官网流程走下来即可：
Taro-快速开始-安装及使用

# 1. 使用 npm 安装 CLI
$ npm install -g @tarojs/cli

# 2. 命令创建模板项目
$ taro init myApp

#3. 按自己需要选择项目配置信息

在这里插入图片描述

2. eslint规则配置（可选）

模板中自带的检验规范用不习惯，公司内部自有一套eslint规则，这里提一下替换方式提供参考。

删除项目根目录的 .eslintrc文件
执行 npm install --save-dev eslint-config-dsued eslint babel-eslint eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y
在根目录新建.eslintrc.js文件,将下方代码拷贝进去
module.exports = {
 extends: 'dsued',
  globals: {
   ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
   page: true,
   REACT_APP_ENV: true,
   DYSDK: true
 },
 rules: {
 'no-underscore-dangle': 'off',
 'template-curly-spacing': 'off',
  indent: 'off'
 }
};
至此配置完成。

3. 路径别名配置

开发过程中若想使用 @/path/path 方式的路径引入方式，需要进行路径配置：在 config>index.js 文件中添加以下代码：

const path = require('path');

const config = {
  alias: { // 别名设置
    '@/components': path.resolve(__dirname, '..', 'src/components'),
    '@/utils': path.resolve(__dirname, '..', 'src/utils'),
    '@/service': path.resolve(__dirname, '..', 'src/service')
  }
};

4. 请求封装

在src目录下新建service文件夹;
在src->service文件夹下新增文件baseUrl.js:

// src -> service -> baseUrl.js
const getBaseUrl = (url) => {
  let BASE_URL = '';
  if (process.env.NODE_ENV === 'development') {
    // 开发环境 - 根据请求不同返回不同的BASE_URL
    BASE_URL = 'https://xxxxxxxxx';
  } else {
    // 生产环境
    BASE_URL = 'https://xxxxxxxxx';
  }
  return BASE_URL;
};

export default getBaseUrl;

在src->service文件夹下新增文件interceptors.js:

// src -> service -> interceptors.js
import Taro from '@tarojs/taro';

const HTTP_STATUS = {
  SUCCESS: 200,
  CREATED: 201,
  ACCEPTED: 202,
  CLIENT_ERROR: 400,
  AUTHENTICATE: 401,
  FORBIDDEN: 403,
  NOT_FOUND: 404,
  SERVER_ERROR: 500,
  BAD_GATEWAY: 502,
  SERVICE_UNAVAILABLE: 503,
  GATEWAY_TIMEOUT: 504
};

/**
 * @description 获取当前页url
 */
const getCurrentPageUrl = () => {
  let pages = Taro.getCurrentPages();
  let currentPage = pages[pages.length - 1];
  let url = currentPage.route;
  return url;
};

const pageToLogin = () => {
  let path = getCurrentPageUrl();
  Taro.clearStorage();
  if (!path.includes('login')) {
    Taro.reLaunch({
      url: '/pages/login/index'
    });
  }
};

const customInterceptor = (chain) => {

  const requestParams = chain.requestParams;
  Taro.showLoading({
    title: '加载中'
  });
  return chain.proceed(requestParams).then(res => {
    Taro.hideLoading();
    // 只要请求成功，不管返回什么状态码，都走这个回调
    if (res.statusCode === HTTP_STATUS.NOT_FOUND) {
      return Promise.reject({ desc: '请求资源不存在' });

    } else if (res.statusCode === HTTP_STATUS.BAD_GATEWAY) {
      return Promise.reject({ desc: '服务端出现了问题' });

    } else if (res.statusCode === HTTP_STATUS.FORBIDDEN) {
      Taro.setStorageSync('Authorization', '');
      pageToLogin();
      // TODO 根据自身业务修改
      return Promise.reject({ desc: '没有权限访问' });

    } else if (res.statusCode === HTTP_STATUS.AUTHENTICATE) {
      Taro.setStorageSync('Authorization', '');
      pageToLogin();
      return Promise.reject({ desc: '需要鉴权' });

    } else if (res.statusCode === HTTP_STATUS.SERVER_ERROR) {
      return Promise.reject({ desc: '服务器错误' });
    } else if (res.statusCode === HTTP_STATUS.SUCCESS) {
      if (res.data.success) {
        return res.data;
      } else {
        Taro.showToast({
          title: res?.data?.msg || '请求失败',
          icon: 'none',
          duration: 2000
        });
        return Promise.reject(res.data);
      }
    }
  }).catch(error=> {
    Taro.hideLoading();
    // console.error(error);
    return Promise.reject(error);
  });
};

// Taro 提供了两个内置拦截器
// logInterceptor - 用于打印请求的相关信息
// timeoutInterceptor - 在请求超时时抛出错误。
// const interceptors = [customInterceptor, Taro.interceptors.logInterceptor]
const interceptors = [customInterceptor];

export default interceptors;

在src->service文件夹下新增文件request.js:

// src -> service -> request.js
import Taro from '@tarojs/taro';
import getBaseUrl from './baseUrl';
import interceptors from './interceptors';

interceptors.forEach(interceptorItem => Taro.addInterceptor(interceptorItem));

class httpRequest {

  baseOptions(params, method = 'GET') {
    let { url, data, param } = params;
    const BASE_URL = getBaseUrl(url);
    // let contentType = "application/x-www-form-urlencoded";
    let contentType = 'application/json;charset=UTF-8';
    contentType = params.contentType || contentType;
    const option = {
      url: BASE_URL + url, // 地址
      data: data, // 传参
      method: method, // 请求方式
      timeout: 50000, // 超时时间
      header: { // 请求头
        'content-type': contentType,
        'Authorization': Taro.getStorageSync('Authorization')
      }
    };
    return Taro.request(option);
  }

  get(url, data = '', param) {
    let option = { url, data, param };
    return this.baseOptions(option);
  }

  post(url, data, param, contentType) {
    let params = { url, data, param, contentType };
    return this.baseOptions(params, 'POST');
  }

  put(url, data = '') {
    let option = { url, data };
    return this.baseOptions(option, 'PUT');
  }

  delete(url, data = '') {
    let option = { url, data };
    return this.baseOptions(option, 'DELETE');
  }

}

export default new httpRequest();

至此，封装完成，请求使用/再具体文件中发起请求：

import request from '@/service/request';

// 小程序登陆验证
export const getToken = (params) => request.get('/login/code', params);

5. 引入 taro-ui

比较简单，按官网流程安装使用即可：taro-ui 快速上手
这里值得需要注意的点：

样式文件需要单独引入，taro-ui 样式文件是scss文件，如果是配置了less的项目需要单独安装一下npm i @tarojs/plugin-sass -D
如果 taro 版本号是 3.x 以上的话，taro-ui 也需要安装 3.x 以上版本，如：^3.0.0-alpha.10,否则不支持。
若想在taro-ui的 AtIcon 组件中使用外部iconfont图标，下载引入前iconfont项目设置中前缀需要改为*iconfont- 。
使用主题覆盖时要注意先后顺序：

/* 先定义变量，再引入 Taro UI 默认样式 */
/* 改变主题变量，具体变量名可查看 taro-ui/dist/style/variables/default.scss 文件 */
$color-brand: #4f8aff;
$color-brand-light: #7ba7ff;
$color-brand-dark: #3f6ecc;

/* 引入 Taro UI 默认样式 */
@import "~taro-ui/dist/style/index.scss";

6. 在taro中以h5标签的方式写小程序

taro小程序写法标签为View,Text等，且每次用标签前都要先引入使用，手感不好，taro v3.3以上版本为我们提供了 plugin-html插件让我们可以脱离既定的小程序标签，像写h5页面一样开发。

首先下载安装插件 @tarojs/plugin-html

yarn add @tarojs/plugin-html

然后在项目配置中添加使用插件

// config/index.js
config = {
  // ...
  plugins: ['@tarojs/plugin-html']
}

配置完成。

7. 在taro中引入本地字体文件

taro模板项目中Taro.loadFontFace 默认配置只能引入在线url，不支持本地字体文件引入，我们需要进行配置：

在项目配置中添加以下配置

// config/index.js
config = {
  // ...
  // 小程序端专用配置
  weapp: {
    module: {
      postcss: {
        autoprefixer: {
          enable: true
        },
        // 小程序端样式引用本地资源内联配置
        url: {
          enable: true,
          config: {
            limit: 10240 // 文件大小限制
          }
        }
      }
    }
  },
}

在全局或需要地方引入字体

import Taro from '@tarojs/taro';
import { Component } from 'react';
import BEBAS_1 from './assert/font/BEBAS-1.ttf';

class App extends Component {

  componentDidMount() {
    Taro.loadFontFace({
      global: true,
      family: 'BEBAS-1',
      source: BEBAS_1
    });
  }

  render() {
    return this.props.children;
  }
}

export default App;

8. 在taro中获取小程序中onLoad钩子函数中页面传参

import Taro from '@tarojs/taro';
// ***
  useEffect(() => {
    let params = Taro.getCurrentInstance()?.router?.params;
    if (JSON.stringify(params) !== '{}') {
    }
  }, []);
// ***