开发者学堂课程【高校精品课-上海交通大学 -互联网应用开发技术：微信小程序1】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/76/detail/15776
微信小程序1
内容介绍：
一、什么是微信小程序
二、微信小程序的特点
三、微信小程序开发的前期准备
四、小程序代码构成
五、小程序宿主环境
六、小程序目录结构
七、WXML 模板
八、WXSS 样式
九、理解小程序宿主环境
十、渲染层与逻辑层
十一、程序与页面
在此之前，先进行一个问题考察，无论使用 strut 去书写一个controller，或是用stren 去写action，或者什么框架都不用，仅仅用servlet 来写，则是否考虑过其个数为几个。往届的学生在做此项目的时候，会出现一个问题，比如说此处有一本书，用户则对其就会有增删改查4个动作。
它后端这一层写了4个类，一个类专门用来做插入，该类就为create，一个类专门做查询，一个类用于更新，一个类用于删除，原因在于在controller 中，会对其监听的URL是什么来书写。从而增删改查应该用4个不同的URL，所以应该每一个URL 被一个controller 来处理，其就被写成了4个类，所以就会发现在前面的controller 这一层，类的数量非常多，表明此种写法是错误的。
在开发者进行设计的时候，有一个usecase 图，又名为用例图，其中增删改查不是4个功能，而仅仅为一个功能，该功能统称为manage 。例如对书进行操作名为manage book，其应该对一个类进行操作，所以不要写出很多controller。
是否四个操作要为四个不同的URL，从URL 去区分是可以的，但是更好的方法是不是靠URL，而是通过http 里面的方法，例如在映射中提及在ctroller 中，用户可以称其为GetMapping，其表明对着此URL 如果为GetMapping 的方法用户应该怎么做，如果为Post 方法用户应该怎么做，其应该用http 的方法或不同的方法去表示增删改查这些动作。
这就是所谓的controller 中包含一类Rest，实际上controller 实际上走的为GerMapping 至controller 至Rest 至http 此种路线。实际上无论怎样，开发者使用不同的URL 也可以，使用Rest 风格也可以，但增删改查四个动作绝对不是四个类，那么助教给开发时上课使用的后端，实际上此后端只有查询的动作，就是将书拿出来去呈现，其他的三个动作是没有的，即为如若个人想要进行设计，应在controller 里面加相应的处理方法而不应该提供四个类。在往届的同学中，不免不少同学在此处犯错误，往往在4 classes 中写的很多，实际上是不正确的，因为从设计角度看，其实其仅仅为一个功能，被称为manage book，其不是四个classes。
在此仅仅简单说明增删改查不应为四个类在动作，而是一个类中对着增删改查四个动作来操作。
一、什么是微信小程序
在跑的此例子中，我们的后端是一个，所以在后端写好之后，此后端在Tompack 里仅为一份，在其前端就会出现Web、Wetchat、ReactNatwe 或Cordova。
此类当个人回到前端再去看时，这些内容是运行在mobil 端的。在移动端运行的这些内容，包括在浏览器中运行的内容，其后端都是一个，此种为一个大前提。然后个人进行开发一个小程序，小程序自然是运行在微信当中的程序，此种程序可以直接进入，由此小程序总得的来说就是轻量级的，表明小程序的功能不会占用太多的资源，但是不排除其小程序制作不好的情况。
二、微信小程序的特点
微信小程序使用方便。
微信小程序开发方便。开发者可以直接调用微信提供的API。微信自身拥有很多可供开发者使用的API，例如当开发者在开发发一个小程序时，其要获取开发者的用户身份，包括头像等信息内容都可以获取。
微信小程序推广方便。微信小程序可以借助微信的巨大流量提升小程序的访问量，此为一个大前提。
三、微信小程序开发的前期准备
首先在开发前，开发者需要登录微信公众号平台http：//mp.weixin.qq.com 注册一个小程序账号，大致需要经过输入邮箱、密码、确认密码与验证码的过程，并获取开发者AppId。AppId 为开发者未来去下载小程序开发的开发工具，当开发者每开发一个小程序，AppId 就会体现在小程序中，所以如果开发者将例子拿出来去跑，是跑不起来的，其会显示开发者在下载小程序后，开发者将AppId 填入后与工程里的不一致，所以要将工程打开，替换为开发者的AppId，程序才能正常运行，否则直接下来不能跑。如若开发者获取AppId 后，长时间不活跃，系统将会自动将其封掉，然后开发者将每一年要求其再去开，此为这样一个过程。
在小程序开发的时候要安装小程序开发专用IDE，此IDE 风格类似于idea，如果个人用的习惯，则两者基本上相同。在它的左边为最后开发者模拟出来的样子，即为此应用程序最终跑出来的样子，中间竖框为工程的结构，右侧为开发者的代码，右下侧为程序在运行时的控制台等内容，在其中能看到其提示的一些内容。开发者在右侧代码中随便更改后，无需多余操作，其会在左侧自动进行修改并呈现修改后的样子。然后开发者小型去开发在目前的阶段下只能在机器上开发一下并运行操作，真正的小程序集成到微信中供其他人使用，还要开发者提交到微信的平台上，让微信平台进行审核，如若审核通过，才可以在微信小程序里面使用，所以开发者又要下载一个开发工具。在后面讲到移动端时，还要开发者开发安卓studio，然而如果开发者要跑苹果的程序，则开发者还必须拥有苹果的机器，所以开发者要进行下载与安装的内容是较多的。
在开发工具下载成功后，开发者做开发时，真正的开发语言仍以gs 为主，即为gs 在写开发者的一些动作，然后app wass 提供一种其格式的东西，包括它的样式，还有其将page 点开后，里面包含了页面其所谓模板的程序才能编写。那么默认这样一个空的工程刚建起来的时候，在其运行后，它就会为左侧呈现的样子。在第一步下载开发工具处，其有一个二维码，该二维码需要用户使用微信扫码，扫码后即显示左侧界面，其会自动获取开发者的用户名与头像信息。
四、小程序代码构成
（1）小程序配置
开发者通过开发者工具快速创建了一个QuickStart 项目，其会告知开发者其小程序中会包含四种类型的文件，分别为js 后缀的JS 脚本逻辑文件、json 后缀的JSON配置文件、wxml 后缀的WXML 模板文件、wxss 后缀的WXSS 样式文件。从名字是上可知js 为个人页面里面的脚本即为开发者应该如何实现里面动作的响应，例如开发者在小程序中设计一个下拉的动作或触屏的动作，这些动作在被用户触发后，应该如何去操作。
json 里面是包含着开发者当前的配置信息。在wxml 里面就是开发者呈现出的模板具体是什么，也就是说开发者呈现出的页面是什么，wxml 为模板文件，wxml 即为页面，此页面中就有其自己定义的tab，其不太类似于htaml 中的tab，尽管其看起来类似于htaml 中的脚本，但其中的tab 标签为其自己自定义的内容。
wxss 为样式，对应个人看到的如css 一样，也就是说在微信小程序里面，其按照此四类职责给全部分离，分离为四个不同的文件。在之前谈及的react 或者vue 在开发web 的前端，其为js、json、wxml、wxss 实际上是合在一起的，其都是一些.js 的文件，它是将职责完全分离开，至于为什么要将其分离开并没有详细的解释，它只说了一点即此事情是整个微信的团队经过长时间的考虑后所做的设计。所以在小程序里面所看到的任何一个页面，包括前进后退呈现的所有页面，其都是由js、json、wxml、wxss 四个文件构成，每个文件各有的作用。在整个工程里，它是一个单应用、单实例的过程，创建一个APP，全部内容都包含在app.js 中，所以APP 也有不同的文件，它的内容就是加载以后创建它的一个对象，此点内容与react 与vue 类似，例如react 中创立一个APP 的对象，然后所有内容都会加载到app 中。
所以在微信小程序开发中，有很多内容实际上与前面所学react 与vue 框架的理念是一致的，只是该项目中比较特殊的是把每个页面中的文件分成四部分，每个文件处理各自的内容。
用户在最外面看到app.js、app.json 与app.wxss，app.json 就是当前小程序的一些全局配置，其所包含的逻辑为我可以在这里面做全局的配置，做全局的样式表，然后每一个页面，如果个人不做特别声明，就用这些配置，如果个人做了一些声明，个人把配置给改掉了，那么此部分配置就用自己声明的内容，其他的内容仍然是用app.js、app.json 与app.wxss，所以其就与全局变量和局部变量一样。
在文件中，个人可以看到文件的配置具体包括什么，第一个pages 即为页面的路径，此处在说明文件所有的页面有多少个，其中第一个就是个人默认的首页，也即为个人在运行小程序中所第一个打开的页面，后面为个人要罗列开并写清楚小程序所有的页面在何处。由于一个页面被拆分为四个文件，所以通常情况下，开发者会将一个页面放置在一个目录里，其中一个目录包括四个文件。在pages 中的index 指示内容为.wxml 文件所处位置。在通常情况下，开发者常把四个文件放到一个字母里，表示一个页面的内容。第一部分是有关页面的内容，第二部分是有关小程序界面的一些表现，即为个人退出小程序后就是个window，此时window 下显示内容可以看到此为一些颜色的设置以及Title 的设置等等，就是其所呈现的一些内容具体是什么。然后还有一些内容就是小程序所需要设置的一些参数，例如网络超时时间，网络超时时间即为当用户在访问小程序页面之后多长时间，如果抓取不到数据，那么即为失败，程序就会提示此次失败超时时间为多少，小程序配置所用到的各种各样的组件也要放在其中，配置所用到的组件指的为个人在wxml 文件，也就是类比与html 文件里面，个人所用的微信、专门使用的tag，其会在tag中声明，所以app.json 为当前小程序的一个全局配置。
project.config.json 为小程序的工具配置。在project.config.json 中，会设置一些参数，例如urlCheck 为是否要检查url 的合法性，小程序中es 的脚本具体为es 几并且其是否复合规范。
其中微信小程序的ID，即为微信小程序开发者要自己去申请的内容即在"wx0eff7e14a53f6909" 处。
所以，如果个人把课程所给的例子直接打开去跑，小程序时是跑不起来的，其会去报开发者的开发工具及个人注册appid 和个人工程里的信息不一致，系统会自动报错，所以如果个人要跑那个例子，要把"wx0eff7e14a53f6909" 处内容改成个人申请下来的东西，然后包括这个项目的名字等等内容。
在通常情况下，不对此文件内容与代码进行改变，直接进行使用即可，如果用户在本地，即程序自动生成。从头到尾都是开发者自己创建这个工程，由此其自动会填进去个人的APPID，不会填写其他人的appid，由此不会产生错误。除非个人拿着例子文件直接套用或者直接使用个人的微信工具打开，那么由于信息不一致，系统会报错，否则个人从中自己去新建文件，它将不会产生错误。
page.json 为小程序的页面配置。pages/logs 目录下的logs.json 这类和小程序页面相关的配置。在每一个页目录中都有一个.json 的文件，此处.json 的文件就在写和当前这个页面相关的这些配置。如果个人有一个全局性的配置，个人还可以在每一个页面json 单独的页面里面，再去写当前此个页面单独的配置，但其作用域为当前页面，并不是所有的页面。
（2）WXML模板
WXML 模板类似与HTML。WXML 模板里面看起来就很像一个页面，在其中都是tag 标志，但是WXML 里面出现的标签全部都为微信自己的标签，在此模板中标签数量过多，实际上已经放不下了，由此其会放于http//developer.weixin.qq.com/miniprogram/dev/reference/wxml/list.html 中，其中还包含像在vue 里面出现的条件渲染类内容。由此，HTML 包含这两类内容，一个是微信的标签和hsnl 的标签是不一样的，另外就是多了一些wx：if 这样的属性以及{{}}这样的表达式。所以没有vf、vif，wx：if 为wx 开头，名词空间为wx：if，表示条件渲染。由此表示当在满足{{！hasUserInfo&&canIUse}} 条件时，其才会渲染出后面的内容。
（3）WXML样式
WXSS 实际上具有CSS 大部分的特性，另外做了一些扩充和修改，在此可以看到，其会显示在个人页面里面，凡是class 是container 的这种，那么其颜色、高度、对齐方式等等即可以在这里面去约定。app.wxss 为个人在全局里面做了一个约定，然后个人在每一个页面里面还可以再去做约定，如果页面里面有重复情况出现，则index.wxss 将会在真正页面里面覆盖app.wxss，由此可见此效果类似于层叠样式表里面层叠的概念，即为靠的近的页面定义的优先级会较高。
（4）JS逻辑交互
在小程序中，通过编写JS 脚本文件来处理用户的操作。由此在实际上是出现在两个文件里的内容，上面部分为wxxl 文件里的内容，下面部分为JS 文件里的内容，上面部分含义为个人拥有一个view，可以将其理解为类似于div 一样的概念，但其不同的是它可以有层叠的关系，即为看起来类似于一个落在另外一个上面。
当前在里面要显示一个消息，但是此消息内容是来自于JS 文件来处理，其来自于一个msg 的变量。Button 代表按钮，bindtap="clickMe" 表示该按钮有一个动作绑定，在动作绑定的时点击此按钮之后，就来调用clickMe。
无论是clickMe 还是msg 都在JS 文件里，JS 文件里面主要是有一个页面的构造器，在页面构造器中包含其有哪些数据，其包括哪些函数，clickme：function 表示clickme 在此定义，clickme 表示要将msg 值设为Hello World。此过程类似于react 与vue，首先其也是要通过setData 做的，如果直接写msg=Hello World，小程序难以拦截到，小程序也并不知道要及时刷新页面。
由此，只有调用setData，微信才能知道要及时刷新页面，将{{msg}} 内容刷掉，其实它的刷新也是在做局部的刷新。
与之前提及的react 与vue 最大差异体现于原来看到的内容在一个页面与一个文件中，当前看到的内容在两个文件中，但是两个文件合起来表达了一个页面，其前面名字一致，也同样放置于同一目录中。
五、小程序宿主环境
（1）渲染层与逻辑层
整个小程序的执行的一个逻辑就是在小程序里面有一个JsCore，小程序就专门在执行刚才的的js 脚本。
渲染层有一个webview 正在打刚才wxml 的内容。Wxml 内容在wxss 的作用下的呈现出来，然后当个人在此页面上有动作的时候，其就会被这边的jscode 相应代码给处理掉。
此图整个为微信小程序客户端的处理逻辑，通过页面可以点击相应的动作之后，通过这篇教程可以发出来。
此种请求是HTTPS Request 微信小程序进行封装过的，但其实际上就像react 里面个人使用fetch 或者axios 一样，其会发出ax 请求出去，然后获取到web 第三方服务器，即为用户看到的的book_end，获取到web socket 返回的数据，取回书的脚本后，jscore 中的脚本回调函数就会被调用，然后其会调用webview 的内容，用户会看见其中的view，也可能是包含在页面之间跳转或是更新当前内容，此时为webview 运行的环境。
宿主环境指的是程序运行的地方，整个运行过程都为微信的客户端。既然其是在发HTTP 请求到后台，所以用户才看到无论小程序前端是什么，其后台仅仅为一个，此种操作更加快捷便利，无论前端支持微信、移动APP、ios、安卓或者为浏览器的，无论哪种，其传递过来之后，对应的后端都应为一个。
（2）程序与页面
微信客户端在打开小程序之前，会把整个小程序代码包下载到本地。在.json 里面，主要有一个叫pages 的字段，其根据pages 的字段就可以知道在当前小程序里面，应该把哪些内容进行打包，也就知道当前小程序的所有页面路径。pages/index/index 为首页。整个小程序只有一个App 实例，是全部页面共享的。
小程序宿主环境的思想与react 或view 是一样的，即当小程序整个业务与前端运行起来，都只有一个App 的实例，所有的内容都在它的里面。onLaunch:function （）为当小程序驱动之后，个人希望小程序进行何种操作，即将内容填写在此。
所以此种空的工程出来的时候，个人即会发现里面大概是此种结构，剩下的内容就是要求个人去做的，即每一个页面要进行何种操作，页面之间如何进行互相跳转等。
pages/logs/logs 下包括4种文件，微信客户端会先根据logs.json 配置生成一个界面，此生成页面就为WXML 结构，样式为WXSS。然后个人在整个的操作过程中，最后客户端会去装载logs.js 文件。程序首先读取配置文件，然后会去把相关的一些框架生成好，紧接着客户端会去装载自己的页面，最后将gs 脚本装载到客户端里面。
在log.js 脚本中，其实它就是page 的构造器。
个人人即在声明当前在此页面里面有什么数据以及有一些什么样的函数。此些数据和函数都会被页面的wxml 结构访问到。由此可见，page 就是一个页面构造器，其在说明如何生成这个页面里面的内容，即不是肉眼可以被呈现出来的内容，而是不可见的data 和函数。
（3）组件
在小程序中，只需要在wxml 写上对应的组件标签名字就可以把该组件显示在页面上。
例如，开发者在页面中添加一个map 类型的标签，标签后写明了标签的具体的精度与纬度，其就会对应的呈现出来。由此可见，此内容所在位置为首页后面，在整个应用的小程序app.json，也即为在全局的配置中，整个有两个页面是因为index 是在第一的，所以它在前面出现。
Index 页面位于首页，所以个人要看index 里面包含的内容。在小程序制作的程序中，添加一个map，然后就会显示地图。
当开发者改写map 处代码，存储一下，其就会运行一次，左侧就会显示代码所对应的地图。前面来源与vue，vue 的类型是container 类型。
在全局的定义里面，凡是container 类型，其高度是多少，注意此处高度为百分比，即为其要占满整个屏幕。
程序还包含一些对齐的信息，例如居中等等。在页面里面，左侧为大的vue，右侧包含一个小的vue，用于嵌入用户信息，其功能为检测是否存在用户的信息与检测其信息是否可用，即在启动开发工具时，用户要扫描工具所提供的二维码，如果用户拒绝进行扫描，则此处会显示获取头像昵称失败，如果成功获取，程序就会显示用户微信头像与用户名。当用户点击头像，程序会绑定一个动作来调用bind view tape，在对应的GS 文件中书写bind view tape 用于何种地方。其表示其要去导航到URL，用户点击头像即可导航到log 界面中，此即为其初始的逻辑。
所以由此可见，开发者在程序中写页面并不困难，只不过此处必须要使用微信所提供的标签来进行写。
Map 就是微信提供的一个内容，map 的内容其实使用很方便快捷，即为开发者指定其经度与纬度后，开发者要在上面做标记，标记希望其调用何种方法，然后开发者要在对应的JS 文件里面去写，即为开发者打算如何操作具体的方法。第一部分较为简单，操作就是在wxml 写上对应的组件标签名字就可以在界面中呈现，而且如果按该操作添加标签后，开发者可以了解其默认的显示的逻辑是从上至下依次显示的，当所显示内容过多时，程序会自动向下排布，开发者可以通过上下滑动的方式去呈现，如果开发者不进行特殊说明，程序即自动自上至下运行。如果开发者想要使得页面具有层次，就要用vue 去进行包装。
（4）API
如果开发者去写了一些函数，然后开发者要对其进行调用，以微信的API 为例，微信的API里面的所有回调都是异步，需要处理好代码逻辑的异步问题。
比如获取用户的地理位置，此处使用getlocation，location 在调用的时会返回一个结果，此结果在返回之后，开发者可以去获取其经度维度，然后假设开发者要调用扫一扫的功能，在得到一个结果后，其可以将结果放到控制台上进行输出，success：（res）=>{表明开发者去调用之后，如果产生结果，其会回调success 后定义的箭头函数，并执行动作。
但是从个人开始调用getlocation 到其能成功返回并执行动作，在其中间会有等待的时间差，如果程序非常复杂且用户极多的情况下，就能够看出该等待的时间差。表明程序不是在getlocation 后，代码就持续等待，直到结果出现才做事情，而是在开发者调用后，代码就去执行其他操作，待其返回结果后，其再去调用函数与执行动作。此时与Ajax 表达含义一致，但是如果开发者调用微信的getlocation 后，开发者马上去访问latitude 与longitude，开发者可能访问不到，由此可以发现latitude 与longitude 访问值为空，因为API 回调是异步进行的，所以开发者要等待latitude 与longitude 有值之后再去访问，所以开发者要注意去处理好代码逻辑的异步问题。
六、小程序目录结构
小程序包含一个描述整体的app 和多个描述各自页面的page，首先，最外围为一个整体的app 开头的文件，然后包含整体小程序的逻辑、整体的配置和样式表，app.json 与app.wxss 可以将其理解为是全局的，app.json、app.wxss 与app.js 三个文件是必须放在根目录，如果用户使用开发工具，则不必担心，其会自动补充根目录。app.json、app.wxss 与app.js 三个文件就为用户在根目录中看到的东西，其可以作为所有页面可以共享的全局性的内容。
一个小程序页面由四个文件组成，分别是页面逻辑、页面结构、页面配置和页面样式表。其中页面配置与页面样式表不是必须的，如果页面不包含页面配置与页面样式表，其就用全局的app.json 与app.wxss。
页面逻辑与页面配置为必须的文件类型，因为必须要表明页面所要呈现的内容以及使用js 文件说明页面中的数据和动作的响应要如何进行处理。
七、WXML 模板
WXML 文件的全称是WeiXin Markup Language，翻译为微信的标记语言。WXML 与HTML 类似，但是WXML 要求标签是严格闭合的，也就是说在HTML 里面允许写
_，没有
是可以的，但是在WXML 里面是不允许的，如果没有闭合将会导致编译错误。
实际上，即说明WXML 要求格式严谨，其写法和HTML 的标签类似，为<标签名 属性名1="属性值1"属性名2="属性值2"…>…。最简单就为text，即个人想要显示一个文本，则text 可以放置到一个view，即可以使用view 做页面格式布局的整理。Image 指的为图像，图像最重要的即为讲清楚它位置在哪里，就是"src="./image/a.png"，就是将src 分类，开发者既可以通过类去选择对应图像。
（1）数据绑定
WXML 也具有数据绑定的功能。使用WXML 语言所提供的数据一旦绑定，其就可以实习动态改变渲染界面。
此概念和react 相似，由此可见，在WXML 里面，用户要求显示当前时间，但是{{time}}时间本身是要去读取参数与当前页面数据，当前页面的数据存于json 的文件中，其页面构造器里面的data 会清楚呈现，time 为读取当前的日期并将其转成字符串以后的结果。
由此，当个人的页面跳转到index 之后，程序要去读取配置信息并且呈现此页面，在呈现对应页面之后，加载index.js 文件，使用其中内容将其参数绑定内容尽数实现，由此用户最终看到的为程序页面下沿所写的当前时间。在程序中的data 里就包含time，在此应用即为time。相较于react，在微信中数据是分开存放的，而并不是如react 与vue 将数据写在一起。
属性值也可以动态的去改变，但是属性与文本相当于标签中间夹着的值，开发者使用两对大括号括起来即可，但是对于标签里面的属性，将其用两个大括号括起来被认为是错误的写法，正确写法必须要带双引号，此处可能容易搞混。
（2）条件逻辑
在WXML 中，使用wx：if="{{condition}}" 来判断是否需要渲染该代码块：True。
WXML 类似于vue，也可以进行条件呈现，所以在刚才所看到的有用户名与头像就是一个例子。其用法就是对于wx：if，个人在view 里面看到的为v：if，此处为wx：if。"{{condition}}">true意为如果条件为真，其就显示这个内容，那这里面我们看到的是说，1 意为如果条件为length 大于五，则程序显示结果为1。2 表示否则如果其大于二，则程序结果显示为2，3 表示否则程序显示3。由此可见，此三个为串联关系，此三个仅此会呈现一个内容。
因为是wx：if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用wx：if 控制属性。如果条件为真，个人想要显示view1 与view2。
，个人应写成一个block，即为一次性要显示多个组件标签，个人即可通过block 将其装载在一起显示。
（3）列表渲染
在组件上使用wx：for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。此处应注意是凡是出现标签和配置脚本，其都在两个文件里，只暂时将其放在一起来看。另外要注意的是由于 出现在属性里，所以此处带引号。{{index}}：{{item.message}} 表示出现在两个标签中间夹着的文本里，所以其不带引号。
用户去判断一下array 数组，然后其所要呈现的是index 与item message。首先，数组在对应页面的数据中，index显示数组中的索引，数组中实际上包含两个元素，此两个元素像两个json 字符串，还有间值对message 和foo。
所以{{index}}：{{item.message}} 含义为其要显示零，item 就表示是该数组里的每个元素，然后取该元素的message 键所对应的值，所以其显示了foo 和bar，在其前面带着索引。
所以此为下面所见部分两行，其逻辑就是右侧显示的代码，程序通过vf 来呈现。Item 表示re 里面的每一项，index 表示era 里面的index，所以个人可以将其理解为是关键字一类的内容，它就为专门对数组类型来进行操作，erra 本身不是关键字，此为开发者自身定义的变量，所以可以看到其颜色也为不相同的。
红色为开发者自己定义的变量，白色实践上相当于系统的保留字。Erra 包含两种元素，一个元素为foo，另一个元素为bar。其在两个文件能在一起的原因是当个人要跳转到页面时，页面要先加载logs.json，紧接着呈现WXML 结构，最后客户端再装载logs.js，然后动作执行后，就会将其数据绑定上去。
在vf 里面，刚刚提及内容是要呈现索引与item，即为每一项的message。其也可以写成在vf 里面使用wx：for-item 指定数组当前元素的变量名，使用wx：for-index 指定数组当前下标的变量名。也就是说对于array 里面的每一个元素，每便利一个元素，把该元素的索引付给idx，然后把item 每一项付给itemName，于是下面不用使用关键字、index 和item 来表示，即表示成为{{idx}}：{{itemName.message}}。
每一项的索引是idx，每一项都付给变量itemName,由此就拿到了数组中的内容。该两个代码看起来执行效果一样，index 与item 可能不如自定义的idx 与itemName 含义直观，因为程序可能有很多个vf，其地方可能在很多地方都会使用，如果开发者统一写成一种，会导致代码的区分度太差。
如果开发者在不同的地方写不同的代码，则效果会较好。例如在idx 处写student，在itemName 处写studentName，然后在下一个碰到vf 的某处写teacherid 并在itemName 处写teacherName，于是在中间加的内容里面即可明确的知道学生的信息及老师的信息，否则在index 部分显示内容是完全一致的。
Vf 和wx：if 意思是一样的，即为如果个人要呈现多个，仅仅需要定义一个block，block wx：for={{[1，2，3]}} 意为程序会循环三次来呈现item 与index，然后item 与index 会出现在两行里面。首先是index：，其次是item，在循环的时候会循环三次，循环三次循环的内容即为数组里的内容，此处数组里面内容是123，由于1的索引是0，所以其输出为0：，1：，2：，3，虽然过程看见简单，但是代码呈现略微复杂，代码显示其循环三遍，但每一遍里面都嵌入了两个vue，其显示了两个内容。
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如中的输入内容，switch 中的选中状态），需要使用wx：key 来指定列表中唯一的标识符。
列表类似于之前在HTML 中所见的一种无序和有序的列表，微信里面的列表类是类似的，而且个人可以通过js的脚本对其进行页面里面的ul和ol的列表做新的项目添加或者改变项目中的位置。此代码为{{item.id}}，其中wx：for 为微信的for 循环，开发者要便利objectarray 数组中的内容。在代码里面，它的key 就是unique，然后此代码要呈现的内容就是item 数组里面的每一项的id。其会存在switch 按钮，绑定switch 函数后，当用户点击后，就会调用addtofront 动作。
在实际操作中，objectarray 是index.js 中被定义，在objectarray 中定义为array 中包含六个元素，分别对应的id 是0、1、2、3、4、5，六个元素都存在一个unique 的属性，即为每一个元素有两个键值对，unique 属性分别是unique 0到unique 5，当开发者要进行操作时，其key 就是unique，{{item.id}}表示其要显示每一项对应的ID 的值，即为在左侧图中所见的0、1、2、3、4、5，其整个是switch，switch 即为表达来回波动的内容。所以该程序包含五个switch，在五个switch 里面的内容就为左侧所见从五到零，其每一项都存在一个key，key 就取unique 属性的值。
该界面下的switch 按钮用于绑定switch 函数，switch 函数首先判断一下array 中的长度为多长，假设长度为六，程序就会便利为6且循环六次，代码要生成随机数，随机数范围为从零到一，将随机数乘以六就表示其为从零到六中的某一个随机数，然后将其取整数。const temp=this.data.objectarray[x]意为将x 值赋给temp，this.data.objectarray[x]=this.data.objectarray[y] 意为再将y 值赋给x，相当于将x 与y 值对调，即相当于每一次选择六个数值中的两个数值进行对调操作，总共进行六次循环，再循环后的objectarray 的值发生变化，通过this.data.objectarray[y]=temp 操作来改变其中的值是没有作用的，微信是不会进行重绘页面操作的，由此个人必须通过setdata 代码来获取，个人应使用setdata做objectarray，就要将其改写成当前改动过的值，然后程序就会进行重绘，由此在左侧程序显示界面，点击switch 后，其会随机进行顺序的交换。
add to front 按钮绑定了addToFront 函数，在JS 脚本里面，this.data.objectarray.length 意为想要获取它的长度，然后个人新创建一个元素的内容，所以个人要创建一个新的元素，其来历就为length，其索引是从零到length-1，所以相当于插入了一个新的内容。例如左侧显示为零到五，由于原length 为6，所以个人就要插入一个id 为6的元素，它的unique 属性就为unique_6。个人要将一个元素所构成的单个元素的数组和原来objectarray 中的数组进行连缀，就相当于把两个数组拼凑到一起，则当前其中就包含一个新的元素，然后将其赋回给object。同理，object 进行此种操作是无用的，因为object 不能进行重绘，其必须使用setdata 将其设置，如此以来个人add 一次，其就会在数组中添加一项，而且为放置在最前端，拿当前包含一个元素的数组与整个数组做的连缀，所以在进行了此种操作后，该元素位于最前端，所以其叫add to front。在左侧显示3、5、0、1、2、4，点击switch 即会出现位于最前端的6。
Numberarray 与objectarray的差异：前面进行的包括id 与unique 可能被认为比较累赘，由此在numberarray 中，直接赋给其相应的值，因为如刚才所见，其key 是用unique 来的，即为unique 属性是作为每一项不同的主键，由此可见，当个人想要获取某一个switch 的开关状态时，个人即可以通过其unique 主键去查找。此时值包括1、2、3、4，此时在代码中其主键用*this 表示，那么此时numberarray 与objectarray 即可区分开。
其包含的Add Number to the front 是使用的addNumberToFront，其中的元素简单，仅仅有一个数字，所以代码中只需要放一个数字，然后与this.data.numberarray 去连缀，形成一个新的数组，输入setdata 后，其就会进行更新。
在左侧呈现中插入，就会生成新的内容。此操作即为个人在绘制一个列表，但是在此列表中呈现的为switch，即带一些开关项，此种操作在小程序中时常会被看见，因为开关项听起来类似于在web 页面中的checkbox，此类开关按钮比checkbox 在手机上手指操作更为方便与快捷。
（4）模板
WXML 提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。模板的功能为定义了一个内容，其将底部的内容进行了一个封装操作，也就即表示如果在view 里面要显示index、msg 和time，开发者希望此块的内容能够频繁的赋用在很多地方的时候，个人就应把它定义成一个模板，模板名为magItem。假设个人要显示一个messageItem，其中is表示具体显示为哪一模板，在此假设要显示一个XmsgItem 类型的模板，如果个人要与其进行绑定，个人需要提供在其中所谓它定义的一些变量的值，所以要提供一个data ，此data 即为个人提供的item。
定义一个template，上半部分相当于template 的一个定义，下部分相当于其在实例化，其在实例化过程中的数据都要绑定，在此绑定atem。Atem 实际上是有三个值，三个值分别为message、index 、time，index 为0，msg为this is a template，time 为2016-06-18。所以当点击显示时，在左侧显示屏幕下面就会出现一行代码。由此可见，
Template 相当于类似一个很小的一个定义的类，其在反复使用，但是template 不是一个页面，因为在微信一个目录中，比如说/logs 目录或者index 目录，其对应的即为一个完整的页面，template 不是一个完整的页面，其仅仅为一小部分想要赋用，template 上定义了一个局部，但是其又不是一个完整的页面，就相当于定了一个小的类，此类被定义为模板。如若个人在以后想要使用此类与小的模板的时候，个人即要向其提供它需要绑定的参数。
Is 相当于做实例化，例如个人定义一个模板，模板名字为name=odd，表示为奇数，其对应显示基数，
