微信小程序的介绍和开发环境需求以及基本配置 (4)

页面的.wxml文件和html性质一样(view标签相当于div标签)

1页面引用js的数据是用{{}},也可以用作属性值

<view id="item-{{msg}}">ttt {{ msg }}</view>
<view>my age {{num}}</view>

2 如果都是字符串,{{name + msg}},就是拼接
<view>{{name + msg}}</view>

3 如果一个是字符串一个是数字也是拼接,
<view>{{name + num}}</view>
两个都是数字则进行运算
<view>{{num1 + num}}</view>

4分开写即使是数字也会会保留
<view>{{num1}} + {{num}}</view>

5在页面中如果属性想表达布尔值,一定要加{{}},当然也可以直接使用变量{{布尔值变量}}
<checkbox checked = "{{false}}"></checkbox>
<checkbox checked = "{{flag}}"></checkbox>

if判断
<view wx:if = "{{num>11}}">

sean is sb
</view>


6 循环默认是用index -> 取键,item -> 取值,
用wx:for-index --> 来修改取键的index
用wx:for-item --> 来修改取值的item
一般都要加上wx:key ="index"来提高遍历的速度
如果只想输出内容没不想要包裹的标签,用<block>标签做承载标签,这样即没有额外循环多出来的标签进行包裹
<view wx:for="{{name_list}}" wx:key ="index">
{{index}} ****{{item.name}} %%%%{{item.love}}

</view>

<view wx:for = "{{name_list}}" wx:for-index="k" wx:for-item = "v"  wx:key ="index1">

{{k}} :{{v.name}} ->{{v.love}}
</view>

<block wx:for = "{{name_list}}" wx:for-index="k" wx:for-item = "v"  wx:key ="index1">

{{k}} :{{v.name}} ->{{v.love}}</block>
小程序的wxss文件

标签中和原生的html一样都有class和id,我们的样式写在wxss文件,和普通的css没有区别,只是用rpx来代替px,

一般1rpx等于0.5px

wxml文件

<view></view>
#行内样式写法与原生的没有区别,可以调用变量来做属性值
<view>asdas</view>

wxss文件

.cls{
 width: 400rpx;
 height: 400rpx;
 background-color: blue;
}
小程序的官方组件

https://developers.weixin.qq.com/miniprogram/dev/component/view.html

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzjysy.html