【小程序入门】小程序页面的数据绑定及展示

上篇文章我们提到了首页https://blog.csdn.net/u014650759/article/details/90719228，这篇，我们通过前面的例子，继续讲解一个基本的页面具备了哪些元素及其知识点，通过前面的系列文章我们知道，小程序的结构是MVC：

page.js 即控制层（C），也叫业务逻辑层；

page.js 中的data属性，即数据模型层（M）；

page.wxml 即展现层（V）；

page.wxss 即css，增强展现层效果。

上面是关于一个页面所必需的四个代码文件，我们知道，一个页面的展现需要有基本的视图组件元素及数据，了解各种视图组件及功能使用，可查看官方的链接https://developers.weixin.qq.com/miniprogram/dev/component/。要展示数据，还需要后台将数据传递过来，在小程序中，起传递作用的就是js文件中的data，而界面xaml代码中，则通过{{}}将data中参数绑定的形式展现出来。所以，如果我们要展示某个数据，我们先需要在页面js文件中赋变量及其值：

上面js页面初始化了一个data数据变量motto，并赋值为“Hello World”，而在关联页面xaml中，通过{{}}绑定该变量即可显示出来。

通过上面的截图还可以看到，src="{{userInfo.avatarUrl}}"这样的组件属性和内容一样，都要通过{{}}进行绑定，只不过添加了引号，但其标签固有属性如mode="cover"和class="usermotto"之类，则不需要。需要注意的是checked控件元素需要写成<checkbox checked="{{false}}"> </checkbox>不要直接写 checked="false"，是为了体现其计算结果是一个字符串。

另外，我们看到，页面xaml中还可以有控制属性，以用于控制页面显示的元素内容，如上图的wx:if="{{!hasUserInfo && canIUse}}和wx:else

还有，既然都说道绑定这里了，这里顺便说下上面xaml没有体现但页面开发中xaml存在的知识点：

1.绑定可以存在运算符，如下。当然，你也可以在页面js中计算后在通过data中参数绑定过来

1. <view hidden="{{flag ? true : false}}"> Hidden </view>
2. <view> {{a + b}} + {{c}} + d </view>
3. <view>{{"hello" + name}}</view>

2.从上面的js中可以看到最开头的代码const app = getApp()，关于这里的知识点是：每个小程序默认的都会有app.js文件，在这个app.js文件可以定义全局变量，定义之后可以在每个页面进行访问。通过getApp()方法，即可使用app.js里的全局变量。翻看前面文章或本实例，查看app.js文件中定义及使用方式：

总结，至此，我们知道了一个页面怎么将数据展现出来，页面是怎么将后台js文件的数据传递到xaml页面文件的。