style 对象 微信小程序_微信小程序学习（5）

整体框架的介绍

一、数据及事件绑定

(1)总体介绍和思路

实现效果，点击后数据改变

数据绑定，通过{{}}实现，里面变量有对应值

对于对象绑定，也是在{{}}中，对象加属性

数组元素是数组名加下标

(2)代码及其解释

1. index.wxml

先是边框加标题样式，后面一系列的绑定通过{{}}实现，最后是一个按钮，type为primary，事件绑定函数为modify，显示的文字。

2.index.wxss

直接设置view中的颜色，字的大小和上下左右的边距。

3. app.wxss--见前面推文，是边框和标题的样式设置

4.index.js，index.wxml中数据值来源

先有一个data，定义了数据，包括数值变量，对象有三个属性，一个数组有三个元素。小程序的渲染完成就是直接把data中的数据渲染到视图层，可以看到数据。再看时间绑定函数，点击会调用，调用了小程序预定义的setData函数，可以修改data中定义的初始值，修改数据绑定的值。

(3)总结

wsml，框架设计的一套标签语言，结合基础组件，事件系统，可以构建页面的结构。

data是页面第一次渲染中使用的初始数据，wxml中的动态数据均来自page的data。页面加载时，data以json字符串的形式由逻辑层传到渲染层。数据类型包括字符串，数字，布尔值，对象，数组等

数据绑定，渲染层可以通过wxml对数据进行绑定，数据绑定采用{{}}把变量包起来，可以用作内容，组件属性，控制属性，关键字，运算，组合，数组，对象等场景。

setData 可以吧把数据从逻辑层发送到视图层(异步)同时改变对应的this.Data的值(同步)

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

二、变量和函数的作用域及其模块化

1. 案例描述和思路

(2)代码实现

1. index.wxml和index.wxss

边框样式和标题，然后是引用不同地方的变量和函数。在pages中新建目录util来新建模块。共有六个view，其中通过{{}}进行数据绑定，获取从逻辑层传过来的数据。

再是直接设置view外观的设置，字体大小和底部外边距。

01

2.index.js和app.js和util.js

数据绑定中变量定义在data中，其中只有msg3和msg4都是在本文件中定义，可以直接使用。而对于msg1和msg2是使用全局变量和全局函数。通过app来访问的，在开头获取全局应用实例，而详细的定义是在app.js中在App({})定义变量和函数，这样就可以通过在文件中定义全局对象实例来直接使用定义的变量和函数。

而msg6和msg5是在新建的文件中定义的，其中定义了变量和函数，如果要在其他模块中使用，要先在新建的文件中加上module.exports输出变量和函数，才可以在其他模块中使用，而在其他文件中要通过定义变量获取模块应用实例 require。

最后通过渲染看到数据。

(3)知识点总结

文件中声明的变量和函数只是在该文件中有效，不同文件可以有同名的变量和函数，不会互相影响。

全局的应用实例可以通过getApp()获取，全局的数据也可以再App()中设置。

其他模块需要通过module.exports或者exports对外暴露接口，在需要使用这些模块的文件中，使用require(path 相对路径)来引入。

其中其他模块可以中可以有一些公共的代码抽离成为一个单独的js文件

三、条件渲染

(1)设计思路

了解条件渲染的使用。

实际操作实现效果如下。

(2)代码

1,index.wxml文件

条件渲染中wx：if和wx：elseif和wx：else的实现机制。

把条件渲染语句放在view或者是block

在view中，只有在每一个view中需要放入wx: ,

才能 对该行文本进行渲染，如果block中，可以对多行view进行渲染。

第一个view的样式style，直接再其中定义

边距上下左右为20，文本水平居中。条件渲染中，如果color(从js中传递而来)为判断中语句，就显示对应文本。

最后有一个样式是view-item,背景颜色对应color，从js的Data定义的值，即依据js中传递过来的color判断显示的文字，最后显示对应的比较颜色。

同样先定义了一个style同上，边距和文本水平居中，利用block实现条件渲染，在block中写入条件wx：if="{{}}"，如果length大于10，执行其中的内容。view中class样式有view-item和 后面对应的背景颜色颜色，空格隔开即可。

2.index.wxss

第一个宽度和高度，接着3个背景颜色。

3.index.js

在page中的data设置变量的数据，通过数据的绑定来实现视图层的渲染。

(3)总结

使用了wx:if="{{condition}}"判断是否要渲染该代码块，显示。也可以通过wx：elseif和wx:else来添加一个else块。

而在block中使用wx:if，作为一个包装元素，把多个view包装，通过控制属性来判断。不会做渲染，只是接受控制属性。

四、成绩等级计算

(1)设计思路

输入成绩(在0到100)输出对应等级(不及格，及格，良好，优秀)，输入不在这个范围内提示不正确。

实现效果如下

(2)代码

1. index.wxss和index.wxml文件

边框box和标题title，后面失去焦点触发事件发生，调用在js中定义快递scoreInput函数，后面可能是五个条件渲染语句，在｛｛｝｝中给出判断语句，输出对应语句。输入的数值在js中，通过数据绑定来到视图层。

input样式，上边距，下边距，宽度，高度，边界粗细，实线，颜色。

2 .index.js

data中定义score初始值，下面的函数是事件绑定函数，失去焦点就调用该函数，给score赋值，e就是这个事件，针对的对象就是e.detail，就是input组件，然后把值赋给score。渲染到视图层得到值。

(3)总结

1. 综合应用了input组件和wx:if来实现等级的判断

2. 多级条件渲染wx:if的方式。

五、列表渲染

(1)设计思路

编写一个小程序，利用wx:for实现对数组，对象以及字符串的列表渲染，利用wx:for-index和wx：for-item实现对index和item的重命名，在block中使用wx:for实现对多节点结构块的渲染

(2)代码

1. index.wxml和index.wxss

   首先是style格式，上下左右边距为20像素，文本水平居中。

对于绑定数组渲染，进行了数据绑定，for的对象必须放在单引号或者双引号中，数组array来自js后缀文件中，渲染时，index代表下标，item是项。默认。循环显示array[0]到[3].

对于直接数组渲染，for的对象在｛｛｝｝中，中间直接写一个[]包括的数组，用index和item来显示下标和项目。

对象渲染，对象object在js后缀文件中定义，而index不是下标，而是对象的属性名，item是对象的属性值

字符串渲染和index和item重命名，默认时对于index是数组下标或者是对象属性值，item是数组元素和对象的属性值，渲染的对象是字符串，直接再{{}}中，把index用i表示，item用j表示。起到相同的作用。

渲染多节点结构块

渲染对象[1,2]渲染一和二是分别打出三色条，最后显示出两个三色条。

滑动查看更多图片

2.index.js

数据定义，数组和对象名定义。

(3)总结

在组件上使wx:for控制属性绑定一个数组，既可以使用数组中的各项数据重复渲染该组件。

数组当前项的下标变量默认为index，数组当前项的变量名默认为item，使用wx:for-item和wx:for-index可以指定数组当前元素和元素下标。可以将wx:for用在标签上，以渲染一个包含多结点的结构块。

如果列表元素位置会动态改变或者有新的元素添加，并且希望列表中的项目保持自己的特征和状态，就需要使用wx:key来指定列表中元素的唯一标识符。

注意事项

wx：for的值wie字符串时，会解析为字符数组

花括号和引号之间如果有空格，将会最终被解析为字符串。

完

点击蓝字 ·  关注我们

球分享

球点赞

球在看

如有错误，请指正，欢迎一起来来交流学习!!!