微信小程序基础

微信开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

1.WXML模板

1. view 实现布局效果

2. scroll-view 可滚动的视图区域

3. swiper  swiper-item 轮播图和轮播图item组件

  属性：

      indicator-dots 是否显示面板指示点

      indicator-color 指示点颜色

      indicator-active-color 激活指示点颜色

      autoplay 是否自动切换

      interval 自动切换时间间隔

      circular 是否采用衔接滑动

4. text 类似于span 标签是一个行内元素

        selectable 属性，实现长按选中文本内容的效果

5. rich-text 富文本组件 支持把 HTML 字符串渲染为 WXML 结构

        nodes 属性节点

6. image 组件默认宽度 300px 高 240px    mode="widthFix"

    mode值  1. scaleToFill 默认  使图片完全拉伸填满image

          2.aspectFit 缩放模式 完整的将图片显示出来

          3.aspectFill 缩放模式 保持纵横比

          4.widthFix  宽度不变 高度自动变化

          5.heidthtFix 高度不变 宽度自动变化

7. block  只起到包裹性质的容器

2.小程序API的3大分类

1.事件监听API

        以on开头，用来监听某些事件的触发

2.同步API

        以 sync 结尾  同步的结果可以通过函数返回值直接获取 执行出错 会抛出一异常

3.异步API

      特点：比如发起请求 需要通过 success， fail，complete 接收调用结果

3.数据绑定

1.

{{ info }} 

2.

3.

{{randonNum >= 5 ? '数字大于或者等于5':'数字小于5'}}

4.事件绑定

1. tap 触摸后离开 类似click bind：tap

2. input 文本框输入事件 bind：input

3. change 状态改变是触发 bind：change

当事件回调触发的时候 会收到一个事件对象 event

属性 类型 说明

type    string    事件类型

target  object    触发事件的组件的一些属性值集合

detail  object    额外的信息

5.列表渲染

this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值，

e.detail.value 获取到 input 的动态数据

wx:if  wx:elif  wx:else 

wx:for ( wx:for="{{ arr1 }}") 索引是 {{ index }} 当前项是： {{ item }}

hidden 控制元素的显示与隐藏 hidde："{{true}}"为true是隐藏

6.WXSS 模版样式

1.全局样式。定义在 app.wxss 中的样式为全局样式，作用于每一个页面。

2.局部样式  在页面的 . wxss 文件中定义的样式为局部样式，只作用于当前页面。