作者:ITDragon龙,原文地址 一:文章列表
这章内容先讲解 如何使用 template 和 wx:for 完成文章列表的骨架。然后下章谈谈 如何使用weui-wxss UI框架美化页面。
第一步,先搭好骨架,创建一个list文件夹,用来存放文章列表相关的内容,官方文档中也强调过:“为了方便开发者减少配置项,我们规定描述页面的这四个文件(js,wxml,wxss,json)必须具有相同的路径与文件名。”
第二步,在 app.json 中配置 pages ,"pages/list/list" 不需要添加文件后缀名(模仿index来即可)。
配置好后,便可以在list.wxml文件中写代码:
没有一点点样式,,, 那我们开始学习,这段代码中所用到的新知识, 首先是模版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中添加 (图片路径是相对路径,根据自己的情况修改)
最后编译运行可以看到数据都打印出来了。比较简单,只是会很丑陋,下一站会用到weui-wess中的面板去修饰文章列表页面 注意事项: 1.json格式,很容易在最后一条数据加上“,” 逗号; 2.“{{}}” 变量忘记添加该符号 3.删除或回车的时候,可能会把<>删掉,操作时需注意。 二:UI框架上一章节,谈了文章列表的结构搭建,现在要给它披上嫁衣,我选择的是weui-wxss这款官方提供的UI框架。下一章便要谈谈如何使用 wx.request 动态获取数据 weui-wxss是微信官方提供的ui框架,用起来也很方便(copy)。下载地址:https://github.com/weui/weui-wxss 第一步:需要把下载的内容copy到项目中,主要是dist目录下的style目录下的weui.wxss文件。 第二步:在全局的app.wxss文件中引用 , 注意目录是相对路径
第三步:加class样式
这个步骤很关键,怎么找到合适的文档呢?weui-wxss是没有文档的,但是它有例子。在下载的内容中,dist目录下的example目录下全部都是例子。我们需要做的是将dist目录导入IDE中,然后找到合适的UI。
如图所示,找到合适的页面,然后通过红色框的路径找到对应的wxml文件,把需要的部分copy出来,再结合自己的要求修改。 文章列表效果图:
注意点: 1.copy出来的代码,势必会打乱原来代码的结构,这时不能心急,慢慢修改。毕竟这些class的命名是比较长的。 |
微信小程序入门《一》文章列表,UI框架
发布:2018-04-16 10:25浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08