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

時間 2019-11-29

標籤程序 demo 示例 page component2 component 简体版

原文原文鏈接

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

如下將展現小程序官方組件能力，組件樣式僅供參考，開發者可根據自身需求自定義組件樣式，具體屬性參數詳見小程序開發文檔。git

1. page/component返回頂部

一、

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";

二、pages

三、resources

-kind

-pic

四、

2. ./pages/view 試圖容器返回頂部

一、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\n橫向佈局</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\n縱向佈局</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;
}

二、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\n縱向滾動</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\n橫向滾動</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 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;
}

三、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;
}

四、

3. ./pages/content 基礎內容返回頂部

一、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('\n'),
      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('\n'),
        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;
}

二、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;
}

三、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;
}

4. ./pages/form 表單組件返回頂部

一、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;
}

二、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;
}

三、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;
}

四、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;
}

五、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;
}

六、picker

一、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;
}

七、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;
}

八、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;
}

九、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";

十、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;
}

十一、

5. ./pages/nav 導航返回頂部

0、

一、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

十二、

6. ./pages/media 媒體組件返回頂部

一、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;
}

二、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

三、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;
}

四、

7. ./pages/map 地圖返回頂部

一、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="width: 100%; height: 300px;"
        latitude="{{latitude}}"
        longitude="{{longitude}}"
        markers="{{markers}}"
        covers="{{covers}}"
        >
      </map>
    </view>
  </view>

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

d) .wxss

二、

8. ./pages/canvas 畫布返回頂部

一、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;
}

二、

9.返回頂部

10.返回頂部

0、

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

一、

11.返回頂部

做者：ylbtech
出處：http://ylbtech.cnblogs.com/
本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。