姓名：张兴才
学号：19011210349
转载自：https://tencentcloudbase.github.io/handbook/tcb01.html
【嵌牛导读】小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。本节主要介绍微信小程序开发的入门知识。
【嵌牛鼻子】开发者工具 小程序注册 初识微信小程序
【嵌牛提问】微信小程序开发的入门准备有哪些？
【嵌牛正文】
小程序开发入门
学习技术不要光看视频、教材，一定要动手实践。只有实战，技术才会变得简单。小程序相比其他编程语言来说，可以让我们更快做出一些技术产品。
开始前的准备
小程序的开发有两样东西必不可少，一个是小程序开发的技术文档；还有一个就是小程序的开发者工具。
开发者工具：小程序开发者工具下载地址
大家可以根据自己电脑的操作系统来下载对应的稳定版安装包进行安装。就和我们写Word、PPT文档要用Office的软件一样，我们要在开发者工具上多多动手，技术才能掌握的更加真切。
技术文档：官方小程序技术文档
技术文档大家先只需要花五分钟左右的时间了解大致的结构即可，先按照我们的教学步骤学完之后再来看也不迟。官方的小程序技术文档过于全面而且详细，对于初学者或者零基础的朋友来说，我们会引导大家如何循序渐进的学习文档里的技术知识。
多看技术文档和多用开发工具也是我们学习其他编程语言或技术最为重要的两点，凡是脱离技术文档和开发工具看视频、看文章以及搜集再多的资料都是舍本求末的错误做法，而这也是很多初学者的一个通病。
值得注意的是小程序的开发功能更新非常频繁，很多网上的教程内容都比较过时，而只有技术文档才是同步最新的。无论你是初学者还是高手，技术文档都是我们技术开发的基础与落脚点，常读常新。
注册微信小程序
小程序的注册非常方便，打开小程序注册页面，按照要求填入个人的信息，验证邮箱和手机号，扫描二维码绑定你的微信号即可，3分钟左右的时间即可搞定。
注册页面：小程序注册页面
注册小程序时不能使用注册过微信公众号、微信开放平台的邮箱哦，也就是需要你使用一个其他邮箱才行。
当我们注册成功后，就可以自动登入到小程序的后台管理页面啦，如果你不小心关掉了后台页面，也可以点击小程序后台管理登录页进行登录。
后台管理页：小程序后台管理登录页
小程序和微信公众号的登录页都是同一个页面，他们会根据你的不同的注册邮箱来进行跳转。
进入到小程序的后台管理页后，点击左侧菜单的开发进入设置页，然后再点击开发设置，在开发者ID里就可以看到AppID(小程序ID)，这个待会我们有用。
注意小程序的ID（AppID）不是你注册的邮箱和用户名，你需要到后台查看才行哦~
新建一个模板小程序
安装完开发者工具之后，我们使用微信扫码登录开发者工具，然后使用开发者工具新建一个小程序的项目，
项目名称：这个可以根据自己的需要任意填写，可以是中文；
目录：大家需要先在电脑上新建一个空文件夹，然后选择这个空文件夹；
AppID：就是之前我们找到的AppID(小程序ID)（也可以点击右边的下拉框，下拉选择AppID）
开发模式为小程序
后端服务选择不使用云服务，注意为了教学的需要，先选择不使用云服务
语言为JavaScript
点击新建确认之后就能在开发者工具的模拟器里看到一个简单的Hello World模板小程序，在编辑器里看到这个小程序的源代码。
小任务： 分别点击开发者工具工具栏上的模拟器、编辑器、调试器，以及下面的手机下拉框、显示百分比，看看有什么效果。找到开发者工具的菜单栏，在项目菜单栏里找到查看所有项目，在设置菜单栏里找到外观设置，切换一下主题、调试器主题（深色、浅色）。
接下来，我们点击开发者工具的工具栏里的预览图标，就会弹出一个二维码，使用你的手机微信扫描这个二维码就能在微信里看到这个小程序啦。以后我们要自己开发一个小程序都可以按照上面的操作新建一个模板小程序，然后在这个的基础上修改开发。
如果你没有使用微信登录开发者工具，以及你的微信不是该小程序的开发者是没法预览的哦。这个Hello World模板小程序非常简单，但是它的文件结构却是完整的。
开通云开发服务
点击微信开发者工具的“云开发”图标，在弹出框里点击“开通”，同意协议后，会弹出创建环境的对话框。这时会要求你输入环境名称和环境ID，以及当前云开发的基础环境配额（基础配额免费，而且足够你使用哦）。
建议你环境名称可以使用 xly、环境ID自动生成即可，当你的云开发环境出现问题的时候，你可以提供你的环境ID，云开发团队会有专人为你解答。
按照对话框提示的要求填写完之后，点击创建，会初始化环境，环境初始化成功后会自动弹出云开发控制台，这样我们的云开发服务就开通啦。大家可以花两分钟左右的时间熟悉一下云开发控制台的界面。
文件结构与页面组成
在了解以下知识时，大家只需要结合开发者工具的编辑器对照着介绍，一一展开文件夹、用编辑器查看文件的源代码，大致浏览一下即可。这就是实战学习的方法（和看书、看视频的学习方法不同），千万不要死记硬背哦，你以后用多了自然就记住啦~
小程序的文件结构
在开发者工具的编辑器里可以看到小程序源文件的根目录下有app.js、app.json和app.wxss，这是小程序必不可少的三个主体文件，下面我们来大致了解一下小程序文件结构（只需要大致了解就可以啦~不理解也没有关系）。
app.json：小程序的公共设置，可以对小程序进行全局配置，决定页面文件的路径、窗口表现、设置多 tab 等；
app.wxss：小程序的公共样式表，可以配置整个小程序的文字的字体、颜色、背景，图片的大小等样式；
app.js：小程序的逻辑（这个可以先放着，不用管）
pages文件夹：这里存放着小程序的所有页面，展开pages文件夹就可以看到有index和logs两个页面文件夹；
小任务：在结合开发者工具实战了解了上面的知识之后，你明白了哪个文件夹是小程序的根目录吗？
小程序的页面组成
在每一个页面文件夹里都有四个文件，这四个文件的名称都是一样的，它们分别为：
json文件，和上面的app.json作用基本相同，只是app.json控制的是整个小程序的设置，而页面的json文件只控制单个页面的配置（因为有时候全局配置就够用了，所以页面配置有时候是空的）；
wxml文件，小程序的页面结构，文字、图片、音乐、视频、地图、轮播等组件都会放在这里；
wxss文件，小程序的页面样式，和app.wxss一样是控制样式，而页面的wxss文件是控制单个页面的样式；
js文件，这个是控制小程序页面的逻辑（这个可以先放着，不用管）
小程序的全局配置
在前面我们已经提到，app.json可以对整个小程序进行全局配置，而配置的依据就需要我们参考技术文档了。
技术文档：小程序全局配置
打开上面的小程序全局配置技术文档，里面会有很多你看不懂的名称，这是非常正常的，大家也不需要记，只需要花两三分钟时间快速浏览一下即可，后面我们会教大家如何结合技术文档来实战学习。
json语法
在对小程序进行配置之前，可以使用开发者工具打开app.json文件，对照着下面的json语法来进行理解：
大括号{}保存对象，我们来看一下app.json，哪些地方用到了大括号{}，{}里面就是对象；
中括号[]保存数组，我们可以看到中括号[]里有
“pages/index/index”等（这是小程序页面的路径），那这些页面路径就是数组啦；数组里的值都是平级的关系；
各个数据之间由英文字符逗号,隔开，注意这里的数据包括对象、数据、单条属性与值，大家可以结合app.json仔细比对逗号,出现的位置，平级数据的最后一条数据不要加逗号,，也就是只有数据之间才有逗号。
字段名称（属性名）与值之间用冒号:隔开，字段名称在前，字段的取值在后；
字段名称用双引号””给包着；
注意，这里所有的标点符号都需要是英文状态下的，也就是我们经常听说的全角半角里的半角状态，不然会报错哦。很多之前没有接触过编程的童鞋经常会犯这样的错误，一定要多多注意！当我们要输入编程里的标点符号时，一定要先确认一下，你的输入法是汉语形态，还是字母形态，如果输的是汉字形态，一定要切换哦~
设置小程序窗口表现
使用开发者工具打开app.json文件，可以看到如下代码里有一个window的字段名（如前面所说，字段名要用双引号””包着），它的值是一个对象（如前面所说，{}大括号里的就是对象），可见对象可以是一组数据的集合，这个集合里包含着几条数据。
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
这些就是window配置项，可用于设置小程序的状态栏、导航条、标题、窗口背景色。
小任务：打开小程序全局配置查看backgroundTextStyle、navigationBarBackgroundColor、navigationBarTitleText、navigationBarTextStyle的配置描述（大致了解即可）。
使用开发者工具的编辑器将以上属性的值改成如下代码（这里的backgroundTextStyle只有在设置了下拉刷新样式时才会比较明显，以后会介绍）
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#1772cb",
"navigationBarTitleText": "云开发技术训练营",
"navigationBarTextStyle": "white"
},
添加完成之后记得保存代码哦，文件修改没有保存会在标签页有一个小的绿点。可以使用快捷键（同时按）Ctrl和S来保存（Mac电脑为Command和S）。
然后点击开发者工具的编译图标，就能看到更新之后的效果啦，也可以点击预览，使用手机微信扫描生成的二维码查看实际效果。
小任务： navigationBarBackgroundColor值是 #F8F8F8， #1772cb，这是十六进制颜色值，它是一个非常基础而且用途范围极广的计算机概念，大家可以搜索了解一下：1、如何使用电脑版微信、QQ的截图工具取色（取色颜色会有一点偏差）；2、RGB颜色与十六进制颜色如何转换；
新建小程序页面
新建页面的方法有两种，一种是使用开发者工具在pages文件夹下新建；还有一种是通过app.json的pages配置项来新建，我们先来看第2种方法。
通过app.json新建页面
pages配置项是设置页面的路径，也就是我们在小程序里写的每一个页面都需要填写在这里。使用开发者工具打开app.json文件，在pages配置项里新建一个home页面（页面名称可以是任意英文名），代码如下：
"pages/home/home",
"pages/index/index",
"pages/logs/logs"
大家写的时候可以回顾一下json语法，每个页面后都记得要用逗号,隔开，如果你的文件代码写错了，开发者工具会报错。
在模拟器就能看到我们新建的这个首页了，会显示如下内容：
1pages/home/home.wxml
大家再来看看小程序的文件夹结构，是不是在pages文件夹下面多了一个home的文件夹？而且这个文件夹还自动新建了四个页面文件。
我们删掉文件目录下的index和logs文件夹，然后把app.json的pages配置项修改为：
"pages": [
"pages/home/home",
"pages/list/list",
"pages/partner/partner",
"pages/more/more"
],
也就是我们删掉了index和logs页面配置项的同时，又新增了三个页面(list、partner、more，这三个页面名称大家可以根据自己需要来命名)。
小任务：这些新建的页面文件都在电脑上的什么呢？比如在开发者工具右键点击home文件夹或者home.wxml，选择“在硬盘打开”就可以看到该文件在我们电脑的文件夹里什么的位置啦
小程序的首页
在pages配置项的技术文档里有这样一句：“数组的第一项代表小程序的初始页面”，是什么意思呢？
技术文档：pages配置项
使用开发者工具打开app.json，把之前建好的”pages/list/list”剪切粘贴到”pages/home/home”的前面，也就是把list页面放到了数组的第一项，再来模拟器里看一下小程序的变化。原来pages配置项的第一项就是小程序的首页啦。
小任务：现在我们来使用新建页面的第1种方法，使用开发者工具在pages文件夹下新建页面。首先选中pages文件夹，然后点击上方的+号或鼠标右键，新建目录，然后输入目录名为post，然后再选中post文件夹，新建页面，页面名也为post，新建之后看看pages配置项的变化。
了解配置项的书写方式
在前面我们已经了解了window配置项、pages配置项，在技术文档小程序全局配置了解到window、pages这些都是全局配置项的属性，全局配置项的属性还有tabBar、networkTimeout、usingComponents、permission等，大家可以在技术文档里了解每个属性的描述，大致了解他们的功能。
这里我们来宏观了解一下配置项的书写语法，大家可以结合下面这段代码来理解app.json的写法，免得配置错误：
每个配置项比如pages、window都用引号””包住，冒号:后面是配置项的属性与值；
每个配置项之间用逗号,隔开，最后一项没有逗号，配置项是平级关系，不要把tabBar配置项写到window配置项里面了；
配置项里面的数组或对象的最后一项也没有逗号
书写时注意缩进，大括号{}、中括号[]都是成对书写，即使是嵌套时也不能有遗漏}或]；
{
"pages": [
"pages/home/home",
"pages/list/list",
"pages/partner/partner",
"pages/more/more"
],
"window": {
"navigationBarTitleText": "云开发技术训练营"
},
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "首页"
},
{
"pagePath": "pages/list/list",
"text": "活动"
},
{
"pagePath": "pages/partner/partner",
"text": "伙伴"
},
{
"pagePath": "pages/more/more",
"text": "更多"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"navigateToMiniProgramAppIdList": [
"wxe5f52902cf4de896"
]
}
配置tabBar配置项
在很多App的底部都有一个带有小图标的切换tab，比如手机微信App底部就有微信、通讯录、发现、我四个tab，这个小图标就是icon，整个呢就是tabBar，小程序也可以有，需要我们在app.json里配置tabBar配置项。
icon下载
在官方技术文档里我们了解到icon 大小限制为40kb，建议尺寸为81px * 81px（大一点是可以的），不懂设计icon的童鞋可以去矢量图标库去下载。（注意下载的格式要是png哦）
icon资源：iconfont阿里巴巴矢量图标库
大家可以留意下手机微信的tabBar的每一个icon其实是一组两个，也就是选中时的状态和没有选中时的状态，他们的颜色也是不一样的，而在iconfont里大家除了选择图标还可以选择不同的颜色来下载哦。比如我们要让tabBar有四个切换tab，那么我们就需要下载4个icon的两种配色共8张图片。
使用开发者工具在模板小程序的根目录下新建一个image的文件夹，把命名好的icon都放在里面，这个时候你的文件夹结构如下：
小程序的根目录
├── image
│ ├── icon-tab1.png
│ ├── icon-tab1-active.png
├── pages
├── utils
├── app.js
├── app.json
├── app.wxss
├── project.config.json
├── sitemap.json
icon的配色最好是一明一暗，而且与你的小程序的整体颜色风格保持一致，这样切换起来才不会突兀；选择的这4个icon的风格最好一致，不然tabBar就不会好看啦。icon的名称最好也一致，比如home对应的icon可以为home.icon和home-active.icon。
注意：图片的名称必须是英文，不要用中文。页面也好、文件也好、文件夹的名称也好，都要使用英文，里面的标点符号也必须是英文字符。
配置tabBar配置项
通过tabBar配置项，可以设置tabBar的默认字体颜色、选中过的字体颜色、背景色等。
技术文档：tabBar配置项
通过技术文档，我们先大致了解color、selectedColor、backgroundColor的意思。然后使用开发者工具打开app.json在window配置项后面新建一个tabBar配置项，代码如下：
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#13227a",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/home/home",
"iconPath": "image/icon-tab1.png",
"selectedIconPath": "image/icon-tab1-active.png",
"text": "首页"
},
{
"pagePath": "pages/list/list",
"iconPath": "image/icon-tab2.png",
"selectedIconPath": "image/icon-tab2-active.png",
"text": "活动"
},
{
"pagePath": "pages/partner/partner",
"iconPath": "image/icon-tab3.png",
"selectedIconPath": "image/icon-tab3-active.png",
"text": "伙伴"
},
{
"pagePath": "pages/more/more",
"iconPath": "image/icon-tab4.png",
"selectedIconPath": "image/icon-tab4-active.png",
"text": "更多"
}
]
}
这里有一个比较重要的属性就是list，它是一个数组，决定了tabBar上面的文字、icon、以及点击之后的跳转链接。
pagePath必须为我们在pages配置项里建好的页面
text是tab按钮上的文字
iconPath、selectedIconPath分别为没有选中时的图片路径和选中时的图片路径。
小任务：你知道应该如何制作一个底部没有tabBar的小程序吗？要让tabBar没有icon，应该如何配置？给tabBar添加一个position属性，值为top，小程序在界面上会有什么变化？再给小程序新增几个页面（不添加到tabBar上），我们应该如何在模拟器看到页面的内容？
小程序的页面配置
使用打开一个页面的页面json文件，比如home的home.json，在json里面新建一些配置信息，如下所示。
技术文档：小程序页面配置
{
"usingComponents": {},
"navigationBarBackgroundColor": "#ce5a4c",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "小程序页面",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
配置的属性与值的含义我们可以结合实际的效果以及技术文档来了解。
【嵌牛总结】：以上就是微信小程序开发的一些入门基础知识，一起来学习吧！