专栏首页python-爬虫微信小程序前端页面书写

微信小程序前端页面书写

微信小程序前端页面书写

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件事件系统,可以构建出页面的结构。

一.数据绑定

1. 普通写法

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})

2. 组件属性

**简直和上面没区别啊**
<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})

3. bool类型

不要直接写 checked="false",其计算结果是一个字符串

<checkbox checked="{{false}}"> </checkbox>

二. 运算

1. 三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

2. 算数运算

<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

3. 逻辑判断

<view wx:if="{{length > 5}}"> </view>

4. 字符串运算

<view>{{"hello" + name}}</view>
Page({
  data:{
    name: 'MINA'
  }
})

三. 列表渲染

1. wx:for

项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

2. wx:for

渲染一个包含多节点的结构块 block最终不会变成真正的dom元素

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

3. wx:key

提高效率使用的

四. 条件渲染

1. wx:if

在框架中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elifwx:else 来添加一个 else 块:

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if

因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意: <block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

2. hidden

hidden 就简单的多,组件始终会被渲染只是简单的控制显示与隐藏

<view hidden="{{condition}}"> True </view>

类似 wx:if 不同是hiden控制显影,而if控制是否渲染

因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。

五.特殊标签

1.text

<!-- <text> </text>  相当于span标签 -->

2.view

<!-- <view></view>    相当于div标签 -->

3.block

 <!--block标签就是只显示内容不会嵌套任何标签 -->

4. image

图片标签,image组件默认宽度320px、高度240px

**注意:该标签 其实是 web中的 图片标签 和 背景图片的结合!!! 并且不支持以前的web中的背景图片的写法!!! **

属性名

类型

默认值

说明

src

String

图片资源地址,支持云文件ID(2.2.3起)

mode

String

'scaleToFill'

图片裁剪、缩放的模式

lazy-load

Boolean

false

图片懒加载。只针对page与scroll-view下的image有效

mode 有效值:

mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。

模式

说明

缩放

scaleToFill

不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素

缩放

aspectFit

保持纵横比缩放图片,使图片的长边能完全显示出来。

缩放

aspectFill

保持纵横比缩放图片,只保证图片的短边能完全显示出来。

缩放

widthFix

宽度不变,高度自动变化,保持原图宽高比不变

裁剪

top

不缩放图片,只显示图片的顶部区域

裁剪

bottom

不缩放图片,只显示图片的底部区域

裁剪

center

不缩放图片,只显示图片的中间区域

裁剪

left

不缩放图片,只显示图片的左边区域

裁剪

right

不缩放图片,只显示图片的右边区域

裁剪

top left

不缩放图片,只显示图片的左上边区域

裁剪

top right

不缩放图片,只显示图片的右上边区域

裁剪

bottom left

不缩放图片,只显示图片的左下边区域

裁剪

bottom right

不缩放图片,只显示图片的右下边区域

5, swiper

微信内置有轮播图组件

默认宽度 100% 高度 150px

属性名

类型

默认值

说明

indicator-dots

Boolean

false

是否显示面板指示点

indicator-color

Color

rgba(0, 0, 0, .3)

指示点颜色

indicator-active-color

Color

#000000

当前选中的指示点颜色

autoplay

Boolean

false

是否自动切换

interval

Number

5000

自动切换时间间隔

circular

Boolean

false

是否采用衔接滑动

6.swiper-item

滑块

默认宽度和高度都是100%

7.video

视频。该组件是原生组件,使用时请注意相关限制。

属性名

类型

默认值

说明

src

String

要播放视频的资源地址,支持云文件ID(2.2.3起)

duration

Number

指定视频时长

controls

Boolean

true

是否显示默认播放控件(播放/暂停按钮、播放进度、时间)

autoplay

Boolean

false

是否自动播放

loop

Boolean

false

是否循环播放

muted

Boolean

false

是否静音播放

<video src="{{src}}" controls></video>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Django与drf 源码视图解析

    通过看了源码我们对于渲染内容是JSONRenderer还是BrowsableAPIRenderer

    小小咸鱼YwY
  • 爬虫爬取m3u8视频文件

    小小咸鱼YwY
  • 微信小程序前端样式WXSS书写

    WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

    小小咸鱼YwY
  • 微信小程序日常踩坑后的总结(猜测你也会遇到,持续更新。。。)

    (1)图片需是本地图片或者是路径为https的网络图片; (2)使用网络图片要用wx.downloadFile( )下载,否则真机上无法显示图片; (3)w...

    Ewall
  • 小程序url传参如何写变量

    蓓蕾心晴
  • 微信小程序|宫格导航设计

    首先要熟悉小程序的开发流程:在js里提供数据,在wxml里绑定数据,在wxss里添加样式。

    算法与编程之美
  • Android中View研究自学之路

    写这篇博客呢是在研究了view将近一个月之后,算是对自己的学习做一个总结,进而反思一下学习方法,本博文不涉及代码分析。

    fanfan
  • Android6.0源码分析之View(一)

    目前对于view还处于学习阶段,本来打算学习结束之后再写一篇进行总结,但是发现自己自制力太差,学习效率太低,所以在此,边学边写博客,不仅督促自己完成对view的...

    fanfan
  • Android中View研究自学之路 Android6.0源码分析之View(一)Android6.0源码分析之View(二)

    Android中View研究自学之路 http://blog.csdn.net/zrf1335348191/article/details/54171263 ...

    fanfan
  • 微信小程序WXML页面常用语法(讲解+示例)

    官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构

    BWH_Steven

扫码关注云+社区

领取腾讯云代金券