微信小程序（基础语法）

文章目录

基本组件

视图容器

view

当作div写即可

scroll-view

<scroll-view class="container" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

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

swiper和swiper-item

<swiper>
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

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'
  },

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

三元运算

事件绑定

常用事件

请添加图片描述

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

请添加图片描述

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

请添加图片描述

e.target指向的是<button>组件

e.currentTarget指向的是<view>组件

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

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

事件传参

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

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

bindinput的使用

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

小程序中的v-model

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

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

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

条件渲染

wx:if

<view wx:if="{
     
     {msg}}">True</view>

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

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

hidden

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

列表渲染

wx:for

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

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

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

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

同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对象的配置选项

请添加图片描述

页面配置

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

常见配置项

同全局配置