微信小程序（基础语法）

基本组件

视图容器

view

当作div写即可

scroll-view

<scroll-view class="container" scroll-y>
  <view>Aview>
  <view>Bview>
  <view>Cview>
scroll-view>
1
2
3
4
5

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

swiper和swiper-item

<swiper>
  <swiper-item>
    <view class="item">Aview>
  swiper-item>
  <swiper-item>
    <view class="item">Bview>
  swiper-item>
  <swiper-item>
    <view class="item">Cview>
  swiper-item>
swiper>
1
2
3
4
5
6
7
8
9
10
11

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'
  },
1
2
3
4

<image src="{{imgSrc}}">image>
1

• 三元运算

事件绑定

常用事件

事件回调接收的事件对象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语法糖，因此只能自己实现

<input value="{{msg}}" bindinput="inpTouch" />
1

  inpTouch(e){
    this.setData({
      msg: e.detail.value
    })
  }
1
2
3
4
5

条件渲染

wx:if

<view wx:if="{{msg}}">Trueview>
1

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

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

hidden

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

列表渲染

wx:for

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

<view wx:for="{{mylist}}">
  索引：{{index}}，当前属性：{{item}}
view>
1
2
3

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

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

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

wxss

rpx

用来解决屏幕适配问题

原理

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

单位换算

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

750rpx = 375px = 750物理像素

1rpx = 0.5px = 1物理像素

样式导入

@import "相对路径";
1

全局样式和局部样式

app.wxss为全局样式

*.wxss为局部样式

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

全局和页面配置

全局配置

全局配置即为配置app.json

常见配置项目如

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

window节点

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

window节点常用配置项

tabBar

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

tabBar的组成部分

tabBar节点的配置项

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

页面配置

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

常见配置项

同全局配置