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
但是你会发现本地是起来了,那我怎么在本地,边开发边调试呢?
这时候你要想,如果我开发支付宝小程序是不是需要在支付宝上运行呢?那怎么模拟在支付宝上运行呢?
这时候你有一定的开发小程序的经验,你就会知道有小程序开发者平台这个东西。
支付宝的开放平台的地址是:https://openhome.alipay.com/platform/home.htm
点击链接进入,注册登陆一顿操作后,你可能又不知道怎么办了,我成功登陆了和我调试小程序有什么关联吗?哈哈,这关联可大了,你要开发支付宝小程序,就需要使用官网提供的开发工具,我们的开发的代码可以在开发工具中进行调试。
开发工具的下载地址:https://opendocs.alipay.com/mini/ide/download
下出来之后,打开我们的项目中 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));
});
}
}