微信小程序入门（一）文章列表

发布：2018-01-25 17:20浏览：次来源：网络作者：tianshu

这章内容先讲解如何使用 template 和 wx:for 完成文章列表的骨架。然后下章谈谈如何使用weui-wxss UI框架美化页面。

微信小程序官网的api介绍很详细，https://mp.weixin.qq.com/debug/wxadoc/dev/ 。但这也让我有些无从下手。所以我打算从实战中学习它。

在看这篇文章前，先请大家，大致了解微信小程序文档。

第一步，先搭好骨架，创建一个list文件夹，用来存放文章列表相关的内容，官方文档中也强调过：“为了方便开发者减少配置项，我们规定描述页面的这四个文件（js，wxml，wxss，json）必须具有相同的路径与文件名。”

（打开项目硬盘目录，然后把index文件夹下的内容copy到list下面，文件名好像会自动修改）

第二步，在 app.json 中配置 pages ，"pages/list/list" 不需要添加文件后缀名（模仿index来即可）。

同时也可以添加底部tabBar （官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html）

"tabBar": {
"list": [{
"pagePath": "pages/list/list",
"text": "文章列表"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},

配置好后，便可以在list.wxml文件中写代码：

<text>这是文章列表页面</text>
<template name="msgTemp">
<!--
1. scaleToFill : 图片全部填充显示，可能导致变形
2. aspectFit ：图片全部显示，以最长边为准
3. aspectFill ：图片全部显示，以最短边为准
4. widthFix ：宽不变，全部显示图片
-->
<view>
<image src="{{src}}" mode="scaleToFill"></image>
</view>
<view>
<text>{{title}}</text>
<text>{{time}}</text>
</view>
</template>
<view wx:for="{{msgList}}">
<template is="msgTemp" data="{{...item}}"/>
</view>

没有一点点样式，，，

那我们开始学习，这段代码中所用到的新知识，

首先是模版template的定义用name去定义模版，然后用is去调用模版，数组当前项的变量名默认为item所以data里面可以用{{...item}}来输出数据（官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/template.html ）

然后用wx-for 循环打印，运行时可能有警告（官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html）

最后一步是在list.js中定义数据

在Page 下 data中添加（图片路径是相对路径，根据自己的情况修改）