Version 20160926

.gitignore

+*swp
+*~

app.js

+App({
+  onLaunch: function () {
+    console.log('App Launch')
+  },
+  onShow: function () {
+    console.log('App Show')
+  },
+  onHide: function () {
+    console.log('App Hide')
+  },
+  globalData: {
+    hasLogin: false
+  }
+})

app.json

+{
+  "pages": [
+    "page/component/index",
+    "page/component/component-pages/action-sheet/action-sheet",
+    "page/component/component-pages/audio/audio",
+    "page/component/component-pages/button/button",
+    "page/component/component-pages/canvas/canvas",
+    "page/component/component-pages/checkbox/checkbox",
+    "page/component/component-pages/form/form",
+    "page/component/component-pages/icon/icon",
+    "page/component/component-pages/image/image",
+    "page/component/component-pages/input/input",
+    "page/component/component-pages/map/map",
+    "page/component/component-pages/modal/modal",
+    "page/component/component-pages/navigator/navigator",
+    "page/component/component-pages/progress/progress",
+    "page/component/component-pages/radio/radio",
+    "page/component/component-pages/scroll-view/scroll-view",
+    "page/component/component-pages/slider/slider",
+    "page/component/component-pages/switch/switch",
+    "page/component/component-pages/text/text",
+    "page/component/component-pages/toast/toast",
+    "page/component/component-pages/video/video",
+    "page/component/component-pages/view/view",
+    "page/component/component-pages/swiper/swiper",
+    "page/component/component-pages/slide-tab/slide-tab",
+    "page/component/component-pages/label/label",
+    "page/component/component-pages/loading/loading",
+    "page/component/component-pages/navigator/navigate",
+    "page/component/component-pages/navigator/redirect",
+    "page/component/component-pages/picker/picker",
+
+    "page/API/index/index",
+
+    "page/API/login/login",
+    "page/API/get-user-info/get-user-info",
+    "page/API/request-payment/request-payment",
+
+    "page/API/set-navigation-bar-title/set-navigation-bar-title",
+    "page/API/navigation-bar-loading/navigation-bar-loading",
+    "page/API/navigator/navigator",
+    "page/API/pull-down-refresh/pull-down-refresh",
+    "page/API/animation/animation",
+
+    "page/API/get-network-type/get-network-type",
+    "page/API/get-system-info/get-system-info",
+    "page/API/on-compass-change/on-compass-change",
+
+    "page/API/request/request",
+    "page/API/web-socket/web-socket",
+    "page/API/upload-file/upload-file",
+    "page/API/download-file/download-file",
+    
+
+    "page/API/image/image",
+    "page/API/voice/voice",
+    "page/API/file/file",
+    "page/API/on-accelerometer-change/on-accelerometer-change",
+    "page/API/canvas/canvas",
+    "page/API/background-audio/background-audio",
+    "page/API/video/video",
+
+    "page/API/get-location/get-location",
+    "page/API/open-location/open-location",
+
+    "page/API/storage/storage"
+  ],
+  "window": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "演示",
+    "navigationBarBackgroundColor": "#fbf9fe",
+    "backgroundColor": "#fbf9fe"
+  },
+  "tabBar": {
+    "color": "#dddddd",
+    "selectedColor": "#3cc51f",
+    "borderStyle": "black",
+    "backgroundColor": "#ffffff",
+    "list": [{
+      "pagePath": "page/component/index",
+      "iconPath": "image/icon_component.png",
+      "selectedIconPath": "image/icon_component_HL.png",
+      "text": "组件"
+    }, {
+      "pagePath": "page/API/index/index",
+      "iconPath": "image/icon_API.png",
+      "selectedIconPath": "image/icon_API_HL.png",
+      "text": "接口"
+    }]
+  },
+  "networkTimeout": {
+    "request": 10000,
+    "connectSocket": 10000,
+    "uploadFile": 10000,
+    "downloadFile": 10000
+  },
+  "debug": true
+}

app.wxss

+page {
+  background-color: #fbf9fe;
+  height: 100%;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  justify-content: space-between;
+}
+.page-header {
+  display: flex;
+  font-size: 32rpx;
+  color: #aaa;
+  margin-top: 50rpx;
+  flex-direction: column;
+  align-items: center;
+}
+.page-header-text {
+  padding: 20rpx 40rpx;
+}
+.page-header-line {
+  width: 150rpx;
+  height: 1px;
+  border-bottom: 1px solid #ccc; 
+}
+
+.page-body {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-grow: 1;
+  overflow-x: hidden;
+}
+.page-body-wrapper {
+  margin-top: 100rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+.page-body-wrapper form {
+  width: 100%;
+}
+.page-body-wording {
+  text-align: center;
+  padding: 200rpx 100rpx;
+}
+.page-body-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #fff;
+  margin-bottom: 50rpx;
+  width: 100%;
+  padding: 50rpx 0 150rpx 0;
+}
+.page-body-title {
+  margin-bottom: 100rpx;
+  font-size: 32rpx;
+}
+.page-body-text {
+  font-size: 30rpx;
+  line-height: 26px;
+  color: #ccc;
+}
+.page-body-text-small {
+  font-size: 24rpx;
+  color: #000;
+  margin-bottom: 100rpx;
+}
+.page-body-form {
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: 1px solid #eee;
+}
+.page-body-form-item {
+  display: flex;
+  align-items: center;
+  margin-left: 30rpx;
+  border-bottom: 1px solid #eee;
+  height: 88rpx;
+  font-size: 34rpx;
+}
+.page-body-form-key {
+  width: 180rpx;
+  color: #000;
+}
+.page-body-form-value {
+  flex-grow: 1;
+}
+.page-body-form-value .input-placeholder {
+  color: #b2b2b2;
+}
+
+.page-body-form-picker {
+  display: flex;
+  justify-content: space-between;
+  height: 100rpx;
+  align-items: center;
+  font-size: 36rpx;
+  margin-left: 20rpx;
+  padding-right: 20rpx;
+  border-bottom: 1px solid #eee;
+}
+.page-body-form-picker-value {
+  color: #ccc;
+}
+
+.page-body-buttons {
+  width: 100%;
+}
+.page-body-button {
+  margin: 25rpx;
+}
+.page-body-button image {
+  width: 150rpx;
+  height: 150rpx;
+}
+.page-footer {
+  text-align: center;
+  color: #1aad19;
+  font-size: 24rpx;
+  margin: 20rpx 0;
+}
+
+.green{
+    color: #09BB07;
+}
+.red{
+    color: #F76260;
+}
+.blue{
+    color: #10AEFF;
+}
+.yellow{
+    color: #FFBE00;
+}
+.gray{
+    color: #C9C9C9;
+}
+
+.strong{
+    font-weight: bold;
+}
+
+.bc_green{
+    background-color: #09BB07;
+}
+.bc_red{
+    background-color: #F76260;
+}
+.bc_blue{
+    background-color: #10AEFF;
+}
+.bc_yellow{
+    background-color: #FFBE00;
+}
+.bc_gray{
+    background-color: #C9C9C9;
+}
+
+.tc{
+    text-align: center;
+}
+
+.page input{
+    padding: 20rpx 30rpx;
+    background-color: #fff;
+}
+checkbox, radio{
+    margin-right: 10rpx;
+}
+
+.btn-area{
+    padding: 0 30px;
+}
+.btn-area button{
+    margin-top: 20rpx;
+    margin-bottom: 20rpx;
+}
+
+.page {
+    min-height: 100%;
+    flex: 1;
+    background-color: #FBF9FE;
+    font-size: 32rpx;
+    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
+    overflow: hidden;
+}
+.page__hd{
+    padding: 50rpx 50rpx 100rpx 50rpx;
+    text-align: center;
+}
+.page__title{
+    display: inline-block;
+    padding: 20rpx 40rpx;
+    font-size: 32rpx;
+    color: #AAAAAA;
+    border-bottom: 1px solid #CCCCCC;
+}
+.page__desc{
+    display: none;
+    margin-top: 20rpx;
+    font-size: 26rpx;
+    color: #BBBBBB;
+}
+
+.section{
+    margin-bottom: 80rpx;
+}
+.section_gap{
+    padding: 0 30rpx;
+}
+.section__title{
+    margin-bottom: 16rpx;
+    padding-left: 30rpx;
+    padding-right: 30rpx;
+}
+.section_gap .section__title{
+    padding-left: 0;
+    padding-right: 0;
+}
+.section__ctn{
+
+}

page/API/animation/animation.js

+Page({
+  onReady: function () {
+    this.animation = wx.createAnimation()
+
+  },
+  rotate: function () {
+    this.animation.rotate(Math.random() * 720 - 360).step()
+    this.setData({ animation: this.animation.export() })
+  },
+  scale: function () {
+    this.animation.scale(Math.random() * 2).step()
+    this.setData({ animation: this.animation.export() })
+  },
+  translate: function () {
+    this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
+    this.setData({ animation: this.animation.export() })
+  },
+  skew: function () {
+    this.animation.skew(Math.random() * 90, Math.random() * 90).step()
+    this.setData({ animation: this.animation.export() })
+  },
+  rotateAndScale: function () {
+    this.animation.rotate(Math.random() * 720 - 360)
+        .scale(Math.random() * 2)
+        .step()
+    this.setData({ animation: this.animation.export() })
+  },
+  rotateThenScale: function () {
+    this.animation.rotate(Math.random() * 720 - 360).step()
+        .scale(Math.random() * 2).step()
+    this.setData({ animation: this.animation.export() })
+  },
+  all: function () {
+    this.animation.rotate(Math.random() * 720 - 360)
+        .scale(Math.random() * 2)
+        .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
+        .skew(Math.random() * 90, Math.random() * 90)
+        .step()
+    this.setData({ animation: this.animation.export() })
+  },
+  allInQueue: function () {
+    this.animation.rotate(Math.random() * 720 - 360).step()
+        .scale(Math.random() * 2).step()
+        .translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
+        .skew(Math.random() * 90, Math.random() * 90).step()
+    this.setData({ animation: this.animation.export() })
+  },
+  reset: function () {
+    this.animation.rotate(0, 0)
+                  .scale(1)
+                  .translate(0, 0)
+                  .skew(0, 0)
+                  .step({ duration: 0 })
+    this.setData({ animation: this.animation.export() })
+  }
+})

page/API/animation/animation.json

+{
+    "navigationBarTitleText": "动画"
+}

page/API/animation/animation.wxml

+<import src="../common/header.wxml" />
+<import src="../common/footer.wxml" />
+
+<view class="container">
+  <template is="header" data="{{title: 'createAnimation'}}"/>
+
+  <view class="page-body">
+    <view class="page-body-wrapper">
+      <view class="animation-element-wrapper">
+        <view class="animation-element" animation="{{animation}}"></view>
+      </view>
+      <view class="animation-buttons" scroll-y="true">
+        <button class="animation-button" bindtap="rotate">旋转</button>
+        <button class="animation-button" bindtap="scale"> 缩放</button>
+        <button class="animation-button" bindtap="translate">移动</button>
+        <button class="animation-button" bindtap="skew">倾斜</button>
+        <button class="animation-button" bindtap="rotateAndScale">旋转并缩放</button>
+        <button class="animation-button" bindtap="rotateThenScale">旋转后缩放</button>
+        <button class="animation-button" bindtap="all">同时展示全部</button>
+        <button class="animation-button" bindtap="allInQueue">顺序展示全部</button>
+        <button class="animation-button-reset" bindtap="reset">还原</button>
+      </view>
+    </view>
+  </view>
+
+  <template is="footer" />
+</view>
+

page/API/animation/animation.wxss

+.page-body-wrapper {
+  flex-grow: 1;
+}
+.animation-element-wrapper {
+  display: block;
+  margin-bottom: 100rpx;
+}
+.animation-element {
+  width: 200rpx;
+  height: 200rpx;
+  background-color: #1AAD19;
+}
+.animation-buttons {
+  padding: 50rpx 50rpx 10rpx;
+  border-top: 1px solid #ccc;
+  display: flex;
+  flex-grow: 1;
+  overflow-y: scroll;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 400rpx;
+  box-sizing: border-box;
+}
+.animation-button {
+  width: 290rpx;
+  margin: 20rpx auto; 
+}
+.animation-button-reset {
+  width: 610rpx;
+  margin: 20rpx auto; 
+}

page/API/background-audio/background-audio.js

+var app = getApp()
+var util = require('../../../util/util.js')
+var dataUrl = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
+Page({
+  onLoad: function () {
+    var that = this
+    this._enableInterval()
+
+    if (app.globalData.backgroundAudioPlaying) {
+      this.setData({
+        playing: true
+      })
+    }
+  },
+  data: {
+    playing: false,
+    playTime: 0,
+    formatedPlayTime: '00:00:00'
+  },
+  play: function (res) {
+    var that = this
+    wx.playBackgroundAudio({
+      dataUrl: dataUrl,
+      title: '此时此刻',
+      coverImgUrl: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
+      complete: function (res) {
+        that.setData({
+          playing: true
+        })
+      }
+    })
+    this._enableInterval()
+    app.globalData.backgroundAudioPlaying = true
+  },
+  seek: function (e) {
+    clearInterval(this.updateInterval)
+    var that = this
+    wx.seekBackgroundAudio({
+      position: e.detail.value,
+      complete: function () {
+        // 实际会延迟两秒左右才跳过去
+        setTimeout(function () {
+          that._enableInterval()
+        }, 2000)
+      }
+    })
+  },
+  pause: function () {
+    var that = this
+    wx.pauseBackgroundAudio({
+      dataUrl: dataUrl,
+      success: function () {
+        that.setData({
+          playing: false
+        })
+      }
+    })
+    app.globalData.backgroundAudioPlaying = false
+  },
+  stop: function () {
+    var that = this
+    wx.stopBackgroundAudio({
+      dataUrl: dataUrl,
+      success: function (res) {
+        that.setData({
+          playing: false,
+          playTime: 0,
+          formatedPlayTime: util.formatTime(0)
+        })
+      }
+    })
+    app.globalData.backgroundAudioPlaying = false
+  },
+  _enableInterval: function () {
+    var that = this
+    update()
+    this.updateInterval = setInterval(update, 500)
+    function update() {
+      wx.getBackgroundAudioPlayerState({
+        success: function (res) {
+          that.setData({
+            playTime: res.currentPosition,
+            formatedPlayTime: util.formatTime(res.currentPosition + 1)
+          })
+        }
+      })
+    }
+  },
+  onUnload: function () {
+    clearInterval(this.updateInterval)
+  }
+})

page/API/background-audio/background-audio.json

+{
+   "navigationBarTitleText": "背景音乐"
+}

page/API/background-audio/background-audio.wxml

+<import src="../common/header.wxml" />
+<import src="../common/footer.wxml" />
+
+<view class="container">
+  <template is="header" data="{{title: 'backgroundAudio'}}"/>
+
+  <view class="page-body-wrapper">
+    <view class="page-body-info">
+      <text class="time-big">{{formatedPlayTime}}</text>
+      <slider class="slider" min="0" max="269" step="1" value="{{playTime}}" bindchange="seek"></slider>
+      <view class="play-time">
+        <text>00:00</text>
+        <text>04:29</text>
+      </view>
+    </view>
+    <text class="page-body-text">离开小程序后音乐也可保持播放</text>
+    <view class="page-body-buttons">
+      <block wx:if="{{playing === true}}">
+        <view class="page-body-button" bindtap="stop">
+          <image src="/image/stop.png"></image>
+        </view>
+        <view class="page-body-button" bindtap="pause">
+          <image src="/image/pause.png"></image>
+        </view>
+      </block>
+      <block wx:if="{{playing === false}}">
+        <view class="page-body-button"></view>
+        <view class="page-body-button" bindtap="play">
+          <image src="/image/play.png"></image>
+        </view>
+      </block>
+      <view class="page-body-button"></view>
+    </view>
+  </view>
+
+  <template is="footer" />
+</view>
+
+

page/API/background-audio/background-audio.wxss

+.page-body-wrapper {
+  margin-top: 0;
+}
+.page-body-info {
+  padding-bottom: 50rpx;
+}
+.time-big {
+  font-size: 60rpx;
+  margin: 20rpx;
+}
+.slider {
+  width: 650rpx;
+}
+.play-time {
+  font-size: 28rpx;
+  width: 700rpx;
+  padding: 20rpx 0;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+.page-body-buttons {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 100rpx;
+}
+.page-body-button {
+  width: 250rpx;
+  text-align: center;
+}

page/API/canvas/canvas.js

+var example = require('./example.js')
+
+Page({
+  onLoad: function () {
+    this.context = wx.createContext()
+
+    var methods = Object.keys(example)
+    this.setData({
+      methods: methods
+    })
+
+    var that = this
+    methods.forEach(function (method) {
+      that[method] = function () {
+        example[method](that.context)
+        wx.drawCanvas({
+          canvasId: 'canvas',
+          actions: that.context.getActions()
+        })
+      }
+    })
+  }
+})

page/API/canvas/canvas.json

+{
+    "navigationBarTitleText": "创建画布"
+}

page/API/canvas/canvas.wxml

+<import src="../common/header.wxml" />
+<import src="../common/footer.wxml" />
+
+<view class="container">
+  <template is="header" data="{{title: 'createContext'}}"/>
+
+  <view class="page-body">
+    <view class="page-body-wrapper">
+      <canvas class="canvas-element" canvas-id="canvas"></canvas>
+      <view class="canvas-buttons" scroll-y="true">
+        <block wx:for="{{methods}}" wx:for-item="method">
+          <button class="canvas-button" bindtap="{{method}}">{{method}}</button>
+        </block>
+      </view>
+    </view>
+  </view>
+
+  <template is="footer" />
+</view>
+

page/API/canvas/canvas.wxss

+.page-body-wrapper {
+  flex-grow: 1;
+}
+.canvas-element-wrapper {
+  display: block;
+  margin-bottom: 100rpx;
+}
+.canvas-element {
+  width: 100%;
+  height: 250px;
+}
+.canvas-buttons {
+  padding: 50rpx 50rpx 10rpx;
+  border-top: 1px solid #ccc;
+  display: flex;
+  flex-grow: 1;
+  overflow-y: scroll;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 400rpx;
+  box-sizing: border-box;
+}
+.canvas-button {
+  width: 290rpx;
+  margin: 20rpx auto; 
+}
+.canvas-button-reset {
+  width: 610rpx;
+  margin: 20rpx auto; 
+}

page/API/canvas/example.js

+var example = {};
+
+example.rotate = function (context) {
+  context.beginPath();
+  context.rotate(10*Math.PI/180);
+  context.rect(225, 75, 20, 10);
+  context.fill(); 
+};
+
+example.scale = function (context) {
+  context.beginPath();
+  context.rect(25, 25, 50, 50);
+  context.stroke();
+
+  context.scale(2,2);
+
+  context.beginPath();
+  context.rect(25, 25, 50, 50);
+  context.stroke();
+};
+
+
+example.reset = function (context) {
+  context.beginPath();
+
+  context.setFillStyle('#000000');
+  context.setStrokeStyle('#000000');
+  context.setFontSize(10);
+
+  context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)');
+
+  context.setLineCap('butt');
+  context.setLineJoin('miter');
+  context.setLineWidth(1);
+  context.setMiterLimit(10);
+};
+
+example.translate = function (context) {
+  context.beginPath();
+  context.rect(10, 10, 100, 50);
+  context.fill();
+
+  context.translate(70, 70);
+
+  context.beginPath();
+  context.fill();
+};
+
+example.save = function (context) {
+  context.beginPath();
+  context.setStrokeStyle('#00ff00');
+  context.save();
+
+  context.scale(2, 2);
+  context.setStrokeStyle('#ff0000');
+  context.rect(0, 0, 100, 100);
+  context.stroke();
+  context.restore();
+
+  context.rect(0, 0, 50, 50);
+  context.stroke();
+};
+
+example.restore = function (context) {
+  [3, 2, 1].forEach(function (item) {
+    context.beginPath();
+    context.save();
+    context.scale(item, item);
+    context.rect(10, 10, 100, 100);
+    context.stroke();
+    context.restore();       
+  });
+
+};
+
+example.drawImage = function (context) {
+  context.drawImage('/image/wechat.png', 0, 0);
+};
+
+example.fillText = function (context) {
+  context.setStrokeStyle('#ff0000');
+
+  context.beginPath();
+  context.moveTo(0, 10);
+  context.lineTo(300, 10);
+  context.stroke();
+
+  // context.save();
+  // context.scale(1.5, 1.5);
+  // context.translate(20, 20);
+  context.setFontSize(10);
+  context.fillText('Hello World', 0, 30);
+  context.setFontSize(20);
+  context.fillText('Hello World', 100, 30);
+
+  // context.restore();
+
+  context.beginPath();
+  context.moveTo(0, 30);
+  context.lineTo(300, 30);
+  context.stroke();
+};
+
+example.fill = function (context) {
+  context.beginPath();
+  context.rect(20, 20, 150, 100);
+  context.setStrokeStyle('#00ff00');
+  context.fill();
+};
+
+example.stroke = function (context) {
+  context.beginPath();
+  context.moveTo(20, 20);
+  context.lineTo(20, 100);
+  context.lineTo(70, 100);
+  context.setStrokeStyle('#00ff00');
+  context.stroke();
+};
+
+example.clearRect = function (context) {
+  context.setFillStyle('#ff0000');
+  context.beginPath();
+  context.rect(0, 0, 300, 150);
+  context.fill();
+  context.clearRect(20, 20, 100, 50);
+};
+
+example.beginPath = function (context) {
+  context.beginPath();
+  context.setLineWidth(5);
+  context.setStrokeStyle('#ff0000');
+  context.moveTo(0, 75);
+  context.lineTo(250, 75);
+  context.stroke();
+
+  context.beginPath();
+  context.setStrokeStyle('#0000ff');
+  context.moveTo(50, 0);
+  context.lineTo(150, 130);
+  context.stroke();
+};
+
+example.closePath = function (context) {
+  context.beginPath();
+  context.moveTo(20, 20);
+  context.lineTo(20, 100);
+  context.lineTo(70, 100);
+  context.closePath();
+  context.stroke();
+};
+
+example.moveTo = function (context) {
+  context.beginPath();
+  context.moveTo(0, 0);
+  context.lineTo(300, 150);
+  context.stroke();
+};
+
+example.lineTo = function (context) {
+  context.beginPath();
+  context.moveTo(20,20);
+  context.lineTo(20,100);
+  context.lineTo(70,100);
+  context.stroke();
+};
+
+example.rect = function (context) {
+  context.beginPath();
+  context.rect(20, 20, 150, 100);
+  context.stroke();
+};
+
+example.arc = function (context) {
+  context.beginPath();
+  context.arc(75,75,50,0,Math.PI*2,true);
+  context.moveTo(110,75);
+  context.arc(75,75,35,0,Math.PI,false);
+  context.moveTo(65,65);
+  context.arc(60,65,5,0,Math.PI*2,true);
+  context.moveTo(95,65);
+  context.arc(90,65,5,0,Math.PI*2,true);
+  context.stroke();
+};
+
+example.quadraticCurveTo = function (context) {
+  context.beginPath();
+  context.moveTo(20, 20);
+  context.quadraticCurveTo(20, 100, 200, 20);
+  context.stroke();
+};
+
+example.bezierCurveTo = function (context) {
+  context.beginPath();
+  context.moveTo(20, 20);
+  context.bezierCurveTo(20, 100, 200, 100, 200, 20);
+  context.stroke();
+};
+
+example.setFillStyle = function (context) {
+  ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
+    context.setFillStyle(item);
+    context.beginPath();
+    context.rect(0 + 75*index, 0, 50, 50);
+    context.fill();
+  });
+};
+
+example.setStrokeStyle = function (context) {
+  ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
+    context.setStrokeStyle(item);
+    context.beginPath();
+    context.rect(0 + 75*index, 0, 50, 50);
+    context.stroke();
+  });
+};
+
+example.setShadow = function (context) {
+  context.beginPath();
+  context.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)');
+  context.rect(10, 10, 100, 100);
+  context.fill();
+};
+
+example.setFontSize = function (context) {
+  [10, 20, 30, 40].forEach(function (item, index) {
+    context.setFontSize(item);
+    context.fillText('Hello, world', 20, 20 + 40*index);
+  })
+};
+
+example.setLineCap = function (context) {
+  context.setLineWidth(10);
+  ['butt', 'round', 'square'].forEach(function (item, index) {
+    context.beginPath();
+    context.setLineCap(item);
+    context.moveTo(20, 20 + 20*index);
+    context.lineTo(100, 20 + 20*index);
+    context.stroke(); 
+  });
+};
+
+example.setLineJoin = function (context) {
+  context.setLineWidth(10);
+  ['bevel', 'round', 'miter'].forEach(function (item, index) {
+    context.beginPath();
+    
+    context.setLineJoin(item);
+    context.moveTo(20 + 80*index, 20);
+    context.lineTo(100 + 80*index, 50);
+    context.lineTo(20 + 80*index, 100);
+    context.stroke();
+  });
+};
+
+example.setLineWidth = function (context) {
+  [2, 4, 6, 8, 10].forEach(function (item, index) {
+    context.beginPath();
+    context.setLineWidth(item);
+    context.moveTo(20, 20 + 20*index);
+    context.lineTo(100, 20 + 20*index);
+    context.stroke();          
+  });
+};
+
+example.setMiterLimit = function (context) {
+  context.setLineWidth(4);
+
+  [2, 4, 6, 8, 10].forEach(function (item, index) {
+    context.beginPath();
+    context.setMiterLimit(item);
+    context.moveTo(20 + 80*index, 20);
+    context.lineTo(100 + 80*index, 50);
+    context.lineTo(20 + 80*index, 100);
+    context.stroke();          
+  });        
+};
+
+module.exports = example

page/API/canvas/example.wxml

+<view class="page">
+  <view class="page__hd">
+    <text class="page__title">{{method}}</text>
+    <text class="page__desc">{{introduction}}</text>
+  </view>
+  <view class="page__bd">
+    <view class="section section_gap">
+      <canvas style="width: 100%; height: 300px;" canvas-id="mycanvas"></canvas>
+    </view>
+  </view>
+</view>
\ No newline at end of file

page/API/common/footer.wxml

+<template name="footer">
+  <view class="page-footer">
+    微信接口功能
+  </view>
+</template>

page/API/common/header.wxml

+<template name="header">
+  <view class="page-header">
+    <text class="page-header-text">{{title}}</text>
+    <view class="page-header-line"></view>
+  </view>
+</template>

page/API/download-file/download-file.js

+Page({})

page/API/download-file/download-file.json

+{
+    "navigationBarTitleText": "下载文件"
+}

page/API/download-file/download-file.wxml

+<import src="../common/header.wxml" />
+<import src="../common/footer.wxml" />
+
+<view class="container">
+  <template is="header" data="{{title: 'downloadFile'}}"/>
+
+  <view class="page-body">
+    <view class="page-body-wording">
+      <text class="page-body-text">
+        搭建好自己的后台服务器后，可以将服务器上的图片视频等资源下载到手机上。
+      </text>
+    </view>
+  </view>
+
+  <template is="footer" />
+</view>

page/API/file/file.js

+Page({
+  data: {
+    tempFilePath: '',
+    savedFilePath: wx.getStorageSync('savedFilePath') || '',
+    dialog: {
+      hidden: true
+    }
+  },
+  chooseImage: function () {
+    var that = this
+    wx.chooseImage({
+      count: 1,
+      success: function (res) {
+        that.setData({
+          tempFilePath: res.tempFilePaths[0]
+        })
+      }
+    })
+  },
+  saveFile: function () {
+    if (this.data.tempFilePath.length > 0) {
+      var that = this
+      wx.saveFile({
+        tempFilePath: this.data.tempFilePath,
+        success: function (res) {
+          that.setData({
+            savedFilePath: res.savedFilePath
+          })
+          wx.setStorageSync('savedFilePath', res.savedFilePath)
+          that.setData({
+            dialog: {
+              title: '保存成功',
+              content: '下次进入应用时，此文件仍可用',
+              hidden: false
+            }
+          })
+        },
+        fail: function (res) {
+          that.setData({
+            dialog: {
+              title: '保存失败',
+              content: '应该是有 bug 吧',
+              hidden: false
+            }
+          })
+        }
+      })
+    }
+  },
+  clear: function () {
+    wx.setStorageSync('savedFilePath', '')
+    this.setData({
+      tempFilePath: '',
+      savedFilePath: ''
+    })
+  },
+  confirm: function () {
+    this.setData({
+      'dialog.hidden': true
+    })
+  }
+})

page/API/file/file.json

+{
+    "navigationBarTitleText": "文件"
+}

page/API/file/file.wxml

+<import src="../common/header.wxml" />
+<import src="../common/footer.wxml" />
+
+<view class="container">
+  <template is="header" data="{{title: 'saveFile'}}"/>
+
+  <view class="page-body">
+    <view class="page-body-wrapper">
+      <view class="page-body-info">
+        <text class="page-body-text-small">请选择图片</text>
+        <block wx:if="{{tempFilePath != ''}}">
+          <image src="{{tempFilePath}}" class="image"></image>
+        </block>
+        <block wx:if="{{tempFilePath === '' && savedFilePath != ''}}">
+          <image src="{{savedFilePath}}" class="image"></image>
+        </block>
+        <block wx:if="{{tempFilePath === '' && savedFilePath === ''}}">
+          <view class="image-plus" bindtap="chooseImage">
+            <view class="image-plus-horizontal"></view>
+            <view class="image-plus-vertical"></view>
+          </view>
+        </block>
+      </view>
+      <view class="page-body-buttons">
+        <button class="page-body-button" type="primary" bindtap="saveFile">保存文件</button>
+        <button class="page-body-button" bindtap="clear">删除文件</button>
+      </view>
+    </view>
+  </view>
+
+  <modal title="{{dialog.title}}" hidden="{{dialog.hidden}}" no-cancel bindconfirm="confirm">{{dialog.content}}</modal>
+
+  <template is="footer" />
+</view>

page/API/file/file.wxss

+.image {
+  width: 300rpx;
+  height: 300rpx;
+}
+.image-plus {
+  width: 150rpx;
+  height: 150rpx;
+  margin: 10rpx;
+  border: 1px solid #999;
+  position: relative;
+}
+.image-plus-horizontal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background-color: #d9d9d9;
+  width: 4rpx;
+  height: 80rpx;
+  transform: translate(-50%, -50%);
+}
+.image-plus-vertical {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background-color: #d9d9d9;
+  width: 80rpx;
+  height: 4rpx;
+  transform: translate(-50%, -50%);
+}
+.page-body-info {
+  height: 400rpx;
+  padding-bottom: 50rpx; 
+}

page/API/get-location/format-location.js

+function formatLocation(longitude, latitude) {
+  longitude = longitude.toFixed(2)
+  latitude = latitude.toFixed(2)
+
+  return {
+    longitude: longitude.toString().split('.'),
+    latitude: latitude.toString().split('.')
+  }
+}
+
+module.exports = formatLocation

page/API/get-location/get-location.js

+var formatLocation = require('./format-location.js')
+
+Page({
+  data: {
+    hasLocation: false,
+  },
+  getLocation: function () {
+    var that = this
+    wx.getLocation({
+      success: function (res) {
+        console.log(res)
+        that.setData({
+          hasLocation: true,
+          location: formatLocation(res.longitude, res.latitude)
+        })
+      }
+    })
+  },
+  clear: function () {
+    this.setData({
+      hasLocation: false
+    })
+  }
+})

page/API/get-location/get-location.json

+{
+    "navigationBarTitleText": "获取位置"
+}

page/API/get-location/get-location.wxml

+<import src="../common/header.wxml" />
+<import src="../common/footer.wxml" />
+
+<view class="container">
+  <template is="header" data="{{title: 'getLocation'}}"/>
+
+  <view class="page-body">
+    <view class="page-body-wrapper">
+      <view class="page-body-info">
+        <text class="page-body-text-small">当前位置经纬度</text>
+        <block wx:if="{{hasLocation === false}}">
+          <text class="page-body-text">未获取</text>
+        </block>
+        <block wx:if="{{hasLocation === true}}">
+          <view class="page-body-text-location">
+            <text>E{{location.longitude[0]}}°{{location.longitude[1]}}′</text>
+            <text>N{{location.latitude[0]}}°{{location.latitude[1]}}′</text>
+          </view>
+        </block>
+      </view>
+      <view class="page-body-buttons">
+        <button class="page-body-button" type="primary" bindtap="getLocation">获取位置</button>
+        <button class="page-body-button" bindtap="clear">清空</button>
+      </view>
+    </view>
+  </view>
+
+  <template is="footer" />
+</view>
+
+

page/API/get-location/get-location.wxss

+.page-body-info {
+  height: 250rpx;
+}
+.page-body-text-small {
+  font-size: 24rpx;
+  color: #000;
+  margin-bottom: 100rpx;
+}
+.page-body-text-location {
+  display: flex;
+  font-size: 50rpx;
+}
+.page-body-text-location text {
+  margin: 10rpx;
+}

page/API/get-network-type/get-network-type.js

+Page({
+  data: {
+    hasNetworkType: false
+  },
+  getNetworkType: function () {
+    var that = this
+    wx.getNetworkType({
+      success: function (res) {
+        console.log(res)
+        that.setData({
+          hasNetworkType: true,
+          networkType: res.subtype || res.networkType
+        })
+        that.update()
+      }
+    })
+  },
+  clear: function () {
+    this.setData({
+      hasNetworkType: false,
+      networkType: ''
+    })
+  }
+})

page/API/get-network-type/get-network-type.json

+{
+    "navigationBarTitleText": "获取手机网络状态"
+}

page/API/get-network-type/get-network-type.wxml

+<import src="../common/header.wxml" />
+<import src="../common/footer.wxml" />
+
+<view class="container">
+  <template is="header" data="{{title: 'getNetworkType'}}"/>
+
+  <view class="page-body">
+    <view class="page-body-wrapper">
+      <view class="page-body-info">
+        <view class="page-body-title">网络状态</view>
+        <block wx:if="{{hasNetworkType === false}}">
+          <text class="page-body-text">未获取</text>
+          <text class="page-body-text">点击绿色按钮可获取网络状态</text>
+        </block>
+        <block wx:if="{{hasNetworkType === true}}">
+          <text class="page-body-text-network-type">{{networkType}}</text>
+        </block>
+      </view>
+      <view class="page-body-buttons">
+        <button class="page-body-button" type="primary" bindtap="getNetworkType">获取手机网络状态</button>
+        <button class="page-body-button" bindtap="clear">清空</button>
+      </view>
+    </view>
+  </view>
+
+  <template is="footer" />
+</view>
+

page/API/get-network-type/get-network-type.wxss

+.page-body-info {
+  height: 200rpx;
+}
+.page-body-text-network-type {
+  font-size: 80rpx;
+  font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
+}

page/API/get-system-info/get-system-info.js

+Page({
+  data: {
+    systemInfo: {}
+  },
+  getSystemInfo: function () {
+    var that = this
+    wx.getSystemInfo({
+      success: function (res) {
+        that.setData({
+          systemInfo: res
+        })
+        that.update()
+      }
+    })
+  }
+})

page/API/get-system-info/get-system-info.json

+{
+    "navigationBarTitleText": "获取手机系统信息"
+}

page/API/get-system-info/get-system-info.wxml

+<import src="../common/header.wxml" />
+<import src="../common/footer.wxml" />
+
+<view class="container">
+  <template is="header" data="{{title: 'getSystemInfo'}}"/>
+
+  <view class="page-body">
+    <view class="page-body-wrapper">
+      <view class="page-body-form">
+        <view class="page-body-form-item">
+          <text class="page-body-form-key">手机型号</text>
+          <input class="page-body-form-value" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.model}}"></input>
+        </view>
+        <view class="page-body-form-item">
+          <text class="page-body-form-key">微信语言</text>
+          <input class="page-body-form-value" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.language}}"></input>
+        </view>
+        <view class="page-body-form-item">
+          <text class="page-body-form-key">微信版本</text>
+          <input class="page-body-form-value" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.version}}"></input>
+        </view>
+        <view class="page-body-form-item">
+          <text class="page-body-form-key">屏幕宽度</text>
+          <input class="page-body-form-value" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.windowWidth}}"></input>
+        </view>
+        <view class="page-body-form-item">
+          <text class="page-body-form-key">屏幕高度</text>
+          <input class="page-body-form-value" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.windowHeight}}"></input>
+        </view>
+        <view class="page-body-form-item">
+          <text class="page-body-form-key">DPI</text>
+          <input class="page-body-form-value" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.pixelRatio}}"></input>
+        </view>
+      </view>
+      <view class="page-body-buttons">
+        <button class="page-body-button" type="primary" bindtap="getSystemInfo">获取手机系统信息</button>
+      </view>
+    </view>
+  </view>
+
+  <template is="footer" />
+</view>
+
+

page/API/get-user-info/get-user-info.js

+var app = getApp()
+Page({
+  data: {
+    hasUserInfo: false
+  },
+  getUserInfo: function () {
+    var that = this
+
+    if (app.globalData.hasLogin === false) {
+      wx.login({
+        success: _getUserInfo
+      })
+    } else {
+      _getUserInfo()
+    }
+
+    function _getUserInfo() {
+      wx.getUserInfo({
+        success: function (res) {
+          that.setData({
+            hasUserInfo: true,
+            userInfo: res.userInfo
+          })
+          that.update()
+        }
+      })
+    }
+  },
+  clear: function () {
+    this.setData({
+      hasUserInfo: false,
+      userInfo: {}
+    })
+  }
+})

page/API/get-user-info/get-user-info.json

+{
+    "navigationBarTitleText": "获取用户信息"
+}

page/API/get-user-info/get-user-info.wxml

+<import src="../common/header.wxml" />
+<import src="../common/footer.wxml" />
+
+<view class="container">
+  <template is="header" data="{{title: 'getUserInfo'}}"/>
+
+  <view class="page-body">
+    <view class="page-body-wrapper">
+      <view class="page-body-info">
+        <view class="page-body-title">用户信息</view>
+        <block wx:if="{{hasUserInfo === false}}">
+          <text class="page-body-text">未获取</text>
+          <text class="page-body-text">点击绿色按钮可获取用户头像及昵称</text>
+        </block>
+        <block wx:if="{{hasUserInfo === true}}">
+          <wx-image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></wx-image>
+          <text class="userinfo-nickname">{{userInfo.nickName}}</text>
+        </block>
+      </view>
+      <view class="page-body-buttons">
+        <button class="page-body-button" type="primary" bindtap="getUserInfo">获取用户信息</button>
+        <button class="page-body-button" bindtap="clear">清空</button>
+      </view>
+    </view>
+  </view>
+
+  <template is="footer" />
+</view>

page/API/get-user-info/get-user-info.wxss

+.page-body-info {
+  height: 350rpx;
+}
+.userinfo-avatar {
+  border-radius: 128rpx;
+  width: 128rpx;
+  height: 128rpx;
+}
+.userinfo-nickname {
+  margin-top: 20rpx;
+  font-size: 38rpx;
+}

page/API/image/image.js

+var sourceType = [ ['camera'], ['album'], ['camera', 'album'] ]
+var sizeType = [ ['compressed'], ['original'], ['compressed', 'original'] ]
+
+Page({
+  data: {
+    sourceTypeIndex: 0,
+    sourceType: ['拍照', '相册', '拍照或相册'],
+
+    sizeTypeIndex: 0,
+    sizeType: ['压缩', '原图', '压缩或原图'],
+
+    countIndex: 0,
+    count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
+  },
+  sourceTypeChange: function (e) {
+    this.setData({
+      sourceTypeIndex: e.detail.value
+    })
+  },
+  sizeTypeChange: function (e) {
+    this.setData({
+      sizeTypeIndex: e.detail.value
+    })
+  },
+  countChange: function (e) {
+    this.setData({
+      countIndex: e.detail.value
+    })
+  },
+  chooseImage: function () {
+    var that = this
+    wx.chooseImage({
+      sourceType: sourceType[this.data.sourceTypeIndex],
+      sizeType: sizeType[this.data.sizeTypeIndex],
+      count: this.data.count[this.data.countIndex],
+      success: function (res) {
+        console.log(res)
+        that.setData({
+          imageList: res.tempFilePaths
+        })
+      }
+    })
+  },
+  previewImage: function (e) {
+    var current = e.target.dataset.src
+
+    wx.previewImage({
+      current: current,
+      urls: this.data.imageList
+    })
+  }
+})

page/API/image/image.json

+{
+    "navigationBarTitleText": "图片"
+}

page/API/image/image.wxml

+<import src="../common/header.wxml" />
+<import src="../common/footer.wxml" />
+
+<view class="container">
+  <template is="header" data="{{title: 'choose/previewImage'}}"/>
+
+  <view class="page-body">
+    <view class="page-body-wrapper">
+      <form>
+        <view class="page-body-form">
+          <picker range="{{sourceType}}" bindchange="sourceTypeChange" value="{{sourceTypeIndex}}">
+            <view class="page-body-form-picker">
+              <view class="page-body-form-picker-key">图片来源</view>
+              <view class="page-body-form-picker-value">{{sourceType[sourceTypeIndex]}}</view>
+            </view>
+          </picker>
+          <picker range="{{sizeType}}" bindchange="sizeTypeChange" value="{{sizeTypeIndex}}">
+            <view class="page-body-form-picker">
+              <view class="page-body-form-picker-key">图片质量</view>
+              <view class="page-body-form-picker-value">{{sizeType[sizeTypeIndex]}}</view>
+            </view>
+          </picker>
+          <picker range="{{count}}" bindchange="countChange" value="{{countIndex}}">
+            <view class="page-body-form-picker" style="border-bottom: none;">
+              <view class="page-body-form-picker-key">数量限制</view>
+              <view class="page-body-form-picker-value">{{count[countIndex]}}</view>
+            </view>
+          </picker>
+        </view>
+        <view class="images-wrapper">
+          <text class="images-text">请选择图片</text>
+          <view class="images-list">
+            <block wx:for="{{imageList}}" wx:for-item="image">
+              <image src="{{image}}" class="images-image" data-src="{{image}}" bindtap="previewImage"></image>
+            </block>
+            <view class="images-image image-plus" bindtap="chooseImage">
+              <view class="image-plus-horizontal"></view>
+              <view class="image-plus-vertical"></view>
+            </view>
+          </view>
+        </view>
+      </form>
+    </view>
+  </view>
+
+  <template is="footer" />
+</view>

page/API/image/image.wxss

+.images-wrapper {
+  padding: 20rpx;
+  background-color: #fff;
+  margin-top: 20rpx;
+}
+.images-wrapper-text {
+  font-size: 28rpx;
+}
+.images-list {
+  display: flex;
+  margin-top: 20rpx;
+  flex-wrap: wrap;
+}
+.images-image {
+  width: 150rpx;
+  height: 150rpx;
+  margin: 10rpx;
+}
+.image-plus {
+  border: 1px solid #999;
+  position: relative;
+}
+.image-plus-horizontal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background-color: #d9d9d9;
+  width: 4rpx;
+  height: 80rpx;
+  transform: translate(-50%, -50%);
+}
+.image-plus-vertical {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background-color: #d9d9d9;
+  width: 80rpx;
+  height: 4rpx;
+  transform: translate(-50%, -50%);
+}

page/API/index/index.js

+Page({
+  data: {
+    menuList: [{
+      name: '开放接口',
+      APIList: [{
+        zhName: '微信登录',
+        enName: 'login',
+        url: '../login/login'
+      }, {
+        zhName: '获取用户信息',
+        enName: 'getUserInfo',
+        url: '../get-user-info/get-user-info'
+      }, {
+        zhName: '发起支付',
+        enName: 'requestPayment',
+        url: '../request-payment/request-payment'
+      }],
+      opened: false
+    }, {
+      name: '界面',
+      opened: false,
+      APIList: [{
+        zhName: '设置界面标题',
+        enName: 'setNavigationBarTitle',
+        url: '../set-navigation-bar-title/set-navigation-bar-title'
+      }, {
+        zhName: '标题栏加载动画',
+        enName: 'navigationBarLoading',
+        url: '../navigation-bar-loading/navigation-bar-loading'
+      }, {
+        zhName: '页面跳转',
+        enName: 'navigateTo, navigateBack, redirectTo',
+        url: '../navigator/navigator'
+      }, {
+        zhName: '下拉刷新',
+        enName: 'pullDownRefresh',
+        url: '../pull-down-refresh/pull-down-refresh'
+      }, {
+        zhName: '创建动画',
+        enName: 'createAnimation',
+        url: '../animation/animation'
+      }, {
+        zhName: '创建绘画',
+        enName: 'createContext',
+        url: '../canvas/canvas'
+      }]
+    }, {
+      name: '设备',
+      opened: false,
+      APIList: [{
+        zhName: '获取手机网络状态',
+        enName: 'getNetworkType',
+        url: '../get-network-type/get-network-type'
+      }, {
+        zhName: '获取手机系统信息',
+        enName: 'getSystemInfo',
+        url: '../get-system-info/get-system-info'
+      }, {
+        zhName: '监听重力感应数据',
+        enName: 'onAccelerometerChange',
+        url: '../on-accelerometer-change/on-accelerometer-change'
+      }, {
+        zhName: '监听罗盘数据',
+        enName: 'onCompassChange',
+        url: '../on-compass-change/on-compass-change'
+      }]
+    }, {
+      name: '网络',
+      opened: false,
+      APIList: [{
+        zhName: '发起一个请求',
+        enName: 'request',
+        url: '../request/request'
+      }, {
+        zhName: 'WebSocket',
+        enName: 'WebSocket',
+        url: '../web-socket/web-socket'
+      }, {
+        zhName: '上传文件',
+        enName: 'Upload File',
+        url: '../upload-file/upload-file'
+      }, {
+        zhName: '下载文件',
+        enName: 'Download File',
+        url: '../download-file/download-file'
+      }]
+    }, {
+      name: '媒体',
+      opened: false,
+      APIList: [{
+        zhName: '图片',
+        enName: 'chooseImage/previewImage',
+        url: '../image/image'
+      }, {
+        zhName: '录音',
+        enName: 'start/stopRecord, play/pause/stopVoice',
+        url: '../voice/voice'
+      }, {
+        zhName: '背景音频',
+        enName: 'play/pause/stopAudio',
+        url: '../background-audio/background-audio'
+      }, {
+        zhName: '文件',
+        enName: 'saveFile',
+        url: '../file/file'
+      }, {
+        zhName: '视频',
+        enName: 'video',
+        url: '../video/video'
+      }]
+    }, {
+      name: '位置',
+      opened: false,
+      APIList: [{
+        zhName: '获取当前位置',
+        enName: 'getLocation',
+        url: '../get-location/get-location'
+      }, {
+        zhName: '使用原生地图查看位置',
+        enName: 'openLocation',
+        url: '../open-location/open-location'
+      }]
+    }, {
+      name: '数据',
+      opened: false,
+      url: '../storage/storage'
+    }]
+  },
+  tapMenuItem: function (e) {
+    var menuItem = this.data.menuList[parseInt(e.currentTarget.id)] 
+    if (menuItem.url) {
+      wx.navigateTo({ url: menuItem.url })
+    } else {
+      var changeData = {}
+      var opened = menuItem.opened
+      var index = parseInt(e.currentTarget.id)
+
+      // 展开操作
+      if (opened === false) {
+        var openedIndex = -1
+        this.data.menuList.forEach(function (menu, i) {
+          if (menu.opened === true) {
+            openedIndex = i
+          }
+        })
+        if (openedIndex > -1) {
+          changeData['menuList[' + openedIndex + '].opened'] = false
+        }
+      }
+
+      changeData['menuList[' + index + '].opened'] = !opened
+      this.setData(changeData)
+    }
+  }
+})

page/API/index/index.wxml

+<view class="container">
+  <view class="header">
+      <view class="title">小程序接口</view>
+      <view class="desc">这里就当前已支持的接口能力进行演示</view>
+  </view>
+
+  <view class="menu-list">
+    <block wx:for="{{menuList}}" wx:for-item="menuItem">
+      <view class="menu-item">
+        <view class="menu-item-main" id="{{index}}" bindtap="tapMenuItem">
+          <text class="menu-item-name">{{menuItem.name}}</text>
+          <image
+            class="menu-item-arrow {{menuItem.opened ? 'open' : 'close'}} {{menuItem.url ? 'url' : ''}}"
+            src="/image/arrowright.png">
+          </image>
+        </view>
+        <view class="menu-item-api-list {{menuItem.opened ? 'open' : 'close'}}">
+          <block wx:for="{{menuItem.APIList}}" wx:for-item="APIItem">
+            <navigator url="{{APIItem.url}}">
+              <view class="menu-item-api-item" style="{{index === 0 ? 'border-top:none;' : ''}}">
+                <view class="menu-item-api-item-text">
+                  <text class="menu-item-api-item-text-zhname">{{APIItem.zhName}}</text>
+                  <text class="menu-item-api-item-text-enname">{{APIItem.enName}}</text>
+                </view>
+                <image class="menu-item-api-item-arrow" src="/image/arrowright.png"></image>
+              </view>
+            </navigator>
+          </block>
+        </view>
+      </view>
+    </block>
+  </view>
+</view>

page/API/index/index.wxss

+.header {
+  padding: 80rpx;
+  line-height: 1;
+}
+.title {
+  font-size: 52rpx;
+}
+.desc {
+  margin-top: 10rpx;
+  color: #888888;
+  font-size: 28rpx;
+}
+.menu-list {
+  display: flex;
+  flex-direction: column;
+  background-color: #fbf9fe;
+  margin-top: 10rpx;
+}
+.menu-item {
+  color: #000000;
+  display: flex;
+  background-color: #fff;
+  margin: 10rpx 30rpx;
+  flex-direction: column;
+}
+.menu-item-main {
+  display: flex;
+  padding: 40rpx;
+  border-radius: 10rpx;
+  align-items: center;
+  font-size: 32rpx;
+  justify-content: space-between;
+}
+.menu-item-arrow {
+  width: 32rpx;
+  height: 32rpx;
+  transition: 400ms;
+}
+.menu-item-arrow.open {
+  transform: rotate(-90deg);
+}
+.menu-item-arrow.close {
+  transform: rotate(90deg);
+}
+.menu-item-arrow.url {
+  transform: rotate(0deg);
+}
+
+.menu-item-api-list {
+  transition: 200ms;
+  height: auto;
+  border-top: 1px solid #d8d8d8;
+}
+.menu-item-api-list.close {
+  display: none;
+  height: 0;
+}
+.menu-item-api-item {
+  display: flex;
+  justify-content: space-between;
+  height: 80rpx;
+  padding: 20rpx 20rpx 20rpx 0;
+  margin-left: 40rpx;
+  align-items: center;
+  border-top: 1px solid #f0f0f0;
+}
+.menu-item-api-item-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+.menu-item-api-item-text-zhname {
+  font-size: 30rpx;
+}
+.menu-item-api-item-text-enname {
+  font-size: 26rpx;
+  color: #6b6b6b;
+}
+.menu-item-api-item-arrow {
+  width: 32rpx;
+  height: 32rpx;
+}

page/API/login/login.js

+var app = getApp()
+Page({
+  onLoad: function () {
+    this.setData({
+      hasLogin: app.globalData.hasLogin
+    })
+  },
+  data: {},
+  login: function () {
+    var that = this
+    wx.login({
+      success: function (res) {
+        app.globalData.hasLogin = true
+        that.setData({
+          hasLogin: true
+        })
+        that.update()
+      }
+    })
+  }
+})

page/API/login/login.json

+{
+    "navigationBarTitleText": "微信登录"
+}

page/API/login/login.wxml

+<import src="../common/header.wxml" />
+<import src="../common/footer.wxml" />
+
+<view class="container">
+  <template is="header" data="{{title: 'Login'}}"/>
+
+  <view class="page-body">
+    <view class="page-body-wrapper">
+      <block wx:if="{{hasLogin === true}}">
+        <text class="page-body-title">已登录</text>
+        <text class="page-body-text">每个微信号中仅需登录 1 次，后续每次进入页面即可根据微信 id 自动拉取用户信息</text>
+      </block>
+      <block wx:if="{{hasLogin === false}}">
+        <text class="page-body-text">每个微信号中仅需登录一次</text>
+        <button class="page-body-button" type="primary" bindtap="login">微信登录</button>
+      </block>
+    </view>
+  </view>
+
+  <template is="footer" />
+</view>

page/API/login/login.wxss

+.page-body-wrapper {
+  margin-top: 200rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0 50rpx;
+  box-sizing: border-box;
+}
+.page-body-title {
+  font-size: 60rpx;
+  /*TODO 使用 rpx */
+  line-height: 100px;
+}
+.page-body-text {
+  color: #bbb;
+  font-size: 28rpx;
+  /*TODO 使用 rpx */
+  line-height: 20px;
+  margin: 0 0 100rpx 0;
+  text-align: center;
+}
+.page-body-button {
+  width: 100%;
+}

page/API/navigation-bar-loading/navigation-bar-loading.js

+Page({
+  showNavigationBarLoading: function () {
+    wx.showNavigationBarLoading()
+  },
+  hideNavigationBarLoading: function () {
+    wx.hideNavigationBarLoading()
+  }
+})

page/API/navigation-bar-loading/navigation-bar-loading.json

+{
+    "navigationBarTitleText": "标题栏加载动画"
+}

page/API/navigation-bar-loading/navigation-bar-loading.wxml

+<import src="../common/header.wxml" />
+<import src="../common/footer.wxml" />
+
+<view class="container">
+  <template is="header" data="{{title: 'navigationBarLoading'}}"/>
+
+  <view class="page-body">
+    <view class="page-body-wrapper">
+      <view class="page-body-buttons">
+        <button class="page-body-button" type="primary" bindtap="showNavigationBarLoading">显示加载动画</button>
+        <button class="page-body-button" bindtap="hideNavigationBarLoading">隐藏加载动画</button>
+      </view>
+    </view>
+  </view>
+
+  <template is="footer" />
+</view>

page/API/navigator/navigator.js

+Page({
+  navigateTo: function () {
+    wx.navigateTo({ url: './navigator' })
+  },
+  navigateBack: function () {
+    wx.navigateBack()
+  },
+  redirectTo: function () {
+    wx.redirectTo({ url: './navigator' })
+  }
+})

page/API/navigator/navigator.json

+{
+    "navigationBarTitleText": "页面跳转"
+}

page/API/navigator/navigator.wxml

+<import src="../common/header.wxml" />
+<import src="../common/footer.wxml" />
+
+<view class="container">
+  <template is="header" data="{{title: 'navigateTo/Back, redirectTo'}}"/>
+
+  <view class="page-body">
+    <view class="page-body-wrapper">
+      <view class="page-body-buttons">
+        <button class="page-body-button" bindtap="navigateTo">跳转新页面</button>
+        <button class="page-body-button" bindtap="navigateBack">返回上一页</button>
+        <button class="page-body-button" bindtap="redirectTo">在当前页面打开</button>
+      </view>
+    </view>
+  </view>
+
+  <template is="footer" />
+</view>

page/API/on-accelerometer-change/on-accelerometer-change.js

+Page({
+  onReady: function () {
+    this.drawBigBall()
+    var that = this
+
+    this.position =  {
+      x: 151,
+      y: 151,
+      vx: 0,
+      vy: 0,
+      ax: 0,
+      ay: 0
+    }
+    wx.onAccelerometerChange(function (res) {
+      that.setData({
+        x: res.x.toFixed(2),
+        y: res.y.toFixed(2),
+        z: res.z.toFixed(2)
+      })
+      that.position.ax = Math.sin(res.x * Math.PI / 2)
+      that.position.ay = -Math.sin(res.y * Math.PI / 2)
+      //that.drawSmallBall()
+    })
+
+    this.interval = setInterval(function () {
+      that.drawSmallBall()
+    }, 17)
+
+  },
+  drawBigBall: function () {
+    var context = wx.createContext()
+    context.beginPath(0)
+    context.arc(151, 151, 140, 0, Math.PI * 2)
+    context.setFillStyle('#ffffff')
+    context.setStrokeStyle('#aaaaaa')
+    context.fill()
+    context.stroke()
+    wx.drawCanvas({
+      canvasId: 'big-ball',
+      actions: context.getActions()
+    })
+  },
+  drawSmallBall: function () {
+    var p = this.position
+    var strokeStyle = 'rgba(1,1,1,0)'
+
+    p.x = p.x + p.vx
+    p.y = p.y + p.vy
+    p.vx = p.vx + p.ax
+    p.vy = p.vy + p.ay
+
+    if (Math.sqrt(Math.pow(Math.abs(p.x) - 151, 2) + Math.pow(Math.abs(p.y) - 151, 2)) >= 115) {
+      if (p.x > 151 && p.vx > 0) {
+        p.vx = 0
+      }
+      if (p.x < 151 && p.vx < 0) {
+        p.vx = 0
+      }
+      if (p.y > 151 && p.vy > 0) {
+        p.vy = 0
+      }
+      if (p.y < 151 && p.vy < 0) {
+        p.vy = 0
+      }
+      strokeStyle = '#ff0000'
+    }
+
+    var context = wx.createContext()
+    context.beginPath(0)
+    context.arc(p.x, p.y, 15, 0, Math.PI * 2)
+    context.setFillStyle('#1aad19')
+    context.setStrokeStyle(strokeStyle)
+    context.fill()
+    context.stroke()
+    wx.drawCanvas({
+      canvasId: 'small-ball',
+      actions: context.getActions()
+    })
+  },
+  data: {
+    x: 0,
+    y: 0,
+    z: 0
+  },
+  onUnload: function () {
+    clearInterval(this.interval)
+  }
+})

page/API/on-accelerometer-change/on-accelerometer-change.json

+{
+    "navigationBarTitleText": "监听重力感应数据"
+}

page/API/on-accelerometer-change/on-accelerometer-change.wxml

+<import src="../common/header.wxml" />
+<import src="../common/footer.wxml" />
+
+<view class="container">
+  <template is="header" data="{{title: 'onAccelerometerChange'}}"/>
+
+  <view class="page-body">
+    <view class="page-body-wrapper">
+      <text class="page-body-text">倾斜手机即可移动下方小球</text>
+      <view class="page-body-canvas">
+        <canvas class="page-body-ball" show="{{true}}" canvas-id="big-ball"></canvas>
+        <canvas class="page-body-ball" show="{{true}}" canvas-id="small-ball"></canvas>
+      </view>
+      <view class="page-body-xyz">
+        <text class="page-body-title">X: {{x}}</text>
+        <text class="page-body-title">Y: {{y}}</text>
+        <text class="page-body-title">Z: {{z}}</text>
+      </view>
+    </view>
+  </view>
+
+  <template is="footer" />
+</view>
+

page/API/on-accelerometer-change/on-accelerometer-change.wxss

+.page-body-xyz {
+  display: flex;
+  justify-content: space-around;
+  width: 700rpx;
+  margin-top: 50rpx;
+  box-sizing: border-box;
+}
+.page-body-canvas {
+  width: 302px;
+  height: 302px;
+  position: relative;
+}
+.page-body-ball {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 302px;
+  height: 302px;
+}
+.page-body-title {
+  font-size: 50rpx;
+  width: 250rpx;
+}

page/API/on-compass-change/on-compass-change.js

+Page({
+  data: {
+    direction: 0
+  },
+  onReady: function () {
+    var that = this
+    wx.onCompassChange(function (res) {
+      that.setData({
+        direction: parseInt(res.direction)
+      })
+    })
+  }
+})

page/API/on-compass-change/on-compass-change.json

+{
+    "navigationBarTitleText": "监听罗盘数据"
+}

page/API/on-compass-change/on-compass-change.wxml

+<import src="../common/header.wxml" />
+<import src="../common/footer.wxml" />
+
+<view class="container">
+  <template is="header" data="{{title: 'onCompassChange'}}"/>
+
+  <view class="page-body">
+    <view class="page-body-wrapper">
+      <text class="page-body-text">旋转手机即可获取方位信息</text>
+      <view class="direction">
+        <text class="direction-value">{{direction}}</text>
+        <text class="direction-degree">o</text>
+      </view>
+    </view>
+  </view>
+
+  <template is="footer" />
+</view>
+
+

page/API/on-compass-change/on-compass-change.wxss

+.direction {
+  margin-top: 100rpx;
+  display: flex;
+}
+.direction-value {
+  font-size: 200rpx;
+}
+.direction-degree {
+  font-size: 40rpx;
+}

page/API/open-location/open-location.js

+Page({
+  openLocation: function (e) {
+    console.log(e)
+    var value = e.detail.value
+    console.log(value)
+    wx.openLocation({
+      longitude: Number(value.longitude),
+      latitude: Number(value.latitude),
+      name: value.name,
+      address: value.address
+    })
+  }
+})

page/API/open-location/open-location.json

+{
+    "navigationBarTitleText": "查看位置"
+}

page/API/open-location/open-location.wxml

+<import src="../common/header.wxml" />
+<import src="../common/footer.wxml" />
+
+<view class="container">
+  <template is="header" data="{{title: 'openLocation'}}"/>
+
+  <view class="page-body">
+    <view class="page-body-wrapper">
+      <form bindsubmit="openLocation">
+        <view class="page-body-form">
+          <view class="page-body-form-item">
+            <text class="page-body-form-key">经度</text>
+            <input class="page-body-form-value" type="text" disabled="{{true}}"  value="113.324520" name="longitude"></input>
+          </view>
+          <view class="page-body-form-item">
+            <text class="page-body-form-key">纬度</text>
+            <input class="page-body-form-value" type="text" disabled="{{true}}"  value="23.099994" name="latitude"></input>
+          </view>
+          <view class="page-body-form-item">
+            <text class="page-body-form-key">位置名称</text>
+            <input class="page-body-form-value" type="text" disabled="{{true}}"  value="T.I.T 创意园" name="name"></input>
+          </view>
+          <view class="page-body-form-item" style="border-bottom: none;">
+            <text class="page-body-form-key">详细位置</text>
+            <input class="page-body-form-value" type="text" disabled="{{true}}"  value="广州市海珠区新港中路397号" name="address"></input>
+          </view>
+        </view>
+        <view class="page-body-buttons">
+          <button class="page-body-button" type="primary" formType="submit">查看位置</button>
+        </view>
+      </form>
+    </view>
+  </view>
+
+  <template is="footer" />
+</view>

page/API/pull-down-refresh/pull-down-refresh.js

+Page({
+  onPullDownRefresh: function () {
+    console.log('onPullDownRefresh', new Date())
+  },
+  stopPullDownRefresh: function () {
+    wx.stopPullDownRefresh({
+      complete: function (res) {
+        console.log(res, new Date())
+      }
+    })
+  }
+})

page/API/pull-down-refresh/pull-down-refresh.json

+{
+    "navigationBarTitleText": "下拉刷新",
+    "enablePullDownRefresh": true
+}

page/API/pull-down-refresh/pull-down-refresh.wxml

+<import src="../common/header.wxml" />
+<import src="../common/footer.wxml" />
+
+<view class="container">
+  <template is="header" data="{{title: 'on/stopPullDownRefresh'}}"/>
+
+  <view class="page-body">
+    <view class="page-body-wrapper">
+      <view class="page-body-info">
+        <text class="page-body-text">下滑页面即可刷新</text>
+      </view>
+      <view class="page-body-buttons">
+        <button bindtap="stopPullDownRefresh">停止刷新</button>
+      </view>
+    </view>
+  </view>
+
+  <template is="footer" />
+</view>

page/API/pull-down-refresh/pull-down-refresh.wxss

+.page-body-info {
+  background-color: transparent;
+}
+.page-body-buttons button {
+  color: #21c932;
+  margin: 0 100rpx;
+}
+.page-body-buttons button:after {
+  border-color: #21c932;
+}

page/API/request-payment/request-payment.js

+Page({
+})

page/API/request-payment/request-payment.json

+{
+    "navigationBarTitleText": "发起支付"
+}

page/API/request-payment/request-payment.wxml

+<import src="../common/header.wxml" />
+<import src="../common/footer.wxml" />
+
+<view class="container">
+  <template is="header" data="{{title: 'requestPayment'}}"/>
+
+  <view class="page-body">
+    <view class="page-body-wording">
+      <text class="page-body-text">
+        自主接入微信支付后，可以让用户在页面上快捷完成下单购买。
+      </text>
+    </view>
+  </view>
+
+  <template is="footer" />
+</view>
+

page/API/request/request.js

+Page({})