微信小程序的学习心路（二）

接下来，我们继续来分享学习小程序路上的心得吧
上一篇写到了几个小程序的重要组成文件，这次我们基于这个前提，可以来继续分享一下小程序的学习。
首先，就是做任何项目的开发都需要先了解到它的官方文档，用于做代码编写时的参考。
而我们小程序开发的官方文档链接为：
https://developers.weixin.qq.com/miniprogram/dev/framework/
知道了文档的内容后，我们想开发小程序的话，需要一个专门的开发工具：微信web开发者工具。
下载之后便可以添加项目，进行自己编写小程序并进行测试。
这次我们依旧来分享一下学小程序路上的知识和心得
上次我们大概的说过一次wxss这个文件袋的作用，类似于css，用于增加页面的样式。
对于目前小程序支持的选择器，我也查询过资料后，在这里做了一个归纳。
如下所示：
.class 比如：.intro（选择所有拥有 class=“intro” 的组件）
#id 比如：#firstname（选择拥有 id=“firstname” 的组件）
element 比如：view（选择所有 view 组件）
元素，元素如：图，复选框（选定的组件查看所有文件和所有组件复选框）
::after 比如：view::after（在 view 组件后边插入内容）
::before 比如：view::before（在 view 组件前边插入内容）
代码示例如下：
在index.wxml中
^{!–index.wxml–}
^view class=“userinfo”^
^/view
在index.wxss中
/index.wxss/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
注意：这里代码展示均为初始项目Hello World代码。
这里我还在网上找到了一些关于使用小程序开发者的一些快捷方式。
（1）格式调整。
Ctrl+S：保存文件
Ctrl+[， Ctrl+]：代码行缩进
Ctrl+Shift+[， Ctrl+Shift+]：折叠打开代码块
Ctrl+C Ctrl+V：复制粘贴，如果没有选中任何文字则复制粘贴一行
Shift+Alt+F：代码格式化
Alt+Up，Alt+Down：上下移动一行
Shift+Alt+Up，Shift+Alt+Down：向上向下复制一行
Ctrl+Shift+Enter：在当前行上方插入一行
（2）光标移动
Ctrl+End：移动到文件结尾
Ctrl+Home：移动到文件开头
Ctrl+i：选中当前行
Shift+End：选择从光标到行尾
Shift+Home：选择从行首到光标处
Ctrl+Shift+L：选中所有匹配
Ctrl+D：选中匹配
Ctrl+U：光标回退
那下面就做一个简单的示例。
在index.wxml中
^{!–index.wxml–}
^view class=‘container’^
这是我家小朋友的亚子（这里可以直接写一些简单的文本内容）
^/view
view
^image src=’/images/TH.jpg’^^/image
/view
在index.wxss中
/index.wxss/
.container{
color:darkgray
}
在插入图片方面，小程序与HTML编译器有些许的差异。
在小程序中，如果想要添加一张自己想要的照片，需要在原先建立小程序的文件夹的位置里添加一个新的空文件夹，并改名为images，此时点击编译之后，会在编辑器列表里出现一个images文件夹，我们把自己想要插入的图片放在images这一文件夹下，并在编译时标出路径，便可以在模拟器中显示出来。而在HTML编译时，我们添加图片无需新建文件夹，只要把图片的路径描述出来，刷新之后即可在页面显示。

（上述代码运行后出现的界面）