微信小程序一

2401_83916435

于 2024-04-21 14:31:31 发布

阅读量728

点赞数 9

分类专栏：程序员文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/2401_83916435/article/details/138033519

版权

程序员专栏收录该内容

546 篇文章 2 订阅

订阅专栏

本文介绍了如何在小程序中使用JavaScript从数据驱动WXML页面，展示了如何使用for循环渲染列表，以及flex布局的用法和关键属性如flex-direction、justify-content和align-items的设置。还提到了wx:key的重要性，以及如何配合数据变动优化组件渲染效率。

摘要由CSDN通过智能技术生成

{{item}}/{{index}}

从JS中获取到的值，去WXML中渲染出来

JS部分

Page({

data: {

books: [

‘三国演义’,

‘水浒传’,

‘西游记’,

‘红楼梦’

]

/**

生命周期函数–监听页面加载

onLoad: function (options) {

})

WXML部分，可以修改for循环的标签名称——item和index

block可以同时渲染多个标签

{{item}}/{{index}}

{{abc}}/{{idx}}

实战：九九乘法表

WXML

{{row}} * {{col}} = {{row*col}}

WCSS

.row{

display: flex;

justify-content: flex-start;

font-size: 17rpx;

}

.row .col{

width: 100rpx;

}

在大容器row里面定义的格式，被包含在内的col也会跟着排版

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex-direction:

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap:

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

justify-content:

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items:

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

wx:key

JS部分

Page({

data: {

// lines: [

// {

// “id”: 1,

// “name”: “switch1”

// },

// {

// “id”: 2,

// “name”: “switch2”

// },

// {

// “id”: 3,

// “name”: “switch3”

// },

// {

// “id”: 4,

// “name”: “switch4”

// }

// ]

lines: [1,2,3,4,5]

tapevent: function(event){

var lines = this.data.lines;

// lines.splice(0,0,{

// id: 5,

// name: “switch5”

// });

lines.splice(0,0,6);

this.setData({

lines: lines

})

/**

生命周期函数–监听页面加载

onLoad: function (options) {

})

WXML部分

更新

如果JS部分有属性的话，key后面就可以通过属性来进行锁定；如果没有属性，类似列表：则通过 *this 来进行锁定

wx:key 的值以两种形式提供：

1、字符串或者数字，代表在for循环的array中item的某个property，该property的值需要是列表中唯一的字符串或数字，且不能动态改变。在写的时候，直接写这个property的名字就可以了，不需要写 item.property 的形式，并且不需要加中括号。

2、保留关键字 *this 代表在for循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：当数据改变触发渲染层重新渲染的时候，会校正带有key的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

3、即使列表中的组件没有发生状态改变，那么也建议使用 wx:key 。因为如果不使用，那么以后重新渲染的时候，就会把之前组件销毁掉，然后重新创建，性能会很低。

如不提供 wx:key ，会报一个 warning ，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

include

include 可以将目标文件除了外的整个代码引入，相当于是拷贝到 include 位置

参数传递

JS部分

Page({

/**

页面的初始数据

data: {

articles: [

{

‘id’: 1,

‘title’: ‘钢铁是怎样炼成的’

{

‘id’: 2,

‘title’: ‘互联网风口推动者的生意’

}

]

view被点击事件

onViewClick: function(event){

console.log(“hello”)

/**

文章被点击事件

onArticleClick: function(event){

// 获取event里面的数据

var dataset = event.currentTarget.dataset;

console.log(dataset)

// console.log(event)

/**

生命周期函数–监听页面加载

onLoad: function (options) {

})

WXML部分

请点击我

WCSS部分

.article-group{

font-size: 14px;

height: 40px;

padding: 10px;

line-height: 40px;

border-bottom: 1px solid #e4e4e4;

}

flex布局：

flex布局是继标准流布局、浮动布局、定位布局后的第四种布局方式。这种方式可以非常优雅的实现子元素居中或均匀分布，，甚至可以随着窗口缩放自动适应。flex布局在浏览器中存在一定的兼容性。但在小程序中，是完全兼容flex布局的，并且微信官方也是推荐使用flex布局的。

WXML部分：

WXSS部分:

.outter{

display: flex;

justify-content: space-between;

background: pink;

width: 300px;

height: 300px;

}

.inner{

width: 100px;

height: 100px;

background: gray;

border: 1px solid #e4e4e4;

box-sizing: border-box;/将设置的边框所占的px隐藏在长宽内/

}

转载于：https://www.jianshu.com/p/e4f371d6dc5e

flex布局一共有6个属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

1）flex-direction：很好理解就是定义容器中所有组件的排列方向，排列方向的话有4种row（从左到右）， row-reverse（从右到左）， column（从上到下）， column-reverse（从下到上），但常用的基本就是row和column这两种了，其它两种逆向排序目前没发现能用在什么样的布局上。默认值为row。

2）flex-wrap：定义了容器内组件在一条轴线排不下，如何换行。换行方式有3种 nowrap（不换行）， wrap（换行）， wrap-reverse（逆向换行），默认值为nowrap，当然我们常用的也是前两种，第三种逆向换行，我也是没想到这种诡异的换行方式能用在哪种布局上。

3）flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap，笔者个人还是喜欢将两者分开定义。

4）justify-content: 定义了项目在主轴上的对齐方式，这也是flex比原先的h5布局要强的地方，原先的h5布局要实现各种对齐还是比较麻烦的。