微信小程序笔记

组件

视图容器

1. view视图容器（相当于html中的div）
   
2. scroll-view可滚动视图区域
   

index.js（ options为页面跳转所带来的参数 ）

index.wxml

• swiper滑块视图容器
  

<!--logs.wxml-->
<view class="container">  
    <swiper indicator-dots="{{indicatorDots}}" style="width:300px"  autoplay="{{autoplay}}"    interval="{{interval}}" duration="{{duration}}" bindchange="change">  
     <block wx:for="{{imgUrls}}">   
      <swiper-item>      
        <image src="{{item}}" class="slide-image" width="355" height="150"/>   
      </swiper-item>  
     </block>
    </swiper>
 </view>

基础内容组件
icon图标
text文本

progress进度条
表单组件

• button按钮
• checkbox多选项目
• input输入框
• label使两个控件组成一个新的控件
• picker选择器

普通选择器：mode = selector 需要设置数组
时间选择器：mode = time
日期选择器：mode = date

• radio单选项目
• slider滑块
• switch开关
• form表单

当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value
作为提交值，把name加在表单组件上当做key来使用。

代码示例

``
<view class="container">
<form bindsubmit="formSubmit" bindreset="formReset">
       <switch name="switch"/>
        <slider name="slider" show-value >
        </slider>
          <input name="input" placeholder="please input here" />
        <button type="default" form-type="submit" > 提交数据 
        </button>    
         <button type="default" form-type="reset" > 重置 
         </button>   
 </form>

</view>

操作反馈小工具

• action-sheet从屏幕底部弹出的菜单表
• model弹出框
• toast提示框
• loading加载框

涉及代码片段
index.js

index.wxml

属性	说明
url	应用内的跳转链接
redirect	是否关闭当前页面

• functional-page-navigator仅插件中有效，跳转到插件功能页

多媒体

• image图片

属性	说明
src	图片资源地址
model	图片裁剪、缩放样式，默认值是‘scaleToFill’（原纵横比例图片不能够原样保存下来，只保留短边)

• audio音频

属性	说明
src	音频资源地址
action	控制音频播放、暂停，速率、进度的对象。参数：method和data
loop	是否循环播放
controls	音是否显示默认控件

• video视频

属性	说明
src	视频资源地址
binderror	发生错误时触发error事件

地图和LBS

• map地图

属性	说明
longitude	中心经度
latiitude	中心纬度
scale	缩放级别
markers	标记点
covers	覆盖物

经纬度未填写时，默认是北京的经纬度。
画布

• canvas画布

默认width300px height150px
同一页面中的 canvas-id 不可重复，若使用一个已出现过的了，那么
canvas 标签所对应的画布将被隐藏且不再正常工作

属性	说明
canvas-id	canvas 组件的唯一标识符
binderror	发生错误触发error事件