微信小程序入门（四）：页面数据展示

大家都知道，针对一款app上面都是展示信息的，那么在小程序中，页面上信息的展示是如何的，接下来进行详细探索：

在微信小程序中，编写页面布局是在wxml文件中进行的，则在wxml文件中，使用<view></view>标签进行内容的包裹，类似html中的<div>,现在进行一个需求的编写，在页面上编写布局，并将.js结尾文件中的处理数据进行展示到页面上；

index.wml

index.js

编译项目，则页面展示如下：

从上面结果可以知道在wxml文件中使用{{**}}可以将js文件中指定的内容展示在页面上，现在我们进行动态的展示数据，不需要展示起在page-data中固定的内容,修改js文件内容:

编译项目，显示结果如图：

由此可知，在js中动态的设置内容并将其更新到wml上，则使用 this.setData()，且修改的内容格式符合key:value。

就小程序页面数据展示就分析到这里，希望各位看官们有所收获，有什么错误的地方还望指出！！

1、小程序界面设计的技巧——每个屏幕只提供一个动作主题

在apPUI设计技术中，每个图像应该有一个单独的主题，这样用户不仅可以真正地使用它，而且还可以使它更容易开始和使用。如果一个屏幕支持两个或更多的主题，它会立即使整个界面看起来很混乱。

2、小程序界面设计的技巧——自然的接口转换

接口交互都是相关的，所以我们应该认真思考下一个交互是什么，并设计它工作。当用户完成了这些步骤，不要压制他们，给他们一种方式继续自然地实现他们的目标。

3、小程序界面设计的技巧——里面和外面都一样

如果它看起来像一个按钮，它应该作为一个按钮的功能。设计师不应该在基本的交互问题上聪明，而应该在更高层次的问题上有创造性。

4、小程序界面设计的技巧——微分并保持一致

在应用程序设计技术中，如果屏幕元素有不同的功能，它们应该看起来不同。相反，如果它们的功能相同或相似，它们应该看起来相同。

5、小程序界面设计的技巧——强烈的视觉层次结构

界面上的视觉元素提供了清晰的浏览顺序，即用户每次都可以以相同的顺序浏览相同的元素，从而实现了强烈的视觉层次感。降低了的视觉层次不会给用户一个关于如何导航的线索。用户会非常困惑。如果一切都是大胆的，就没有优先权。

以上便是关于小程序界面设计的技巧介绍了，好的用户界面设计可以让app的用户体验翻倍。如果您想了解更多关于ui设计的相关设计技巧及素材等，也可以点击本站其他文章进行学习。

上一节为大家介绍了页面间的传值

这一节继续我们的开发流程，这节课我们来实现“新增动态”页面的实现

实现效果：

首先我们在app.json中新增页面路径

编译之后生成目录及4个文件

引用的第三方js文件“qiniuUploader.js”

发表成功之后，onfire.on（"reloadDynamicFunction''）

发送订阅消息，让home.js触发刷新数据的事件。

内容浅显易懂，有问题随时提问~

下一节：

传送门：

十四：动态详情页面的实现与分析

---