微信小程序视图层详解（一）

最新推荐文章于 2023-05-19 10:44:39 发布

滇北小生

最新推荐文章于 2023-05-19 10:44:39 发布

阅读量5k

点赞数 3

分类专栏：微信小程序文章标签：微信小程序微信小程序视图层微信小程序开发 wxml wxml详解

本文链接：https://blog.youkuaiyun.com/userhr/article/details/53330406

版权

微信小程序专栏收录该内容

4 篇文章

订阅专栏

本文介绍了微信小程序中WXML文件的基本概念及使用方法，并通过一个具体的示例展示了如何利用WXML进行列表渲染，提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们学习任何一个新的事物，其实可以对比旧的事物，微信小程序开发其实和前端开发形式差不多，如果你是前端攻城狮你将会很容易理解，其实一个微信小程序就这么几个文件：

.wxml //模板文件，相当于html，只不过里面放的是微信给我们提供的组件

.wxss //样式表，就是css样式文件，里面写的都是css

.js  //逻辑代码，js文件

.json //配置文件，配置窗口的颜色、标题、背景，格式都是相同的

这一部分主要给大家介绍wxml这个文件，这一个文件被称为：视图层，有点MVC的V的意思，又很像php里的smart，smart是把php里面的数据渲染出来，而这里的话是把数据都放在js里面，然后在wxml里面调用js里面的数据，最后显示在wxml里面，这样的话就非常的方便灵活，随便举个例子：比如我们要在wxml里面放100张图片，地址分别为：

image/1.jpg，
image/2.jpg，
image/3.jpg,
……
image/100.jpg;

这里有两种方式，一种是直接在wxml里面写100个图片组件：

<image src="image/1.jpg"></image>
<image src="image/2.jpg"></image>
<image src="image/3.jpg"></image>
 ……
<image src="image/100.jpg"></image>

另一种方式就是用wxml的列表渲染，只需简单的几行代码，100个图片立马生成，我们只需在js里面的data里面声明一个变量：

//js文件

page({
    data:{
        i:100
    }
})

然后在模板里面利用小程序给我们提供的列表渲染方式进行渲染：

<!--wxml文件-->

<block wx:for="{{i}}">  
    <image src="image/{{index}}.jpg" ></image>
</block>

上面这段小小的代码，100张图片立马显示出来了，是不是十分的快速？