微信小程序组件

微信小程序的特点

1 双线程程序一个线程用于渲染页面一个线程用于运行脚本

2 采用插值语法把数据插到结构中在js脚本中改变数据从而改变样式

3 通过数据驱动整个程序的运行

4 可以通过修改数据跟新整个页面

可以通过js脚本更改数据 js脚本中的任何函数都指向该函数所在的对象该对象有一个setData方法

this.setData({

key:value

})

组件就是微信小程序中构成骨架对的标签每个组件有这种各样的组件属性可供查阅 https://developers.weixin.qq.com/miniprogram/dev/index.html?t=19032811

view 相当于html中的div

text 相当于html中的span

rich-text 富文本组件类似于html中的节点

值可以是html中的文案 <rich-text nodes="<div>123</div>"></rich-text>

可以是数组<rich-text nodes="{{arr}}"></rich-text> 在对应的js文件中

data: {
    arr: [
      {
        name: "div",   name表示节点名称   attrs表示节点属性集合     children表示字节点集合

        attrs: {                              
          "class": "red",
          "style": "line-height: 100px"
        },

        children: [
          {
            type: "text",
            text: "你好"
          }
        ]
      }
    ]
  },

map 地图组件能够显示某一个位置

longitude: 经度

latitude：纬度

scale: 缩放等级

image 图片组件 src必须是图片的网址也就是线上的地址

icon 图标组件宽，高，大小

swiper 轮播图组件是一个复合组件子组件swiper-item

movable-view 验证信息时候的拼图决定了滑块的范围

是一个复合组件子组件movable-area 决定了滑块的大小以及方向

scrllo-view 允许内部上下左右滚动的组件

scroll-x: 规定滚动方向为左右滚动

scroll-y: 规定滚动方向为上下滚动

scroll-into-view: 它的值是子组件的id。表示该子组件尽可能的出现在第一位

微信小程序 组件

猜你喜欢