微信小程序day01-基础认识到轮播图组件

微信小程序初体验

一. 创建第一个项目(熟悉)

1.1 领取AppID

1.2 下载微信开发者工具

1.3 了解结构

• 初始界面

• page: 相当于组件开发模式中的views 同于存放视图
• app.js: 入口文件
• app.json: 配置基础样式(tabbar 导航栏)的文件
• app.wxss: 配置样式的文件

1.4 下拉刷新

1.5 sitemap 配置

• 程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page",
    "params": ["a", "b"],
    "matching": "exact"
  }, {
    "action": "disallow",
    "page": "path/to/page"
  }]
}

---

二. tabbar与页面配置

2.1 tabbar结构

• 另外一些常用属性

"color": "#ddd"   // 未选中的颜色
"selectedColor": "#aaa"  // 选中的颜色
"backgroundColor": "#fff"  // tab框的背景颜色
"position": "top"  // 向上定位对齐

2.2 页面配置

• 子页面的页面配置写在自己目录下的json文件

---

三. 数据绑定

3.1 view与text

• view相当于html中的div
• text详单与html中的p
• checkbos相当于html中的input[checbox]

3.2 自定义属性

3.3 mustache语法注意事项

• 属性="{{}}" "与{中间不要有空格

---

四. 数组与对象循环

4.1 数组循环

• 标签里面填写wx-for="{{ 填写要被循环的数组或对象 }}"
  • 注意事项
    • wx:for=""后面要用mustache语法不能直接输入 是无法获取data的
• 可以自定义item和index的名称
  • 如果是数组默认是item与index
  • 如果是对象也是数组默认, 但建议更改成value与key
  • 如果是循环嵌套, item与index的值不能重复
  • 语法
    • wx:for-item=""与wx:for-index=""
  • 为避免重复刷新的时候DOM重复利用的话可以添加key,这里的key是item的唯一标识不能跟其他项重复
    • wx:key=""

4.2 block的用法

• 如果不想渲染完成之后再标签保留属性的话可以把view替换成block
• 变成行内块?

---

五. 条件判断

5.1 wx:if

• 与v-if的区别
  • v-if v-else-if v-else
  • wx:if wx:elif wx:else

5.2 hidden

• 直接在标签上面加上hidden=""
• 原理跟v-show很像
• 需要注意的点
  • 不要在行内样式中添加display属性

---

六. 事件绑定

6.1 绑定标签与vue的区别

• vue中是v-on:click="~~~"
• 小程序是bindinput="~~~~"

6.2 事件处理函数

• vue中的事件处理函数在methods中
• 小程序与data同级直接添加方法

6.3 小程序通过事件处理函数更改data的值

• value的值在e.detail.value
• 改变方法为this.setData({options})
  • options里面的key是data的名字
  • value是将要改变的值

handleInput (e) {
    this.setData({
        num: e.detail.value
    })
}

6.4 点击button+跟-实现数据变化

• 绑定点击对象bindtap
• 小程序的mustache语法中的方法是不可以传入参数的
  • 若要传入参数可以在自定义属性里面添加
  • 添加方法:
    • 获取方法e.cuurrentTarget.dataset

// 回顾一下结构赋值: add表示add是别名 add=1表示默认值是1
increament ({ currentTarget: { dataset: { operation: add=1 } } }) {
    // console.log(e)
    this.setData({
      // num2: this.data.num2 + 1
      // num2: this.data.num2 + e.currentTarget.dataset.operation
      num2: this.data.num2 + add
    })
  },

---

七. wxss相关

7.1 rpx

• 1rpx相当于当前页面总宽的1/750

7.2 样式导入

• @import + 相对路径

7.3 使用less

• settings文件中加入

"less.compile": {
	"outExt": ".wxss"
}

---

八. 标签相关

8.1 view text

• 其中text可以直接加两项属性
  • selectable // 是否可选 可以出发长按全选
  • space // 显示连续空格
  • decode // 是否解码
    • &nbso &lt之类的识别功能

---

九. image标签与轮播图相关

9.1 image 的mode标签

• image默认320*240
  

9.2 轮播图

• swiper与swiper-item
• swiper默认样式
  • 100%
  • height: 150px
  • swiper高度无法实现由内容撑开
    

9.3 轮播图的一些属性