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

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

看了下官网的组件和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框架。

微信小程序开发：简单列表界面的实现相关推荐

微信小程序开发-新闻列表之新闻列表绑定
微信小程序开发-新闻列表之新闻列表绑定开发教程: 1.效果图预览 2.准备工作在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局.小程序里建议使用flex布局,因 ...
微信小程序开发工具调试界面鼠标看不见
微信小程序开发工具调试界面鼠标看不见参考该贴<模拟鼠标消失> 解决方法: 打开"控制面板",在右上角搜索"鼠标" 点击"鼠标" ...
音乐播放器微信小程序开发-歌单界面（简陋版）
仿QQ音乐app的歌单界面制作了一个简易且简陋的歌单界面. 首先po一张最终效果图(很多功能还没实现,以及还有bug没有改好) 因为不涉及到逻辑,目前只需一些网页开发经验与知识即可(当然啦,还需要一定 ...
微信小程序开发一个小型商城（四、商品列表）
上一篇文章,微信小程序开发一个小型商城(三.商品分类设计) 在从上一个界面跳转过来,会看到商品列表这个界面:如下图所示: 页面分析:从上到下:分别是一个已经定义好的自定义组件,下面的综合,销量,也是一 ...
微信小程序开发界面介绍
这里是引用主要是简单的介绍一下微信小程序开发界面的各个文件先看下这个图片这是最简单的目录了 pages: 所有的页面都要在这里面创建,在这里面创建的页面需要在app.json里面添加一下路径如下 ...
微信小程序的简单开发案例(记事本)
微信小程序案例之简单记事本实现我最近在学习微信小程序,主要熟悉了微信开发者工具的简单使用以及小程序的开发流程.微信小程序的学习要求不高,只要有一些web前端等知识基础即可. 1,小程序简介微信小程 ...
微信小程序开发登录界面mysql_微信小程序欢迎界面开发的实例详解
微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现逻辑的实现样式的实现 1.布局的实现整个布局 ...
微信小程序制作简单的商品列表页，实现价格求和
微信小程序制作简单的商品列表页,实现价格求和准备工作 1.node.js 2.微信开发者工具目录结构客户端代码实现 index.wxml <view class="contain ...
微信小程序开发竟然这么简单？！
无处不在的小程序自从 2017 年 1 月 9 日,张小龙在 2017 微信公开课 Pro 上发布小程序开始算起,微信小程序已经走过了三个年头.从当初的只闻其名到今天的耳濡目染,微信小程序可以说已经 ...

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

微信小程序开发：简单列表界面的实现相关推荐

最新文章

热门文章