微信小程序

小程序简介
1 小程序与普通网页开发的区别？
1运行环境的不同：网页运行在浏览器，小程序运行在微信环境；
2.API 不同：小程序无法调用 DOM 和 BOM 的 API，但可以调用微信环境提供的 API；
开发模式：网页是 浏览器+代码编辑器，小程序开发模式是小程序账号；

<!-- 轮播图 -->
<view class="banner"><swiper class="swiper" indicator-dots="{{indicatorDots}}" ‘autoplay="{{autoplay}}" interval="{{interval}}"duration="{{duration}}" circular="{{circular}}" indicator-color="rgba(0, 0, 0, .3)"indicator-active-color="#fff"><block wx:for="{{imgUrls}}" wx:for-index="index" wx:key="index"><swiper-item><image class="slide-image" src="{{item.image}}"mode="aspectFill"></image></swiper-item></block></swiper>
</view>

js

data:{imgUrls: ['/images/ad1.jpg','/images/ad2.jpg','/images/ad3.jpg','/images/ad4.jpg','/images/ad5.jpg','/images/ad6.jpg','/images/ad7.jpg',],indicatorDots: true, // 是否显示面板指示点autoplay: true,      // 是否自动切换circular: true,      // 是否采用衔接滑动interval: 3000,      // 自动切换时间间隔duration: 1000,      // 滑动动画时长
}

css

.banner .swiper {height: 330rpx;
}
.banner .swiper .slide-image {width: 100%;height: 100%;
}

事件对象属性

常用事件
tap：bindtap 或 bind:tap
input：bindinput 或 bind:input
change：bindchange 或 bind:change

type：事件类型
timeStamp：页面打开到触发事件所经过的毫秒数
target： 触发该事件的源头组件，属性值集合
currentTarget：当前事件绑定的组件，属性值集合
detail：额外的信息

bindtap 的使用
1. 为组件绑定 tap 触摸事件，为文本框绑定输入事件
2. 在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event( e )来接 收, 和 data 平级

双向数据绑定：
步骤: 1.定义数据2. 渲染结构, 绑定 data 中的数据3. 美化样式4. 监听 input 事件代码:data: {   msg: '请输入...'   }<input class="ipt2" placeholder="{{msg}}" bindinput="inputHandler"></input>inputHandler (e) {console.log(e.detail.value);},  

事件绑定
条件渲染
1. block包裹性容器：条件成立渲染

<block wx:if="{{ true }}"><block wx:if="{{true}}"><view>view1</view><view>view2</view>
</block>

wx:if：动态创建移除元素控制展示与隐藏

 wx:if 搭配 wx:elif 、 wx:else data:    type:2
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else="{{type === 0}}">保密</view>

. hidden：控制展示与隐藏

<view hidden="{{flag}}">true隐藏，false显示</view>

wx:if 和 hidden对比

wx:if
动态创建和移除元素，控制元素展示 / 隐藏
场景：控制条件复杂时使用

hidden
切换样式控制展示与隐藏，节点一直存在
场景：频繁切换

列表渲染

1. wx:for 指定数组，进行循环渲染
2. wx:for-index 手动指定索引名
3. wx:for-item 手动指定当前项名
4. wx:key=“id” 提高渲染效率

模板样式：rpx
布局使用 flex 布局，尺寸单位使用 rpx
( responsive pixel )是微信小程序独有的，用来解决屏适配的尺寸单位