小程序-demo：小程序示例-page/component2

ylbtech-小程序-demo：小程序示例-page/component2

 以下将展示小程序官方组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见小程序开发文档。

1. page/component返回顶部

1、

a) .js

Page({
  data: {
    list: [
      {
        id: 'view',
        name: '视图容器',
        open: false,
        pages: ['view', 'scroll-view', 'swiper']
      }, {
        id: 'content',
        name: '基础内容',
        open: false,
        pages: ['text', 'icon', 'progress']
      }, {
        id: 'form',
        name: '表单组件',
        open: false,
        pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'radio', 'slider', 'switch', 'textarea']
      }, {
        id: 'nav',
        name: '导航',
        open: false,
        pages: ['navigator']
      }, {
        id: 'media',
        name: '媒体组件',
        open: false,
        pages: ['image', 'audio', 'video']
      }, {
        id: 'map',
        name: '地图',
        pages: ['map']
      }, {
        id: 'canvas',
        name: '画布',
        pages: ['canvas']
      }
    ]
  },
  kindToggle: function (e) {
    var id = e.currentTarget.id, list = this.data.list;
    for (var i = 0, len = list.length; i < len; ++i) {
      if (list[i].id == id) {
        list[i].open = !list[i].open
      } else {
        list[i].open = false
      }
    }
    this.setData({
      list: list
    });
  }
})

b) .json

{
    "navigationBarTitleText": "小程序官方组件展示"
}

c) .wxml

<view class="index">
  <view class="index-hd">
    <image class="index-logo" src="resources/kind/logo.png"></image>
    <view class="index-desc">以下将展示小程序官方组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见小程序开发文档。</view>
  </view>
  <view class="index-bd">
    <view class="kind-list">
      <block wx:for-items="{{list}}" wx:key="{{item.id}}">
        <view class="kind-list-item">
          <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
            <view class="kind-list-text">{{item.name}}</view>
            <image class="kind-list-img" src="resources/kind/{{item.id}}.png"></image>
          </view>
          <view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
            <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
              <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
                <navigator url="pages/{{page}}/{{page}}" class="navigator">
                  <view class="navigator-text">{{page}}</view>
                  <view class="navigator-arrow"></view>
                </navigator>
              </block>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</view>

d) .wxss

@import "../common/index.wxss";

e)

2、pages

3、resources

-kind

-pic

4、

2.  ./pages/view 试图容器返回顶部

1、view

a) .js

Page({})

b) .json

{
    "navigationBarTitleText":"view"  
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'view'}}"/>

  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: row
横向布局</text>
      </view>
      <view class="page-section-spacing">
        <view class="flex-wrp" style="flex-direction:row;">
          <view class="flex-item demo-text-1"></view>
          <view class="flex-item demo-text-2"></view>
          <view class="flex-item demo-text-3"></view>
        </view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: column
纵向布局</text>
      </view>
      <view class="flex-wrp" style="flex-direction:column;">
        <view class="flex-item flex-item-V demo-text-1"></view>
        <view class="flex-item flex-item-V demo-text-2"></view>
        <view class="flex-item flex-item-V demo-text-3"></view>
      </view>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

.flex-wrp{
  margin-top: 60rpx;
  display:flex;
}
.flex-item{
  width: 200rpx;
  height: 300rpx;
  font-size: 26rpx;
}
.flex-item-V{
  margin: 0 auto;
  width: 300rpx;
  height: 200rpx;
}

e)

2、scroll-view

a) .js

var order = ['demo1', 'demo2', 'demo3']
Page({
  data: {
    toView: 'green'
  },
  upper: function(e) {
    console.log(e)
  },
  lower: function(e) {
    console.log(e)
  },
  scroll: function(e) {
    console.log(e)
  },
  scrollToTop: function(e) {
    this.setAction({
      scrollTop: 0
    })
  },
  tap: function(e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1],
          scrollTop: (i + 1) * 200
        })
        break
      }
    }
  },
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

b) .json

{
    "navigationBarTitleText": "scroll-view"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'scroll-view'}}"/>

  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>Vertical Scroll
纵向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
          <view id="demo1" class="scroll-view-item demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item demo-text-2"></view>
          <view id="demo3" class="scroll-view-item demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>Horizontal Scroll
横向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style=" 100%">
          <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
          <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

.page-section-spacing{
  margin-top: 60rpx;
}
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 300rpx;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 300rpx;
}

e)

3、swiper

a) .js

Page({
  data: {
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

b) .json

{
    "navigationBarTitleText": "swiper"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'swiper'}}"/>

  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">指示点</view>
          <view class="weui-cell__ft">
            <switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
          </view>
        </view>
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">自动播放</view>
          <view class="weui-cell__ft">
            <switch checked="{{autoplay}}" bindchange="changeAutoplay" />
          </view>
        </view>
      </view>
    </view>

    <view class="page-section page-section-spacing">
      <view class="page-section-title">
        <text>幻灯片切换时长(ms)</text>
        <text class="info">{{duration}}</text>
      </view>
      <slider bindchange="durationChange" value="{{duration}}" min="500" max="2000"/>
      <view class="page-section-title">
        <text>自动播放间隔时长(ms)</text>
        <text class="info">{{interval}}</text>
      </view>
      <slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000"/>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

@import "../../../common/lib/weui.wxss";

button{
  margin-bottom: 30rpx;
}
button:last-child{
  margin-bottom: 0;
}
.page-section-title{
  padding: 0;
}
.swiper-item{
  display: block;
  height: 150px;
}
.page-section-title{
  margin-top: 60rpx;
  position: relative;
}
.info{
  position: absolute;
  right: 0;
  color: #353535;
  font-size: 30rpx;
}
.page-foot{
  margin-top: 50rpx;
}

e)

4、

3. ./pages/content 基础内容返回顶部

1、text

a) .js

var texts = [
  '2011年1月，微信1.0发布',
  '同年5月，微信2.0语音对讲发布',
  '10月，微信3.0新增摇一摇功能',
  '2012年3月，微信用户突破1亿',
  '4月份，微信4.0朋友圈发布',
  '同年7月，微信4.2发布公众平台',
  '2013年8月，微信5.0发布微信支付',
  '2014年9月，企业号发布',
  '同月，发布微信卡包',
  '2015年1月，微信第一条朋友圈广告',
  '2016年1月，企业微信发布',
  '2017年1月，小程序发布',
  '......'
];

Page({
  data: {
    text: '',
    canAdd: true,
    canRemove: false
  },
  extraLine: [],
  add: function(e) {
    var that = this;
    this.extraLine.push(texts[this.extraLine.length % 12])
    this.setData({
      text: this.extraLine.join('
'),
      canAdd: this.extraLine.length < 12,
      canRemove: this.extraLine.length > 0
    })
    setTimeout(function(){
      that.setData({
        scrollTop: 99999
      });
    }, 0)
  },
  remove: function(e) {
    var that = this;
    if (this.extraLine.length > 0) {
      this.extraLine.pop()
      this.setData({
        text: this.extraLine.join('
'),
        canAdd: this.extraLine.length < 12,
        canRemove: this.extraLine.length > 0,
      })
    }
    setTimeout(function(){
      that.setData({
        scrollTop: 99999
      });
    }, 0)
  }
})

b) .json

{
    "navigationBarTitleText": "text"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'text'}}"/>

  <view class="page-body">
    <view class="page-section page-section-spacing">
      <view class="text-box" scroll-y="true" scroll-top="{{scrollTop}}">
        <text>{{text}}</text>
      </view>
      <button disabled="{{!canAdd}}" bindtap="add">add line</button>
      <button disabled="{{!canRemove}}" bindtap="remove">remove line</button>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

button{
  margin: 40rpx 0;
}
.text-box{
  margin-bottom: 70rpx;
  padding: 40rpx 0;
  display: flex;
  min-height: 300rpx;
  background-color: #FFFFFF;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 30rpx;
  color: #353535;
  line-height: 2em;
}

e)

2、icon

a) .js

Page({})

b) .json

{
    "navigationBarTitleText": "icon"
}

c) .wxml

<import src="../../../common/head.wxml"/>
<import src="../../../common/foot.wxml"/>

<view class="container">
  <template is="head" data="{{title: 'icon'}}"/>

  <view class="icon-box">
    <icon class="icon-box-img" type="success" size="93"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">成功</view>
      <view class="icon-box-desc">用于表示操作顺利完成</view>
    </view>
  </view>
  <view class="icon-box">
    <icon class="icon-box-img" type="info" size="93"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">提示</view>
      <view class="icon-box-desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view>
    </view>
  </view>
  <view class="icon-box">
    <icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">普通警告</view>
      <view class="icon-box-desc">用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果</view>
    </view>
  </view>
  <view class="icon-box">
    <icon class="icon-box-img" type="warn" size="93"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">强烈警告</view>
      <view class="icon-box-desc">用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可严重的挽回的后果的情况</view>
    </view>
  </view>
  <view class="icon-box">
    <icon class="icon-box-img" type="waiting" size="93"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">等待</view>
      <view class="icon-box-desc">用于表示等待，告知用户结果需等待</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="success" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">多选控件图标_已选择</view>
      <view class="icon-box-desc">用于多选控件中，表示已选择该项目</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="circle" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">多选控件图标_未选择</view>
      <view class="icon-box-desc">用于多选控件中，表示该项目可被选择，但还未选择</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="warn" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">错误提示</view>
      <view class="icon-box-desc">用于在表单中表示出现错误</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="success_no_circle" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">单选控件图标_已选择</view>
      <view class="icon-box-desc">用于单选控件中，表示已选择该项目</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="download" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">下载</view>
      <view class="icon-box-desc">用于表示可下载</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="info_circle" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">提示</view>
      <view class="icon-box-desc">用于在表单中表示有信息提示</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="cancel" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">停止或关闭</view>
      <view class="icon-box-desc">用于在表单中，表示关闭或停止</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="search" size="14"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">搜索</view>
      <view class="icon-box-desc">用于搜索控件中，表示可搜索</view>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

.icon-box{
  margin-bottom: 40rpx;
  padding: 0 75rpx;
  display: flex;
  align-items: center;
}
.icon-box-img{
  margin-right: 46rpx;
}
.icon-box-ctn{
  flex-shrink: 100;
}
.icon-box-title{
  font-size: 34rpx;
}
.icon-box-desc{
  margin-top: 12rpx;
  font-size: 26rpx;
  color: #888;
}

.icon-small-wrp{
  margin-right: 46rpx;
  width: 93px;
  height: 93px;
  display: flex;
  align-items: center;
  justify-content: center;
}

e)

3、progress

a) .js

Page({})

b) .json

{
    "navigationBarTitleText": "progress"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'progress'}}"/>

  <view class="page-body">
    <view class="page-section page-section-gap">

      <view class="progress-box">
        <progress percent="20" show-info stroke-width="3"/>
      </view>

      <view class="progress-box">
        <progress percent="40" active stroke-width="3" />
        <icon class="progress-cancel" type="cancel"></icon>
      </view>

      <view class="progress-box">
        <progress percent="60" active stroke-width="3" />
      </view>

      <view class="progress-box">
        <progress percent="80" color="#10AEFF" active stroke-width="3" />
      </view>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

progress{
  width: 100%;
}
.progress-box{
  display: flex;
  height: 50rpx;
  margin-bottom: 60rpx;
}
.progress-cancel{
  margin-left: 40rpx;
}

e)

4. ./pages/form 表单组件返回顶部

1、button

a) .js

var types = ['default', 'primary', 'warn']
var pageObject = {
  data: {
    defaultSize: 'default',
    primarySize: 'default',
    warnSize: 'default',
    disabled: false,
    plain: false,
    loading: false
  },
  setDisabled: function(e) {
    this.setData({
      disabled: !this.data.disabled
    })
  },
  setPlain: function(e) {
    this.setData({
      plain: !this.data.plain
    })
  },
  setLoading: function(e) {
    this.setData({
      loading: !this.data.loading
    })
  }
}

for (var i = 0; i < types.length; ++i) {
  (function(type) {
    pageObject[type] = function(e) {
      var key = type + 'Size'
      var changedData = {}
      changedData[key] =
        this.data[key] === 'default' ? 'mini' : 'default'
      this.setData(changedData)
    }
  })(types[i])
}

Page(pageObject)

b) .json

{
    "navigationBarTitleText": "button"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'button'}}"/>

  <view class="page-body">
    <view class="btn-area" id="buttonContainer">
      <button type="primary">页面主操作 Normal</button>
      <button type="primary" loading="true">页面主操作 Loading</button>
      <button type="primary" disabled="true">页面主操作 Disabled</button>

      <button type="default">页面次要操作 Normal</button>
      <button type="default" disabled="true">页面次要操作 Disabled</button>

      <button type="warn">警告类操作 Normal</button>
      <button type="warn" disabled="true">警告类操作 Disabled</button>

      <view class="button-sp-area">
        <button type="primary" plain="true">按钮</button>
        <button type="primary" disabled="true" plain="true">不可点击的按钮</button>

        <button type="default" plain="true">按钮</button>
        <button type="default" disabled="true" plain="true">按钮</button>

        <button class="mini-btn" type="primary" size="mini">按钮</button>
        <button class="mini-btn" type="default" size="mini">按钮</button>
        <button class="mini-btn" type="warn" size="mini">按钮</button>
      </view>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

button{
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}
.button-sp-area{
  margin: 0 auto;
  width: 60%;
}
.mini-btn{
  margin-right: 10rpx;
}

e)

2、checkbox

a) .js

Page({
  data: {
    items: [
      {value: 'USA', name: '美国'},
      {value: 'CHN', name: '中国', checked: 'true'},
      {value: 'BRA', name: '巴西'},
      {value: 'JPN', name: '日本'},
      {value: 'ENG', name: '英国'},
      {value: 'FRA', name: '法国'}
    ]
  },
  checkboxChange: function(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)

    var items = this.data.items, values = e.detail.value;
    for (var i = 0, lenI = items.length; i < lenI; ++i) {
      items[i].checked = false;

      for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
        if(items[i].value == values[j]){
          items[i].checked = true;
          break
        }
      }
    }

    this.setData({
      items: items
    })
  }
})

b) .json

{
    "navigationBarTitleText": "checkbox"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'checkbox'}}"/>

  <view class="page-body">
    <view class="page-section page-section-gap">
      <view class="page-section-title">默认样式</view>
      <label class="checkbox">
        <checkbox value="cb" checked="true"/>选中
      </label>
      <label class="checkbox">
        <checkbox value="cb" />未选中
      </label>
    </view>

    <view class="page-section">
      <view class="page-section-title">推荐展示样式</view>
      <view class="weui-cells weui-cells_after-title">
        <checkbox-group bindchange="checkboxChange">
          <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
            <view class="weui-cell__hd">
              <checkbox value="{{item.value}}" checked="{{item.checked}}"/>
            </view>
            <view class="weui-cell__bd">{{item.name}}</view>
          </label>
        </checkbox-group>
      </view>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

@import "../../../common/lib/weui.wxss";

.checkbox{
  margin-right: 20rpx;
}

e)

3、form

a) .js

Page({
  data: {
    pickerHidden: true,
    chosen: ''
  },
  pickerConfirm: function (e) {
    this.setData({
      pickerHidden: true
    })
    this.setData({
      chosen: e.detail.value
    })
  },
  pickerCancel: function (e) {
    this.setData({
      pickerHidden: true
    })
  },
  pickerShow: function (e) {
    this.setData({
      pickerHidden: false
    })
  },
  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  formReset: function (e) {
    console.log('form发生了reset事件，携带数据为：', e.detail.value)
    this.setData({
      chosen: ''
    })
  }
})

b) .json

{
    "navigationBarTitleText": "form"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'form'}}"/>

  <view class="page-body">
    <form catchsubmit="formSubmit" catchreset="formReset">
      <view class="page-section page-section-gap">
        <view class="page-section-title">switch</view>
        <switch name="switch"/>
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">radio</view>
        <radio-group name="radio">
          <label><radio value="radio1"/>选项一</label>
          <label><radio value="radio2"/>选项二</label>
        </radio-group>
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">checkbox</view>
        <checkbox-group name="checkbox">
          <label><checkbox value="checkbox1"/>选项一</label>
          <label><checkbox value="checkbox2"/>选项二</label>
        </checkbox-group>
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">slider</view>
        <slider value="50" name="slider" show-value ></slider>
      </view>

      <view class="page-section">
        <view class="page-section-title">input</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <view class="weui-cell__bd">
              <input class="weui-input" name="input" placeholder="这是一个输入框" />
            </view>
          </view>
        </view>
      </view>

      <view class="btn-area">
        <button type="primary" formType="submit">Submit</button>
        <button formType="reset">Reset</button>
      </view>
    </form>
  </view>

  <template is="foot" />
</view>

d) .wxss

@import "../../../common/lib/weui.wxss";

label {
  display: inline-block;
  min-width: 270rpx;
  margin-right: 20rpx;
}
form{
  width: 100%;
}
.picker-text {
  margin-left: 20rpx;
  position: relative;
}

e)

4、input

a) .js

Page({
  data: {
    focus: false,
    inputValue: ''
  },
  bindKeyInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },
  bindReplaceInput: function (e) {
    var value = e.detail.value
    var pos = e.detail.cursor
    var left
    if (pos !== -1) {
      // 光标在中间
      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'),
  },
  bindHideKeyboard: function (e) {
    if (e.detail.value === '123') {
      // 收起键盘
      wx.hideKeyboard()
    }
  }
})

b) .json

{
    "navigationBarTitleText": "input"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'input'}}"/>

  <view class="page-body">
    <view class="page-section">
      <view class="weui-cells__title">可以自动聚焦的input</view>
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <input class="weui-input" auto-focus placeholder="将会获取焦点"/>
        </view>
      </view>
    </view>
    <view class="page-section">
      <view class="weui-cells__title">控制最大输入长度的input</view>
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <input class="weui-input" maxlength="10" placeholder="最大输入长度为10" />
        </view>
      </view>
    </view>
    <view class="page-section">
      <view class="weui-cells__title">实时获取输入值：{{inputValue}}</view>
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <input class="weui-input"  maxlength="10" bindinput="bindKeyInput" placeholder="输入同步到view中"/>
        </view>
      </view>
    </view>
    <view class="page-section">
      <view class="weui-cells__title">控制输入的input</view>
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <input class="weui-input"  bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
        </view>
      </view>
    </view>
    <view class="page-section">
      <view class="weui-cells__title">控制键盘的input</view>
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <input class="weui-input"  bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />
        </view>
      </view>
    </view>
    <view class="page-section">
      <view class="weui-cells__title">数字输入的input</view>
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <input class="weui-input" type="number" placeholder="这是一个数字输入框" />
        </view>
      </view>
    </view>
    <view class="page-section">
      <view class="weui-cells__title">密码输入的input</view>
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <input class="weui-input" password type="text" placeholder="这是一个密码输入框" />
        </view>
      </view>
    </view>
    <view class="page-section">
      <view class="weui-cells__title">带小数点的input</view>
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <input class="weui-input" type="digit" placeholder="带小数点的数字键盘"/>
        </view>
      </view>
    </view>
    <view class="page-section">
      <view class="weui-cells__title">身份证输入的input</view>
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <input class="weui-input" type="idcard" placeholder="身份证输入键盘" />
        </view>
      </view>
    </view>
    <view class="page-section">
      <view class="weui-cells__title">控制占位符颜色的input</view>
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <input class="weui-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
        </view>
      </view>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

@import "../../../common/lib/weui.wxss";

.page-section{
  margin-bottom: 20rpx;
}

e)

5、label

a) .js

Page({
  data: {
    checkboxItems: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'}
    ],
    radioItems: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'}
    ],
    hidden: false
  },
  checkboxChange: function (e) {
    var checked = e.detail.value
    var changed = {}
    for (var i = 0; i < this.data.checkboxItems.length; i++) {
      if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) {
        changed['checkboxItems[' + i + '].checked'] = true
      } else {
        changed['checkboxItems[' + i + '].checked'] = false
      }
    }
    this.setData(changed)
  },
  radioChange: function (e) {
    var checked = e.detail.value
    var changed = {}
    for (var i = 0; i < this.data.radioItems.length; i ++) {
      if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
        changed['radioItems[' + i + '].checked'] = true
      } else {
        changed['radioItems[' + i + '].checked'] = false
      }
    }
    this.setData(changed)
  },
  tapEvent: function (e) {
    console.log('按钮被点击')
  }
})

b) .json

{
    "navigationBarTitleText": "label"
}

c) .wxml  ?点击该label下的文字默认选中第一个checkbox

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'label'}}"/>

  <view class="page-body">
    <view class="page-section page-section-gap">
      <view class="page-section-title">表单组件在label内</view>
      <checkbox-group class="group" bindchange="checkboxChange">
        <view class="label-1" wx:for="{{checkboxItems}}">
          <label>
            <checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
            <text class="label-1-text">{{item.value}}</text>
          </label>
        </view>
      </checkbox-group>
    </view>

    <view class="page-section page-section-gap">
      <view class="page-section-title">label用for标识表单组件</view>
      <radio-group class="group" bindchange="radioChange">
        <view class="label-2" wx:for="{{radioItems}}">
          <radio id="{{item.name}}" value="{{item.name}}" checked="{{item.checked}}"></radio>
          <label class="label-2-text" for="{{item.name}}"><text>{{item.name}}</text></label>
        </view>
      </radio-group>
    </view>

    <view class="page-section page-section-gap">
      <view class="page-section-title">label内有多个时选中第一个</view>
      <label class="label-3">
        <checkbox class="checkbox-3">选项一</checkbox>
        <checkbox class="checkbox-3">选项二</checkbox>
        <view class="label-3-text">点击该label下的文字默认选中第一个checkbox</view>
      </label>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

.label-1, .label-2{
  margin: 30rpx 0;
}
.label-3-text{
  color: #576B95;
  font-size: 28rpx;
}
.checkbox-3{
  display: block;
  margin: 30rpx 0;
}

e)

6、picker

1、view

a) .js

Page({
  data: {
    array: ['中国', '美国', '巴西', '日本'],
    index: 0,
    date: '2016-09-01',
    time: '12:01'
  },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  bindDateChange: function(e) {
    this.setData({
      date: e.detail.value
    })
  },
  bindTimeChange: function(e) {
    this.setData({
      time: e.detail.value
    })
  }
})

b) .json

{
    "navigationBarTitleText": "picker"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'picker'}}"/>

  <view class="page-body">
    <view class="page-section">
      <view class="weui-cells__title">地区选择器</view>
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">当前选择</view>
          </view>
          <view class="weui-cell__bd">
            <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
              <view class="weui-input">{{array[index]}}</view>
            </picker>
          </view>
        </view>
      </view>

      <view class="weui-cells__title">时间选择器</view>
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">当前选择</view>
          </view>
          <view class="weui-cell__bd">
            <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
              <view class="weui-input">{{time}}</view>
            </picker>
          </view>
        </view>
      </view>

      <view class="weui-cells__title">日期选择器</view>
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">当前选择</view>
          </view>
          <view class="weui-cell__bd">
            <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
              <view class="weui-input">{{date}}</view>
            </picker>
          </view>
        </view>
      </view>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

@import "../../../common/lib/weui.wxss";

.picker{
  padding: 19rpx 26rpx;
  background-color: #FFFFFF;
}

e)

7、radio

a) .js

Page({
  data: {
    items: [
      {value: 'USA', name: '美国'},
      {value: 'CHN', name: '中国', checked: 'true'},
      {value: 'BRA', name: '巴西'},
      {value: 'JPN', name: '日本'},
      {value: 'ENG', name: '英国'},
      {value: 'FRA', name: '法国'},
    ]
  },
  radioChange: function(e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value)

    var items = this.data.items;
    for (var i = 0, len = items.length; i < len; ++i) {
      items[i].checked = items[i].value == e.detail.value
    }

    this.setData({
      items: items
    });
  }
})

b) .json

{
    "navigationBarTitleText": "radio"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'radio'}}"/>

  <view class="page-body">
    <view class="page-section page-section-gap">
      <view class="page-section-title">默认样式</view>
      <label class="radio">
        <radio value="r1" checked="true"/>选中
      </label>
      <label class="radio">
        <radio value="r2" />未选中
      </label>
    </view>


    <view class="page-section">
      <view class="page-section-title">推荐展示样式</view>
      <view class="weui-cells weui-cells_after-title">
        <radio-group bindchange="radioChange">
          <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">

            <view class="weui-cell__hd">
              <radio value="{{item.value}}" checked="true"/>
            </view>
            <view class="weui-cell__bd">{{item.name}}</view>
          </label>
        </radio-group>
      </view>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

@import "../../../common/lib/weui.wxss";

.radio {
  margin-right: 20rpx;
}

e)

8、slider

a) .js

var pageData = {}
for (var i = 1; i < 5; ++i) {
  (function (index) {
    pageData['slider' + index + 'change'] = function(e) {
      console.log('slider' + index + '发生change事件，携带值为', e.detail.value)
    }
  })(i)
}
Page(pageData)

b) .json

{
    "navigationBarTitleText": "slider"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'slider'}}"/>

  <view class="page-body">
    <view class="page-section page-section-gap">
      <view class="page-section-title">设置step</view>
      <view class="body-view">
        <slider value="60" bindchange="slider2change" step="5"/>
      </view>
    </view>

    <view class="page-section page-section-gap">
      <view class="page-section-title">显示当前value</view>
      <view class="body-view">
        <slider value="50" bindchange="slider3change" show-value/>
      </view>
    </view>

    <view class="page-section page-section-gap">
      <view class="page-section-title">设置最小/最大值</view>
      <view class="body-view">
        <slider value="100" bindchange="slider4change" min="50" max="200" show-value/>
      </view>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

@import "../../../common/lib/weui.wxss";

button{
  margin-bottom: 30rpx;
}
button:last-child{
  margin-bottom: 0;
}
.page-section-title{
  padding: 0;
}
.swiper-item{
  display: block;
  height: 150px;
}
.page-section-title{
  margin-top: 60rpx;
  position: relative;
}
.info{
  position: absolute;
  right: 0;
  color: #353535;
  font-size: 30rpx;
}
.page-foot{
  margin-top: 50rpx;
}

e)

9、switch

a) .js

Page({
  switch1Change: function (e){
    console.log('switch1 发生 change 事件，携带值为', e.detail.value)
  },
  switch2Change: function (e){
    console.log('switch2 发生 change 事件，携带值为', e.detail.value)
  }
})

b) .json

{
    "navigationBarTitleText": "switch"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'switch'}}"/>

  <view class="page-body">
    <view class="page-section page-section-gap">
      <view class="page-section-title">默认样式</view>
      <view class="body-view">
        <switch checked bindchange="switch1Change"/>
        <switch bindchange="switch2Change"/>
      </view>
    </view>

    <view class="page-section">
      <view class="page-section-title">推荐展示样式</view>
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">开启中</view>
          <view class="weui-cell__ft">
            <switch checked />
          </view>
        </view>
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">关闭</view>
          <view class="weui-cell__ft">
            <switch />
          </view>
        </view>
      </view>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

@import "../../../common/lib/weui.wxss";

e)

10、textarea

a) .js

Page({
  data: {
    focus: false
  },
  bindTextAreaBlur: function(e) {
    console.log(e.detail.value)
  }
})

b) .json

{
    "navigationBarTitleText": "textarea"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'textarea'}}"/>

  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">输入区域高度自适应，不会出现滚动条</view>
      <view class="textarea-wrp">
        <textarea bindblur="bindTextAreaBlur" auto-height />
      </view>
    </view>

    <view class="page-section">
      <view class="page-section-title">这是一个可以自动聚焦的textarea</view>
      <view class="textarea-wrp">
        <textarea auto-focus="true" style="height: 3em" />
      </view>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

textarea {
    width: 700rpx;
    padding: 25rpx 0;
}
.textarea-wrp {
    padding: 0 25rpx;
    background-color: #fff;
}

e)

11、

5. ./pages/nav 导航返回顶部

0、

1、navigator

-navigate

a) .js

Page({
  onLoad: function(options) {
    console.log(options)
    this.setData({
      title: options.title
    })
  }
})

b) .json

{
    "navigationBarTitleText": "navigatePage"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: '新建的页面'}}"/>
</view>

d) .wxss

-navigator

a) .js

Page({})

b) .json

{
    "navigationBarTitleText": "navigator"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'navigator'}}"/>

  <view class="page-body">
    <view class="btn-area">
      <navigator url="navigate?title=navigate" hover-class="navigator-hover">
        <button type="default">跳转到新页面</button>
      </navigator>
      <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">
        <button type="default">在当前页打开</button>
      </navigator>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

.navigator-hover button{
  background-color: #DEDEDE;
}
.other-navigator-hover button{
  background-color: #DEDEDE;
}

-redirect

a) .js

Page({
  onLoad: function(options) {
    console.log(options)
    this.setData({
      title: options.title
    })
  }
})

b) .json

{
    "navigationBarTitleText": "redirectPage"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: '当前页'}}"/>
</view>

d) .wxss

e)

12、

 

6. ./pages/media 媒体组件返回顶部

1、image

a) .js

Page({})

b) .json

{
    "navigationBarTitleText": "image"
}

c) .wxml

<import src="../../../common/head.wxml"/>
<import src="../../../common/foot.wxml"/>

<view class="container">
  <template is="head" data="{{title: 'image'}}"/>

  <view class="page-body">
    <view class="page-section page-section-gap">
      <view class="page-section-title">Local Image</view>
      <view class="page-section-ctn">
        <image class="image" src="../../resources/pic/1.jpg"/>
      </view>
    </view>
    <view class="page-section page-section-gap">
      <view class="page-section-title">Internet Image</view>
      <view class="page-section-ctn">
        <image class="image" src="../../resources/pic/2.jpg"/>
      </view>
    </view>
  </view>

  <template is="foot"/>
</view>

d) .wxss

.page-section-ctn {
  text-align: center;
}

.image {
  margin-top: 30rpx;
  width: 580rpx;
  height: 208rpx;
}

e)

2、audio

a) .js

Page({
  data: {
    current: {
      poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
      name: '此时此刻',
      author: '许巍',
      src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
    },
    audioAction: {
      method: 'pause'
    }
  }
})

b) .json

{
    "navigationBarTitleText": "audio"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'audio'}}"/>

  <view class="page-body">
    <view class="page-section page-section-gap" style="text-align: center;">
      <audio style="text-align: left" src="{{current.src}}" poster="{{current.poster}}" name="{{current.name}}" author="{{current.author}}" action="{{audioAction}}" controls></audio>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

e)

3、video

a) .js

function getRandomColor () {
  const rgb = []
  for (let i = 0 ; i < 3; ++i){
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
}

Page({
  onReady: function (res) {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  inputValue: '',
    data: {
    src: '',
    danmuList:
      [{
        text: '第 1s 出现的弹幕',
        color: '#ff0000',
        time: 1
      },
      {
        text: '第 3s 出现的弹幕',
        color: '#ff00ff',
        time: 3
      }]
    },
  bindInputBlur: function(e) {
    this.inputValue = e.detail.value
  },
  bindButtonTap: function() {
    var that = this
    wx.chooseVideo({
        sourceType: ['album', 'camera'],
        maxDuration: 60,
        camera: ['front','back'],
        success: function(res) {
            that.setData({
                src: res.tempFilePath
            })
        }
    })
  },
  bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  },
  videoErrorCallback: function(e) {
    console.log('视频错误信息:')
    console.log(e.detail.errMsg)
  }
})

b) .json

{
    "navigationBarTitleText": "video"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'video'}}"/>

  <view class="page-body">
    <view class="page-section tc">
      <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>

      <view class="weui-cells">
        <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">弹幕内容</view>
          </view>
          <view class="weui-cell__bd">
            <input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此处输入弹幕内容" />
          </view>
        </view>
      </view>
      <view class="btn-area">
        <button bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">发送弹幕</button>
      </view>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

@import "../../../common/lib/weui.wxss";

.weui-cells{
  margin-top: 80rpx;
  text-align: left;
}
.weui-label{
  width: 5em;
}

e)

4、

7. ./pages/map 地图返回顶部

1、map

a) .js

Page({
  data: {
    latitude: 23.099994,
    longitude: 113.324520,
    markers: [{
      latitude: 23.099994,
      longitude: 113.324520,
      name: 'T.I.T 创意园'
    }],
    covers: [{
      latitude: 23.099994,
      longitude: 113.344520,
      iconPath: '/image/location.png'
    }, {
      latitude: 23.099994,
      longitude: 113.304520,
      iconPath: '/image/location.png'
    }]
  }
})

b) .json

{
    "navigationBarTitleText": "map"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'map'}}"/>

  <view class="page-body">
    <view class="page-section page-section-gap">
      <map
        style=" 100%; height: 300px;"
        latitude="{{latitude}}"
        longitude="{{longitude}}"
        markers="{{markers}}"
        covers="{{covers}}"
        >
      </map>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

e)

2、

8. ./pages/canvas 画布返回顶部

1、canvas

a) .js

Page({
  onReady: function () {
    this.position = {
      x: 150,
      y: 150,
      vx: 2,
      vy: 2
    }

    this.drawBall()
    this.interval = setInterval(this.drawBall, 17)
  },
  drawBall: function () {
    var p = this.position
    p.x += p.vx
    p.y += p.vy
    if (p.x >= 300) {
      p.vx = -2
    }
    if (p.x <= 7) {
      p.vx = 2
    }
    if (p.y >= 300) {
      p.vy = -2
    }
    if (p.y <= 7) {
      p.vy = 2
    }

    var context = wx.createContext()

    function ball(x, y) {
      context.beginPath(0)
      context.arc(x, y, 5, 0, Math.PI * 2)
      context.setFillStyle('#1aad19')
      context.setStrokeStyle('rgba(1,1,1,0)')
      context.fill()
      context.stroke()
    }

    ball(p.x, 150)
    ball(150, p.y)
    ball(300 - p.x, 150)
    ball(150, 300 - p.y)
    ball(p.x, p.y)
    ball(300 - p.x, 300 - p.y)
    ball(p.x, 300 - p.y)
    ball(300 - p.x, p.y)

    wx.drawCanvas({
      canvasId: 'canvas',
      actions: context.getActions()
    })
  },
  onUnload: function () {
    clearInterval(this.interval)
  }
})

b) .json

{
    "navigationBarTitleText": "canvas"
}

c) .wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'canvas'}}"/>

  <view class="page-body">
    <view class="page-body-wrapper">
      <canvas canvas-id="canvas" class="canvas"></canvas>
    </view>
  </view>

  <template is="foot" />
</view>

d) .wxss

.canvas {
  width: 305px;
  height: 305px;
  background-color: #fff;
}

e)

2、

9.返回顶部

 

10.返回顶部

0、

https://developers.weixin.qq.com/miniprogram/dev/component/

1、

 

11.返回顶部

 

作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。