开篇语

开篇语已经在热身阶段说过了，所以就不重复了。有兴趣的读者移步
来写点微信小程序吧：D） ～～～（热身阶段）
以及前面借鉴小程序开发官方文档的简易教程写的总纲
来写点微信小程序吧：D） ～～～狂奔阶段
还有分析小程序的目录结构与配置的内容
来写点微信小程序吧：D） ~ ~ ~ 分析小程序目录结构与配置
另外分析小程序的逻辑层的内容：
来写点微信小程序吧：D） ---- 分析小程序逻辑层内容

上一张学长的图片镇楼，下面直接上开发过程笔记。

张小龙学长

正文

一、 小程序逻辑层分为以下3个Part：

1. WXML

2. WXSS
3. 基础组件

视图层结构图

二、 WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。说的通俗一点，WXML有点类似与HTML 一样是超文本标记语言，相当于一个最后的收尾的设计师。告诉你，这个地方要有个图片，然后这个图片是由另外的地方引进的，然后告诉你这儿有个按钮，这个按钮连接着别的地方的开关，只要你一点，就会发生什么事！这么一说，我还觉得做小程序就像盖房子，有人负责给房子打通各种通道（脚本js）、有人负责给房子规定布局，比如这个地方是什么颜色之类的（配置文件json）、还有的就是接通各个地方的线路的人（wxml）！万事万物，都有其相似之处啊。

WXML的作用

WXML有以下功能：

1.数据绑定

规定这个地方要有个text数据，然后数据来源是js里面的motto变量，至于样式则是user-motto的

规定这个地方要有个text数据，然后数据来源是js里面的motto变量，至于样式则是usermotto的

在对应的脚本里面定义一个变量motto

然后在脚本里面定义一个变量

最后在wxss里面（网页设计师应该已经醒悟了，微信就是照搬了HTML+CSS+Javascript的样子）写个样式

usermotto的样式设置

2.列表渲染

先定义个列表变量，另外不知道为何，我不能在原本的data里面定义一个array变量。所以定义了一个新的data 以及把motto转进去了。

先定义个列表变量

然后给一块地方，链接

来不及排版了。明天还要去我二姑妈家，赶紧弄完睡觉

还可以使用一些简单的函数做一些比较有趣的东西

一个没有排版的九九乘法表

3.条件渲染

设定判断条件，if就是判断的意思，然后{{ XXXX }} XXXX是判定条件，至于view是在js里面定义的变量，然后==的意思不用我解释吧 ！所以通篇下来，其实就是一个

  if true：
        print（XX） 
  else：
         print（nothing）

设定判断条件，if就是判断的意思，然后{{ XXXX }} XXXX是判定条件，至于view是在js里面定义的变量，然后==的意思不用我解释吧

在脚本里面定义你所需要的一些变量

在脚本里面写上变量的定义。

效果图

4.模板

模板的意思大概就是

Paste_Image.png

Paste_Image.png

5.事件

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches。

在wxml中建立一个事件，也就是其他编程中的使用函数。原文中的是建立一个view，我觉得这种需要输入的地方还是采用一个button按钮比较好。

在wxml中建立一个事件，也就是其他编程中的使用函数

在Js脚本文件文件里面写入方法（函数）并且绑定其中某个数据(另外，之前是我傻逼。。。。忘了加“，”所以一直编码不正确)：

在Js脚本文件文件里面写入方法

具体效果图

6.引用

WXML 提供两种文件引用方式import和include。

import
import可以在该文件中使用目标文件定义的template，如：

在 item.wxml 中定义了一个叫item的template：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

include
include可以将目标文件除了<template/>的整个代码引入，相当于是拷贝到include位置，如：

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>

结束语

小程序算是假期的一个调剂吧，不然真的就是天天看小说，看视频的糜烂生活了。所以要是大家有兴趣的话，可以关注一下我的进度。当然，小程序不是我的全部，寒假清单里可没有小程序的容身之地。所以可能会有存在时断时续的状况，不过这都不是问题。后面我也会持续的跟进我对官方文档的解读进度，对Javascript理解不深，所以难免有的地方会存在一些错误，敬请谅解，不过基本上每一个原创点都是经过我自己的调试Debug，高手别来笑话我这些低端，毕竟目前我还是很菜的。OK，简书写完了。我仿佛已经听到了扇贝单词在召唤我。~~ ~ _{搞完活动碎觉咯 另外，辛苦某只} ~ ？？？~ ~ 一直跟我聊天到我写完，碎觉去！！！

另外安利几位大神的作品（直接给大神简书的链接）：
微信小程序—豆瓣电影APP
微信小程序之知乎日报
微信小程序——一个简单的音乐播放器
微信小程序-从零开始制作一个跑步微信小程序

个人宣言

知识传递力量，技术无国界，文化改变生活！