首页 > 微信小程序开发 > 微信小程序开发:简单列表界面的实现

微信小程序开发:简单列表界面的实现

最近,想了解下微信小程序的开发。

微信小程序开发:简单列表界面的实现

看了下官网的组件和API介绍,想通过一个简单的列表展示,来学习下如何开发微信小程序。

先来看下最后的效果(使用的测试数据,后期可改为http请求返回的数据)。

微信小程序开发:简单列表界面的实现

底部的UI在app.json配置tabBar属性

具体的实现如下:

框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。

定义一个模块,新建一个page,如Index,会生成四个文件,分别如index.js;index.json;index.wxml;index.wxss。然后需要在app.json里配置pages,如 page/Index/index。

  • wxml (WeiXin Markup language) 用于描述页面的结构,包含一个视图容器,如view,scroll-view,或者一些基础内容及表单组件等。更多支持的组件详见微信小程序开发组件介绍。

  • wxss (WeiXin Style Sheet) 用于描述页面的样式,相当于网页的CSS文件。

  • .js 后缀的是脚本文件,.json 后缀的文件是配置文件

首先,使用<block>配合<wx:for><wx:if>等标签及常用组件完成简单的列表结构,使用hidden控制元素的显示与隐藏,具体如图:

微信小程序开发:简单列表界面的实现

里面用到的css,在index.wxss文件里定义如下图:

微信小程序开发:简单列表界面的实现

该模板的整体风格在index.json文件里进行配置,这里简单设置了窗口的背景色,导航栏标题文字内容及颜色,如下:

微信小程序开发:简单列表界面的实现

测试数据,定义在index.js里的data下,即 页面的初始数据:

微信小程序开发:简单列表界面的实现

通过这个简单的demo,学习了微信小程序开发一些组件的基本使用,也初步了解了其UI框架。

下次将介绍下微信小程序开发,注册一个页面,所涉及到的基本生命周期,感谢你的关注!

,可以参考小程序定制的资料,