1. 环境准备

# 安装 node 环境, 从 node 官网下载: http://nodejs.cn/

# 设置淘宝镜像：
npm config set registry https://registry.npm.taobao.org

# 全局安装 @tarojs/cli 工具包
npm i -g @tarojs/cli

2. 初始化项目

选择项目目录，在当前的项目目录下初始化 Taro 项目

taro init xxx(项目名称)

3. 开发支付宝小程序

3.1 怎么运行

打开初始化后的项目，查看 package.json 文件，发现 scripts 脚本

  "scripts": {
    "build:weapp": "taro build --type weapp",
    "build:swan": "taro build --type swan",
    "build:alipay": "taro build --type alipay",
    "build:tt": "taro build --type tt",
    "build:h5": "taro build --type h5",
    "build:rn": "taro build --type rn",
    "build:qq": "taro build --type qq",
    "build:quickapp": "taro build --type quickapp",
    "dev:weapp": "npm run build:weapp -- --watch",
    "dev:swan": "npm run build:swan -- --watch",
    "dev:alipay": "npm run build:alipay -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "dev:rn": "npm run build:rn -- --watch",
    "dev:qq": "npm run build:qq -- --watch",
    "dev:quickapp": "npm run build:quickapp -- --watch"
  }

我们运行的是支付宝小程序，所以执行 npm run dev:alipay 但是你会发现本地是起来了，那我怎么在本地，边开发边调试呢？

这时候你要想，如果我开发支付宝小程序是不是需要在支付宝上运行呢？那怎么模拟在支付宝上运行呢？

这时候你有一定的开发小程序的经验，你就会知道有小程序开发者平台这个东西。

支付宝的开放平台的地址是：openhome.alipay.com/platform/ho…

点击链接进入，注册登陆一顿操作后，你可能又不知道怎么办了，我成功登陆了和我调试小程序有什么关联吗？哈哈，这关联可大了，你要开发支付宝小程序，就需要使用官网提供的开发工具，我们的开发的代码可以在开发工具中进行调试。

开发工具的下载地址：opendocs.alipay.com/mini/ide/do…

下出来之后，打开我们的项目中 dist 文件夹，接下来就能愉快的进行开发了！！！

4. 引入 taro-ui 组件库

4.1 安装 taro-ui

yarn add taro-ui

4.2 引入 css 样式

进入 app.tsx，在头部引入

import 'taro-ui/dist/style/index.scss';

5. 组件写法

我这边主要使用 HOOK 写法

const Home = () => {
  return (
    <View className=''>
      <View className='home-title-bg'></View>
    </View>
  )
};

export default inject()(observer(Home));

在小程序开发中 View 标签类似于通常 PC 开发的 div、p 标签。我们在开发的过程中最好注意一下命名的规范，在编写的时候，我比较偏向 namespace 这种 css 写法

6. 请求封装

不兼容 H5 的情况下，只需要配置 mini-program-axios

yarn 用户安装: yarn add mini-program-axios

npm 用户安装：npm i mini-program-axios -D

同时在 tsconfig.json 文件中的 typeRoots 的末尾加上 node_modules/mini-types

在 utils/request.ts 文件中加上

// 封装统一的请求方法
import miniAxios from 'mini-program-axios';

const request = miniAxios.create({
  timeout: 30000,
});

request.interceptors.request.use((config) => config, error => {
  throw new Error('请求异常');
});

request.interceptors.responce.use(response => response, error => {
  throw new Error('响应异常');
});

export default {
  get: (url, params) => {
    return new Promise((resolve) => {
      request({
        url,
        method: 'GET',
        data: params
      }).then(resp => resolve(resp));
    });
  },
  post: (url, params) => {
    return new Promise((resolve) => {
      request({
        url,
        method: 'POST',
        data: params
      }).then(resp => resolve(resp));
    });
  }
}

7. 附加配套自定义脚手架代码

脚手架入口