微信小程序开发
环境准备
第一，需要准备一个微信开发者账号。
如果还没有开发者账号，需要到微信开公众平台申请一个账号。网址：微信公众平台
注册一个小程序的开发者账号
填写未被微信公众号注册过的邮箱。
填写的邮箱将会收到一封激活的邮件，按照邮件所说的激活微信小程序，返回到微信公众平台。
信息登记：要选择小程序的主体，如果是企业或者其他的主体还需要提供其他的资料。所以这里我是选择个人。然后再填写一些主体信息和管理员信息。
填写完这些，一个开发者账号就注册好了。
注册完之后，需要微信扫码登录这个微信小程序，获取到一个开发者ID，这个是一个很重要的，后面开发的时候需要用到。
第二，安装微信开发者工具。（微信小程序开发的软件）
网址是：微信开放文档
第三，下载一个前端开发工具（HBuilderX、VSCode、Webstorm）。
（可选可不选）因为虽然也在微信开发者工具也可以编写代码，但是不太方便，所以最好下载一个编写小程序的软件。这里用HBuilderX。下面是下载步骤。
这里下载安装步骤就不截图了。就解压打开即可，注意第一次打开HBuilderX需要联网。需要下载一些插件，以便后期写代码的时候有提示。只有第一次打开时会自动下载。如果忘了，删掉重新解压打开就好了。
创建一个小程序
1）新建项目
打开HBuilderX,选择文件->新建->项目。
选择小程序，填写项目名。就可以生成一个默认的模板。
2）修改开发者ID
在默认模板里，首先需要在文件“project.config.json”中修改下面15行这个“appid”，这个就是在微信开发者中的开发者ID。
编写好的小程序，需要在微信小程序的微信开发者工具中，运行。如下图。
连接成功就会打开微信开发者工具，用一开始登录微信公众平台的那个微信扫描登录。
扫描之后，就进入微信开发者工具里面了。左边时模拟器，模拟在微信中的显示效果，右边上是编辑器，编写代码，右边下是调试器。
小程序首页
编写小程序的语法知识可以打开微信开放文档查看。
小程序的结构。
小程序的语言与网页的差不多，只是单词不一样。
小程序的每一个页面组成：
xxx.json文件：配置页面标题等信息
xxx.wxml文件：html（view替换div、text替换span、image替换img）
xxx.wxss文件：css（布局，小程序推荐flex布局、 单位px改为rpx 100rpx=50px）
xxx.js文件：js（json格式、vuejs思想）
小程序三个全局配置文件：
app.json（配置全局标题、底部菜单栏）
app.js （全局的js文件）
app.wxss （全局的样式文件）
下面是微信底部菜单栏的制作：
page：页面路径列表，用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。
window：用于设置小程序的状态栏、导航条、标题、窗口背景色。
tabBar：如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
具体功能可参考微信开放文档
下面代码可复制修改。
{
"pages": [
"pages/ai/ai",
"pages/yq/yq"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "实训",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#ff8124",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/ai/ai",
"text": "人脸识别",
"selectedIconPath": "image/ai-active.png",
"iconPath": "image/ai.png"
},
{
"pagePath": "pages/yq/yq",
"text": "疫情地图",
"selectedIconPath": "image/map-active.png",
"iconPath": "image/map.png"
}
]
}
}