在这一次的课程学习报告中，我们我已经放了爱小喵的全部源代码。在查看源代码时，大家还是需要多看几遍视频，或者去查一下相关的帮助。在这里，我将为大家演示开发爱小喵的过程。我们会从 scratch 开始建立爱小喵，但是由于整个 app 文件以及项目文件非常多，所以我们可能只演示主要的部分。好，下面我们开始。首先，我们会打开开发者工具，然后重新开始建一个工程。这次，我们不需要 APPID，而是随便取一个名字。在这里，我想提醒大家，如果我们现在建一个工程，但没有填写 APPID，那么需要等到我们申请 APPID 后才能开始开发。
当涉及到 APPID 时，我们可以重新建工程，继续使用原来的目录。我们不会白做现在的工作，因为现在的工作并不会成为白做的工作。所以，我们可以建立一个文件夹，勾选在当前目录中创建 QuickCSS 项目，这将为我们创建初始的几个文件。一旦功能建立起来，我们可能会删除一些不必要的默认内容。我们会保留结构，但删除不需要的内容。现在，我们来回顾当初爱小喵的设计图，这是我们爱小喵的设计原型。我们可以看到，我们将有三个表页。如何在小程序中增加这三个表页呢？我们可以在 APP介里面增加这三个表页，我会在下文向大家展示如何增加这三个表页。
根据设计原型，三个 table 对应三个不同的页面。先建立三个页面，沿用原来的 index 页作为首页，然后建立两个新页。
根据设计原型，我们有三个 table，每个 table 对应三个不同的页面。先在这个配角下建立三个页面，沿用原来的 index 页作为首页，然后要建立两个新页。
“添加JS和HTML5文件到购物车页面”
在购物车页面，我们将放置两个空文件，主要放置 JS 文件和 HTML5 标记语言文件，名字与目录相同。
好，下面接两个文件夹。现在这两个页面都是空页，我们可以不管它们。回到 APP 级别，建立 table 的信息。在这里，这是叶的路径，我们的叶的路径在。我先放首页吧。将文字信息更改为首页，保留下面的图标选项。我们先观察一下它们的效果。同样结构的页面我们再复制一些过来。
好，这次我们放的是购物车页，这里改成购物车，这次我们放置的是我的页，我的好，那我们现在可以刷新一下，看下效果。编译出现问题，我们可以看一下这个地方啊，我多打了一个符号，好，我们再来这里还多了一个符号，但是在使用这个工具的时候要注意啊，它就自动完成，有时候会给我们添一些乱七八糟符号在，所以大家稍微注意一下，好诶大家看我们这个地方出现了三个table页了啊，我们点进去看一下。
会页会切换到其他图片可以看到，这两页我还没实现，所以它会报这个信息，这个图标不好看，其实我们也可以去掉它，或者我们也可以去把图标添加到项目中来，那暂时呢，我把这个图标去掉好，我们大家可以看到哈，这个时候这三个 table 页就没有图标了啊，我们暂时不要图标，如果大家需要设置图标的话，去把图标放在那里，然后把图标的目录信息设置对就好了，那下面我们改一下这个上面的提示，我们把它改成爱小喵，大家可以看到。
Navig title text 来改成艾小喵，好，我们这时候再来保存一下看好大家看到这已经变成爱小喵了啊，我们也能修改这个抬头发的颜色好，增加三个 table 页的方法其实很简单，就是在这个节省文件 APP 点节省代把这个 APP 点节省文件里加这个 table 就好了啊，系统会有自动完成，但是有的时候要注意自动完成可能会给我们增加一些特殊的符号，多加了一个引行，然后这个地方，这个是我们这个页的路径啊，我们可以看到首页的路径是 pages 下 index。
“爱小喵首页实现原理及代码解析”
就是 index 下面的 index，点这个文件啊，然后我们把文字改成首页，好，我们把这个这一段代码复制一下，增加一下，这样就多了两个页，对吧，那这个页呢，是什么？是我们的这个购物车页，名字改成购物车，这是我们的我的页文字改成我的。
好，我们保存一下，嗯，对，这个点还有一个就是我们要把这两页注册到这个点来，好现在保存一下看有什么效果，CTRLS 程序重新加载，诶 三个特步 L 选项出现了，好，那我们可以看这三个特步选项是这样的哈，呃，我们点这个选项啊，这个页是个空页对吧？购物测页我们还没写内容，大家可以看我们还没写内容啊，然后 好，我们现在是回到这个 AP 里头来，我们把这个 wech 改成我们的爱小棉袄在这里，你可以看到吧，抬text 把它改成爱小棉袄。
好，我们再CTRLS看一下效果，哎，这里改成二小喵了哈，那么这三个图标看起来是不正常的，原因是因为我们在这里没有认真指定图标的路径，对吧？那么如果没有认真指定图标路径呢？我们现在就简单的先把它删掉了，我们把这三个图标的信信息删掉，感觉好，大家看购物车变成这个样子，没图标了啊，那这个我们演示一下如何去增加这些啊，这三个信息就是三个table页，然后下面呢，我们在演示一下如何对某个页内的内容的设置，怎么去编写页内内容，好，大概讲解了这个之后呢，我们现在准备跟大家讲一下怎么去在首页中去添加像爱小喵一样的那个界面，对吧？我们做完之后就会像爱小喵，我们打开设计文档。
啊，就会像爱小喵设计图这样的效果出来，我们要做出这样的效果出来啊，那如何做出来呢？嗯，我们可以在这里一步步带着大家做哈，但是我觉得因为敲代码的时间会有点长，这样我们的课程时间会突超出，我还是直接打开爱小描线的工程，我就像写代码那样一步步讲给大家听，好，我们正式打开爱小喵的工程，大家大家可以看到爱小喵下面的购物车添加方法和我们刚才介绍的方法是一模一样的，大家可以看到啊看加了拖霸，然后加了这个Table霸，然后加了三个页，首页购物车页，我的页对吧？好，下面我们来看一下这个，它这个地方还有一个有意思的地方，就是它设置好了它的icon啊，就是它的图标，图标有两种图标，一个是选中状态，你看selected icon pass，选中状态的图标路径在哪里，还。
还有一个是普通状态，图标在哪里？我们按照这个路径都可以看到，我们的图标全部都放在这个帕布里克艾con下，你看这个是啊，首页的图标看类四的点PNG，这是没有选中时的状态，这是选中时候状态，看没选中的状态对吧？好，然后我们来看这个就跟我们刚才演示的代码是一样的好，时间的关系呢，我就不在这里停留了，我们现在来看一下这首页的实现，我们打开首页所对应的这个页面，这是配角是index个页面，我们首先看看页面布局将怎么去实现，我们要实现这样的页面布局，它会是一个什么样情况呢？我们看上面有一个区域，它是一个banner，对吧？它可以滑动照片，中间这个区域呢，一直它是列了很多商品对吧？很多商品，呃，可以看出这个分为两个主要区域，呃，下面这个table这个按钮啊，它是属于另外
哪个区域我们先不管它，这个实际上刚才已经讲了，在APP里头定义这个区域的内容，我们小程序主要控制的就是table以上，Title这个条以下的区域，都是我们小程序控制的直接控制的区域啊，在这个直接控制的这个页区域的当中，分为两个部分，这上面一个部分
等于什么，这是判断了一个，呃，一个数据，这个判断这个数据来决定是不是有URL，就是说我们是不是从服务器拽了足够的这个信息下来，这个信息呢，表示我们有这个需要的显示的班图，如果没有这个班的图需要显示呢，那我们这个VI这这个下面区域都不会显示出来啊，呃，这个东西在哪里可以找到，我们可以看到它实际在对应的这个JSS文件里头会有啊，对应的CSS文件里头呢，它决定的这个数据是什么时候，它在装载的时候啊，我们会去判断，我们要去装这个URL啊，我们装到URL以后，我们就会把它送到这个里头去保存下来，我们可能它在这个地方，好在这个接证文件当中，我们去请求主页班的，你看我们通过微信的这API去调了咱们麦小喵的API，然后调了之后我们取得的数据把它传送到了这，它表示我们要显示的
好，我们回到这里来看，如果image URL里呢，没有信息对吧？不存在信息，它就不会显示出来啊。那么在这个下面，啊是一个叫S外PE的组件，外PE组件就是我们用来形成一个可以左右滑动的区域显示区域的啊。这个区域就是S外组件做的事情。那么要使用S外PE组件，我们还得把S外组件的相关的人都定义出来。哪些东西需要进行定义呢？我们来看一下帮助文档，帮助文档组件视图容器swape诶大家可以看到这里面有很多需要我们定义的一些属性，指定好之后呢，这个组件就会按照我们所需要的样子去显示了。你看啊，Indication dot是什么？在面板上来显示，显
你知道吧，啊，这就指示点我们在很多地方可以看到，那我们这地方显示的indication dot呢，是也是有一个变量来绑定的哈，那这个变量绑定在哪里操作呢？其实这变量呢，全部都是在啊，这个我们的逻辑层去操作的，我们逻辑层会去决定这个点到底显示还是不显示啊，然后呢。
这个out bla，它其它是什么意思呢？都在文档里有，你看啊，文档里都有outb是否自动切换对吧？如果我们把自动切换设为fo的话呢，它就不会自动切换了，然后这个是切换间隔啊，这是每次切换要用的时间，这是衔接滑动是指的这个滑的时候后一张图跟不跟啊，那么我们再看这个里头S外PE里头的这个定义的是什么，Swipe呢？本身定义了整个滑动区域，包括这个区域上打不打点啊，以及滑动，自动滑动的间隔是什么？那么里头的区域这个block呢，我们这有个小小的注释，说明了block它不算是一个组件啊，它仅仅是一个包装元素，包装元素呢，是对这个里面的元素起到一个统一的一个包装，然后呢，会在页面渲染的时候呢，会产生一些控制属性的东西，什么是控制属性的意思呢？我们可以看一下，那么其实呢，这是形成一个循
循环不断的去从这个image us里面去取一条条image IM的数据，每取到一条我们就进来执行一次渲染，渲染出一个swap item组件出来啊。如果取完了之后呢，这个block就失去控制了，那么在渲染界面的时候就会往下去判断新的内容。
我们可以看到这个swi item是怎么去操作的，我们每一个swi item对应的其实是一个image这个什么组件对吧？Image组件在哪看一样在帮助里头我们可以找到隐image组件，好隐image组件在媒体这个地方点可以看到，以image组件它的它的这个属性定义方式，我们会定义图片的资源地址，图片的这个检查或者缩放模式，对吧？啊，错误发生时的处理对吧？啊然后呢，图片装完毕的时候呢，它产生了一个事件啊，那我们现在来看一下刚才的时间的地方，我们这里呢，指定了什么啊，我们指定了这个，呃，Image的这个对应的这个ID data ID和这个band tap呀，这几个呢，都是它的通用属性，就是大多数标签都有的通用属性，主要的你看src就是。
纸箱的地址是哪里？图片地址是什么？图片地址其实是拼装起的，首先是我们服务器的地址，然后再加上我们从这个里面取出来的这条记录的里面有个URL指定的这每一条记录都有一个独特的图片地址啊，把正拼装就形成了我们这一次渲染的时候所需要的图片地址啊。
然后呢，我们讲一下这个band tap啊。band tap实际上是事件绑定啊，指的是当他这个点点击的时候，被绑到哪个地方去操作。这个to detail view呢，其实就是在对应的这个GS文件里的，你看我们可以找到to detail well啊看to detail well，那这个就是我们当用户在这个地方点击了之后呢，它就会转到这个地方来操作啊，我们回来继续做这个啊，那么这就是其中的每显示的一方一幅这个图啊。
这就是另外一个幅图，如果我们当时这个URL有两次或者三次的话，这个渲染器就会在这里去执行两到三次，去生成两到三个image这个对象，视觉层的对象。渲染完毕之后我们就往下走了。关于导航条的东西呢，我们就大致介绍了，可能有些同学在刚才的解读中可能还有一些不理解的，第一个是建议呢，把我刚才说的这个过程再仔细看一遍，另一个呢，就是可以结合一些相关的帮助文档去读一读，或者动手做做实验啊下面我们来看一下这个区域哈，视图区里的这个商品列表区域都在做什么，这个下面的列表项在我们使用使使用的是UUL，就是无序列表这个项来做的哈，无序列表这个东西呢，可能在在微信里文档里目前还不全哈，那么呃，大家如果要查相关的资料，可以在H5，就我们上次说的W3C，就是世界互联网开发者协会，他们会提供一些相关的文档和教程。
对，那个里头可以查到啊，那我们可以看一下这个UUL这项后面的class呢，是在使用我们的样式文件去定义它的内容啊，样式文件在这里头放着，在我们今天就不再对样式文件做过多解释啊，我们来看一下这个部分啊，就是U为L呢，表示整个区域是一个无序列表，LS无序列表项，这个wx four呢，实际上是指的是在这个activity activity list所有商品的列表当中啊，我们一次性取出的商品列表当中，把每一个都循环处理一遍，就循环渲染一遍，所谓渲染一遍就是在界面上会出现它一次啊，那么我们稍后会讲这activity list呀，还是上面的这些信息是从哪来的啊，我们现在大致还是继续往下看，那么每一个列表上被渲染的时候，渲染具体要求在这下面这这个解里面描述，大家可以看到它是个will，那么它也有一个CSS的一个类，这个类是用来定义无序列表样式的，我们会在接下来的内容中具体介绍。
描述说它应该是样式，应该怎么定义，每一个view都会有一个自己的ID，同时呢，会把它的这个点击行为绑定到啊，一个一个响应函数去，对吧？啊，我们可以看成响应函数啊，它就绑定在我们开始介绍过的这个地方，对吧？To detail will啊如果用户在这点它呢，也会调到这个函数来，那么在这个响应函数中呢，你看它首先会去取我们带过来的这个信息，这个信息是什么？就是刚才哪个对象被点击了啊，每个对象被点击了，每一个这个对象啊，每一个这个view的这个，呃，这个这个历史中的这个，它都带有一个ID，如果他被点击了这个ID呢，我们就可以在这里获得到，你可以看到，嗯，好在这个地方这个函数哈，响应函数，它的绑定响应函数。
在这个地方我们可以得到这个商品ID，然后我们把这个商品ID作为参数传送给我们另外一个页啊。我们这个页叫商品详情页，实际上就是我们的商品详情页。待会我们可以试验一下，用一下调试，试一下看这两取到的是什么。那我们还是先说下这个地方啊，这就是对这某一个项的数据绑定啊，事件绑定啊，对吧。在这个里面你可以看到它还有一个图片，放个图片，然后呢，还放了一点文字信息，看这是放了它的文字信息。下面呢，就是显示价格的地方哈。其实这两个标签，特别是这个标签也可以用view标签来代替啊。然后我们现在在说下这个地方，我们说刚才介绍了啊，我们当一个点击行为发生的时候呢，我们要把它的商品ID渠道，把它跟这个一起拼接成一个URL，然后调用微信的这个功能。
切换navig get to什么地方，这个功能就切换到一个新的页去啊。那么在调试的时候看这个功能是非常简单的，你可看我们点调试。
好，你看我们打开这个配角对应的代码在哪里，它是在配角下面的。
Index，好，我们打开这对应的代码，我们刚才说了那个绑定的那个点击事件在这里to对吧，我们再这点一下，可以下置一个断点，好下至一个断点。那这个时候我们再来点一下这个地方，我们看一下，点一下好程序停到这里来了是吧？我们模拟器停到这里来了，那我们在这儿呢，其实就可以看到它的东西了，呃，我们可以看我们程序可以往下走这一步就可以看到一里面传来的数据是什么啊，一里传来的数据就有是点一下按基事件时间戳都有些什么数据对象啊，那这里看不太清晰，我们没关系，我们往下走一步，按CTRL10啊，就是按F10或是往下走一步啊，这个模拟这个叫做什么？我们的脚本语言往下走一步啊，我们在这个时候呢，其实就可以看到ID的数据是传来的三。
这个商品的ID是33，其实这个33的商品ID和我们后台的数据也是对应的，我们登录到爱小喵后台去看一下，嗯，爱小喵后台在这里。
我们看到安小面后台的商品编号33是什么，这一页没有，我们切到下一页去看33商品编号是啊，单反相机单反套机对吧，价格是12799，我们看下在前台界面看到的是不是这个东西，诶对吧，我们刚刚点的就是这个单反套机，价格12799，所以这个地呢，取到了它的ID对吧？然后我们就这一步呢，就会切换到把这个页切换到这个指定的新页去啊，我们按F8好程序就完全跑不出去了，哎，我们看到打开了这个单反相机的详情页啊。
啊，这下面有各种各样的信息，这个是一个简单的调试方法，简单介绍一下啊，大家可以在这个呃自己的编写中不断的去实验，我们现在跟大家介绍的下这个操作绑定从界面啊，怎么操作绑定过来的啊，那我们再回到上一层，刚才呢，我们详细介绍了整个这个首页的这个布局是怎么去做出来的啊，那我们再看一看首页布局上这些渲染所需要的数据是从哪里来的呢？比方说要不要显示这个点呢？对吧，要不要显示这个navigation的这个do呀，对吧？啊啊，我们实际上是在这个我们的逻辑层代码进行控制的，在我们逻辑层代码的开始处，好我们逻辑层代码是怎么执行的啊，我们可以看到逻辑层代码，GS入口做的第一件事情是去找到我们整个APP，就是我们小程序的整个的相关对象。通过这个，我们可以控制这个页面的布局，比如要不要显示这个点，要不要显示这个 navigation 的 do 等等。
整个APP找到我们才能取到我们的全局数据，所谓的全局数据就是在我们每个页都能访问的这些数据啊，然后包括我们接下来要去访问我们自身的这个爱小喵客服务端的服务访问地址啊，啊爱小喵服务端的访问地址要把它存下来啊。我们刚才的来到这一页的主要问题是去说啊，界面上看到的这些渲染所要求的元素，这些变量是在哪里的，来谁来控制它，那我告诉你是在逻辑层控制，你看逻辑层就有初始代码决定的，你看ind dot是否显示面板指示点，对吧？我们做一个小实验，把它改成副词，好，我们CTRLS。
等程序重新加载上来时候，你看这两小指示点没有掉了，注意到吗？没有掉了，指示点没有掉了啊，所以是在这个地方对这个啊，界面变量啊，界面元素所要访问的这些变量做初始化的。除了这个地方可以对它做初始化之外呢，我们还有一些其他的应代码也可以对它这进行控制。Load这个响应函数是当这个页面啊，整个的index页第一次显示出来被显示出来的时候，会去调用这个在第一次显示被调用的时候，我们做了些什么事情呢？我们会去找我们的爱小喵服务器去请求班的图啊，我们会去找爱小喵服务器把这个商品第一页啊，这一页我们一页现在是显示了好像是15个一二三五行啊显示出来对吧，那么请求都在这个点方，我们依次来看，首先我们来简单看一下请求班的图，嗯，前面介绍过了，我们。
就是怎么去调用这个呃，API微信API来访问服务器的，对吧，怎么去发起一个request啊，这个就是我们的爱小喵服务器去获取班ner图的API的接口地址啊，然后我们取到了班图，成功了之后呢，你看这个函数，我们会把这个我们取到的这个所有班的图的信息都传送到以magic UR ls里来，那如果以magic urls为为空，它不存在，对吧？那这个整个导航条就不会被显示，你看我们回到了这个文件，如果它存在呢，我们就会在这里有个block循环，一直取这里面的信息，它里面每一项是一个it img，每一条取出来之后呢，再把它设置，我们就会显示出一张张半的图啊，我们再回到这里来，这个地方就是在做这件事情的商品，我们要取全部商品的，取法呢，也是。
同同等类似啊，我们去取找到商品列表接口的地址，去使用微信API访问我们的小爱小喵的API，那我们这里传进来的参数有一个15，决定了我们到底要取多少个商品，我们要取分页取第几页，你想我们的商品库里如果有1万种商品，我们每次并不需要展示1万种，那我们怎么办呢？我们一般来说是我们想要取多少种多少个多少项，对吧？比方说我们要取十项，十项构成一页，那我们现在取的是第几页啊，那我们可以看到这个时候漏的时候，我们取的是第一页啊，我们一共有多少，我们一页是取15项商品，大家可以看到123，然后123，嗯，一二三四五五行三列对吧，35145，这刚好是取15个，取到了之后呢，我们再把它信息重新组装，最后送到我们的服务器，服务器再把它发送出去，然后接收方再根据这个信息去展示给你看。
回到我们的W叉ML文件去看，在进行商品列表排列的时候，我们确实就是去便利了整个Activity list，去把Activity list的里面所存在的商品每一个都把它显示出来啊，这就是这个这么样一个原理。那我们讲完了这个整个整个逻辑层怎么去装载这些信息进来之后呢，我们可以看到还有一个事情就是，呃，这个函数我们先前介绍过，这是当某个东西被点击之后去响应的代码啊，最后这个呢，是在做分享的时候，如果我们在这里，用户在这里点分享啊，那么会执行什么操作呢？其实就是这个函数被响应呢，它会生成一个，比如说，当我们分享给别人，我们看到的title是什么，描述是什么，还有一个呢，就是我们分享出去，到底是哪一，它会根据这个分享的内容去生成一个相应的输出。这就是分享的原理。
我们需要为页面配一个地址，这样当别人的别人的手机打开这个页面时，我们的爱小名的程序会自动定位到这个地方去。在这里，我们几乎讲解了爱小喵程序首页的样式实现、布局实现和逻辑层代码。我们提到了如何使用逻辑层操作数据变量，控制界面显示效果。我们 also提到了如何是视觉层的点击事件，是如何被事件绑定来到逻辑层去做进一步处理的。在整个爱小庙中，其他的页的执行的逻辑和大概的这种方式都是一样的，就是数据的来回传递，或者是事件绑定。在本文中，我们不多做解释了，关于爱小喵这个程序，这个小程序的编码部分的这个讲解，我们今天就到这儿了。
