微信小程序语法

微信小程序语法

  • 前言
  • 一、标签的使用
    • 1.view
    • 2.text
    • 3.image
  • 二、数据
    • 1.数据的定义
    • 2.引用数据
  • 三、逻辑渲染
    • 1.wx:if
    • 2.hidden
  • 四、列表渲染
    • 1.wx:for
    • 2.wx:key
  • 五、模板
  • 六、样式WXSS
    • 1.尺寸单位
    • 2.样式导入


前言

在小程序中没有H5提供的那些标签了,这里我们需要使用小程序给我们提供的组件。

一、标签的使用

1.view

view相当于Html中的div,是块元素

2.text

text相当于Html中的span,是行内元素

3.image

image相当于我们Html中的img,是行内块元素
mode属性常用值

微信小程序语法_第1张图片
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/image.html

二、数据

1.数据的定义

在界面对应的JS文件中的data属性上定义数据

data:{
   
    msg:"hell world",
}

2.引用数据

通过{ {}}的方式可以引用数据。
{ {}}里还可以进行一些计算,最终显示的结果是计算之后得到的结果。

data:{
   
    msg:"hell world",
    num:10,
}
<view>{
   {
   msg}

你可能感兴趣的:(微信小程序,javascript,小程序)