原生微信小程序基础（一）

1.基本语法

1.1 动态设置class类名

class="tabs_item {{item.isActive ? 'active' : ''}}">

1.2 事件函数

<view
bind:tap="onMenuTap"
mark:key="{{index}}"
data-index="{{index}}"
>
</view>

事件函数不可以直接传参。可以通过mark和自定义属性data-“名字随意”来传参
获取可通过onMenuTap(e)，打印e查看数据

1.3 跳转

1.3.1标签跳转

	小程序常用组件: navigator
	url: 页面路径
	支持相对和绝对路径路径为空时会报错
	hover-class: 点击态的样式
	none 禁用点击效果
	open-type: 跳转方式
	switchTab 跳转到 tabBar 页面

<navigator url="../signIn/signIn" hover-class="none"> 
    <view class="item-text">xxxx</view> 
</navigator>

1.3.2事件跳转

跳转非tabber页面

toWeightDetail(e: any) {     
    console.log("点击过衡任务卡片", e.currentTarget.dataset.id)     
    wx.navigateTo({ 
        "url": "../../../pages/task/task_detail/index?id=" +e.currentTarget.dataset.id     
    }) }

1.3.3返回上一个页面

  wx.navigateBack()

1.4表单双向绑定

1.4.1输入框

     value="{{params.driverName}}"   

     bindinput="inputChange"

<van-field label-class="cover"         
           value="{{params.driverName}}"         
           data-key="driverName"         
           bindinput="inputChange"         
           label="姓名"         
           placeholder="请输入姓名"         
           clearable         
           required         
           border="{{ false }}" />

1.5小程序页面布局

小程序组件（标签）

view相当于div

text相当于span

样式选择器

类、标签、后代

更新页面数据

this.setData({})

1.6image组件（图片）

占位容器：image 组件是一个有默认大小(320 x240)的“盒子
缩放模式:
scaleToFill 不保证缩放比，图片拉伸填满容器
aspectFit 保证缩放比，使图片的长边显示出来
aspectFill 保证缩放比，使图片的短边显示出来
使用原则：
指定“容器”的大小，根据设计稿设置 image的宽高尺寸
图片铺满容器，设置 aspectFill 缩放模式

1.7轮播图

组件结构
swiper: 滑块容器，只能嵌套 swiper-item 组件swiper-item: 滑块单元，可以嵌套任何内容，如image组件属性
indicator-dots是否显示面板指示点
autoplay 是否自动切换
circular 是否衔接滑动

示例：

<swiper circular autoplay indicator-dots>swiper-item>
   <image src="/static/uploads/slide 1.jpg' mode="/>
</swiper-item>

1.8表单组件

待更新。。。