第四章总结

页面部件

组件的定义及属性

<标签名 属性名=“属性值”>内容</标签名>

id：组件的唯一表示，保持整个页面唯一，不常用

class：组件的样式类，对应wxss中定义的样式

style：组件的内联样式，可以动态设置内联样式

hidden：组件是否显示，所有组件默认显示

data-*：自定义属性，租价触发事件时，会发送给事件处理函数

bind*/catch*：组件的事件，绑定逻辑层相关事件处理函数

容器视图组件

1.view

//wxml
<view style="text-align: center;">默认flex布局</view>
<view style="display: flex;">
      <view style="border: 1px solid #f00;flex-grow: 1;">1</view>
      <view style="border: 1px solid #f00;flex-grow: 1;">2</view>
      <view style="border: 1px solid #f00;flex-grow: 1;">3</view>
</view>
<views style="text-align: center;">上下混合布局</views>
      <view style="border: 1px solid #f00;">1</view>
        <view style="display: flex;">
          <view style="border: 1px solid #f00;flex-grow: 1;">2</view>
          <view style="border: 1px solid #f00;flex-grow: 1;">3</view>
        </view>
      <view style="text-align: center;">左右混合布局</view>
      <view style="display: flex;">
          <view style="border: 1px solid #f00;flex-grow: 1;">1</view>
          <view style="display: flex;flex-direction: column;flex-grow: 1;">
          <view style="border: 1px solid #f00;flex-grow: 1;">2</view>
          <view style="border: 1px solid #f00;flex-grow: 1;">3</view>
          </view>
      </view>

2.scroll-view

---

//wxml
<view class="container"style="padding:0px">
<!--垂直滚动，必须设置高度-->
      <scroll-view scroll-top="{{scrooltop}}"scroll-y="true"style="height:{{scroolheight}}px;"class="list"bind-scrolltolower="biddownload"
          bindscrolltoupper="topload"bindscroll="scroll">
            <view class="item"wx:for="{{list}}">
                <image class="img"src="{{item.pic_url}}"></image>
                <view class="text">
                    <text class="title">{{item.name}}</text>
                    <text class="description">{{item.short_description}}</text>
                </view>
            </view>
          </scroll-view>
      <view class="body-view">
        <loading hidden="{{hidden}}"bindchange="loadingchange">
        加载中...
        </loading>
      </view>
</view>

//wxss
.userinfo{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar{
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname{
  color:#aaa;
}
.usermotto{
margin-top:200px;
}
/**/
scroll-view{
  width:100%;
}
item{
  width:90%;
  height: 300rpx;
  margin: 20rpxauto;
  background: bottom;
  overflow: hidden;
}
.item.img{
  width:430rpx;
  margin-right:20rpx;
  float:left;
}
.title{
  font-size:30rpx;
  display: block;
  margin: 30rpxauto;
}
.description{
  font-size:26rpx;
  line-height:15rpx;
}

//js
const { composeRawBufferEntity3DWhole } = require("XrFrame/kanata/lib/index");

var url ="http://www.imooc.com/course/ajaxlist";
var page = 0;
var page_size = 5;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;
//请求数据
var loadmore = function(that){
  that.setdata({
    hidden:false
  });
  wx:request({
    url:url,
    data:{
      page:page,
      page_size:page_size,
      sort:sort,
      is_easy:is_easy,
      lange_id:lange_id,
      pos_id:pos_id,
      unlearn:unlearn
    },
    success:function(res){
      //console.info(that.data.list);
      var list = that.data.list;
      for(var i = 0;i < res.data.list.length;i ++){
        list.push(res.data.list[i]);
      }
      that.setdata({
        list:list
      });
      page ++;
      that.setdata({
        hidden:true
      });
    }
  });
}
Page({
    data:{
      hidden:true,
      list:[],
      scroltop:0,
      scrollheight:0
    },
    onload:function(){
      var that = this;
      wx.getSystemInfo({
        success:function(res){
          that.setdata({
            scrollheight:res.windowHeight
          });
        }
      });
      loadmore(that);
    },
    //页面滑动到底部
  binddownload:function(){
      var that = this;
      loadmore(that);
      console.log("lower");
  },
  scroll:function(event){
    this.setdata({
      scrolltop:event.datail.scrolltop
    });
  },
  lopload:function(event){
    page = 0;
    this.setdata({
      list:[],
       scrolltop:0
    });
    loadmore(this);
    comsole.log("lower");
  }
})

3.swiper

//wxml
<swiper indicator-dots='true'autoplay='true'interval='5000'duration='1000'>
    <swiper-item>
    <image src="/images/1.jpg"style="width:100%"></image>
    </swiper-item>
<swiper-item>
    <image src="/images/2.jpg"style="width:100%"></image>
</swiper-item>
<swiper-item>
    <image src="/images/3.jpg"style="width:100%"></image>
</swiper-item>
</swiper> 

 

基础内容组件

1.icon

icon组件即图标组件，通常表示一种状态

//wxml
<view>iocn 类型：
    <block wx:for="{{icontype}}">
        <icon type="{{item}}"/>{{item}}
    </block>
</view>
<view>icon 大小
    <block wx:for="{{iconsize}}">
        <icon type="success"size="{{item}}"/>{{ittem}}
    </block>
</view>
<view>颜色：
    <block wx:for="{{iconcolor}}">
        <icon type="success"size="30"color="{{item}}"/>{{item}}
    </block>
</view>

//js
Page({
  data:{
    icontype:["success","success_no_circle","info","warn","waiting","cancel","download","search","clear"],
    iconsize:[10,20,30,40],
    iconcolor:['#f00','#0f0','#00f']
  }
})

2.text

//wxml
<block wx:for="{{x}}" wx:for-item="x">
  <view class="aa">
    <block wx:for="{{25-x}}" wx:for-item="x">
      <text decode="{{true}}" space="{{true}}">&nbsp;</text>
    </block>
    <block wx:for="{{y}}" wx:for-item="y">
      <block wx:if="{{y<=2*x-1}}">
          <text>*</text>
      </block>
    </block>
  </view>
</block>

<block wx:for="{{x}}" wx:for-item="x">
  <view class="aa">
    <block wx:for="{{19+x}}" wx:for-item="x">
      <text decode="{{true}}" space="{{true}}">&nbsp;</text>
    </block>
    <block wx:for="{{y}}" wx:for-item="y">
      <block wx:if="{{y<=11-2*x}}">
          <text>*</text>
      </block>
    </block>
  </view>
</block>

//js
Page({
  data:{
    x:[1,2,3,4,5],
    y:[1,2,3,4,5,6,7,8,9]
  }
})

3.progress

progress组件用于显示进度状态，如资源加载、用户资料完成度、媒体资源播放进度等。

//wxml
<view>显示百分比</view>
<progress percent='80'show-info='80'></progress>
<view>改变宽度</view>
<progress percent='50'stroke-width='2'></progress>
<view>自动显示进度条</view>
<progress percent='80'active></progress>

表单组件

1.button

//wxml
<button type="default">type:default</button>
<button type="primary">type:primary</button>
<button type="warn">type:warn</button>
<button type="default"bindtap='buttonsize'size="{{size}}">改变</button>
<button type="default"bindtap='buttonplain'plain="{{plain}}">改变</button>
<button type="default"bindtap='buttonloading'loading="{{loading}}">改变 loading 显示</button>

//js
Page({
  data:{
      size:'default',
      plain:'false',
      loading:'false'
  },
  //改变按钮的大小
  buttonsize:function(){
      if(this.data.size == "default")
        this.setData({size:'mini'})
      else
        this.setData({size:'default'})
  },
  //显示是否镂空
  buttonplain:function(){
    this.setData({plain:!this.data.plain})
  },
  //是否显示loading图案
  buttonloading:function(){
    this.setData({loading:!this.data.loading})
  }
})

2.radio

//wxml
<view>选择您喜爱的城市：</view>
<radio-group bindchange="citychange">
    <radio value="西安">西安</radio>
    <radio value="北京">北京</radio>
    <radio value="上海">上海</radio>
    <radio value="广州">广州</radio>
    <radio value="深圳">深圳</radio>
</radio-group>
<view>你的选择：{{city}}</view>

<view>选择您喜爱的计算机语言：</view>
<radio-group class="raion - group" bindchange="radionchange">
    <label class="radio" wx:for="{{radios}}">
        <radio value="{{item.value}}"checked="{{item.checked}}"/>{{item.name}}
    </label>
</radio-group>
<veiw>你的选择:{{lang}}</veiw>

//js
Page({
  data:{
    radios:[
      {name:'java',value:'JAVA'},
      {name:'python',value:'Python',checked:'true'},
      {name:'php',value:'PHP'},
      {name:'swif',value:'Swif'},
    ],
    citychange:function(e){
      this.setdata({city:e.detail.value});
    },
    radiochange:function(event){
      this.setdata({lang:event.detail.value});
      console.log(event.detail.value)
    }
   }
})

3.checkbos

//wxml
<view>选择你想去的城市：</view>
<checkbox-group bindchange="citychange">
<label wx:for="{{citys}}">
<checkbox value="{{item.value}}"checked='{{item.checked}}'>
  {{item.value}}
</checkbox>
</label>
</checkbox-group>

<view>您的选择是：{{city}}</view>

//js
Page({
  city:'',
  data:{
    citys:[
    {name:'km',value:'昆明'},
    {name:'sy',value:'三亚'},
    {name:'zh',value:'珠海',checked:'true'},
    {name:'dl',value:'大连'}
  ]
   },
   citychange:function(e){
     console.log(e.detail.value);
     var city = e.detail.value;
     this.setData({city:city})
   }
})

4.switch

//wxml
<view>
  <switch bindchange="sw1">{{var1}}</switch>
</view>
<view>
  <switch checked bindchange="sw2">{{var2}}</switch>
</view>
<view>
  <switch type="checkbox"bindchange="sw3">{{var3}}</switch>
</view>

//js
Page({
    data:{
      var1:'关',
      var2:'开',
      var3:'未选',
    },
    sw1:function(e){
      this.setData({var1:e.detail.value?'开':'关'})
    },
    sw2:function(e){
      this.setData({var2:e.detail.value?'开':'关'})
    },
    sw3:function(e){
      this.setData({var3:e.detail.value?'已选':'未选'})
    },
})

5.slider

//wxml
<view>默认 min=0 max=100 step=1</view>
<slider> </slider>

<view>显示当前值</view>
<slider show-value> </slider>
<view>设置 min=20 max=200 step=10</view>
<slider min="0" max="200" step="10"show-value> </slider>

<view>背景条红色，已选定颜色绿色</view>
<slider color="#f00" selected-color="0f0"></slider>

<view>滑动改变 icon的大小</view>
<slider show-value bindchange="sliderchange"> </slider>
<icon type="success" size="{{size}}"> </icon>

//js
Page({
    data:{
      size:'20'
    },
    sliderchange:function(e){
      this.setData({size:e.detail.value})
    }
})

6.picker

普通选择器

//wxml
<view>----range 为数值 ---</view>
<picker range="{{array}}"value="{{index1}}"bindchange='arraychange'>
  当前选择：{{array[index1]}}
</picker>

<view>----range 为数值 ---</view>
<picker bindchange="objarraychange"value="{{index2}}"range-key="name"range="{{objarray}}">
    当前选择：{{objarray[index2].name}}
</picker> 

//js
Page({
    data:{
      array:['JAVA','Python','C','C#'],
      objarray:[
        {id:0,name:'JAVA'},
        {id:1,name:'Python'},
        {id:2,name:'C'},
        {id:3,name:"C#"}
      ],
      index1:0,
      index2:0
    },
    arraychange:function(e){
      console.log('picker值变为',e.detail.value)
      var index=0;
      this.setData({
        index1:e.detail.value
      })
    },
    objarraychange:function(e){
      console.log('picker值变为',e.detail.value)
      this.setData({
        index2:e.detail.value
      })
    }
})

多列选择器

//WXML
<view>多列选择器</view>
<picker mode="multiSelector"bindchange="bindmultipickerchange"bindcolumnchange="bindmultipickercolumnchange"
  value="{{multiIndex}}"
  range="{{multiArray}}">
    <view>
  当前选择：{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
    </view>
  </picker>

//js
Page({
  data:{
    multiArray:[['陕西省','广东省'],['西安省','汉中市','延安市'],['雁塔区','长安区']],
      multiIndex:[0,0,0]
  },
  //绑定Multipicker
  bindMultiPickerChange:function(e){
    console.log('picker发送选择改变，携带值为',e.detail.value)
    this.setData({
        multiIndex:e.detail.value
    })
  },
  //绑定MultiPickerColumn
  bindMultiPickerColumnChange:function(e){
    console.log('修改的列为',e.detail.column,',值为',e.detail.value);
    var data={
        multiArray:this.data.multiArray,
        multiIndex:this.data.multiIndex
    };
    data.multiIndex[e.detail.column]=e.detail.value;
    switch(e.detail.column){
      case 0:
        switch(data.multiIndex[0]){
          case 0:
              data.multiArray[1]=['西安市','汉中市','延安市'];
              data.multiArray[2]=['雁塔区','长安区'];
              break;
            case 1:
              data.multiArray[1]=['深圳市','珠海市'];
              data.multiArray[2]=['南山区','罗湖区'];
              break;
        }
      data.multiIndex[1]=0;
      data.multiIndex[2]=0;
      break;
      case 1:
          switch(data.multiIndex[0]){
            case 0:
          switch(data.multiIndex[1]){
            case 0:
                data.multiArray[2]=['雁塔区','长安区'];
                break;
            case 1:
                data.multiArray[2]=['汉台区','南郑区'];
                break;
            case 2:
                data.multiArray[2]=['宝塔区','子长县','延川县'];
                break;
          }
        break;
        case 1:
            switch(data.multiIndex[1]){
              case 0:
                  data.multiArray[2]=['南山区','罗湖区'];
                  break;
              case 1:

                  data.multiArray[2]=['香洲区','斗门区'];
                  break;
            }
            break;
          }
        data.multiIndex[2]=0;
        console.log(data.multiIndex);
        break;
    }
    this.setData(data);
  },
})

时间选择器，日期选择器

//wxml
<view>
<picker mode="date" start="{{startdate}}" end="{{enddate}}" value="{{date}}" bindchange="changedate">选择的日期：{{date}}
</picker>
</view>
<view>
<picker mode="time" start="{{starttime}}" end="{{endtime}}" bindchange="changetime">选择的时间：{{time}}
</picker>
</view>

//js
Page({
  data:{
    startdate:2000,
    enddate:2050,
    date:'2018',
    starttime:'00:00',
    endtime:'12:59',
    time:'8:00'
  },
  changedate:function(e){
      this.setData({date:e.detail.value});
      console.log(e.detail.value)
  },
  changedate:function(e){
      this.setData({time:e.detail.value})
      console.log(e.detail.value)
  }
})

省市选择器

//wxml
<picker mode="region" value="{{region}}" custom-item="{{customitem}}" bindchange="changegion">
  选择省市区：{{region[0]}},{{region[2]}}
</picker>

//js
Page({
  data:{
    region:['陕西省','西安市','长安区'],
    customitem:'全部'
  },
  changeregion:function(e){
    console.log(e.detail.value)
    this.setData({
      region:e.detail.value
    })
  }
})

7.picker-view

//wxml
<view >当前日期：{{year}}年{{month}}月{{day}}日</view>
<picker-view indicator - style="height: 50px;" style="width: 100%;height: 300px;"value="{{value}}"bindchange="bindchange">
    <picker-view-column>
        <view wx:for="{{years}}"style="line-height:50px">{{item}}年
        </view>
    </picker-view-column>
    <picker-view-column>
        <view wx:for="{{months}}"style="line-height:50px">{{item}}月
        </view>
    </picker-view-column>
    <picker-view-column>
        <view wx:for="{{days}}"style="line-height:50px">{{item}}日
        </view>
    </picker-view-column>
</picker-view>

//js
const date = new Date()
const years = []
const months = []
const days = []
//定义年份
for(let i = 1900; i <= 2050; i++){
  years.push(i)
}
//定义月份
for(let i = 1; i <= 12; i++){
  months.push
}
//定义日期
for(let i = 1; i <= 31; i++){
  days.push
}
Page({
    data:{
      years:years,
      months:months,
      days:days,
      years:date.getFullYear(),
      months:date.getMonth()+1,
      days:date.getDate(),
      value:[118,0,0],//定位到2018年1月1日
    },
    bindchange:function(e){
      const val = e.detaill.value
      console.log(val);
      this.setData({
        year:this.data.years[val[0]],
        month:this.this.data.months[val[1]],
        day:this.data.days[val[2]]
      })
    }
})

8.input

//wxml
<input placeholder ="这是一个可以自动聚焦的input" auto-focus/>
<input placeholder ="这个只有在按钮点击的时候才聚焦" focus="{{focus}}"/>
<button bindtap ="bindbuttontap">使得输入框获取焦点</button>
<input maxlength ="10" placeholder="最大输入长度为10"/>
<view class ="section_title">你输入的是:{{inputvalue}}</view>
    <input bindinput ="bindkeyinput" placeholder="输入同步到view中"/>
    <input bindinput ="bindreplaceinput" placeholder="连续的两个1会变成2"/>
    <input password type ="number"/>
    <input password type ="text"/>
    <input typr ="digit" placeholder="带小数点的数字键盘"/>
    <input type ="idcard" placeholder="身份证输入键盘"/>
    <input placeholder - style ="color:red" placeholder="占位符字体是红色的"/>

//js
Page({
    data:{
     focus:false,
     inputvalue:''
    },
    bindbuttontap:function(){
      this.setData({
      focus:true
      })
    },
    bindkeyinput:function(e){
      this.setData({
        inputvalue:e.detail.value
      })
    },
    bindreplaceinput:function(e){
      var value = e.detail.value
      var pos = e.detail.cursor
      if(pos != -1){
        //光标在中间
        var left = e.detail.value.slice(0,pos)
        //计算光标位置
        pos = left.replace(/11/g,'2').length
      }
      //直接返回对象，可以输入进行过滤处理，同时可以控制光标的位置
      return{
        value:value.replace(/11/g,'2'),
        cursor:pos
      }
      //或者直接返回字符串，光标在最后边
      //return value.replace(/11/g,'2')
    }
})

9.textarea

续表

//wxml
<textarea bindblur ="bindtextareablur" auto-height placeholder ="自动变高"/>
<textarea placeholder ="placeholder 颜色是红色的" placeholder-style ="color:red;"/>
<textarea placeholder ="这是一个可以自动聚焦的textarea" auto-focus/>
<textarea placeholder ="这个只有在按钮点击的时候才聚焦"focus="{{focus}}"/>
<button bindtap ="bindbuttontap">使得输入框获取焦点</button>
<form bindsubmit ="bindformsubmit">
    <textarea placeholder ="form中的textarea" name="textarea"/>
    <button form-type="submit">提交</button>
</form>

//js
Page({
    data:{
      height:10,
      focus:false
    },
    bindbuttontap:function(){
      this.setData({
        focus:true
      })
    },
    bindtextareablur:function(e){
      console.log(e.detail.value)
    },
    bindformsubmit:function(e){
      console.log(e.detail.value.textarea)
    }
})

10.label

//wxml
<!--单击中国不能选择/取消复选框-->
<view><checkbox></checkbox>中国</view>
<!--单机‘中国’可以选择/取消复选框-->
<view><label><checkbox></checkbox>中国</label></view>
<!--使用for找到对应的id-->
<checkbox-group bindchange="citychange">
<label wx:for="{{citys}}">
<checkbox value="{{item.value}}"checked='{{item.checked}}'>{{item.value}}</checkbox>
</label>
</checkbox-group>
<view>您的选择是:{{city}}</view>

//js
Page({
    city:'',
    data:{
      citys:[
        {name:'km',value:'昆明'},
        {name:'sy',value:'三亚'},
        {name:'zh',value:'珠海',checked:'true'},
        {name:'dl',value:'大连'}]
    },
    citychange:function(e){
      console.log(e.detail.value);
      var city = e.detail.value;
      this.setData({city:city})
    }
})

11.form

表单组件

//wxml
<form bindsubmit="formsubmit" bindreset="fotmreset">
<view>姓名：
    <input type="text"name="xm"/>
</view>
<view>性别：
    <radio-group name="xb">
      <label>
      <radio value="男"checked/>男</label>
      <label>
      <radio value="女"/>女</label>
    </radio-group>
</view>
<view>爱好：
    <checkbox-group name="hobby">
    <label wx:for="{{hobbies}}">
        <checkbox value="{{item.value}}"
        checked="{{item.checked}}">{{item.value}}</checkbox>
    </label>
    </checkbox-group>
</view>
<button formtype="submit">提交</button>
<button formtype="reset">重置</button>
</form>

//js
Page({
    hobby:'',
    data:{
      hobbies:[
        {name:'jsj',value:'计算机',checked:'true'},
        {name:'music',value:'听音乐'},
        {name:'game',value:'玩电竞'},
        {name:'swim',value:'游泳',checked:'true'}]
    },
    formsubmit:function(e){
      console.log('form 发生了submit事件,携带数据为:',e.detail.value)
    },
    formreset:function(){
      console.log('form发生了reset事件')
    }
})

多媒体组件

1.image图像组件

1.缩放模式

//wxml
<block wx:for="{{modes}}">
<view>当前图片的模式是：{{item}}</view>
<image mode="{{item}}" src="/images/qlwh.png"style="width:100%,height:100%"/>
</block>

//js
Page({
    data:{
      modes:['scaletofill','aspectfit','aspectfill','widthfix']
    }
})

2.裁剪模式

//wxml
<block wx:for="{{modes}}">
<view>当前图片的模式是：{{item}}</view>
<image mode="{{item}}" src="/images/qlwh.png"style="width:100%,height:100%"/>
</block>

//js
Page({
    data:{
      modes:['top','center','bottom','left','right','top_left','top_right','bottom_left','bottom_right']
    }
})

2.audio

//wxml
<audio src="{{src}}" action="{{action}}" poster="{{poster}}" name="{{name}}" author="{{author}}" loop controls></audio>
<button type="primary" bindtap='play'>播放</button>
<button type="primary" bindtap='pause'>暂停</button>
<button type="primary" bindtap='playRate'>设置速率</button>
<button type="primary" bindtap='currentTime'>设置当前时间（秒）</button>

//js
Page({
    data:{
     poster:'/images/ly.jpg',
     name:'天文馆的猫',
     author:'泠鸢yousa',
     src:'https://music.163.com/song?id=1804555743&userid=535332773'
    },
    play:function(){
      this.setData({
        action:{
          method:'play'
        }
      })
    },
    pause:function(){
      this.setData({
        action:{
          method:'pause'
        }
      })
    },
    playrate:function(){
      this.setData({
        action:{
          method:'setplaybackrate',
          data:10 //速率
        }
      })
      console.log('当前速率:' +this.data.action.data)
    },
    currenttime:function(e){
      this.setData({
        action:{
          method:'setcurrenttime',
          data:120
        }
      })
    }
})

3.video

//wxml
<video src="{{src}}" controls></video>
<view class="btn-area">
<button bindtap="bindbuttontap">获取视频</button>
</view>

//js
Page({
  data:{
    src:'',
  },
  bindbuttontap:function(){
    var that=this
    wx.chooseVideo({
      sourcetype:['album','camera'],
      maxduration:60,
      camera:['front','back'],
      success:function(res){
        that.setData({
          src:res.tempFilePath
        })
      }
    })
  }
})

4.camera

//wxml
<camera device-position="back" flash="off" binderror="error" style="width: 100%;height: 350px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>

//js
Page({
  takePhoto(){
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality:'high',
      success:(res) => {
        this.setData({
          src:res.tempImagePath
        })
      }
    })
  },
  error(e){
    console.log(e.detail)
  }
})

其他组件

1.map

地图组件

map组件markers属性

map组件polyline属性

//wxml
<map id="map"
    longitude="108.9200"
    latitude="34.1550"
    scale="14"
    controls="{{controls}}"
    bindcontroltap="controltap"
    markers="{{markers}}"
    bindmarkertap="markertap"
    polyline="{{polyline}}"
    bindregionchange="regionchange"
    show-location
    style="width: 100%;height: 300px;">
    </map>

//js
Page({
    data:{
      markers:[{
        iconPath:"/images/ly.jpg",
        id:0,
        longitude:"108.9290",
        latitude:"34.1480",
        width:50,
        height:50
      }],
      polyline:[{
        points:[
          {
            longitude:"108.9200",
            latitude:"34.1500"
          },
          {
            longitude:"108.9200",
            latitude:"34.1700"
          }
        ],
        color:"#00ff00",
        width:2,
        dottedLine:true
      }],
      controls:[{
        id:1,
        iconPath:'/images/ly.jpg',
        position:{
          left:0,
          top:300,
          width:30,
          height:30
        },
        clickable:true
      }]
    },
    regionchange(e){
      console.log(e.type)
    },
    markertap(e){
      console.log(e.markerId)
    },
    controltap(e){
      console.log(e.controlId)
    }
})

2.canvas

画布

//wxml
<canvas canvas-id="myCanvas" style="border:1px solid red;"/>

//js
Page({
   onLoad:function(options){
     var ctx=wx.createCanvasContext('myCanvas')
      ctx.setFillStyle('green')
      ctx.fillRect(10,10,200,100)
      ctx.draw()
   }
})

本章内容

容器组件（view、scroll-view、swiper）

基础内容组件（icon、text、progress、rich-text）

表单组件（form、input、button、radio、check-video、camera）

其他组件（map、canvas）