微信小程序开发笔记

我一直在想，有什么可以做项目的需求。有一天洗澡之前突然想出，可以写一个根据食堂菜单随机抽取某顿饭吃什么的小程序，来解决到了吃饭的时候不知道吃什么的问题。我觉得这应该是个强需求，于是就开始了微信小程序的开发之旅。

什么是微信小程序？

微信小程序的本质是一个网页，但是它的运行环境是微信内置的浏览器，所以它可以使用微信提供的一些API，比如微信登录、微信支付等等。微信小程序使用的语言是微信魔改的HTML（WXML）、魔改的CSS（WXSS）和JavaScript，但在我对相关资料资料的搜索中，我发现微信对魔改内容的介绍与文档并不详细，而且基于传统的HTML、CSS和JavaScript的开发效率并不如使用框架，所以我决定使用React框架来开发微信小程序，这样可以让我更专注于业务逻辑的开发。

工作栈梳理

我小程序前端使用的是基于京东凹凸实验室开发的Taro框架来使用React开发微信小程序，Taro是一个多端统一开发框架，它可以让我们使用React来开发微信小程序、H5页面、React Native App等等。Taro的工作原理是将React代码编译成对应平台的代码，比如编译成微信小程序的代码，然后再使用微信开发者工具来运行。

Taro官方文档：https://taro-docs.jd.com/docs

Taro诞生记：https://docs.taro.zone/blog/2018-06-25-the-birth-of-taro

而后端我打算使用Python的Flask框架来开发，因为我对Python比较熟悉，而且Flask是一个轻量级的框架，所以我觉得可以使用它来开发。数据库使用的是MySQL，来存储留言。

前端开发环境

万事开头难，我在开始开发之前，先要搭建好开发环境，这里我使用的是Visual Studio Code作为编辑器，然后使用Git来管理我的代码，使用GitHub来托管我的代码。

首先根据Taro文档中的安装方法安装好Taro的开发环境，然后创建一个项目。Taro的默认模板会创建一个显示Hello,World的小程序，创建好后，我们在项目根目录使用终端以开发模式编译小程序，然后使用微信开发者工具来打开项目，就可以看到我们的小程序了。

前端开发

在前端的Taro+React开发中需要注意的点：

代码中的标签与组件，应尽量查看Taro文档的组件库中是否有对应的组件，例如使用<Button>组件来代替<button>标签，使用<Image>组件来代替<img>标签，使用<Input>组件来代替<input>标签等等。
代码中的基本组件都是以<View>标签来实现的，所以我们在使用时，需要将HTML标签替换成<View>标签，比如<div>替换成<View>，<span>替换成<View>，<p>替换成<View>等等。
代码中的文本组件都是以<Text>标签来实现的，所以我们在使用时，需要将HTML标签替换成<Text>标签，比如<h1>替换成<Text>，<h2>替换成<Text>，<h3>替换成<Text>等等。
小程序中使用API，应尽量查看Taro文档中的API库中是否有对应的API，例如使用Taro.login()来代替wx.login()，使用Taro.getUserInfo()来代替wx.getUserInfo()等等。
小程序中配置字体，若字体存储在服务器中，应配置反向代理，给字体文件添加Access-Control-Allow-Origin: *的响应头，否则会导致字体在安卓中无法加载。