文章目录

• • 基本组件
  • • • 视图容器
      • • view
        • scroll-view
        • swiper和swiper-item
      • 基础内容组件
      • • text
        • rich-text
      • 其他常用组件
      • • button
        • image
        • navigator
  • 基本模板
  • • • 数据绑定
      • • 插值表达式
      • 事件绑定
      • • 常用事件
        • 在事件处理函数中为data的数据赋值
        • 事件传参
        • bindinput的使用
        • 小程序中的v-model
      • 条件渲染
      • • wx:if
        • hidden
      • 列表渲染
  • wxss
  • • • rpx
      • • 原理
        • 单位换算
      • 样式导入
      • 全局样式和局部样式
  • 全局和页面配置
  • • 全局配置
    • • window节点
      • • window节点常用配置项
      • tabBar
      • • tabBar的组成部分
        • tabBar节点的配置项
    • 页面配置
    • • • 常见配置项

基本组件

视图容器

view

当作div写即可

scroll-view

ABC

当内部元素大于外部容器container时，会自动开启滚动

swiper和swiper-item

ABC

swiper常见属性

基础内容组件

text

类似于span

通过text组件的selectable属性，实现长按选中文本内容的效果

rich-text

富文本组件

通过rich-text组件的nodes属性节点，把 HTML字符串渲染为对应的UI结构

其他常用组件

button

功能丰富，通过open-type属性可以调用微信提供的各种功能

image

默认宽300px，高240px

image的mode属性用来指定图片的裁剪和缩放方式，常用mode属性如下：

navigator

基本模板

数据绑定

同vue2

数据定义在.js文件的data中

插值表达式

• 动态绑定内容
• 动态绑定属性

注意，小程序中的属性绑定也使用插值表达式，而不是类似v-bind的指令

  data: {mydata:'123',imgSrc:'http://www.123.com'},

{imgSrc}}">

• 三元运算

事件绑定

常用事件

事件回调接收的事件对象event

target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。举例如下：

e.target指向的是组件

e.currentTarget指向的是组件

在事件处理函数中为data的数据赋值

调用this.setData(dataObject)方法，为data重复赋值

事件传参

注意，小程序在事件传参的方式也和vue不同，无法直接在绑定事件的函数上直接传参

小程序规定必须使用data-*进行自定义属性传参，其中*代表参数的名字，通过event.target.dataset.参数名即可拿到对应的值

bindinput的使用

通过e.detail.value获取input框变化过后的值，每次输入都会触发

小程序中的v-model

小程序中没有v-model语法糖，因此只能自己实现

{msg}}" bindinput="inpTouch" />

  inpTouch(e){this.setData({msg: e.detail.value})}

条件渲染

wx:if

{msg}}">True

也可结合wx:elif和wx:else来使用

如果想要实现一次性控制多个标签的显示与隐藏，可以使用将多个标签包裹，相当于vue3的

hidden

相当于vue中的v-show，不过为true时为隐藏，为false时为显示，和wx:if相反

列表渲染

wx:for

循环渲染指定数组，索引为index，循环项为item

{mylist}}">索引：{{index}}，当前属性：{{item}}

如果想为index和item重命名，可以使用

{mylist}}" wx:for-index="idx" wx:for-item="items">索引：{{idx}}，当前属性：{{items}}

同vue，小程序在循环中也建议使用wx:key

wxss

rpx

用来解决屏幕适配问题

原理

类似栅格布局，将所有设备屏幕宽度分为750份，即当前屏幕总宽度为750rpx

单位换算

以为iphone6为例，屏幕宽度为375px，有750个物理像素

750rpx = 375px = 750物理像素

1rpx = 0.5px = 1物理像素

样式导入

@import "相对路径";

全局样式和局部样式

app.wxss为全局样式

*.wxss为局部样式

局部权重大于等于全局时会覆盖全局

全局和页面配置

全局配置

全局配置即为配置app.json

常见配置项目如

• pages：记录页面路径
• window：全局设置小窗口外观
• tabBar：设置小程序底部的tabBar
• style：是否启用新版本

window节点

主要配置小程序窗口的navigationBar区域和background区域

window节点常用配置项

tabBar

小程序共有底部tabBar和顶部tabBar两种；tabBar最少配置两个，最多配置五个；当渲染顶部tabBar时，不显示icon，只显示文本

tabBar的组成部分

tabBar节点的配置项

list中每个tab对象的配置选项

页面配置

当我们对全局配置不满意时，可以对页面进行单独配置

常见配置项

同全局配置