Version 20170111

app.js

+const openIdUrl = require('./config').openIdUrl
+
 App({
   onLaunch: function () {
     console.log('App Launch')
@@ -9,6 +11,39 @@ App({
     console.log('App Hide')
   },
   globalData: {
-    hasLogin: false
+    hasLogin: false,
+    openid: null
+  },
+  // lazy loading openid
+  getUserOpenId: function(callback) {
+    var self = this
+
+    if (self.globalData.openid) {
+      callback(null, self.globalData.openid)
+    } else {
+      wx.login({
+        success: function(data) {
+          wx.request({
+            url: openIdUrl,
+            data: {
+              code: data.code
+            },
+            success: function(res) {
+              console.log('拉取openid成功', res)
+              self.globalData.openid = res.data.openid
+              callback(null, self.globalData.openid)
+            },
+            fail: function(res) {
+              console.log('拉取用户openid失败，将无法正常使用开放接口等服务', res)
+              callback(res)
+            }
+          })
+        },
+        fail: function(err) {
+          console.log('wx.login 接口调用失败，将无法正常使用开放接口等服务', err)
+          callback(err)
+        }
+      })
+    }
   }
 })

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"
+
+    "page/component/pages/view/view",
+    "page/component/pages/scroll-view/scroll-view",
+    "page/component/pages/swiper/swiper",
+
+    "page/component/pages/text/text",
+    "page/component/pages/icon/icon",
+    "page/component/pages/progress/progress",
+
+    "page/component/pages/button/button",
+    "page/component/pages/checkbox/checkbox",
+    "page/component/pages/form/form",
+    "page/component/pages/input/input",
+    "page/component/pages/label/label",
+    "page/component/pages/picker/picker",
+    "page/component/pages/radio/radio",
+    "page/component/pages/slider/slider",
+    "page/component/pages/switch/switch",
+    "page/component/pages/textarea/textarea",
+
+    "page/component/pages/navigator/navigator",
+    "page/component/pages/navigator/navigate",
+    "page/component/pages/navigator/redirect",
+
+    "page/component/pages/image/image",
+    "page/component/pages/audio/audio",
+    "page/component/pages/video/video",
+
+    "page/component/pages/map/map",
+
+    "page/component/pages/canvas/canvas",
+
+
+
+    "page/API/index",
+
+    "page/API/pages/login/login",
+    "page/API/pages/get-user-info/get-user-info",
+    "page/API/pages/request-payment/request-payment",
+    "page/API/pages/share/share",
+    "page/API/pages/custom-message/custom-message",
+    "page/API/pages/template-message/template-message",
+
+    "page/API/pages/set-navigation-bar-title/set-navigation-bar-title",
+    "page/API/pages/navigation-bar-loading/navigation-bar-loading",
+    "page/API/pages/navigator/navigator",
+    "page/API/pages/pull-down-refresh/pull-down-refresh",
+    "page/API/pages/animation/animation",
+
+    "page/API/pages/action-sheet/action-sheet",
+    "page/API/pages/modal/modal",
+    "page/API/pages/toast/toast",
+
+    "page/API/pages/get-network-type/get-network-type",
+    "page/API/pages/get-system-info/get-system-info",
+    "page/API/pages/on-compass-change/on-compass-change",
+    "page/API/pages/make-phone-call/make-phone-call",
+    "page/API/pages/scan-code/scan-code",
+
+
+    "page/API/pages/request/request",
+    "page/API/pages/web-socket/web-socket",
+    "page/API/pages/upload-file/upload-file",
+    "page/API/pages/download-file/download-file",
+
+
+    "page/API/pages/image/image",
+    "page/API/pages/voice/voice",
+    "page/API/pages/file/file",
+    "page/API/pages/on-accelerometer-change/on-accelerometer-change",
+    "page/API/pages/canvas/canvas",
+    "page/API/pages/background-audio/background-audio",
+    "page/API/pages/video/video",
+
+    "page/API/pages/get-location/get-location",
+    "page/API/pages/open-location/open-location",
+    "page/API/pages/choose-location/choose-location",
+
+    "page/API/pages/storage/storage"
   ],
   "window": {
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "演示",
-    "navigationBarBackgroundColor": "#fbf9fe",
-    "backgroundColor": "#fbf9fe"
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
   },
   "tabBar": {
-    "color": "#dddddd",
+    "color": "#7A7E83",
     "selectedColor": "#3cc51f",
     "borderStyle": "black",
     "backgroundColor": "#ffffff",
@@ -82,7 +98,7 @@
       "selectedIconPath": "image/icon_component_HL.png",
       "text": "组件"
     }, {
-      "pagePath": "page/API/index/index",
+      "pagePath": "page/API/index",
       "iconPath": "image/icon_API.png",
       "selectedIconPath": "image/icon_API_HL.png",
       "text": "接口"
@@ -94,5 +110,5 @@
     "uploadFile": 10000,
     "downloadFile": 10000
   },
-  "debug": true
+  "debug": false
 }

app.wxss

+/* reset */
 page {
-  background-color: #fbf9fe;
+  background-color: #F8F8F8;
   height: 100%;
+  font-size: 32rpx;
+  line-height: 1.6;
+}
+checkbox, radio{
+  margin-right: 10rpx;
+}
+button{
+  margin-top: 20rpx;
+  margin-bottom: 20rpx;
+}
+form{
+  width: 100%;
 }
+
+/* lib */
+.strong{
+  font-weight: bold;
+}
+.tc{
+  text-align: center;
+}
+
+/* page */
 .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;
+  font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
 }
-.page-header-text {
-  padding: 20rpx 40rpx;
+.page-head{
+  padding: 60rpx 50rpx 80rpx;
+  text-align: center;
 }
-.page-header-line {
+.page-head-title{
+  display: inline-block;
+  padding: 0 40rpx 20rpx 40rpx;
+  font-size: 32rpx;
+  color: #BEBEBE;
+}
+.page-head-line{
+  margin: 0 auto;
   width: 150rpx;
-  height: 1px;
-  border-bottom: 1px solid #ccc; 
+  height: 2rpx;
+  background-color: #D8D8D8;
+}
+.page-head-desc{
+  padding-top: 20rpx;
+  color: #9B9B9B;
+  font-size: 32rpx;
 }
 
 .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;
@@ -52,7 +75,6 @@ page {
   flex-direction: column;
   align-items: center;
   background-color: #fff;
-  margin-bottom: 50rpx;
   width: 100%;
   padding: 50rpx 0 150rpx 0;
 }
@@ -70,161 +92,135 @@ page {
   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 {
+.page-foot{
+  margin: 100rpx 0 30rpx 0;
   text-align: center;
   color: #1aad19;
-  font-size: 24rpx;
-  margin: 20rpx 0;
-}
-
-.green{
-    color: #09BB07;
-}
-.red{
-    color: #F76260;
-}
-.blue{
-    color: #10AEFF;
+  font-size: 0;
 }
-.yellow{
-    color: #FFBE00;
-}
-.gray{
-    color: #C9C9C9;
+.icon-foot{
+  width: 152rpx;
+  height: 23rpx;
 }
 
-.strong{
-    font-weight: bold;
+.page-section{
+  width: 100%;
+  margin-bottom: 60rpx;
 }
-
-.bc_green{
-    background-color: #09BB07;
+.page-section_center{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
-.bc_red{
-    background-color: #F76260;
+.page-section:last-child{
+  margin-bottom: 0;
 }
-.bc_blue{
-    background-color: #10AEFF;
+.page-section-gap{
+  box-sizing: border-box;
+  padding: 0 30rpx;
 }
-.bc_yellow{
-    background-color: #FFBE00;
+.page-section-spacing{
+  box-sizing: border-box;
+  padding: 0 80rpx;
 }
-.bc_gray{
-    background-color: #C9C9C9;
+.page-section-title{
+  font-size: 28rpx;
+  color: #999999;
+  margin-bottom: 10rpx;
+  padding-left: 30rpx;
+  padding-right: 30rpx;
 }
-
-.tc{
-    text-align: center;
+.page-section-gap .page-section-title{
+  padding-left: 0;
+  padding-right: 0;
 }
+.page-section-ctn{
 
-.page input{
-    padding: 20rpx 30rpx;
-    background-color: #fff;
-}
-checkbox, radio{
-    margin-right: 10rpx;
 }
 
+/* widget */
 .btn-area{
-    padding: 0 30px;
-}
-.btn-area button{
-    margin-top: 20rpx;
-    margin-bottom: 20rpx;
+  margin-top: 60rpx;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 30rpx;
 }
 
-.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;
+.image-plus {
+  width: 150rpx;
+  height: 150rpx;
+  border: 2rpx solid #D9D9D9;
+  position: relative;
+}
+.image-plus-nb{
+  border: 0;
+}
+.image-plus-text{
+  color: #888888;
+  font-size: 28rpx;
+}
+.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%);
 }
 
-.section{
-    margin-bottom: 80rpx;
+.demo-text-1{
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  background-color: #1AAD19;
+  color: #FFFFFF;
+  font-size: 36rpx;
 }
-.section_gap{
-    padding: 0 30rpx;
+.demo-text-1:before{
+  content: 'A';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
-.section__title{
-    margin-bottom: 16rpx;
-    padding-left: 30rpx;
-    padding-right: 30rpx;
+.demo-text-2{
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  background-color: #2782D7;
+  color: #FFFFFF;
+  font-size: 36rpx;
 }
-.section_gap .section__title{
-    padding-left: 0;
-    padding-right: 0;
+.demo-text-2:before{
+  content: 'B';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
-.section__ctn{
-
+.demo-text-3{
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F1F1;
+  color: #353535;
+  font-size: 36rpx;
 }
+.demo-text-3:before{
+  content: 'C';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
\ No newline at end of file

config.js

+/**
+ * 小程序配置文件
+ */
+
+// 此处主机域名是腾讯云解决方案分配的域名
+// 小程序后台服务解决方案：https://www.qcloud.com/solution/la
+
+var host = "14592619.qcloud.la"
+
+var config = {
+
+    // 下面的地址配合云端 Server 工作
+    host,
+
+    // 登录地址，用于建立会话
+    loginUrl: `https://${host}/login`,
+
+    // 测试的请求地址，用于测试会话
+    requestUrl: `https://${host}/testRequest`,
+
+    // 用code换取openId
+    openIdUrl: `https://${host}/openid`,
+
+    // 测试的信道服务接口
+    tunnelUrl: `https://${host}/tunnel`,
+
+    // 生成支付订单的接口
+    paymentUrl: `https://${host}/payment`,
+
+    // 发送模板消息接口
+    templateMessageUrl: `https://${host}/templateMessage`,
+
+    // 上传文件接口
+    uploadFileUrl: `https://${host}/upload`,
+
+    // 下载示例图片接口
+    downloadExampleUrl: `https://${host}/static/weapp.jpg`
+};
+
+module.exports = config

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.setGlobalAlpha = function (context) {
-  context.setFillStyle('#000000');
-  [1, 0.5, 0.1].forEach(function (item, index) {
-    context.setGlobalAlpha(item)
-    context.beginPath();
-    context.rect(0 + 75*index, 0, 50, 50);
-    context.fill();
-  });
-}
-
-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.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.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-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/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.js

+Page({
+  data: {
+    list: [
+      {
+        id: 'api',
+        name: '开放接口',
+        open: false,
+        pages: [
+          {
+            zh: '微信登录',
+            url: 'login/login'
+          }, {
+            zh: '获取用户信息',
+            url: 'get-user-info/get-user-info'
+          }, {
+            zh: '发起支付',
+            url: 'request-payment/request-payment'
+          }, {
+            zh: '分享',
+            url: 'share/share'
+          }, {
+            zh: '客服消息',
+            url: 'custom-message/custom-message'
+          }, {
+            zh: '模板消息',
+            url: 'template-message/template-message'
+          }
+        ]
+      }, {
+        id: 'page',
+        name: '界面',
+        open: false,
+        pages: [
+          {
+            zh: '设置界面标题',
+            url: 'set-navigation-bar-title/set-navigation-bar-title'
+          }, {
+            zh: '标题栏加载动画',
+            url: 'navigation-bar-loading/navigation-bar-loading'
+          }, {
+            zh: '页面跳转',
+            url: 'navigator/navigator'
+          }, {
+            zh: '下拉刷新',
+            url: 'pull-down-refresh/pull-down-refresh'
+          }, {
+            zh: '创建动画',
+            url: 'animation/animation'
+          }, {
+            zh: '创建绘画',
+            url: 'canvas/canvas'
+          }, {
+            zh: '显示操作菜单',
+            url: 'action-sheet/action-sheet'
+          }, {
+            zh: '显示模态弹窗',
+            url: 'modal/modal'
+          }, {
+            zh: '显示消息提示框',
+            url: 'toast/toast'
+          }
+        ]
+      }, {
+        id: 'device',
+        name: '设备',
+        open: false,
+        pages: [
+          {
+            zh: '获取手机网络状态',
+            url: 'get-network-type/get-network-type'
+          }, {
+            zh: '获取手机系统信息',
+            url: 'get-system-info/get-system-info'
+          }, {
+            zh: '监听重力感应数据',
+            url: 'on-accelerometer-change/on-accelerometer-change'
+          }, {
+            zh: '监听罗盘数据',
+            url: 'on-compass-change/on-compass-change'
+          }, {
+            zh: '打电话',
+            url: 'make-phone-call/make-phone-call'
+          }, {
+            zh: '扫码',
+            url: 'scan-code/scan-code'
+          }
+        ]
+      }, {
+        id: 'network',
+        name: '网络',
+        open: false,
+        pages: [
+          {
+            zh: '发起一个请求',
+            url: 'request/request'
+          }, {
+            zh: 'WebSocket',
+            url: 'web-socket/web-socket'
+          }, {
+            zh: '上传文件',
+            url: 'upload-file/upload-file'
+          }, {
+            zh: '下载文件',
+            url: 'download-file/download-file'
+          }
+        ]
+      }, {
+        id: 'media',
+        name: '媒体',
+        open: false,
+        pages: [
+          {
+            zh: '图片',
+            url: 'image/image'
+          }, {
+            zh: '录音',
+            url: 'voice/voice'
+          }, {
+            zh: '背景音频',
+            url: 'background-audio/background-audio'
+          }, {
+            zh: '文件',
+            url: 'file/file'
+          }, {
+            zh: '视频',
+            url: 'video/video'
+          }
+        ]
+      }, {
+        id: 'location',
+        name: '位置',
+        open: false,
+        pages: [
+          {
+            zh: '获取当前位置',
+            url: 'get-location/get-location'
+          }, {
+            zh: '使用原生地图查看位置',
+            url: 'open-location/open-location'
+          }, {
+            zh: '使用原生地图选择位置',
+            url: 'choose-location/choose-location'
+          }
+        ]
+      }, {
+        id: 'storage',
+        name: '数据',
+        url: 'storage/storage'
+      }
+    ]
+  },
+  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) {
+        if(list[i].url){
+          wx.navigateTo({
+            url: 'pages/' + list[i].url
+          })
+          return
+        }
+        list[i].open = !list[i].open
+      } else {
+        list[i].open = false
+      }
+    }
+    this.setData({
+      list: list
+    });
+  }
+})

page/API/index.json

+{
+    "navigationBarTitleText": "小程序接口能力展示"
+}

page/API/index.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.url}}" class="navigator">
+                  <view class="navigator-text">{{page.zh}}</view>
+                  <view class="navigator-arrow"></view>
+                </navigator>
+              </block>
+            </view>
+          </view>
+        </view>
+      </block>
+    </view>
+  </view>
+</view>
\ No newline at end of file

page/API/index.wxss

+@import "../common/index.wxss";
\ No newline at end of file

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/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.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-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.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/pages/action-sheet/action-sheet.js

+Page({
+  actionSheetTap: function () {
+    wx.showActionSheet({
+      itemList: ['item1', 'item2', 'item3', 'item4'],
+      success: function (e) {
+        console.log(e.tapIndex)
+      }
+    })
+  }
+})

page/API/pages/action-sheet/action-sheet.json

+{
+    "navigationBarTitleText": "操作菜单"
+}

page/API/pages/action-sheet/action-sheet.wxml

+<import src="../../../common/head.wxml" />
+<import src="../../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: 'action-sheet'}}"/>
+
+  <view class="page-body">
+    <view class="btn-area">
+      <button type="default" bindtap="actionSheetTap">弹出action sheet</button>
+    </view>
+  </view>
+
+  <template is="foot" />
+</view>

page/API/animation/animation.js → page/API/pages/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() })
+    this.setData({animation: this.animation.export()})
   },
   scale: function () {
     this.animation.scale(Math.random() * 2).step()
-    this.setData({ animation: this.animation.export() })
+    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() })
+    this.setData({animation: this.animation.export()})
   },
   skew: function () {
     this.animation.skew(Math.random() * 90, Math.random() * 90).step()
-    this.setData({ animation: this.animation.export() })
+    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() })
+    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() })
+    this.setData({animation: this.animation.export()})
   },
   all: function () {
     this.animation.rotate(Math.random() * 720 - 360)
@@ -36,21 +35,21 @@ Page({
         .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
         .skew(Math.random() * 90, Math.random() * 90)
         .step()
-    this.setData({ animation: this.animation.export() })
+    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() })
+    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() })
+                  .step({duration: 0})
+    this.setData({animation: this.animation.export()})
   }
 })

page/API/animation/animation.wxml → page/API/pages/animation/animation.wxml

-<import src="../common/header.wxml" />
-<import src="../common/footer.wxml" />
+<import src="../../../common/head.wxml" />
+<import src="../../../common/foot.wxml" />
 
 <view class="container">
-  <template is="header" data="{{title: 'createAnimation'}}"/>
+  <template is="head" data="{{title: 'createAnimation'}}"/>
 
   <view class="page-body">
-    <view class="page-body-wrapper">
+    <view class="page-section">
+
       <view class="animation-element-wrapper">
         <view class="animation-element" animation="{{animation}}"></view>
       </view>
-      <view class="animation-buttons" scroll-y="true">
+      <scroll-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="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>
+        <button class="animation-button animation-button-reset" bindtap="reset">还原</button>
+      </scroll-view>
     </view>
   </view>
 
-  <template is="footer" />
+  <template is="foot" />
 </view>
-

page/API/animation/animation.wxss → page/API/pages/animation/animation.wxss

-.page-body-wrapper {
-  flex-grow: 1;
-}
 .animation-element-wrapper {
-  display: block;
-  margin-bottom: 100rpx;
+  display: flex;
+  width: 100%;
+  padding-top: 150rpx;
+  padding-bottom: 150rpx;
+  justify-content: center;
+  overflow: hidden;
+  background-color: #ffffff;
 }
 .animation-element {
   width: 200rpx;
@@ -11,22 +13,18 @@
   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;
+  padding: 30rpx 50rpx 10rpx;
   width: 100%;
-  height: 400rpx;
+  height: 360rpx;
   box-sizing: border-box;
 }
 .animation-button {
-  width: 290rpx;
-  margin: 20rpx auto; 
+  float: left;
+  line-height: 2;
+  width: 300rpx;
+  margin: 15rpx 12rpx;
 }
+
 .animation-button-reset {
-  width: 610rpx;
-  margin: 20rpx auto; 
+  width: 620rpx;
 }

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

 var app = getApp()
-var util = require('../../../util/util.js')
+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) {

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

-<import src="../common/header.wxml" />
-<import src="../common/footer.wxml" />
+<import src="../../../common/head.wxml" />
+<import src="../../../common/foot.wxml" />
 
 <view class="container">
-  <template is="header" data="{{title: 'backgroundAudio'}}"/>
+  <template is="head" data="{{title: 'backgroundAudio'}}"/>
 
-  <view class="page-body-wrapper">
+  <view class="page-section">
     <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>
@@ -13,7 +13,7 @@
         <text>04:29</text>
       </view>
     </view>
-    <text class="page-body-text">离开小程序后音乐也可保持播放</text>
+    <view class="page-body-text tc">注意：离开当前页面后背景音乐将保持播放，但退出小程序将停止</view>
     <view class="page-body-buttons">
       <block wx:if="{{playing === true}}">
         <view class="page-body-button" bindtap="stop">
@@ -33,7 +33,5 @@
     </view>
   </view>
 
-  <template is="footer" />
+  <template is="foot" />
 </view>
-
-

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

+image {
+  width: 150rpx;
+  height: 150rpx;
+}
+
 .page-body-wrapper {
   margin-top: 0;
 }

page/API/canvas/canvas.js → page/API/pages/canvas/canvas.js

@@ -23,7 +23,7 @@ Page({
     })
   },
   toTempFilePath: function () {
-    wx.toTempFilePath({
+    wx.canvasToTempFilePath({
       canvasId: 'canvas',
       success: function (res) {
         console.log(res)

page/API/canvas/canvas.wxml → page/API/pages/canvas/canvas.wxml

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

page/API/canvas/canvas.wxss → page/API/pages/canvas/canvas.wxss

-.page-body-wrapper {
-  flex-grow: 1;
-}
 .canvas-element-wrapper {
   display: block;
   margin-bottom: 100rpx;
 }
 .canvas-element {
   width: 100%;
-  height: 400rpx;
+  height: 500rpx;
+  background-color: #ffffff;
 }
 .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;
+  padding: 30rpx 50rpx 10rpx;
   width: 100%;
-  height: 400rpx;
+  height: 360rpx;
   box-sizing: border-box;
 }
 .canvas-button {
-  font-size: 28rpx;
-  width: 290rpx;
-  margin: 20rpx auto; 
-}
-.canvas-button-reset {
-  width: 610rpx;
-  margin: 20rpx auto; 
+  float: left;
+  line-height: 2;
+  width: 300rpx;
+  margin: 15rpx 12rpx;
 }

page/API/pages/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.setGlobalAlpha = function (context) {
+  context.setFillStyle('#000000');
+  [1, 0.5, 0.1].forEach(function (item, index) {
+    context.setGlobalAlpha(item)
+    context.beginPath()
+    context.rect(0 + 75 * index, 0, 50, 50)
+    context.fill()
+  })
+}
+
+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/pages/choose-location/choose-location.js

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

page/API/pages/choose-location/choose-location.json

+{
+  "navigationBarTitleText": "使用原生地图选择位置"
+}
\ No newline at end of file

page/API/pages/choose-location/choose-location.wxml

+<import src="../../../common/head.wxml" />
+<import src="../../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: 'chooseLocation'}}"/>
+
+  <view class="page-body">
+    <view class="page-section">
+      <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}}">
+          <text class="page-body-text">{{locationAddress}}</text>
+          <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="btn-area">
+        <button type="primary" bindtap="chooseLocation">选择位置</button>
+        <button bindtap="clear">清空</button>
+      </view>
+    </view>
+  </view>
+
+  <template is="foot" />
+</view>

page/API/pages/choose-location/choose-location.wxss

+.page-body-info{
+  padding-bottom: 0;
+  height: 440rpx;
+}
\ No newline at end of file

page/API/pages/custom-message/custom-message.json

+{
+    "navigationBarTitleText": "客服消息"
+}

page/API/pages/custom-message/custom-message.wxml

+<import src="../../../common/head.wxml" />
+<import src="../../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: 'customMessage'}}"/>
+
+  <view class="page-body">
+    <view class="page-body-wrapper">
+      <text class="page-body-title">
+        点击气泡icon打开客服消息界面
+      </text>
+      <view class="page-body-line">
+        <contact-button size="40" session-from="weapp"></contact-button>
+      </view>
+    </view>
+  </view>
+
+  <template is="foot" />
+</view>

page/API/pages/custom-service/custom-service.json

+{
+    "navigationBarTitleText": "客服消息"
+}

page/API/pages/custom-service/custom-service.wxml

+<import src="../../../common/head.wxml" />
+<import src="../../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: 'scanCode'}}"/>
+
+  <view class="page-body">
+    <view class="btn-area">
+      <button type="primary">联系客服</button>
+    </view>
+  </view>
+
+  <template is="foot" />
+</view>

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

+const downloadExampleUrl = require('../../../../config').downloadExampleUrl
+
+Page({
+  downloadImage: function() {
+    var self = this
+
+    wx.downloadFile({
+      url: downloadExampleUrl,
+      success: function(res) {
+        console.log('downloadFile success, res is', res)
+
+        self.setData({
+          imageSrc: res.tempFilePath
+        })
+      },
+      fail: function({errMsg}) {
+        console.log('downloadFile fail, err is:', errMsg)
+      }
+    })
+  }
+})

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

+<import src="../../../common/head.wxml" />
+<import src="../../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: 'downloadFile'}}"/>
+
+  <view class="page-body">
+    <image wx:if="{{imageSrc}}" src="{{imageSrc}}" mode="center" />
+    <block wx:else>
+      <view class="page-body-wording">
+        <text class="page-body-text">
+          点击按钮下载服务端示例图片
+        </text>
+      </view>
+      <view class="btn-area">
+        <button bindtap="downloadImage" type="primary">下载</button>
+      </view>
+    </block>
+  </view>
+
+  <template is="foot" />
+</view>

page/API/pages/download-file/download-file.wxss

+.page-body image {
+  width: 600rpx;
+  height: 600rpx;
+
+  margin: 0 75rpx;
+}
\ No newline at end of file

page/API/file/file.js → page/API/pages/file/file.js

 Page({
+  onLoad: function () {
+    this.setData({
+      savedFilePath: wx.getStorageSync('savedFilePath')
+    })
+  },
   data: {
     tempFilePath: '',
-    savedFilePath: wx.getStorageSync('savedFilePath') || '',
+    savedFilePath: '',
     dialog: {
       hidden: true
     }

page/API/file/file.wxml → page/API/pages/file/file.wxml

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

page/API/pages/file/file.wxss

+.image {
+  width: 100%;
+  height: 360rpx;
+}
+.page-body-info {
+  display: flex;
+  box-sizing: border-box;
+  padding: 30rpx;
+  height: 420rpx;
+  border-top: 1rpx solid #D9D9D9;
+  border-bottom: 1rpx solid #D9D9D9;
+  align-items: center;
+  justify-content: center;
+}

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

-var formatLocation = require('./format-location.js')
+var util = require('../../../../util/util.js')
+var formatLocation = util.formatLocation
 
 Page({
   data: {

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

-<import src="../common/header.wxml" />
-<import src="../common/footer.wxml" />
+<import src="../../../common/head.wxml" />
+<import src="../../../common/foot.wxml" />
 
 <view class="container">
-  <template is="header" data="{{title: 'getLocation'}}"/>
+  <template is="head" data="{{title: 'getLocation'}}"/>
 
   <view class="page-body">
-    <view class="page-body-wrapper">
+    <view class="page-section">
       <view class="page-body-info">
         <text class="page-body-text-small">当前位置经纬度</text>
         <block wx:if="{{hasLocation === false}}">
@@ -13,19 +13,17 @@
         </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>
+            <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 class="btn-area">
+        <button type="primary" bindtap="getLocation">获取位置</button>
+        <button bindtap="clear">清空</button>
       </view>
     </view>
   </view>
 
-  <template is="footer" />
+  <template is="foot" />
 </view>
-
-

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

-<import src="../common/header.wxml" />
-<import src="../common/footer.wxml" />
+<import src="../../../common/head.wxml" />
+<import src="../../../common/foot.wxml" />
 
 <view class="container">
-  <template is="header" data="{{title: 'getNetworkType'}}"/>
+  <template is="head" data="{{title: 'getNetworkType'}}"/>
 
   <view class="page-body">
-    <view class="page-body-wrapper">
+    <view class="page-section">
       <view class="page-body-info">
         <view class="page-body-title">网络状态</view>
         <block wx:if="{{hasNetworkType === false}}">
@@ -16,13 +16,12 @@
           <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 class="btn-area">
+        <button type="primary" bindtap="getNetworkType">获取手机网络状态</button>
+        <button bindtap="clear">清空</button>
       </view>
     </view>
   </view>
 
-  <template is="footer" />
+  <template is="foot" />
 </view>
-

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

+<import src="../../../common/head.wxml" />
+<import src="../../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: 'getSystemInfo'}}"/>
+
+  <view class="page-body">
+    <view class="page-section">
+      <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">
+            <input class="weui-input" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.model}}"></input>
+          </view>
+        </view>
+        <view class="weui-cell weui-cell_input">
+          <view class="weui-cell__hd">
+            <view class="weui-label">微信语言</view>
+          </view>
+          <view class="weui-cell__bd">
+            <input class="weui-input" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.language}}"></input>
+          </view>
+        </view>
+        <view class="weui-cell weui-cell_input">
+          <view class="weui-cell__hd">
+            <view class="weui-label">微信版本</view>
+          </view>
+          <view class="weui-cell__bd">
+            <input class="weui-input" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.version}}"></input>
+          </view>
+        </view>
+        <view class="weui-cell weui-cell_input">
+          <view class="weui-cell__hd">
+            <view class="weui-label">屏幕宽度</view>
+          </view>
+          <view class="weui-cell__bd">
+            <input class="weui-input" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.windowWidth}}"></input>
+          </view>
+        </view>
+        <view class="weui-cell weui-cell_input">
+          <view class="weui-cell__hd">
+            <view class="weui-label">屏幕高度</view>
+          </view>
+          <view class="weui-cell__bd">
+            <input class="weui-input" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.windowHeight}}"></input>
+          </view>
+        </view>
+        <view class="weui-cell weui-cell_input">
+          <view class="weui-cell__hd">
+            <view class="weui-label">DPI</view>
+          </view>
+          <view class="weui-cell__bd">
+            <input class="weui-input" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.pixelRatio}}"></input>
+          </view>
+        </view>
+      </view>
+      <view class="btn-area">
+        <button type="primary" bindtap="getSystemInfo">获取手机系统信息</button>
+      </view>
+    </view>
+  </view>
+
+  <template is="foot" />
+</view>

page/API/pages/get-system-info/get-system-info.wxss

+@import "../../../common/lib/weui.wxss";
\ No newline at end of file

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

-<import src="../common/header.wxml" />
-<import src="../common/footer.wxml" />
+<import src="../../../common/head.wxml" />
+<import src="../../../common/foot.wxml" />
 
 <view class="container">
-  <template is="header" data="{{title: 'getUserInfo'}}"/>
+  <template is="head" data="{{title: 'getUserInfo'}}"/>
 
   <view class="page-body">
-    <view class="page-body-wrapper">
+    <view class="page-section">
       <view class="page-body-info">
         <view class="page-body-title">用户信息</view>
         <block wx:if="{{hasUserInfo === false}}">
@@ -13,16 +13,16 @@
           <text class="page-body-text">点击绿色按钮可获取用户头像及昵称</text>
         </block>
         <block wx:if="{{hasUserInfo === true}}">
-          <wx-image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></wx-image>
+          <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></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 class="btn-area">
+        <button type="primary" bindtap="getUserInfo">获取用户信息</button>
+        <button bindtap="clear">清空</button>
       </view>
     </view>
   </view>
 
-  <template is="footer" />
+  <template is="foot" />
 </view>

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

 .page-body-info {
-  height: 350rpx;
+  padding-bottom: 0;
+  height: 230px;
 }
 .userinfo-avatar {
   border-radius: 128rpx;
@@ -9,4 +10,4 @@
 .userinfo-nickname {
   margin-top: 20rpx;
   font-size: 38rpx;
-}
+}
\ No newline at end of file

page/API/image/image.js → page/API/pages/image/image.js

@@ -3,6 +3,7 @@ var sizeType = [ ['compressed'], ['original'], ['compressed', 'original'] ]
 
 Page({
   data: {
+    imageList: [],
     sourceTypeIndex: 2,
     sourceType: ['拍照', '相册', '拍照或相册'],
 

page/API/pages/image/image.wxml

+<import src="../../../common/head.wxml" />
+<import src="../../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: 'choose/previewImage'}}"/>
+
+  <view class="page-body">
+    <form>
+      <view class="page-section">
+
+        <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 range="{{sourceType}}" bindchange="sourceTypeChange" value="{{sourceTypeIndex}}" mode="selector">
+                <view class="weui-input">{{sourceType[sourceTypeIndex]}}</view>
+              </picker>
+            </view>
+          </view>
+
+          <view class="weui-cell weui-cell_input">
+            <view class="weui-cell__hd">
+              <view class="weui-label">图片质量</view>
+            </view>
+            <view class="weui-cell__bd">
+              <picker range="{{sizeType}}" bindchange="sizeTypeChange" value="{{sizeTypeIndex}}" mode="selector">
+                <view class="weui-input">{{sizeType[sizeTypeIndex]}}</view>
+              </picker>
+            </view>
+          </view>
+          <view class="weui-cell weui-cell_input">
+            <view class="weui-cell__hd">
+              <view class="weui-label">数量限制</view>
+            </view>
+            <view class="weui-cell__bd">
+              <picker range="{{count}}" bindchange="countChange" value="{{countIndex}}" mode="selector">
+                <view class="weui-input">{{count[countIndex]}}</view>
+              </picker>
+            </view>
+          </view>
+        </view>
+
+        <view class="weui-cells">
+          <view class="weui-cell">
+            <view class="weui-cell__bd">
+              <view class="weui-uploader">
+                <view class="weui-uploader__hd">
+                  <view class="weui-uploader__title">点击可预览选好的图片</view>
+                  <view class="weui-uploader__info">{{imageList.length}}/{{count[countIndex]}}</view>
+                </view>
+                <view class="weui-uploader__bd">
+                  <view class="weui-uploader__files">
+                    <block wx:for="{{imageList}}" wx:for-item="image">
+                      <view class="weui-uploader__file">
+                        <image class="weui-uploader__img" src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>
+                      </view>
+                    </block>
+                  </view>
+                  <view class="weui-uploader__input-box">
+                    <view class="weui-uploader__input" bindtap="chooseImage"></view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+      </view>
+    </form>
+  </view>
+
+  <template is="foot" />
+</view>

page/API/pages/image/image.wxss

+@import "../../../common/lib/weui.wxss";
\ No newline at end of file

page/API/login/login.wxml → page/API/pages/login/login.wxml

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

page/API/login/login.wxss → page/API/pages/login/login.wxss

-.page-body-wrapper {
+.page-section {
   margin-top: 200rpx;
   display: flex;
   flex-direction: column;
@@ -10,14 +10,12 @@
 }
 .page-body-title {
   font-size: 60rpx;
-  /*TODO 使用 rpx */
-  line-height: 100px;
+  line-height: 200rpx;
 }
 .page-body-text {
   color: #bbb;
   font-size: 28rpx;
-  /*TODO 使用 rpx */
-  line-height: 20px;
+  line-height: 40rpx;
   margin: 0 0 100rpx 0;
   text-align: center;
 }

page/API/pages/make-phone-call/make-phone-call.js

+Page({
+  data: {
+    disabled: true
+  },
+  bindInput: function(e) {
+    this.inputValue = e.detail.value
+
+    if (this.inputValue.length > 0) {
+      this.setData({
+        disabled: false
+      })
+    } else {
+      this.setData({
+        disabled: true
+      })
+    }
+  },
+  makePhoneCall: function () {
+    var that = this
+    wx.makePhoneCall({
+      phoneNumber: this.inputValue,
+      success: function () {
+        console.log("成功拨打电话")
+      }
+    })
+  }
+})

page/API/pages/make-phone-call/make-phone-call.json

+{
+    "navigationBarTitleText": "打电话"
+}

page/API/pages/make-phone-call/make-phone-call.wxml

+<import src="../../../common/head.wxml" />
+<import src="../../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: 'makePhoneCall'}}"/>
+
+  <view class="page-body">
+    <view class="page-section">
+      <view class="desc">请在下方输入电话号码</view>
+      <input class="input" type="number" name="input" bindinput="bindInput" />
+      <view class="btn-area">
+        <button type="primary" bindtap="makePhoneCall" disabled="{{disabled}}">拨打</button>
+      </view>
+    </view>
+  </view>
+
+  <template is="foot" />
+</view>

page/API/pages/make-phone-call/make-phone-call.wxss

+.page-section{
+  width: auto;
+  margin: 30rpx;
+  padding: 44rpx 60rpx 60rpx;
+  background-color: #fff;
+  font-size: 28rpx;
+}
+.desc{
+  margin-bottom: 20rpx;
+}
+.input{
+  height: 119rpx;
+  line-height: 119rpx;
+  font-size: 78rpx;
+  border-bottom: 1rpx solid #E2E2E2;
+}
+.btn-area{
+  padding: 0;
+}

page/API/pages/modal/modal.js

+Page({
+  data: {
+    modalHidden: true,
+    modalHidden2: true
+  },
+  modalTap: function(e) {
+    wx.showModal({
+      title: "弹窗标题",
+      content: "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内",
+      showCancel: false,
+      confirmText: "确定"
+    })
+  },
+  noTitlemodalTap: function(e) {
+    wx.showModal({
+      content: "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内",
+      confirmText: "确定",
+      cancelText: "取消"
+    })
+  }
+})