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

Myth丶恋晨 2022-09-26 15:45 176阅读 0赞

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

微信小程序官网的api介绍很详细，[https://mp.weixin.qq.com/debug/wxadoc/dev/][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][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">
    
    <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][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][https_mp.weixin.qq.com_debug_wxadoc_dev_framework_view_wxml_list.html]）

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

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

data:{
        msgList:[
          {id:1,title:"标题一",time:"2017-3-5 23:01:59",src:"../../images/wechatHL.png"},
          {id:2,title:"标题二",time:"2017-3-5 23:02:59",src:"../../images/wechatHL.png"},
          {id:3,title:"标题三",time:"2017-3-5 23:03:59",src:"../../images/wechatHL.png"},
          {id:4,title:"标题四",time:"2017-3-5 23:04:59",src:"../../images/wechatHL.png"}
        ]
      },

最后编译运行可以看到数据都打印出来了。比较简单，只是会很丑陋，下一站会用到weui-wess中的面板去修饰文章列表页面

注意事项：

1.json格式，很容易在最后一条数据加上“，” 逗号；

2.“\{ \{\}\}” 变量忘记添加该符号

3.删除或回车的时候，可能会把<>删掉，操作时需注意。

微信小程序入门教程集合：[微信小程序入门教程全集][Link 1]

[https_mp.weixin.qq.com_debug_wxadoc_dev]: https://mp.weixin.qq.com/debug/wxadoc/dev/
[https_mp.weixin.qq.com_debug_wxadoc_dev_framework_config.html]: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html
[https_mp.weixin.qq.com_debug_wxadoc_dev_framework_view_wxml_template.html]: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/template.html
[https_mp.weixin.qq.com_debug_wxadoc_dev_framework_view_wxml_list.html]: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html
[Link 1]: http://www.itit123.cn/blog/detail/19.html