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));});}
}

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

脚手架入口

Taro 支付宝小程序开发相关推荐

【支付宝小程序控制硬件①】申请个人支付宝小程序开发的个人账户，说说那些睬坑日志，集成mqtt协议在支付宝小程序，实现基本通讯！
[支付宝小程序控制硬件①] 申请个人支付宝下程序开发的个人账户,认识支付宝小程序框架结构,做好智能控制第一步! 文章目录一.前言: 二.回忆支付宝小程序移植的过程: 三.注册账号了解支付宝开发者工具 ...
支付宝小程序开发——学习总结
首先我们先把过程分为几个步骤: 安装所需软件,在支付宝小程序开发平台创建小程序完成flex布局前端学习设计天气预报前端设计 node.js实现服务端一.安装所需软件,创建小程序 1.我们是先创建 ...
支付宝小程序开发体验
在使用过程中想到一点记录一点,只是个人感想. 支付宝小程序的底层应该是React Native的,但是,小程序界面的语法,跟weex更接近.比如,.axml文件,相当于<templete> ...
支付宝小程序开发与注意事项
注册企业支付宝,作为小程序的登录账户地址:支付宝小程序企业账号注册: 支付宝注册.登录选择所需的项目类型创建一个小程序并填写信息下载开发工具地址:下载 | 小程序创建我的第一个支付宝小 ...
支付宝小程序开发练习,显示自定义二维码（四）
之前用了几种方式 1.后端生成二维码需要加密的字符窜,小程序前端利用二维码组件渲染canvas画出二维码,由于支付宝小程序没有这样的组件,于是去找微信小程序的解决方案,把微信小程序的二维码前端组件搬过 ...
小程序获取城市行政区号_支付宝小程序开发——获取位置API没有城市区号的最佳处理方案...
前言: 需要对城市区号进行判断,但是支付宝小程序提供的my.getLocation() API返回的数据中只有6位的城市行政代码,诸如:深圳(440300),并没有区号(0755),那么怎么办呢? 需 ...
支付宝小程序开发之使用 alipay.fund.trans.uni.transfer接口支付宝打款到银行卡
使用alipay.fund.trans.uni.transfer接口进行打款必须使用支付宝公钥证书进行签名,但是支付宝提供的alipay-sdk并不支持支付宝公钥证书加密,所以,我们必须自己进行加密. ...
支付宝小程序开发申请
1:支付宝小程序应用申请用[企业支付宝账号]登录开放平台 : 进入[小程序公测首页] 申请小程序公测,审核时间为1个工作日: 注意1:公测期间尚未开放个人支付宝账户注意2:未注册企业支付宝账号请访问 ...
支付宝小程序开发系列二：获取支付宝用户user_id（.net）
第一步:获取授权码信息 my.getAuthCode({scopes: 'auth_base',success: (res) => {// res.authCode//发送授权码到服务后台进行解 ...

Taro 支付宝小程序开发