昆明微信小程序开发教程三
什么叫微信小程序的视图 我想有传统PC端等网络编程或开发的程序员都比较熟悉，什么叫做视图。简单点来说就是网站或系统显示出来的界面，我们就不要说那些生硬的术语了，视图就是显示出来的结果。 我们先来看着一下本节课的大纲是什么，要学习什么内容
微信小程序的视图与渲染
●组件的基本使用●数据绑定·渲染标签●模板的使用
什么是组件 第一个是组件的基本使用，那么组件在官方小程序开发文档中简略了说明了组件就是视图容器，基础内容容器，表单组件等等，其实简略的说就是容器，它是由微信小程序已经强制制定了的容器，开发微信小程序时使用组件必须要遵守开发文档所定义的组件名称。大家可能都理解，容器在html中是什么，简单来讲就像是一个存放数据的盒子一样，一个<div></div>标签对这样子就叫做一个容器。那么微信小程序也使用了类似的方式来表示一个容器，如<view></view>这个标签对就叫做一个微信小程序的组件。组件的标签名称必须都是使用小程序已制定了的标签对，如果自已乱写标签对的话，那么是无法在微信开发工具中显示的，是会报错的。
我们知道了什么叫做组件了之后，再来说说上面开头所说的视图。那么之前也讲过，微信小程序中每个页面都会有一个子目录来保存这个页面的js后缀文件，我们估且把后缀为js的文件叫做控制器文件，以方便快速理解。有了控制器文件后，那么视图文件就是后缀为wxml的文件，就叫做微信小程序的视图文件了。而后缀为wxss的文件，我们叫做微信小程序的样式文件。每个微信小程序页面目录通常都包含这三个文件，这样子就构成了一个完整的小程序页面了。
为了方便快速入门，我们可以直接在pages目录中创建一个子目录为firstpage。这个目录就代表微信小程序的首页目录，不使用index目录。当在开发工具中创建好了微信小程序首页目录后，我们可以直接进行调试一下（或叫编译），看看会发生什么样的结果。当编译时，就会在开发工具的右边出现了报错信息。
这是为什么呢？其实就告诉我们，当我们在pages目录中创建首页子目录firstpage后，必须要在小程序的配置文件app.json进行路径的配置才可以，同时也告诉我们首页子目录firstpage中是空白的，没有first.js控制器文件。请注意一下，控制器文件的命名其实就是使用了子目录中的第一个单词，这也是小程序默认的，我们就使用默认的命名就好了。也就是说微信小程序每个页面的子目录在命名时使用了什么，那么其中的三个控制器文件，视图文件，样式文件都会使用子目录默认的命名来做为它们的名称。 既然开发工具告诉我们当新创建了一个小程序页面时，必须要在配置文件app.json文件中进行路径的配置，那么我们就首先要到app.json文件来进行路径的配置。即在pages:[]这里写上"pages/firstpage/first"这样的路径，它代表指向了pages目录中的子目录firstpage中的first.js控制器文件。通过这点我们就知道，配置文件配置的路径都是必须指向每个微信小程序页面目录的控制器文件，我们就这样来理解更方便，也可以避免了混洧，因为传统的程序开发都是必须先有编写控制器，然后再在控制器中进行视图的渲染的。
当配置了路径后，我们就要在firstpage目录中创建一个first.js控制器文件，创建的方法就是在每个目录的右边有一个小加号，点击它并选择js后缀选项就可以创建了first.js控制器文件了，视图文件和样式文件的创建也是类似的，只要选择它们对应的后缀就行了，我们就把这三个文件都创建出来。接着我们打开first.js控制器文件，此时它是空白的，我们必须要在其中写入逻辑代码。微信小程序页的逻辑很简单，其实就是直接在控制器文件中调用一个page()方法就行了，这个方法里面调用的数据一般都包含了几个数组，分别为data:{}数组，onLoad,onReady,onShow,onHide这几个事件函数。要注意代码它们的各自的写法，事件函数使用事件名：function(){}这样的写法，这是默认的微信小程序写法，它们的作用和传统的js代码中事件函数是一样的。
其中小程序的方法调用的写法也要注意是pages({})这样的方式，比传统的多了一个{}符号，所以微信小程序的程序的写法是我们必须要记住的，它和传统的程序写法有比较大的区别。 当我们把控制器文件first.js编写好的，我们可以直接来编译一下看看有什么结果，结果会发现，界面显示除了顶部的栏目的文字显示外，整个界面是空白的，这是因为我们虽然创建了视图文件first.wxml，但是里什么内容都没有写，那么结果显示当然是空白的。所以接下来我们必须要到视图文件中编内容。 上面说到组件的知识，那么实际上视图文件中一般都是由各个组件来构成的，即由不同的容器来构成视图文件的内容。所以说视图内容的编写就是把组件写出来构成视图文件的内容，如在视图文件中写入<view>你好，欢迎光临</view>后，在开发工具中进行编译一下，结果发现刚才首页没有内容显示的空白部分，就会显示了你好，欢迎光临这一行字。到这里，我们整个首页的创建就完成并成功显示了，相信大家通过这个例子就理解了组件的如何使用了。 二。数据的绑定 我们知道了组件就是使用微信小程序已规定的各个组件来书写在视图文件中，就可以得到显示的结果了，那么数据的绑定，也比较简单。所谓的数据绑定，它的意思就是不要直接在视图中书写内容文字或数据内容，而是通过在js控制文件中给某个变量定义内容，然后在视图文件中的组件中使用－－{{变量名}}－－这样的方式就达到数据的绑定，也就是说它和直接在视图文件中书写内容文字的作用一样，只不过内容由控制器来定义，而不是在视图中直接书写。
而在js控制器文件中哪个地方定义这个变量名呢？就是在data:{}这个数组中进行定义，如motto:"欢迎光临华兰网络"，这样子就定义了一个motto变量了。数据绑定到底有什么作用呢，可以这么说数据绑定―――其实就是和php中动态从服务器中获取数据并显示出来一样，只是这里的数据是要在js文件中data{}中定义并提供，而php则是数据库数据表中提供数据而已。这就是数据绑定的重大作用。 三、什么渲染标签 所谓的渲染标签就是<view>标签对，这个标签对，或者叫做这个组件可以在其中使用条件判断语句，也可以使用循环语句。现在先不讲复杂的条件和循环语句，你只要知道view标签就是视图文件的输出显示的意思就行了，或者叫做渲染输出。 四、什么叫做模板 有过程序开发的程序员都知道，模板就是把每个页面相同的部分提取出来变成模板，然后在每个页面要使用时，只需要载入这个模板就行了，而不用再去每次都手动编写一次相同部分的内容了――――这样子就叫做模板。那么有一点就要注意的是，模板当然是视图文件的一种，那么就必须是使用xxxx.wxml这样的文件名来命名，所以只要创建了一个模板文件后，然后在另一个视图文件中使用<include src="xxxxx" />这样的方式引入模板文件即可，比如说把小程序头部作成模板文件，然后在首页中，就可以不用再编写头部内容，而是直接引入头部模板文件即可。引入模板文件还有第二种方法是使用<import src=xxxx >方式来引入或加载模板。 微信小程序开发教程的第三节内容，大概就是这样子了，我们这节课程讲了组件的使用，数据绑定，渲染标签，模板的使用四个方面，其中还举例了新创建一个微信小程序页面的例子，通过这个例子，大家应该能够知道如何创建一个新的微信小程序的页面了，同时该怎么进行数据绑定和组件等如何使用大家可举一反三。
发表评论 取消回复