前言

微信小程序暂时处于内测状态，公司大版本刚刚上线，闲来无事，就看了看微信小程序的文档，顺便学习一下，希望在这里给大家鼓励一下，我发现自己越来越懒了，越来越没有动力了，有点危险，给自己敲响警钟吧。废话不多说，开始记录这些天学到的一些知识，希望对正在看的你有所帮助！本文是一位自学微信小程序的iOS开发者写的，所以很多东西都是跟iOS对比的。

开始使用

在这里创建一个项目并进行过滤，相信大家看官方文档就能做到。

首先，我们来构建整个应用程序架构

一般市面上的APP都是以展示的方式为主，今天就来模仿一下原版的IT Blog，一起来看看IT博客到底长啥样吧！

.jpg

首先

下面我简单介绍一下微信小程序中一些不可缺少的目录结构。

.png

WXSS（）是用于描述WXML组件样式的样式语言。

WXSS 用于决定 WXML 组件应该如何显示。为了适应大量前端开发者，我们的 WXSS 具备了 CSS 的大部分特性。同时，为了更加适合微信小程序的开发，我们对 CSS 进行了扩展和修改。

app.json文件对微信小程序进行全局配置，确定页面文件的路径，窗口性能，设置网络超时，设置多个标签页等。

该文件用于对微信小程序进行全局配置，确定页面文件的路径、窗口表现、设置网络超时、设置多个标签页等，相当于iOS开发

app.js是小程序的逻辑部分

根据上面目录结构的解释，不难看出我们的写在哪儿，没错，就是app.json，我们来看下面的代码

代码语言：

复制

{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, "tabBar": { "backgroundColor":"#000000", "list": [{ "iconPath":"image/icon_API.png", "selectedIconPath":"image/icon_API_HL.png", "pagePath": "pages/index/index", "text": "首页" }, { "iconPath":"image/icon_component.png", "selectedIconPath":"image/icon_component_HL.png", "pagePath": "pages/about/about", "text": "我的" }] } }

.png

上图的区域就是我们的了，我们可以在里面传入一个数组列表，想显示多少个 tab 就添加多少个，当然数量限制最多 5 个，如果是一个就没必要了，这个跟 iOS 开发挺像的，接下来按 com + s 再编译一下，就可以看到下面的结果了。

IT 博客.png

是默认的图片路径，是点击时的图片路径，至于文字，我想不用我说你们也猜到了，对，没错，就是显示在图片下方的。

我们暂时只写了两个Tab，主要是为了实现我们的首页效果。从我们的效果图可以看出我们在iOS开发中主要用到的布局，而在微信小程序中如何写类似的布局呢？我们先写贴代码再讲解。

代码语言：

复制

{{title}} {{time}} {{classification}}

这段代码中， ... 是微信小程序中的模板。那么什么是模板呢？官方文档是这么解释的。

模板

WXML 提供了模板（），可以在其中定义代码片段，然后从不同的地方调用。

我的理解是，这个相当于iOS开发里的cell，有了cell就只差一个数据源了，我们先临时弄个本地数据源吧。

数据主要写在js代码里，我们来看一下代码

代码语言：

复制

//index.js //获取应用实例 var app = getApp() Page({ data: { newList:[{url:"baidu.com",title:"sdsadsadasdas",classification:"ss",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}, {url:"baidu.com",title:"sdsadsadasdassss",classification:"ss",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}, {url:"baidu.com",title:"sdsadsadasdas",classification:"12",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}, {url:"baidu.com",title:"sdsadsadasdas",classification:"333",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}, {url:"baidu.com",title:"sdsadsadasdas",classification:"44",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}, {url:"baidu.com",title:"sdsadsadasdas",classification:"44",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}, {url:"baidu.com",title:"sdsadsadasdas",classification:"32",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}, {url:"baidu.com",title:"sdsadsadasdas",classification:"123",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}, {url:"baidu.com",title:"sdsadsadasdas",classification:"456",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}, {url:"baidu.com",title:"sdsadsadasdas",classification:"454",time:"2016-10-17",imgURL:"../../image/wechatHL.png"} ] }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) } })

数据源就是我们的数据源，数组里面包含了多个字典，里面包含了我们需要的五个字段，现在单元格和数据源都有了，接下来只需要显示出来就可以了，微信小程序里面的显示使用的是列表渲染。

列表渲染

使用组件上的wx:for控件属性绑定一个数组，就可以使用数组中每一项的数据来重复渲染组件。数组中当前项的默认下标变量名为，数组中当前项的默认变量名为item。

接下来我们看一下这个列表渲染是怎么做的，首先切换到.wxml，代码如下。

代码语言：

复制

com + s 重新编译即可看到以下效果

.gif

到此，微信小程序的列表功能就已经完成了，当然我们看到的布局很乱，下篇文章我们会对UI进行优化，让其和我们的效果图一样。

首次发布链接

第一时间收到文章推送