前置

前端三件套:HTML+CSS+JS
Vue、React 框架

开发方式

前端

原生语法

例如，微信开发者工具（微信小程序开发）
不推荐，效率一般，但是够灵活。

框架开发

跨端开发框架 (taro、uniapp 等)，用一套代码就能开发 h5、app、小程序等应用。
缺点是这是框架封装的，不一定满足性能需求和特殊需求的定制，甚至可用性都可能出现问题。

后端

和普通的项目后端基本类似，只不过需要调用微信小程序（或其他小程序平台）提供的第三方接口。
以微信来讲，官方为了使用者能更快的开发小程序，提供了一些额外的方式，比如微信云开发，它会帮你提供一套数据库、文件存储、数据分析等等的环境。这个云开发能够帮助开发者快速的把后端搭建起来。

低代码开发

比如腾讯云提供的微搭(WeDa)
优点:易上手。
缺点:定制成本高。

微信小程序开发流程

官方开发文档

安装开发工具

基于 Taro 快速搭建小程序开发项目模板

框架： Taro
多端转换

框架支持，可以使用 Vue、React、Svelte 等框架开发

安装及使用

安装及使用 | Taro 文档

Node 安装

需要 Node.js>=16.20.0

查找 Node 安装地址命令
where node
查看 Node 版本号命令
node -v

CLI 安装

npm 或 yarn 全局安装 @tarojs/cli，或者直接使用 npx:

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

# 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli

# 使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

这里使用 npm install -g @tarojs/cli 命令安装

安装成功后进行项目初始化
$ taro init myApp （myApp 是项目名称，一定要是英文的）

安装依赖失败进入开发工具手动安装（这里以 idea 为例），输入 npm install 然后等待安装。

安装完成依赖后，我们要先验证通过 Taro 脚手架创建出来的这个项目代码能不能运行起来。
进入 package.json，选择运行 dev:weapp

打开微信开发者工具导入项目

这样基本没有问题了

注意:
运行时出现报错可以将 myApp 文件下的 node_modules 文件删除，然后重新安装依赖 npm install

使用

组件库

一定要选一个组件库，目的是提高开发效率。
建议使用和 Taro 官方框架兼容的组件库，不然可能出现跨端样式丢失问题:

taro-ui（官方）
NutUI
编写代码
每次添加新页面都要去这里进行配置新页面的路由，Taro 框架会根据页面的路由去 pages 目录下找到对应的文件。

例子

tips:可以通过调整位置来决定微信小程序首先打开哪个页面。

打包发布

小程序已经开发好后打包发布
进入 package.json 里面，执行 build:weapp 命令。

构建完成后会有一个 dist 目录，这个就是我们最终要发布到微信小程序平台的代码。

然后上传程序。

上传之后就可以登录微信小程序平台去设置、发布版本然后正式上线这些操作。

目前在开发中的问题

如何向后端发送请求

使用 axios 但小程序不支持，
方法一:阅读官方文档 Taro.request(option)

方法二：使用适配器库

方法二：根据后端文档快速生成前端请求代码，OpenApi3
他可以根据后端的 Swagger 接口文档生成前端请求代码。它生成的请求代码是类似于 axios 的语法，想要让它生成的请求代码也能在 Taro 项目中正常运行可以使用适配器库

如何快速开发小程序

前置