diff --git a/examples/hello-uniapp/App.vue b/examples/hello-uniapp/App.vue
new file mode 100644
index 0000000000000000000000000000000000000000..359c9cab0b3ca7967efb12170f1cb22666b20eeb
--- /dev/null
+++ b/examples/hello-uniapp/App.vue
@@ -0,0 +1,240 @@
+<script>
+    
+    export default {
+        onLaunch: function () {
+            console.log('App Launch');
+            //#ifdef APP-PLUS
+                plus.screen.unlockOrientation(); //解除锁定
+                plus.screen.lockOrientation('portrait-primary'); //锁定
+            //#endif
+        },
+        onShow: function () {
+            console.log('App Show')
+        },
+        onHide: function () {
+            console.log('App Hide')
+        }
+    }
+</script>
+
+<style>
+    /* reset */
+
+    page {
+        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%;
+    }
+
+    /* page */
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        min-height: 100%;
+        justify-content: space-between;
+        font-size: 32rpx;
+        font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
+    }
+
+    .page-head {
+        padding: 60rpx 50rpx 80rpx;
+        text-align: center;
+        line-height: initial;
+        height: 60rpx;
+    }
+
+    .page-head-title {
+        display: inline-block;
+        padding: 0 40rpx;
+        font-size: 30rpx;
+        height: 60rpx;
+        line-height: 60rpx;
+        color: #BEBEBE;
+        box-sizing: border-box;
+        border-bottom: 2rpx solid #D8D8D8;
+    }
+
+    .page-head-desc {
+        padding-top: 20rpx;
+        color: #9B9B9B;
+        font-size: 32rpx;
+    }
+
+    .page-body {
+        width: 100%;
+        flex-grow: 1;
+        overflow-x: hidden;
+    }
+
+    .page-body-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        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;
+        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-foot {
+        margin: 100rpx 0 30rpx 0;
+        text-align: center;
+        color: #1aad19;
+        font-size: 0;
+    }
+
+    .icon-foot {
+        width: 152rpx;
+        height: 23rpx;
+    }
+
+    .page-section {
+        width: 100%;
+        margin-bottom: 60rpx;
+    }
+
+    .page-section_center {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .page-section:last-child {
+        margin-bottom: 0;
+    }
+
+    .page-section-gap {
+        box-sizing: border-box;
+        padding: 0 30rpx;
+    }
+
+    .page-section-spacing {
+        box-sizing: border-box;
+        padding: 0 80rpx;
+    }
+
+    .page-section-title {
+        font-size: 28rpx;
+        color: #999999;
+        margin-top: 10rpx;
+        margin-bottom: 10rpx;
+        padding-left: 30rpx;
+        padding-right: 30rpx;
+    }
+
+    .page-section-gap .page-section-title {
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    /* example */
+    .index-hd{
+    	padding: 90rpx;
+        text-align: center;
+    }
+    .index-logo{
+        width: 140rpx;
+        height: 140rpx;
+    }
+    .btn-area {
+        margin-top: 60rpx;
+        box-sizing: border-box;
+        width: 100%;
+        padding: 0 30rpx;
+    }
+
+    .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%);
+    }
+
+    .color1 {
+        background-color: #1AAD19;
+        color: #FFFFFF;
+    }
+
+    .color2 {
+        background-color: #2782D7;
+        color: #FFFFFF;
+    }
+
+    .color3 {
+        background-color: #F1F1F1;
+        color: #353535;
+    }
+</style>
diff --git a/examples/hello-uniapp/common/icon.css b/examples/hello-uniapp/common/icon.css
new file mode 100644
index 0000000000000000000000000000000000000000..6efcd8cfdd5d8e47e23980a1c356d8b092ffae13
--- /dev/null
+++ b/examples/hello-uniapp/common/icon.css
@@ -0,0 +1,377 @@
+@font-face {
+  font-family: uniicons;
+  font-weight: normal;
+  font-style: normal;
+
+  src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
+}
+
+.uni-icon {
+  font-family: uniicons;
+  font-size: 48rpx;
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+
+  display: inline-block;
+
+  text-decoration: none;
+
+  -webkit-font-smoothing: antialiased;
+}
+
+.uni-icon.uni-active {
+  color: #007aff;
+}
+
+.uni-icon-contact:before {
+  content: '\e100';
+}
+
+.uni-icon-person:before {
+  content: '\e101';
+}
+
+.uni-icon-personadd:before {
+  content: '\e102';
+}
+
+.uni-icon-contact-filled:before {
+  content: '\e130';
+}
+
+.uni-icon-person-filled:before {
+  content: '\e131';
+}
+
+.uni-icon-personadd-filled:before {
+  content: '\e132';
+}
+
+.uni-icon-phone:before {
+  content: '\e200';
+}
+
+.uni-icon-email:before {
+  content: '\e201';
+}
+
+.uni-icon-chatbubble:before {
+  content: '\e202';
+}
+
+.uni-icon-chatboxes:before {
+  content: '\e203';
+}
+
+.uni-icon-phone-filled:before {
+  content: '\e230';
+}
+
+.uni-icon-email-filled:before {
+  content: '\e231';
+}
+
+.uni-icon-chatbubble-filled:before {
+  content: '\e232';
+}
+
+.uni-icon-chatboxes-filled:before {
+  content: '\e233';
+}
+
+.uni-icon-weibo:before {
+  content: '\e260';
+}
+
+.uni-icon-weixin:before {
+  content: '\e261';
+}
+
+.uni-icon-pengyouquan:before {
+  content: '\e262';
+}
+
+.uni-icon-chat:before {
+  content: '\e263';
+}
+
+.uni-icon-qq:before {
+  content: '\e264';
+}
+
+.uni-icon-videocam:before {
+  content: '\e300';
+}
+
+.uni-icon-camera:before {
+  content: '\e301';
+}
+
+.uni-icon-mic:before {
+  content: '\e302';
+}
+
+.uni-icon-location:before {
+  content: '\e303';
+}
+
+.uni-icon-mic-filled:before,
+.uni-icon-speech:before {
+  content: '\e332';
+}
+
+.uni-icon-location-filled:before {
+  content: '\e333';
+}
+
+.uni-icon-micoff:before {
+  content: '\e360';
+}
+
+.uni-icon-image:before {
+  content: '\e363';
+}
+
+.uni-icon-map:before {
+  content: '\e364';
+}
+
+.uni-icon-compose:before {
+  content: '\e400';
+}
+
+.uni-icon-trash:before {
+  content: '\e401';
+}
+
+.uni-icon-upload:before {
+  content: '\e402';
+}
+
+.uni-icon-download:before {
+  content: '\e403';
+}
+
+.uni-icon-close:before {
+  content: '\e404';
+}
+
+.uni-icon-redo:before {
+  content: '\e405';
+}
+
+.uni-icon-undo:before {
+  content: '\e406';
+}
+
+.uni-icon-refresh:before {
+  content: '\e407';
+}
+
+.uni-icon-star:before {
+  content: '\e408';
+}
+
+.uni-icon-plus:before {
+  content: '\e409';
+}
+
+.uni-icon-minus:before {
+  content: '\e410';
+}
+
+.uni-icon-circle:before,
+.uni-icon-checkbox:before {
+  content: '\e411';
+}
+
+.uni-icon-close-filled:before,
+.uni-icon-clear:before {
+  content: '\e434';
+}
+
+.uni-icon-refresh-filled:before {
+  content: '\e437';
+}
+
+.uni-icon-star-filled:before {
+  content: '\e438';
+}
+
+.uni-icon-plus-filled:before {
+  content: '\e439';
+}
+
+.uni-icon-minus-filled:before {
+  content: '\e440';
+}
+
+.uni-icon-circle-filled:before {
+  content: '\e441';
+}
+
+.uni-icon-checkbox-filled:before {
+  content: '\e442';
+}
+
+.uni-icon-closeempty:before {
+  content: '\e460';
+}
+
+.uni-icon-refreshempty:before {
+  content: '\e461';
+}
+
+.uni-icon-reload:before {
+  content: '\e462';
+}
+
+.uni-icon-starhalf:before {
+  content: '\e463';
+}
+
+.uni-icon-spinner:before {
+  content: '\e464';
+}
+
+.uni-icon-spinner-cycle:before {
+  content: '\e465';
+}
+
+.uni-icon-search:before {
+  content: '\e466';
+}
+
+.uni-icon-plusempty:before {
+  content: '\e468';
+}
+
+.uni-icon-forward:before {
+  content: '\e470';
+}
+
+.uni-icon-back:before,
+.uni-icon-left-nav:before {
+  content: '\e471';
+}
+
+.uni-icon-checkmarkempty:before {
+  content: '\e472';
+}
+
+.uni-icon-home:before {
+  content: '\e500';
+}
+
+.uni-icon-navigate:before {
+  content: '\e501';
+}
+
+.uni-icon-gear:before {
+  content: '\e502';
+}
+
+.uni-icon-paperplane:before {
+  content: '\e503';
+}
+
+.uni-icon-info:before {
+  content: '\e504';
+}
+
+.uni-icon-help:before {
+  content: '\e505';
+}
+
+.uni-icon-locked:before {
+  content: '\e506';
+}
+
+.uni-icon-more:before {
+  content: '\e507';
+}
+
+.uni-icon-flag:before {
+  content: '\e508';
+}
+
+.uni-icon-home-filled:before {
+  content: '\e530';
+}
+
+.uni-icon-gear-filled:before {
+  content: '\e532';
+}
+
+.uni-icon-info-filled:before {
+  content: '\e534';
+}
+
+.uni-icon-help-filled:before {
+  content: '\e535';
+}
+
+.uni-icon-more-filled:before {
+  content: '\e537';
+}
+
+.uni-icon-settings:before {
+  content: '\e560';
+}
+
+.uni-icon-list:before {
+  content: '\e562';
+}
+
+.uni-icon-bars:before {
+  content: '\e563';
+}
+
+.uni-icon-loop:before {
+  content: '\e565';
+}
+
+.uni-icon-paperclip:before {
+  content: '\e567';
+}
+
+.uni-icon-eye:before {
+  content: '\e568';
+}
+
+.uni-icon-arrowup:before {
+  content: '\e580';
+}
+
+.uni-icon-arrowdown:before {
+  content: '\e581';
+}
+
+.uni-icon-arrowleft:before {
+  content: '\e582';
+}
+
+.uni-icon-arrowright:before {
+  content: '\e583';
+}
+
+.uni-icon-arrowthinup:before {
+  content: '\e584';
+}
+
+.uni-icon-arrowthindown:before {
+  content: '\e585';
+}
+
+.uni-icon-arrowthinleft:before {
+  content: '\e586';
+}
+
+.uni-icon-arrowthinright:before {
+  content: '\e587';
+}
+
+.uni-icon-pulldown:before {
+  content: '\e588';
+}
diff --git a/examples/hello-uniapp/common/uni.css b/examples/hello-uniapp/common/uni.css
new file mode 100644
index 0000000000000000000000000000000000000000..29ee49e03a886619e258a206ad6fe652a44af022
--- /dev/null
+++ b/examples/hello-uniapp/common/uni.css
@@ -0,0 +1,668 @@
+@font-face {
+    font-family: uniicons;
+    font-weight: normal;
+    font-style: normal;
+
+    src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
+}
+
+
+
+
+
+
+
+/*通用*/
+
+.uni-flex {
+    display: flex;
+    flex-direction: row;
+}
+
+.uni-h6 {
+    font-size: 24rpx;
+    color: #8f8f94;
+}
+
+.uni-h5 {
+    font-size: 28rpx;
+    color: #8f8f94;
+}
+
+.uni-h4 {
+    font-size: 36rpx;
+}
+
+.uni-h3 {
+    font-size: 48rpx;
+    font-weight: 600;
+}
+
+.uni-h2 {
+    font-size: 60rpx;
+    font-weight: 600;
+}
+
+.uni-h1 {
+    font-size: 72rpx;
+    font-weight: 600;
+}
+
+.uni-ellipsis {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.uni-input {
+    height: 2.58823529em;
+    min-height: 2.58823529em;
+    line-height: 2.58823529em;
+}
+
+.uni-label {
+    width: 105px;
+    word-wrap: break-word;
+    word-break: break-all;
+}
+
+
+
+
+/*数字角标*/
+
+.uni-badge {
+    padding: 4rpx 14rpx;
+    font-size: 24rpx;
+    height: 24rpx;
+    line-height: 1;
+    color: #333;
+    background-color: rgba(0, 0, 0, .15);
+    border-radius: 200rpx;
+}
+
+.uni-badge.uni-badge-inverted {
+    padding: 0 5px 0 0;
+    color: #929292;
+    background-color: transparent
+}
+
+.uni-badge-primary {
+    color: #fff;
+    background-color: #007aff
+}
+
+.uni-badge-blue.uni-badge-inverted,
+.uni-badge-primary.uni-badge-inverted {
+    color: #007aff;
+    background-color: transparent
+}
+
+.uni-badge-green,
+.uni-badge-success {
+    color: #fff;
+    background-color: #4cd964;
+}
+
+.uni-badge-green.uni-badge-inverted,
+.uni-badge-success.uni-badge-inverted {
+    color: #4cd964;
+    background-color: transparent
+}
+
+.uni-badge-warning,
+.uni-badge-yellow {
+    color: #fff;
+    background-color: #f0ad4e
+}
+
+.uni-badge-warning.uni-badge-inverted,
+.uni-badge-yellow.uni-badge-inverted {
+    color: #f0ad4e;
+    background-color: transparent
+}
+
+.uni-badge-danger,
+.uni-badge-red {
+    color: #fff;
+    background-color: #dd524d
+}
+
+.uni-badge-danger.uni-badge-inverted,
+.uni-badge-red.uni-badge-inverted {
+    color: #dd524d;
+    background-color: transparent
+}
+
+.uni-badge-purple,
+.uni-badge-royal {
+    color: #fff;
+    background-color: #8a6de9
+}
+
+.uni-badge-purple.uni-badge-inverted,
+.uni-badge-royal.uni-badge-inverted {
+    color: #8a6de9;
+    background-color: transparent
+}
+
+
+
+
+
+
+
+
+/*折叠面板*/
+
+.uni-collapse-content {
+    height: 0;
+    width: 100%;
+    overflow: hidden;
+}
+
+.uni-collapse-content.uni-active {
+    height: auto;
+}
+
+
+
+
+
+
+
+
+
+/*卡片视图*/
+
+.uni-card {
+    background: #fff;
+    border-radius: 8rpx;
+    margin: 20rpx;
+    position: relative;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
+}
+
+.uni-card-content {
+    font-size: 30rpx;
+}
+
+.uni-card-content-inner {
+    position: relative;
+    padding: 30rpx;
+}
+
+.uni-card-footer,
+.uni-card-header {
+    position: relative;
+    display: flex;
+    min-height: 50rpx;
+    padding: 20rpx 30rpx;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.uni-card-header {
+    font-size: 36rpx;
+}
+
+.uni-card-footer {
+    color: #6d6d72;
+}
+
+.uni-card-footer:before,
+.uni-card-header:after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 2rpx;
+    content: '';
+    -webkit-transform: scaleY(.5);
+    transform: scaleY(.5);
+    background-color: #c8c7cc;
+}
+
+.uni-card-header:after {
+    top: auto;
+    bottom: 0;
+}
+
+.uni-card-media {
+    justify-content: flex-start;
+}
+
+.uni-card-media-logo {
+    height: 84rpx;
+    width: 84rpx;
+    margin-right: 20rpx;
+}
+
+.uni-card-media-body {
+    height: 84rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.uni-card-media-text-top {
+    line-height: 36rpx;
+    font-size: 34rpx;
+}
+
+.uni-card-media-text-bottom {
+    line-height: 30rpx;
+    font-size: 28rpx;
+    color: #8f8f94;
+}
+
+.uni-card-link {
+    color: #007AFF;
+}
+
+
+
+
+
+
+
+
+/*列表*/
+
+.uni-list {
+    background-color: #FFFFFF;
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.uni-list:after {
+    position: absolute;
+    z-index: 10;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    content: '';
+    -webkit-transform: scaleY(.5);
+    transform: scaleY(.5);
+    background-color: #c8c7cc;
+}
+
+.uni-list:before {
+    position: absolute;
+    z-index: 10;
+    right: 0;
+    top: 0;
+    left: 0;
+    height: 1px;
+    content: '';
+    -webkit-transform: scaleY(.5);
+    transform: scaleY(.5);
+    background-color: #c8c7cc;
+}
+
+.uni-list-cell {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.uni-list-cell-hover {
+    background-color: #eee;
+}
+
+.uni-list-cell-pd {
+    padding: 22rpx 30rpx;
+}
+
+.uni-list-cell-left {
+    padding: 0 30rpx;
+}
+
+.uni-list-cell-db,
+.uni-list-cell-right {
+    flex: 1;
+}
+
+.uni-list-cell:after {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 30rpx;
+    height: 1px;
+    content: '';
+    -webkit-transform: scaleY(.5);
+    transform: scaleY(.5);
+    background-color: #c8c7cc;
+}
+
+.uni-list .uni-list-cell:last-child:after {
+    height: 0px;
+}
+
+.uni-list-cell-last.uni-list-cell:after {
+    height: 0px;
+}
+
+.uni-list-cell-divider {
+    background: #fafafa;
+    position: relative;
+    display: flex;
+    color: #999;
+    background-color: #fafafa;
+    padding: 15rpx 20rpx;
+}
+
+.uni-list-cell-divider:after {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0rpx;
+    height: 1px;
+    content: '';
+    -webkit-transform: scaleY(.5);
+    transform: scaleY(.5);
+    background-color: #c8c7cc;
+}
+
+.uni-list-cell-navigate {
+    padding: 22rpx 30rpx;
+    position: relative;
+    display: flex;
+    box-sizing: border-box;
+    width: 100%;
+    flex: 1;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.uni-list-cell-navigate {
+    padding-right: 36rpx;
+}
+
+.uni-navigate-badge {
+    margin-right: 20rpx;
+}
+
+.uni-list-cell-navigate.uni-navigate-right:after {
+    font-family: uniicons;
+    content: '\e583';
+    position: absolute;
+    right: 24rpx;
+    top: 50%;
+    color: #bbb;
+    transform: translateY(-50%);
+}
+
+.uni-list-cell-navigate.uni-navigate-bottom:after {
+    font-family: uniicons;
+    content: '\e581';
+    position: absolute;
+    right: 24rpx;
+    top: 50%;
+    color: #bbb;
+    transform: translateY(-50%);
+}
+
+.uni-list-cell-navigate.uni-navigate-bottom.uni-active:after {
+    font-family: uniicons;
+    content: '\e580';
+    position: absolute;
+    right: 24rpx;
+    top: 50%;
+    color: #bbb;
+    transform: translateY(-50%);
+}
+
+.uni-collapse.uni-list-cell {
+    flex-direction: column;
+}
+
+.uni-list-cell-navigate.uni-active {
+    background: #eee;
+}
+
+.uni-list.uni-collapse {
+    box-sizing: border-box;
+    height: 0;
+    overflow: hidden;
+}
+
+.uni-collapse .uni-list-cell {
+    padding-left: 36rpx;
+}
+
+.uni-collapse .uni-list-cell:after {
+    left: 52rpx;
+}
+
+.uni-list.uni-active {
+    height: auto;
+}
+
+
+
+/*三行列表*/
+
+.uni-triplex-row {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    box-sizing: border-box;
+    flex-direction: row;
+    padding: 22rpx 30rpx;
+}
+
+.uni-triplex-right,
+.uni-triplex-left {
+    display: flex;
+    flex-direction: column;
+}
+
+.uni-triplex-left {
+    width: 84%;
+}
+
+.uni-triplex-right {
+    width: 16%;
+    text-align: right;
+}
+
+
+
+
+
+/*图文列表*/
+
+.uni-media-list {
+    padding: 22rpx 30rpx;
+    box-sizing: border-box;
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+}
+
+.uni-navigate-right.uni-media-list {
+    padding-right: 74rpx;
+}
+
+.uni-pull-right {
+    flex-direction: row-reverse;
+}
+
+.uni-pull-right>.uni-media-list-logo {
+    margin-right: 0rpx;
+    margin-left: 20rpx;
+}
+
+.uni-media-list-logo {
+    height: 84rpx;
+    width: 84rpx;
+    margin-right: 20rpx;
+}
+
+.uni-media-list-body {
+    height: 84rpx;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    overflow: hidden;
+}
+
+.uni-media-list-text-top {
+    width: 100%;
+    line-height: 36rpx;
+    font-size: 34rpx;
+}
+
+.uni-media-list-text-bottom {
+    width: 100%;
+    line-height: 30rpx;
+    font-size: 28rpx;
+    color: #8f8f94;
+}
+
+
+
+
+
+
+/*九宫格*/
+
+.uni-grid-9 {
+    background: #f2f2f2;
+    width: 750rpx;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    border-top: 1px solid #eee;
+}
+
+.uni-grid-9-item {
+    width: 250rpx;
+    height: 200rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 2rpx solid;
+    border-right: 2rpx solid;
+    border-color: #eee;
+    box-sizing: border-box;
+}
+
+.no-border-right {
+    border-right: none;
+}
+
+.uni-grid-9-image {
+    width: 100rpx;
+    height: 100rpx;
+}
+
+.uni-grid-9-text {
+    width: 250rpx;
+    line-height: 50rpx;
+    height: 50rpx;
+    text-align: center;
+    font-size: 30rpx;
+}
+
+.uni-grid-9-item-hover {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+
+
+
+
+/*上传*/
+
+.uni-uploader {
+    flex: 1;
+    flex-direction: column;
+}
+
+.uni-uploader-head {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.uni-uploader-info {
+    color: #B2B2B2;
+}
+
+.uni-uploader-body {
+    margin-top: 16rpx;
+    overflow: hidden;
+}
+
+.uni-uploader__file {
+    float: left;
+    margin-right: 9px;
+    margin-bottom: 9px;
+}
+
+.uni-uploader__img {
+    display: block;
+    width: 79px;
+    height: 79px;
+}
+
+.uni-uploader__input-box {
+    float: left;
+    position: relative;
+    margin-right: 9px;
+    margin-bottom: 9px;
+    width: 77px;
+    height: 77px;
+    border: 1px solid #D9D9D9;
+}
+
+.uni-uploader__input-box:before,
+.uni-uploader__input-box:after {
+    content: " ";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    background-color: #D9D9D9;
+}
+
+.uni-uploader__input-box:before {
+    width: 2px;
+    height: 39.5px;
+}
+
+.uni-uploader__input-box:after {
+    width: 39.5px;
+    height: 2px;
+}
+
+.uni-uploader__input-box:active {
+    border-color: #999999;
+}
+
+.uni-uploader__input-box:active:before,
+.uni-uploader__input-box:active:after {
+    background-color: #999999;
+}
+
+.uni-uploader__input {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+}
diff --git a/examples/hello-uniapp/common/util.js b/examples/hello-uniapp/common/util.js
new file mode 100644
index 0000000000000000000000000000000000000000..7a7250560993f73f9812936def59bd95e8596130
--- /dev/null
+++ b/examples/hello-uniapp/common/util.js
@@ -0,0 +1,72 @@
+function formatTime(time) {
+  if (typeof time !== 'number' || time < 0) {
+    return time
+  }
+
+  var hour = parseInt(time / 3600)
+  time = time % 3600
+  var minute = parseInt(time / 60)
+  time = time % 60
+  var second = time
+
+  return ([hour, minute, second]).map(function (n) {
+    n = n.toString()
+    return n[1] ? n : '0' + n
+  }).join(':')
+}
+
+function formatLocation(longitude, latitude) {
+  if (typeof longitude === 'string' && typeof latitude === 'string') {
+    longitude = parseFloat(longitude)
+    latitude = parseFloat(latitude)
+  }
+
+  longitude = longitude.toFixed(2)
+  latitude = latitude.toFixed(2)
+
+  return {
+    longitude: longitude.toString().split('.'),
+    latitude: latitude.toString().split('.')
+  }
+}
+var dateUtils = {
+    UNITS: {
+        '年': 31557600000,
+        '月': 2629800000,
+        '天': 86400000,
+        '小时': 3600000,
+        '分钟': 60000,
+        '秒': 1000
+    },
+    humanize: function (milliseconds) {
+        var humanize = '';
+        for (var key in this.UNITS) {
+            if (milliseconds >= this.UNITS[key]) {
+                humanize = Math.floor(milliseconds / this.UNITS[key]) + key + '前';
+                break;
+            }
+        }
+        return humanize || '刚刚';
+    },
+    format: function (dateStr) {
+        var date = this.parse(dateStr)
+        var diff = Date.now() - date.getTime();
+        if (diff < this.UNITS['天']) {
+            return this.humanize(diff);
+        }
+        var _format = function (number) {
+            return (number < 10 ? ('0' + number) : number);
+        };
+        return date.getFullYear() + '/' + _format(date.getMonth() + 1) + '/' + _format(date.getDay()) + '-' +
+            _format(date.getHours()) + ':' + _format(date.getMinutes());
+    },
+    parse: function (str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
+        var a = str.split(/[^0-9]/);
+        return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
+    }
+};
+module.exports = {
+  formatTime: formatTime,
+  formatLocation: formatLocation,
+  dateUtils:dateUtils
+}
diff --git a/examples/hello-uniapp/components/number-box.vue b/examples/hello-uniapp/components/number-box.vue
new file mode 100644
index 0000000000000000000000000000000000000000..259cbc6c411369379a4b7f64bc4c6fa5765839bc
--- /dev/null
+++ b/examples/hello-uniapp/components/number-box.vue
@@ -0,0 +1,117 @@
+<template>
+    <view class="uni-numbox">
+        <view class="uni-numbox-minus" :class="{'uni-numbox-disabled': disableSubtract}" @click="subtract">-</view>
+        <input class="uni-numbox-value" type="number" v-model="value" @blur="handleBlur">
+        <view class="uni-numbox-plus" :class="{'uni-numbox-disabled': disableAdd}" @click="add">+</view>
+    </view>
+</template>
+<script>
+    export default {
+        name: 'number-box',
+        props: {
+            value: {
+                type: Number,
+                default: 0
+            },
+            min: {
+                type: Number,
+                default: -Infinity
+            },
+            max: {
+                type: Number,
+                default: Infinity
+            },
+            step: {
+                type: Number,
+                default: 1
+            }
+        },
+        computed: {
+            disableSubtract() {
+                return this.value <= this.min
+            },
+            disableAdd() {
+                return this.value >= this.max
+            }
+        },
+        methods: {
+            subtract(evt) {
+                this._handleStep('subtract');
+            },
+            add(evt) {
+                this._handleStep('add');
+            },
+            _handleStep(type) {
+                let value = this.value;
+                if (type === 'subtract') {
+                    value -= this.step
+                } else if (type === 'add') {
+                    value += this.step
+                }
+                if (value < this.min || value > this.max) {
+                    return
+                }
+                this.value = value
+            },
+            handleBlur(evt) {
+                let value = evt.detail.value;
+                if (!value) {
+                    this.value = 0;
+                    return
+                }
+                value = +value;
+                if (value > this.max) {
+                    value = this.max;
+                } else if (value < this.min) {
+                    value = this.min
+                }
+                this.value = value
+            }
+        }
+    }
+</script>
+<style>
+    .uni-numbox {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        height: 70rpx;
+    }
+
+    .uni-numbox-minus,
+    .uni-numbox-plus {
+        margin: 0;
+        background-color: #f9f9f9;
+        width: 80rpx;
+        height: 100%;
+        line-height: 70rpx;
+        text-align: center;
+        color: #555555;
+    }
+
+    .uni-numbox-minus {
+        border: 2rpx solid #cccccc;
+        border-right: none;
+        border-top-left-radius: 6rpx;
+        border-bottom-left-radius: 6rpx;
+    }
+
+    .uni-numbox-plus {
+        border: 2rpx solid #cccccc;
+        border-left: none;
+        border-top-right-radius: 6rpx;
+        border-bottom-right-radius: 6rpx;
+    }
+
+    .uni-numbox-value {
+        border: 2rpx solid #cccccc;
+        background-color: #ffffff;
+        width: 80rpx;
+        height: 100%;
+        text-align: center;
+    }
+
+    .uni-numbox-disabled {
+        color: #c0c0c0;
+    }
+</style>
diff --git a/examples/hello-uniapp/components/page-head.vue b/examples/hello-uniapp/components/page-head.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1049eeea040e9f06486e2d4d6958c5563f732142
--- /dev/null
+++ b/examples/hello-uniapp/components/page-head.vue
@@ -0,0 +1,19 @@
+<template name="page-head">
+    <view class="page-head">
+        <view class="page-head-title">{{title}}</view>
+        <view class="page-head-line"></view>
+        <view v-if="desc" class="page-head-desc">{{desc}}</view>
+    </view>
+</template>
+
+<script>
+    export default {
+        name: "page-head",
+        props: {
+            title: {
+                type: String,
+                default: ""
+            }
+        }
+    }
+</script>
diff --git a/examples/hello-uniapp/main.js b/examples/hello-uniapp/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..51bfbef377dcaa3b382c08df7860a6bf486ba190
--- /dev/null
+++ b/examples/hello-uniapp/main.js
@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import App from './App'
+
+import store from './store'
+
+Vue.config.productionTip = false
+
+Vue.prototype.$store = store
+
+App.mpType = 'app'
+
+const app = new Vue({
+    store,
+    ...App
+})
+app.$mount()
diff --git a/examples/hello-uniapp/manifest.json b/examples/hello-uniapp/manifest.json
new file mode 100644
index 0000000000000000000000000000000000000000..864d1b1c7ed02d47b9e4d51be84674f9cb896634
--- /dev/null
+++ b/examples/hello-uniapp/manifest.json
@@ -0,0 +1,19 @@
+{
+    "name": "demo",
+    "appid": "__uni123213213",
+    "description": "应用描述",
+    "icons": [{
+        "sizes": "分辨率，192x192",
+        "src": "图片路径"
+    }],
+    "versionName": "版本名称",
+    "versionCode": "版本号",
+    "app-plus": { // 5+App特有相关
+    },
+    "quickapp": { // 快应用特有相关
+
+    },
+    "mp-weixin": { // 小程序特有相关
+
+    }
+}
diff --git a/examples/hello-uniapp/pages.json b/examples/hello-uniapp/pages.json
new file mode 100644
index 0000000000000000000000000000000000000000..daff68c462c1a776b39a567a27bda25e1fdd4343
--- /dev/null
+++ b/examples/hello-uniapp/pages.json
@@ -0,0 +1,454 @@
+{
+    "pages": [
+        {
+            "path": "pages/component/index",
+            "style": {
+                "navigationBarTitleText": "组件"
+            }
+        }, {
+            "path": "pages/API/index",
+            "style": {
+                "navigationBarTitleText": "接口"
+            }
+        },{
+            "path": "pages/template/index",
+            "style": {
+                "navigationBarTitleText": "模版"
+            }
+        }, {
+            "path": "pages/component/view/index",
+            "style": {
+                "navigationBarTitleText": "view"
+            }
+        }, {
+            "path": "pages/component/scroll-view/index",
+            "style": {
+                "navigationBarTitleText": "scroll-view"
+            }
+        }, {
+            "path": "pages/component/swiper/index",
+            "style": {
+                "navigationBarTitleText": "swiper"
+            }
+        }, {
+            "path": "pages/template/number-box/index",
+            "style": {
+                "navigationBarTitleText": "数字输入框"
+            }
+        }, {
+            "path": "pages/component/text/index",
+            "style": {
+                "navigationBarTitleText": "text"
+            }
+        },
+//         {
+//             "path": "pages/component/icon/index",
+//             "style": {
+//                 "navigationBarTitleText": "icon"
+//             }
+//         }, 
+        {
+            "path": "pages/component/progress/index",
+            "style": {
+                "navigationBarTitleText": "progress"
+            }
+        }, {
+            "path": "pages/component/button/index",
+            "style": {
+                "navigationBarTitleText": "button"
+            }
+        }, {
+            "path": "pages/component/checkbox/index",
+            "style": {
+                "navigationBarTitleText": "checkbox"
+            }
+        }, {
+            "path": "pages/component/form/index",
+            "style": {
+                "navigationBarTitleText": "form"
+            }
+        }, {
+            "path": "pages/component/input/index",
+            "style": {
+                "navigationBarTitleText": "input"
+            }
+        }, {
+            "path": "pages/component/label/index",
+            "style": {
+                "navigationBarTitleText": "label"
+            }
+        }, {
+            "path": "pages/component/picker/index",
+            "style": {
+                "navigationBarTitleText": "picker"
+            }
+        }, {
+            "path": "pages/component/radio/index",
+            "style": {
+                "navigationBarTitleText": "radio"
+            }
+        }, {
+            "path": "pages/component/slider/index",
+            "style": {
+                "navigationBarTitleText": "slider"
+            }
+        }, {
+            "path": "pages/component/switch/index",
+            "style": {
+                "navigationBarTitleText": "switch"
+            }
+        }, {
+            "path": "pages/component/textarea/index",
+            "style": {
+                "navigationBarTitleText": "textarea"
+            }
+        }, {
+            "path": "pages/component/navigator/index",
+            "style": {
+                "navigationBarTitleText": "navigator"
+            }
+        }, {
+            "path": "pages/component/navigator/navigate",
+            "style": {
+                "navigationBarTitleText": "navigatePage"
+            }
+        }, {
+            "path": "pages/component/navigator/redirect",
+            "style": {
+                "navigationBarTitleText": "redirectPage"
+            }
+        }, {
+            "path": "pages/component/image/index",
+            "style": {
+                "navigationBarTitleText": "image"
+            }
+        }, {
+            "path": "pages/component/audio/index",
+            "style": {
+                "navigationBarTitleText": "audio"
+            }
+        }, {
+            "path": "pages/component/video/index",
+            "style": {
+                "navigationBarTitleText": "video"
+            }
+        }, {
+            "path": "pages/component/map/index",
+            "style": {
+                "navigationBarTitleText": "map"
+            }
+        }, {
+            "path": "pages/component/canvas/index",
+            "style": {
+                "navigationBarTitleText": "canvas"
+            }
+        }, {
+            "path": "pages/API/login/index",
+            "style": {
+                "navigationBarTitleText": "微信登录"
+            }
+        }, {
+            "path": "pages/API/get-user-info/index",
+            "style": {
+                "navigationBarTitleText": "获取用户信息"
+            }
+        }, {
+            "path": "pages/API/request-payment/index",
+            "style": {
+                "navigationBarTitleText": "发起支付"
+            }
+        }, {
+            "path": "platforms/app-plus/share/index",
+            "style": {
+                "navigationBarTitleText": "分享"
+            }
+        }, {
+            "path": "platforms/mp-weixin/custom-message/index",
+            "style": {
+                "navigationBarTitleText": "客服消息"
+            }
+        }, {
+            "path": "platforms/mp-weixin/template-message/index",
+            "style": {
+                "navigationBarTitleText": "模板消息"
+            }
+        }, {
+            "path": "pages/API/set-navigation-bar-title/index",
+            "style": {
+                "navigationBarTitleText": "设置界面标题"
+            }
+        }, {
+            "path": "pages/API/navigation-bar-loading/index",
+            "style": {
+                "navigationBarTitleText": "标题栏加载动画"
+            }
+        }, {
+            "path": "pages/API/navigator/index",
+            "style": {
+                "navigationBarTitleText": "页面跳转"
+            }
+        }, {
+            "path": "pages/API/pull-down-refresh/index",
+            "style": {
+                "navigationBarTitleText": "下拉刷新",
+                "enablePullDownRefresh": true
+            }
+        }, {
+            "path": "pages/API/animation/index",
+            "style": {
+                "navigationBarTitleText": "创建动画"
+            }
+        }, {
+            "path": "pages/API/canvas/index",
+            "style": {
+                "navigationBarTitleText": "创建绘画"
+            }
+        }, {
+            "path": "pages/API/action-sheet/index",
+            "style": {
+                "navigationBarTitleText": "操作菜单"
+            }
+        }, {
+            "path": "pages/API/modal/index",
+            "style": {
+                "navigationBarTitleText": "模态弹窗"
+            }
+        }, {
+            "path": "pages/API/toast/index",
+            "style": {
+                "navigationBarTitleText": "消息提示框"
+            }
+        }, {
+            "path": "pages/API/get-network-type/index",
+            "style": {
+                "navigationBarTitleText": "获取手机网络状态"
+            }
+        }, {
+            "path": "pages/API/get-system-info/index",
+            "style": {
+                "navigationBarTitleText": "获取手机系统信息"
+            }
+        }, {
+            "path": "pages/API/on-accelerometer-change/index",
+            "style": {
+                "navigationBarTitleText": "监听加速度计数据"
+            }
+        },{
+            "path": "pages/API/on-accelerometer-change/shake",
+            "style": {
+                "navigationBarTitleText": "摇一摇"
+            }
+        }, {
+            "path": "pages/API/on-compass-change/index",
+            "style": {
+                "navigationBarTitleText": "监听罗盘数据"
+            }
+        }, {
+            "path": "pages/API/make-phone-call/index",
+            "style": {
+                "navigationBarTitleText": "打电话"
+            }
+        }, {
+            "path": "pages/API/scan-code/index",
+            "style": {
+                "navigationBarTitleText": "扫码"
+            }
+        }, {
+            "path": "pages/API/request/index",
+            "style": {
+                "navigationBarTitleText": "网络请求"
+            }
+        }, {
+            "path": "pages/API/upload-file/index",
+            "style": {
+                "navigationBarTitleText": "上传文件"
+            }
+        }, {
+            "path": "pages/API/download-file/index",
+            "style": {
+                "navigationBarTitleText": "下载文件"
+            }
+        }, {
+            "path": "pages/API/image/index",
+            "style": {
+                "navigationBarTitleText": "图片"
+            }
+        }, {
+            "path": "pages/API/voice/index",
+            "style": {
+                "navigationBarTitleText": "录音"
+            }
+        }, {
+            "path": "pages/API/background-audio/index",
+            "style": {
+                "navigationBarTitleText": "背景音频"
+            }
+        }, {
+            "path": "pages/API/file/index",
+            "style": {
+                "navigationBarTitleText": "文件"
+            }
+        }, {
+            "path": "pages/API/video/index",
+            "style": {
+                "navigationBarTitleText": "视频"
+            }
+        }, {
+            "path": "pages/API/get-location/index",
+            "style": {
+                "navigationBarTitleText": "获取位置"
+            }
+        }, {
+            "path": "pages/API/open-location/index",
+            "style": {
+                "navigationBarTitleText": "查看位置"
+            }
+        }, {
+            "path": "pages/API/choose-location/index",
+            "style": {
+                "navigationBarTitleText": "使用原生地图选择位置"
+            }
+        }, {
+            "path": "pages/API/storage/index",
+            "style": {
+                "navigationBarTitleText": "数据存储"
+            }
+        }, {
+            "path": "platforms/app-plus/speech/index",
+            "style": {
+                "navigationBarTitleText": "语音识别"
+            }
+        }, {
+            "path": "platforms/app-plus/orientation/index",
+            "style": {
+                "navigationBarTitleText": "方向传感器"
+            }
+        }, {
+            "path": "platforms/app-plus/proximity/index",
+            "style": {
+                "navigationBarTitleText": "距离传感器"
+            }
+        }, {
+            "path": "platforms/app-plus/push/index",
+            "style": {
+                "navigationBarTitleText": "推送"
+            }
+        }, {
+            "path": "pages/component/icon/index",
+            "style": {
+                "navigationBarTitleText": "icon"
+            }
+        }, {
+            "path": "pages/template/popup/index",
+            "style": {
+                "navigationBarTitleText": "popup"
+            }
+        }, {
+            "path": "pages/template/tabbar/index",
+            "style": {
+                "navigationBarTitleText": "tabbar"
+            }
+        }, {
+            "path": "pages/template/media-list/index",
+            "style": {
+                "navigationBarTitleText": "图文列表"
+            }
+        }, {
+            "path": "pages/template/grid/index",
+            "style": {
+                "navigationBarTitleText": "九宫格"
+            }
+        }, {
+            "path": "pages/template/drag-right/index",
+            "style": {
+                "navigationBarTitleText": "右滑菜单"
+            }
+        }, {
+            "path": "pages/template/drag-right-zoom/index",
+            "style": {
+                "navigationBarTitleText": "右滑菜单（缩放）"
+            }
+        }, {
+            "path": "pages/template/drag-left/index",
+            "style": {
+                "navigationBarTitleText": "左滑菜单"
+            }
+        }, {
+            "path": "pages/template/drag-left-zoom/index",
+            "style": {
+                "navigationBarTitleText": "左滑菜单（缩放）"
+            }
+        }, {
+            "path": "pages/template/badge/index",
+            "style": {
+                "navigationBarTitleText": "数字角标"
+            }
+        }, {
+            "path": "pages/template/accordion/index",
+            "style": {
+                "navigationBarTitleText": "折叠面板"
+            }
+        }, {
+            "path": "pages/template/cardview/index",
+            "style": {
+                "navigationBarTitleText": "卡片视图"
+            }
+        }, {
+            "path": "pages/template/list-with-badges/index",
+            "style": {
+                "navigationBarTitleText": "右侧带角标"
+            }
+        }, {
+            "path": "pages/template/list-with-collapses/index",
+            "style": {
+                "navigationBarTitleText": "二级列表"
+            }
+        }, {
+            "path": "pages/template/list-triplex-row/index",
+            "style": {
+                "navigationBarTitleText": "三行列表"
+            }
+        }, {
+            "path": "pages/template/list-to-detail/index",
+            "style": {
+                "navigationBarTitleText": "列表到详情的最佳实践",
+                "enablePullDownRefresh": true
+            }
+        }, {
+            "path": "pages/template/list-to-detail/detail",
+            "style": {
+                "navigationBarTitleText": "详情"
+            }
+        }
+    ],
+    "globalStyle": {
+        "navigationBarTextStyle": "black",
+        "navigationBarTitleText": "演示",
+        "navigationBarBackgroundColor": "#F8F8F8",
+        "backgroundColor": "#F8F8F8"
+    },
+    "tabBar": {
+        "color": "#7A7E83",
+        "selectedColor": "#007AFF",
+        "borderStyle": "black",
+        "backgroundColor": "#ffffff",
+        "list": [
+            {
+                "pagePath": "pages/component/index",
+                "iconPath": "static/component.png",
+                "selectedIconPath": "static/componentHL.png",
+                "text": "组件"
+            }, {
+                "pagePath": "pages/API/index",
+                "iconPath": "static/api.png",
+                "selectedIconPath": "static/apiHL.png",
+                "text": "接口"
+            }, {
+                "pagePath": "pages/template/index",
+                "iconPath": "static/template.png",
+                "selectedIconPath": "static/templateHL.png",
+                "text": "模版"
+            }
+        ]
+    }
+}
diff --git a/examples/hello-uniapp/pages/API/action-sheet/index.vue b/examples/hello-uniapp/pages/API/action-sheet/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7f5a84cc8ea5b5157f0e92e1e28aeb1e10974dff
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/action-sheet/index.vue
@@ -0,0 +1,35 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="btn-area">
+                <button type="default" @tap="actionSheetTap">弹出action sheet</button>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    export default {
+        data() {
+            return {
+                title: 'action-sheet'
+            }
+        },
+        methods: {
+            actionSheetTap() {
+                uni.showActionSheet({
+                    itemList: ['item1', 'item2', 'item3', 'item4'],
+                    success:(e) => {
+                        console.log(e.tapIndex)
+                    }
+                })
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
diff --git a/examples/hello-uniapp/pages/API/animation/index.vue b/examples/hello-uniapp/pages/API/animation/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..58dd27b934da9ee2b6b473ad2c841d72c477bdcc
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/animation/index.vue
@@ -0,0 +1,133 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="animation-element-wrapper">
+                    <view class="animation-element" :animation="animationData"></view>
+                </view>
+                <scroll-view class="animation-buttons" scroll-y="true">
+                    <button class="animation-button" @tap="rotate">旋转</button>
+                    <button class="animation-button" @tap="scale">缩放</button>
+                    <button class="animation-button" @tap="translate">移动</button>
+                    <button class="animation-button" @tap="skew">倾斜</button>
+                    <button class="animation-button" @tap="rotateAndScale">旋转并缩放</button>
+                    <button class="animation-button" @tap="rotateThenScale">旋转后缩放</button>
+                    <button class="animation-button" @tap="all">同时展示全部</button>
+                    <button class="animation-button" @tap="allInQueue">顺序展示全部</button>
+                    <button class="animation-button animation-button-reset" @tap="reset">还原</button>
+                </scroll-view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'createAnimation',
+                animationData: ''
+            }
+        },
+        onReady: function () {
+            this.animation = uni.createAnimation()
+        },
+        methods: {
+            rotate: function () {
+                this.animation.rotate(Math.random() * 720 - 360).step()
+                this.animationData = this.animation.export()
+            },
+            scale: function () {
+                this.animation.scale(Math.random() * 2).step()
+                this.animationData = this.animation.export()
+            },
+            translate: function () {
+                this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
+                this.animationData = this.animation.export()
+            },
+            skew: function () {
+                this.animation.skew(Math.random() * 90, Math.random() * 90).step()
+                this.animationData = this.animation.export()
+            },
+            rotateAndScale: function () {
+                this.animation.rotate(Math.random() * 720 - 360)
+                    .scale(Math.random() * 2)
+                    .step()
+                this.animationData = this.animation.export()
+            },
+            rotateThenScale: function () {
+                this.animation.rotate(Math.random() * 720 - 360).step()
+                    .scale(Math.random() * 2).step()
+                this.animationData = 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.animationData = 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.animationData = this.animation.export()
+            },
+            reset: function () {
+                this.animation.rotate(0, 0)
+                    .scale(1)
+                    .translate(0, 0)
+                    .skew(0, 0)
+                    .step({
+                        duration: 0
+                    })
+                this.animationData = this.animation.export()
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    .animation-element-wrapper {
+        display: flex;
+        width: 100%;
+        padding-top: 150rpx;
+        padding-bottom: 150rpx;
+        justify-content: center;
+        overflow: hidden;
+        background-color: #ffffff;
+    }
+
+    .animation-element {
+        width: 200rpx;
+        height: 200rpx;
+        background-color: #1AAD19;
+    }
+
+    .animation-buttons {
+        padding: 30rpx 50rpx 10rpx;
+        width: 100%;
+        height: 360rpx;
+        box-sizing: border-box;
+    }
+
+    .animation-button {
+        float: left;
+        line-height: 2;
+        width: 300rpx;
+        margin: 15rpx 12rpx;
+    }
+
+    .animation-button-reset {
+        width: 620rpx;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/background-audio/index.vue b/examples/hello-uniapp/pages/API/background-audio/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..864ca26252c43bdf7ec52db315953a8ed36cd0e5
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/background-audio/index.vue
@@ -0,0 +1,152 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-section">
+            <view class="page-body-info">
+                <text class="time-big">{{formatedPlayTime}}</text>
+                <slider class="slider" min="0" max="46" step="1" :value="playTime" @change="seek"></slider>
+                <view class="play-time">
+                    <text>00:00</text>
+                    <text>00:46</text>
+                </view>
+            </view>
+            <view class="page-body-text">注意：离开当前页面后背景音乐将保持播放，但退出uni-app将停止</view>
+            <view class="page-body-buttons">
+                <block v-if="playing === true">
+                    <view class="page-body-button" @tap="stop">
+                        <image src="../../../static/stop.png"></image>
+                    </view>
+                    <view class="page-body-button" @tap="pause">
+                        <image src="../../../static/pause.png"></image>
+                    </view>
+                </block>
+                <block v-if="playing === false">
+                    <view class="page-body-button"></view>
+                    <view class="page-body-button" @tap="play">
+                        <image src="../../../static/play.png"></image>
+                    </view>
+                </block>
+                <view class="page-body-button"></view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    var util = require('../../../common/util.js')
+    export default {
+        data() {
+            return {
+                title: 'backgroundAudio',
+                bgAudioMannager:null,
+                dataUrl:'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/friendship.mp3',
+                playing: false,
+                playTime: 0,
+                formatedPlayTime: '00:00:00'
+            }
+        },
+        onLoad: function () {
+            const bgAudioMannager = uni.getBackgroundAudioManager();
+            bgAudioMannager.title = '友谊地久天长';
+            bgAudioMannager.singer  = '群星';
+            bgAudioMannager.coverImgUrl = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/friendship.jpg';
+            
+            bgAudioMannager.onPlay(()=>{
+                console.log("开始播放");
+                this.playing = true;
+            })
+            bgAudioMannager.onPause(()=>{
+                console.log("暂停播放");
+                this.playing = false;
+            })
+            bgAudioMannager.onEnded(()=>{
+                this.playing = false;
+                this.playTime = 0;
+                this.formatedPlayTime = util.formatTime(0);
+            })
+            
+            bgAudioMannager.onTimeUpdate((e)=>{
+                if(Math.floor(this.bgAudioMannager.currentTime) > Math.floor(this.playTime)){
+                    this.formatedPlayTime = util.formatTime(Math.floor(this.bgAudioMannager.currentTime));
+                }
+                this.playTime = this.bgAudioMannager.currentTime;
+            })
+            
+            this.bgAudioMannager = bgAudioMannager;
+        },
+        methods: {
+            play: function (res) {
+                if(!this.bgAudioMannager.src){
+                    this.bgAudioMannager.startTime = this.playTime;
+                    this.bgAudioMannager.src = this.dataUrl;
+                }else{
+                    this.bgAudioMannager.seek(this.playTime);
+                    this.bgAudioMannager.play();
+                }
+            },
+            seek: function (e) {
+                this.bgAudioMannager.seek(e.target.value);
+            },
+            pause: function () {
+                this.bgAudioMannager.pause();
+            },
+            stop: function () {
+                this.bgAudioMannager.stop();
+                this.playing = false;
+                this.playTime = 0;
+                this.formatedPlayTime = util.formatTime(0);
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    image {
+        width: 150rpx;
+        height: 150rpx;
+    }
+    .page-body-text{
+        padding: 0 30rpx;
+    }
+    .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;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/canvas/index.vue b/examples/hello-uniapp/pages/API/canvas/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..54a9992275d2e183f55e14aea71bbff16a9ccf09
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/canvas/index.vue
@@ -0,0 +1,356 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <canvas class="canvas-element" canvas-id="canvas"></canvas>
+                <scroll-view class="canvas-buttons" scroll-y="true">
+                    <block v-for="(name,index) in names" :key="name">
+                        <button class="canvas-button" @tap="handleCanvasButton(name)">{{name}}</button>
+                    </block>
+                    <button class="canvas-button" @tap="toTempFilePath" type="primary">toTempFilePath</button>
+                </scroll-view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    var context = null
+    export default {
+        data() {
+            return {
+                title: 'createContext',
+                names: ["rotate", "scale", "reset", "translate", "save", "restore", "drawImage", "fillText", "fill",
+                    "stroke", "clearRect", "beginPath", "closePath", "moveTo", "lineTo", "rect", "arc",
+                    "quadraticCurveTo", "bezierCurveTo", "setFillStyle", "setStrokeStyle", "setGlobalAlpha",
+                    "setShadow", "setFontSize", "setLineCap", "setLineJoin", "setLineWidth", "setMiterLimit"
+                ]
+            }
+        },
+        onReady: function () {
+            context = uni.createCanvasContext('canvas')
+        },
+        methods: {
+            handleCanvasButton:function(name){
+              this[name]()  
+            },
+            rotate: function () {
+                context.beginPath()
+                context.rotate(10 * Math.PI / 180)
+                context.rect(225, 75, 20, 10)
+                context.fill()
+                context.draw()
+            },
+            scale: function () {
+                context.beginPath()
+                context.rect(25, 25, 50, 50)
+                context.stroke()
+
+                context.scale(2, 2)
+
+                context.beginPath()
+                context.rect(25, 25, 50, 50)
+                context.stroke()
+                context.draw()
+            },
+            reset: function () {
+                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)
+                context.draw()
+            },
+            translate: function () {
+                context.beginPath()
+                context.rect(10, 10, 100, 50)
+                context.fill()
+
+                context.translate(70, 70)
+
+                context.beginPath()
+                context.fill()
+                context.draw()
+            },
+            save: function () {
+                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()
+                context.draw()
+            },
+            restore: function () {
+                [3, 2, 1].forEach(function (item) {
+                    context.beginPath()
+                    context.save()
+                    context.scale(item, item)
+                    context.rect(10, 10, 100, 100)
+                    context.stroke()
+                    context.restore()
+                    context.draw()
+                })
+            },
+            drawImage: function () {
+                context.drawImage('/static/wechat.png', 0, 0)
+                context.draw()
+            },
+            fillText: function () {
+                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()
+                context.draw()
+            },
+            fill: function () {
+                context.beginPath()
+                context.rect(20, 20, 150, 100)
+                context.setStrokeStyle('#00ff00')
+                context.fill()
+                context.draw()
+            },
+            stroke: function () {
+                context.beginPath()
+                context.moveTo(20, 20)
+                context.lineTo(20, 100)
+                context.lineTo(70, 100)
+                context.setStrokeStyle('#00ff00')
+                context.stroke()
+                context.draw()
+            },
+            clearRect: function () {
+                context.setFillStyle('#ff0000')
+                context.beginPath()
+                context.rect(0, 0, 300, 150)
+                context.fill()
+                context.clearRect(20, 20, 100, 50)
+                context.draw()
+            },
+            beginPath: function () {
+                context.beginPath()
+                context.setLineWidth(5)
+                context.setStrokeStyle('#ff0000')
+                context.moveTo(0, 75)
+                context.lineTo(250, 75)
+                context.stroke()
+                context.draw()
+
+                context.beginPath()
+                context.setStrokeStyle('#0000ff')
+                context.moveTo(50, 0)
+                context.lineTo(150, 130)
+                context.stroke()
+                context.draw()
+            },
+            closePath: function () {
+                context.beginPath()
+                context.moveTo(20, 20)
+                context.lineTo(20, 100)
+                context.lineTo(70, 100)
+                context.closePath()
+                context.stroke()
+                context.draw()
+            },
+            moveTo: function () {
+                context.beginPath()
+                context.moveTo(0, 0)
+                context.lineTo(300, 150)
+                context.stroke()
+                context.draw()
+            },
+            lineTo: function () {
+                context.beginPath()
+                context.moveTo(20, 20)
+                context.lineTo(20, 100)
+                context.lineTo(70, 100)
+                context.stroke()
+                context.draw()
+            },
+            rect: function () {
+                context.beginPath()
+                context.rect(20, 20, 150, 100)
+                context.stroke()
+                context.draw()
+            },
+            arc: function () {
+                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()
+                context.draw()
+            },
+            quadraticCurveTo: function () {
+                context.beginPath()
+                context.moveTo(20, 20)
+                context.quadraticCurveTo(20, 100, 200, 20)
+                context.stroke()
+                context.draw()
+            },
+            bezierCurveTo: function () {
+                context.beginPath()
+                context.moveTo(20, 20)
+                context.bezierCurveTo(20, 100, 200, 100, 200, 20)
+                context.stroke()
+                context.draw()
+            },
+            setFillStyle: function () {
+                ['#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()
+                    context.draw()
+                })
+            },
+            setStrokeStyle: function () {
+                ['#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()
+                    context.draw()
+                })
+            },
+            setGlobalAlpha: function () {
+                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()
+                    context.draw()
+                })
+            },
+            setShadow: function () {
+                context.beginPath()
+                context.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)')
+                context.rect(10, 10, 100, 100)
+                context.fill()
+                context.draw()
+            },
+            setFontSize: function () {
+                [10, 20, 30, 40].forEach(function (item, index) {
+                    context.setFontSize(item)
+                    context.fillText('Hello, world', 20, 20 + 40 * index)
+                    context.draw()
+                })
+            },
+            setLineCap: function () {
+                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()
+                    context.draw()
+                })
+            },
+            setLineJoin: function () {
+                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()
+                    context.draw()
+                })
+            },
+            setLineWidth: function () {
+                [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()
+                    context.draw()
+                })
+            },
+            setMiterLimit: function () {
+                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()
+                    context.draw()
+                })
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    .canvas-element-wrapper {
+        display: block;
+        margin-bottom: 100rpx;
+    }
+
+    .canvas-element {
+        width: 100%;
+        height: 500rpx;
+        background-color: #ffffff;
+    }
+
+    .canvas-buttons {
+        padding: 30rpx 50rpx 10rpx;
+        width: 100%;
+        height: 360rpx;
+        box-sizing: border-box;
+    }
+
+    .canvas-button {
+        float: left;
+        line-height: 2;
+        width: 300rpx;
+        margin: 15rpx 12rpx;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/choose-location/index.vue b/examples/hello-uniapp/pages/API/choose-location/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..19b0d2f8516a28c8cabc72b0a65a429a4fa6372b
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/choose-location/index.vue
@@ -0,0 +1,74 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="page-body-info">
+                    <text class="page-body-text-small">当前位置信息</text>
+                    <block v-if="hasLocation === false">
+                        <text class="page-body-text">未选择位置</text>
+                    </block>
+                    <block v-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 class="btn-chooselocation" @tap="chooseLocation">选择位置</button>
+                    <button @tap="clear">清空</button>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    var util = require('../../../common/util.js')
+    var formatLocation = util.formatLocation
+    export default {
+        data() {
+            return {
+                title: 'chooseLocation',
+                hasLocation: false,
+                location:{},
+                locationAddress:''
+            }
+        },
+        methods: {
+            chooseLocation: function () {
+                var that = this
+                uni.chooseLocation({
+                    success: function (res) {
+                        console.log('.......' + res)
+                        that.hasLocation = true,
+                        that.location = formatLocation(res.longitude, res.latitude),
+                        that.locationAddress = res.address
+                    }
+                })
+            },
+            clear: function () {
+                this.hasLocation = false
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    .page-body-info {
+        padding-bottom: 0;
+        height: 440rpx;
+    }
+    .btn-chooselocation{
+        background-color:#007aff;
+        color: #ffffff;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/download-file/index.vue b/examples/hello-uniapp/pages/API/download-file/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..042789e188c239bef6d4f89c81cce09b0845908d
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/download-file/index.vue
@@ -0,0 +1,67 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <image v-if="imageSrc" :src="imageSrc" mode="center" />
+            <block v-else>
+                <view class="page-body-wording">
+                    <text class="page-body-text">
+                        点击按钮下载服务端示例图片
+                    </text>
+                </view>
+                <view class="btn-area">
+                    <button @tap="downloadImage">下载</button>
+                </view>
+            </block>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'downloadFile',
+                imageSrc: ''
+            }
+        },
+        onUnload(){
+          this.imageSrc = '';  
+        },
+        methods: {
+            downloadImage: function () {
+                var self = this
+                uni.downloadFile({
+                    url: "https://img-cdn-qiniu.dcloud.net.cn/newpage/images/uni@2x.png",
+                    success: function (res) {
+                        console.log('downloadFile success, res is', res)
+                        self.imageSrc = res.tempFilePath
+                    },
+                    fail: function ({
+                        errMsg
+                    }) {
+                        console.log('downloadFile fail, err is:', errMsg)
+                    }
+                })
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    .page-body image {
+        width: 600rpx;
+        height: 600rpx;
+
+        margin: 0 75rpx;
+    }
+    button{
+    	background-color:#007aff;
+    	color: #ffffff;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/file/index.vue b/examples/hello-uniapp/pages/API/file/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8abae7adc0cbaeec7cb5e1df0486c9ad43451084
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/file/index.vue
@@ -0,0 +1,123 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="page-body-info">
+                    <block v-if="tempFilePath != ''">
+                        <image :src="tempFilePath" class="image" mode="aspectFit"></image>
+                    </block>
+                    <block v-if="tempFilePath === '' && savedFilePath != ''">
+                        <image :src="savedFilePath" class="image" mode="aspectFit"></image>
+                    </block>
+                    <block v-if="tempFilePath === '' && savedFilePath === ''">
+                        <view class="image-plus image-plus-nb" @tap="chooseImage">
+                            <view class="image-plus-horizontal"></view>
+                            <view class="image-plus-vertical"></view>
+                        </view>
+                        <view class="image-plus-text">请选择文件</view>
+                    </block>
+                </view>
+                <view class="btn-area">
+                    <button class="btn-savefile" @tap="saveFile">保存文件</button>
+                    <button @tap="clear">删除文件</button>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'saveFile',
+                tempFilePath: '',
+                savedFilePath: ''
+            }
+        },
+        onLoad: function () {
+            this.savedFilePath = uni.getStorageSync('savedFilePath')
+        },
+        methods: {
+            chooseImage: function () {
+                var that = this
+                uni.chooseImage({
+                    count: 1,
+                    success: function (res) {
+                        that.tempFilePath = res.tempFilePaths[0]
+                    }
+                })
+            },
+            saveFile: function () {
+                if (this.tempFilePath.length > 0) {
+                    var that = this
+                    uni.saveFile({
+                        tempFilePath: this.tempFilePath,
+                        success: function (res) {
+                            that.savedFilePath = res.savedFilePath
+                            uni.setStorageSync('savedFilePath', res.savedFilePath)
+                            uni.showModal({
+                                title: '保存成功',
+                                content: '下次进入应用时，此文件仍可用',
+                                success: function (res) {
+                                    if (res.confirm) {
+                                        console.log('用户点击确定')
+                                    } else if (res.cancel) {
+                                        console.log('用户点击取消')
+                                    }
+                                }
+                            })
+                        },
+                        fail: function (res) {
+                            uni.showModal({
+                                title: '保存失败',
+                                content: '应该是有 bug 吧',
+                                success: function (res) {
+                                    if (res.confirm) {
+                                        console.log('用户点击确定')
+                                    } else if (res.cancel) {
+                                        console.log('用户点击取消')
+                                    }
+                                }
+                            })
+                        }
+                    })
+                }
+            },
+            clear: function () {
+                uni.setStorageSync('savedFilePath', '')
+                this.tempFilePath = '',
+                    this.savedFilePath = ''
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    .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;
+    }
+    .btn-savefile{
+        background-color:#007aff;
+        color: #ffffff;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/get-location/index.vue b/examples/hello-uniapp/pages/API/get-location/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c82fcb26a30b5a43107e43f3bfdc9863521da835
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/get-location/index.vue
@@ -0,0 +1,85 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="page-body-info">
+                    <text class="page-body-text-small">当前位置经纬度</text>
+                    <block v-if="hasLocation === false">
+                        <text class="page-body-text">未获取</text>
+                    </block>
+                    <block v-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="btn-area">
+                    <button class="btn-getlocation" @tap="getLocation">获取位置</button>
+                    <button @tap="clear">清空</button>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    var util = require('../../../common/util.js')
+    var formatLocation = util.formatLocation
+    export default {
+        data() {
+            return {
+                title: 'getLocation',
+                hasLocation: false,
+                location:{}
+            }
+        },
+        methods: {
+            getLocation: function () {
+                var that = this
+                uni.getLocation({
+                    success: function (res) {
+                        that.hasLocation = true,
+                        that.location = formatLocation(res.longitude, res.latitude)
+                    }
+                })
+            },
+            clear: function () {
+                this.hasLocation = false
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    .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;
+    }
+    
+    .btn-getlocation{
+        background-color:#007aff;
+        color: #ffffff;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/get-network-type/index.vue b/examples/hello-uniapp/pages/API/get-network-type/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..56088527734a76e855f964ec20ece1a68884a78b
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/get-network-type/index.vue
@@ -0,0 +1,70 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="page-body-info">
+                    <view class="page-body-title">网络状态</view>
+                    <block v-if="hasNetworkType === false">
+                        <text class="page-body-text">未获取</text>
+                        <text class="page-body-text">点击绿色按钮可获取网络状态</text>
+                    </block>
+                    <block v-if="hasNetworkType === true">
+                        <text class="page-body-text-network-type">{{networkType}}</text>
+                    </block>
+                </view>
+                <view class="btn-area">
+                    <button class="btn-load" @tap="getNetworkType">获取手机网络状态</button>
+                    <button @tap="clear">清空</button>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'getNetworkType',
+                hasNetworkType: false,
+                networkType: ''
+            }
+        },
+        methods: {
+            getNetworkType: function () {
+                uni.getNetworkType({
+                    success: (res) => {
+                        console.log(res)
+                        this.hasNetworkType = true,this.networkType = res.subtype || res.networkType
+                    }
+                })
+            },
+            clear: function () {
+                this.hasNetworkType = false,
+                this.networkType = ''
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    .page-body-info {
+        height: 200rpx;
+    }
+
+    .page-body-text-network-type {
+        font-size: 80rpx;
+        font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
+    }
+    .btn-load{
+    	background-color:#007aff;
+    	color: #ffffff;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/get-system-info/index.vue b/examples/hello-uniapp/pages/API/get-system-info/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ebceba2fb9d9cc2d6e48cf233a9d7fe3a2cb6e0c
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/get-system-info/index.vue
@@ -0,0 +1,98 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <view style="padding-left: 30rpx;">
+                            <view class="uni-label">手机型号</view>
+                        </view>
+                        <view class="uni-list-cell-db">
+                            <input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.model"></input>
+                        </view>
+                    </view>
+                    <view class="uni-list-cell">
+                        <view style="padding-left: 30rpx;">
+                            <view class="uni-label">语言</view>
+                        </view>
+                        <view class="uni-list-cell-db">
+                            <input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.language"></input>
+                        </view>
+                    </view>
+                    <view class="uni-list-cell">
+                        <view style="padding-left: 30rpx;">
+                            <view class="uni-label">版本</view>
+                        </view>
+                        <view class="uni-list-cell-db">
+                            <input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.version"></input>
+                        </view>
+                    </view>
+                    <view class="uni-list-cell">
+                        <view style="padding-left: 30rpx;">
+                            <view class="uni-label">屏幕宽度</view>
+                        </view>
+                        <view class="uni-list-cell-db">
+                            <input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.windowWidth"></input>
+                        </view>
+                    </view>
+                    <view class="uni-list-cell">
+                        <view style="padding-left: 30rpx;">
+                            <view class="uni-label">屏幕高度</view>
+                        </view>
+                        <view class="uni-list-cell-db">
+                            <input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.windowHeight"></input>
+                        </view>
+                    </view>
+                    <view class="uni-list-cell">
+                        <view style="padding-left: 30rpx;">
+                            <view class="uni-label">DPI</view>
+                        </view>
+                        <view class="uni-list-cell-db">
+                            <input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.pixelRatio"></input>
+                        </view>
+                    </view>
+                </view>
+                <view class="btn-area">
+                    <button @tap="getSystemInfo">获取手机系统信息</button>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'getSystemInfo',
+                systemInfo: {}
+            }
+        },
+        methods: {
+            getSystemInfo: function () {
+                uni.getSystemInfo({
+                    success: (res) => {
+                        this.systemInfo = res
+                    }
+                })
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    button{
+        background-color:#007aff;
+        color: #ffffff;
+    }
+    .uni-label {
+    	width: 105px;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/get-user-info/index.vue b/examples/hello-uniapp/pages/API/get-user-info/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..46e6865faa529ad17d3c286f74a4510c68734b3e
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/get-user-info/index.vue
@@ -0,0 +1,101 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="page-body-info">
+                    <view class="page-body-title">用户信息</view>
+                    <block v-if="hasUserInfo === false">
+                        <text class="page-body-text">未获取</text>
+                        <text class="page-body-text">点击蓝色按钮可获取用户头像及昵称</text>
+                    </block>
+                    <block v-if="hasUserInfo === true">
+                        <image class="userinfo-avatar" :src="userInfo.avatarUrl"></image>
+                        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
+                    </block>
+                </view>
+                <view class="btn-area">
+                    <button class="userinfo-btn" @tap="getUserInfo">获取用户信息</button>
+                    <button @tap="clear">清空</button>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import {
+        mapState,
+        mapMutations
+    } from 'vuex'
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'getUserInfo',
+                hasUserInfo: false,
+                userInfo: {}
+            }
+        },
+        computed: {
+            ...mapState({
+                loginProvider:state => state.loginProvider
+            })
+        },
+        onLoad: function () {},
+        methods: {
+            getUserInfo(){//获取用户信息api在微信小程序可直接使用，在5+app里面需要先登录才能调用
+                uni.getUserInfo({
+                    provider:this.loginProvider,
+                    success: (e) => {
+                    	console.log("得到用户信息",e);
+                        this.hasUserInfo = true;
+                        this.userInfo = e.userInfo
+                    },
+                    fail:(e) => {
+                    	console.log("fail",e);
+                        let content = e.errMsg;
+                        if(~e.errMsg.indexOf("uni.login")){
+                           content = "请在登录页面完成登录操作"
+                        }
+                        uni.showModal({
+                            content:content,
+                            showCancel:false
+                        })
+                    }
+                })
+            },
+            clear: function () {
+                this.hasUserInfo = false,
+                this.userInfo = {}
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    .page-body-info {
+        padding-bottom: 0;
+        height: 230px;
+    }
+
+    .userinfo-avatar {
+        border-radius: 128rpx;
+        width: 128rpx;
+        height: 128rpx;
+    }
+
+    .userinfo-nickname {
+        margin-top: 20rpx;
+        font-size: 38rpx;
+    }
+    
+    .userinfo-btn{
+    	background-color:#007aff;
+    	color: #ffffff;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/image/index.vue b/examples/hello-uniapp/pages/API/image/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4aefa250f81d1affc9e85ae64c68168afa1ee1aa
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/image/index.vue
@@ -0,0 +1,145 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <form>
+                <view class="page-section">
+                    <view class="uni-list">
+                        <view class="uni-list-cell">
+                            <view class="uni-list-cell-left">
+                                <view class="uni-label">图片来源</view>
+                            </view>
+                            <view class="uni-list-cell-right">
+                                <picker :range="sourceType" @change="sourceTypeChange" :value="sourceTypeIndex" mode="selector">
+                                    <view class="uni-input">{{sourceType[sourceTypeIndex]}}</view>
+                                </picker>
+                            </view>
+                        </view>
+
+                        <view class="uni-list-cell">
+                            <view class="uni-list-cell-left">
+                                <view class="uni-label">图片质量</view>
+                            </view>
+                            <view class="uni-list-cell-right">
+                                <picker :range="sizeType" @change="sizeTypeChange" :value="sizeTypeIndex" mode="selector">
+                                    <view class="uni-input">{{sizeType[sizeTypeIndex]}}</view>
+                                </picker>
+                            </view>
+                        </view>
+                        <view class="uni-list-cell">
+                            <view class="uni-list-cell-left">
+                                <view class="uni-label">数量限制</view>
+                            </view>
+                            <view class="uni-list-cell-right">
+                                <picker :range="count" @change="countChange" :value="countIndex" mode="selector">
+                                    <view class="uni-input">{{count[countIndex]}}</view>
+                                </picker>
+                            </view>
+                        </view>
+                    </view>
+
+                    <view class="uni-list" style="margin-top: 50rpx;">
+                        <view class="uni-list-cell cell-pd">
+                            <view class="uni-uploader">
+                                <view class="uni-uploader-head">
+                                    <view class="uni-uploader-title">点击可预览选好的图片</view>
+                                    <view class="uni-uploader-info">{{imageList.length}}/{{count[countIndex]}}</view>
+                                </view>
+                                <view class="uni-uploader-body">
+                                    <view class="uni-uploader__files">
+                                        <block v-for="(image,index) in imageList" :key="index">
+                                            <view class="uni-uploader__file">
+                                                <image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
+                                            </view>
+                                        </block>
+                                    </view>
+                                    <view class="uni-uploader__input-box">
+                                        <view class="uni-uploader__input" @tap="chooseImage"></view>
+                                    </view>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+
+                </view>
+            </form>
+        </view>
+
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    var sourceType = [
+        ['camera'],
+        ['album'],
+        ['camera', 'album']
+    ]
+    var sizeType = [
+        ['compressed'],
+        ['original'],
+        ['compressed', 'original']
+    ]
+    export default {
+        data() {
+            return {
+                title: 'choose/previewImage',
+                imageList: [],
+                sourceTypeIndex: 2,
+                sourceType: ['拍照', '相册', '拍照或相册'],
+                sizeTypeIndex: 2,
+                sizeType: ['压缩', '原图', '压缩或原图'],
+                countIndex: 8,
+                count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
+            }
+        },
+        methods: {
+            sourceTypeChange: function (e) {
+                console.log('1....................' + JSON.stringify(sourceType));
+                this.sourceTypeIndex = e.target.value
+            },
+            sizeTypeChange: function (e) {
+                this.sizeTypeIndex = e.target.value
+            },
+            countChange: function (e) {
+                this.countIndex = e.target.value
+            },
+            chooseImage: function () {
+                var that = this
+                uni.chooseImage({
+                    sourceType: sourceType[that.sourceTypeIndex],
+                    sizeType: sizeType[that.sizeTypeIndex],
+                    count: that.count[that.countIndex],
+                    success: function (res) {
+                        console.log(res)
+                        that.imageList = res.tempFilePaths
+                    }
+                })
+            },
+            previewImage: function (e) {
+                var that = this;
+                var current = e.target.dataset.src
+                uni.previewImage({
+                    current: current,
+                    urls: that.imageList
+                })
+            }
+        },
+        components: {
+            pageHead
+
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    .uni-label {
+        width: 105px;
+    }
+
+    .cell-pd {
+        padding: 22rpx 30rpx;
+    }
+
+</style>
diff --git a/examples/hello-uniapp/pages/API/index.vue b/examples/hello-uniapp/pages/API/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7e0ed534b24c7638472834c368be29054f0d31ee
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/index.vue
@@ -0,0 +1,224 @@
+<template>
+    <view class="index">
+        <view class="index-hd">
+            <image class="index-logo" src="../../static/apiIndex.png"></image>
+            <view class="page-section-title" >以下将演示uni-app接口能力，具体属性参数详见uni-app开发文档。</view>
+        </view>
+        <view class="uni-card" v-for="(list,index) in lists" :key="index">
+        	<view class="uni-list"  >
+        		<view class="uni-list-cell uni-collapse">
+        			<view class="uni-list-cell-navigate uni-navigate-bottom" hover-class="uni-list-cell-hover" :class="list.open ? 'uni-active' : ''" @click="trigerCollapse(index)">
+        				{{list.name}}
+        			</view>
+        			<view class="uni-list uni-collapse"  :class="list.open ? 'uni-active' : ''">
+        				<view class="uni-list-cell" hover-class="uni-list-cell-hover"  v-for="(item,key) in list.pages" :key="key" :url="item.url" @click="goDetailPage(item.url)">
+        					<view class="uni-list-cell-navigate uni-navigate-right"> {{item.name}} </view>
+        				</view>
+        			</view>
+        		</view>
+        	</view>
+        </view>
+    </view>
+</template>
+<script>
+    export default {
+        data() {
+            let list = [{
+                id: 'api',
+                name: '开放接口',
+                open: false,
+                pages: [{
+                    name: '登录',
+                    url: 'login/index'
+                }, {
+                    name: '获取用户信息',
+                    url: 'get-user-info/index'
+                }, {
+                    name: '发起支付',
+                    url: 'request-payment/index'
+                }]
+            }, {
+                id: 'page',
+                name: '界面',
+                open: false,
+                pages: [{
+                    name: '设置界面标题',
+                    url: 'set-navigation-bar-title/index'
+                }, {
+                    name: '标题栏加载动画',
+                    url: 'navigation-bar-loading/index'
+                }, {
+                    name: '页面跳转',
+                    url: 'navigator/index'
+                }, {
+                    name: '下拉刷新',
+                    url: 'pull-down-refresh/index'
+                }, {
+                    name: '创建动画',
+                    url: 'animation/index'
+                }, {
+                    name: '创建绘画',
+                    url: 'canvas/index'
+                }, {
+                    name: '显示操作菜单',
+                    url: 'action-sheet/index'
+                }, {
+                    name: '显示模态弹窗',
+                    url: 'modal/index'
+                }, {
+                    name: '显示消息提示框',
+                    url: 'toast/index'
+                }]
+            }, {
+                id: 'device',
+                name: '设备',
+                open: false,
+                pages: [{
+                    name: '获取手机网络状态',
+                    url: 'get-network-type/index'
+                }, {
+                    name: '获取手机系统信息',
+                    url: 'get-system-info/index'
+                }, {
+                    name: '打电话',
+                    url: 'make-phone-call/index'
+                }, {
+                    name: '扫码',
+                    url: 'scan-code/index'
+                }, {
+                    name: '监听加速度传感器',
+                    url: 'on-accelerometer-change/index'
+                }, {
+                    name: '监听罗盘数据',
+                    url: 'on-compass-change/index'
+                }]
+            }, {
+                id: 'network',
+                name: '网络',
+                open: false,
+                pages: [{
+                        name: '发起一个请求',
+                        url: 'request/index'
+                    }, {
+                        name: '上传文件',
+                        url: 'upload-file/index'
+                    }, {
+                        name: '下载文件',
+                        url: 'download-file/index'
+                    }
+                ]
+            }, {
+                id: 'media',
+                name: '媒体',
+                open: false,
+                pages: [{
+                    name: '图片',
+                    url: 'image/index'
+                }, {
+                    name: '录音',
+                    url: 'voice/index'
+                }, {
+                    name: '背景音频',
+                    url: 'background-audio/index'
+                }, {
+                    name: '文件',
+                    url: 'file/index'
+                }, {
+                    name: '视频',
+                    url: 'video/index'
+                }]
+            }, {
+                id: 'location',
+                name: '位置',
+                open: false,
+                pages: [{
+                    name: '获取当前位置',
+                    url: 'get-location/index'
+                }, {
+                    name: '使用原生地图查看位置',
+                    url: 'open-location/index'
+                }, {
+                    name: '使用原生地图选择位置',
+                    url: 'choose-location/index'
+                }]
+            }, {
+                id: 'storage',
+                name: '数据',
+                open: false,
+                pages: [{
+                    name: '数据存储',
+                    url: 'storage/index'
+                }]
+            }]
+            //#ifdef MP-WEIXIN
+            let list0PushItem_WEIXIN = [{
+                name: '客服消息',
+                url: '/platforms/mp-weixin/custom-message/index'
+            }, {
+                name: '模板消息',
+                url: '/platforms/mp-weixin/template-message/index'
+            }]
+            list[0].pages.splice(list[0].pages.length, 0, ...list0PushItem_WEIXIN)
+            //#endif
+            
+            //#ifdef APP-PLUS
+            let list0PushItem = [{ name: '分享',url: '/platforms/app-plus/share/index'}]
+            list[0].pages.splice(list[0].pages.length, 0, ...list0PushItem)
+            let list2PushItem = [{name: '监听距离传感器',url: '/platforms/app-plus/proximity/index'},{name: '监听方向传感器',url: '/platforms/app-plus/orientation/index'}]
+            list[2].pages.splice(list[2].pages.length,0,...list2PushItem);
+            let plusItem = [{
+                id: 'speech',
+                name: '语音',
+                open: false,
+                pages: [{
+                    name: '语音识别',
+                    url: '/platforms/app-plus/speech/index'
+                }]
+            }, {
+                id: 'push',
+                name: '推送',
+                open:false,
+                pages:[{
+                    name: '推送',
+                    url: '/platforms/app-plus/push/index'
+                }]
+            }]
+            list.splice(list.length, 0, ...plusItem)
+            //#endif
+            return {
+                lists: list
+            }
+        },
+        methods: {
+            trigerCollapse(e){
+                for (let i = 0, len = this.lists.length; i < len; ++i) {
+                    if (e === i) {
+                        this.lists[i].open = !this.lists[i].open;
+                    } else {
+                        this.lists[i].open = false;
+                    }
+                }
+            },
+            goDetailPage(e){
+                let url = ~e.indexOf('platform') ? e :'/pages/API/' + e;
+                uni.navigateTo({
+                    url: url
+                })
+            }
+            
+        }
+    }
+</script>
+
+<style>
+    @import "../../common/uni.css";
+    .uni-card{
+    	box-shadow: none;
+    }
+    .uni-list:after{
+    	height: 0;
+    }
+    .uni-list:before{
+    	height: 0;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/login/index.vue b/examples/hello-uniapp/pages/API/login/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dd310cfa16418bc734ef7eb4945367fd75a5a679
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/login/index.vue
@@ -0,0 +1,112 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <block v-if="hasLogin === true">
+                    <text class="page-body-title">已登录</text>
+                    <text class="page-body-text">每个帐号仅需登录 1 次，后续每次进入页面即可自动拉取用户信息</text>
+                </block>
+                <block v-if="hasLogin === false">
+                    <text class="page-body-text">每个帐号仅需登录一次</text>
+                    <button class="page-body-button" v-for="(value,key) in providerList"  @tap="bindLogin(value)" :key="key">{{value.name}}</button>
+                </block>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import {
+        mapState,
+        mapMutations
+    } from 'vuex'
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'login',
+                providerList:[]
+            }
+        },
+        computed: {
+            ...mapState(['hasLogin'])
+        },
+        onLoad() {
+            uni.getProvider({
+                service:"oauth",
+                success: (e) => {
+                    this.providerList = e.provider.map((value) => {
+                        switch (value) {
+                            case 'weixin':
+                                return {name:'微信登录',id:value}
+                            case 'qq':
+                                return {name:'QQ登录',id:value}
+                            case 'sinaweibo':
+                                return {name:'新浪微博登录',id:value}
+                            case 'xiaomi':
+                                return {name:'小米登录',id:value}
+                        }
+                    })
+                },
+                fail:(e) => {
+                    console.log("获取登录通道失败",e);
+                }
+            });
+        },
+        methods: {
+            ...mapMutations(['login']),
+            bindLogin(e) {
+                uni.login({
+                    provider:e.id,
+                    success: (res) => {
+                        console.log("登录",res);
+                        this.login(e.id);//改变保存在store里的登录状态
+                    },
+                    fail:(e) => {
+                    	console.log("fail",e);
+                    }
+                })
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    .page-section {
+        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;
+        line-height: 200rpx;
+    }
+
+    .page-body-text {
+        color: #bbb;
+        font-size: 28rpx;
+        line-height: 40rpx;
+        margin: 0 0 100rpx 0;
+        text-align: center;
+    }
+
+    .page-body-button {
+        width: 100%;
+    }
+    
+    button{
+    	background-color:#007aff;
+    	color: #ffffff;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/make-phone-call/index.vue b/examples/hello-uniapp/pages/API/make-phone-call/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f52e6dd63e6b5cd64286e6ab30cd81aa0fc08a19
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/make-phone-call/index.vue
@@ -0,0 +1,80 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="desc">请在下方输入电话号码</view>
+                <input class="input" type="number" name="input" @input="bindInput" />
+                <view class="btn-area">
+                    <button  @tap="makePhoneCall" :disabled="disabled">拨打</button>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'makePhoneCall',
+                disabled: true
+            }
+        },
+        methods: {
+            bindInput: function (e) {
+                this.inputValue = e.target.value
+                if (this.inputValue.length > 0) {
+                    this.disabled = false
+                } else {
+                    this.disabled = true
+                }
+            },
+            makePhoneCall: function () {
+                var that = this
+                uni.makePhoneCall({
+                    phoneNumber: this.inputValue,
+                    success: function () {
+                        console.log("成功拨打电话")
+                    }
+                })
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    .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;
+    }
+    
+    button{
+    	background-color:#007aff;
+    	color: #ffffff;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/modal/index.vue b/examples/hello-uniapp/pages/API/modal/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d848d1d30edc8e7fe1d7e87f745153d8c50192ac
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/modal/index.vue
@@ -0,0 +1,46 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="btn-area">
+                <button type="default" @tap="modalTap">有标题的modal</button>
+                <button type="default" @tap="noTitlemodalTap">无标题的modal</button>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'modal',
+                modalHidden: true,
+                modalHidden2: true
+            }
+        },
+        methods: {
+            modalTap: function (e) {
+                uni.showModal({
+                    title: "弹窗标题",
+                    content: "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内",
+                    showCancel: false,
+                    confirmText: "确定"
+                })
+            },
+            noTitlemodalTap: function (e) {
+                uni.showModal({
+                    content: "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内",
+                    confirmText: "确定",
+                    cancelText: "取消"
+                })
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
diff --git a/examples/hello-uniapp/pages/API/navigation-bar-loading/index.vue b/examples/hello-uniapp/pages/API/navigation-bar-loading/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7f61c3094cd12a44bbd59e4a27a74eddf72c9201
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/navigation-bar-loading/index.vue
@@ -0,0 +1,42 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="btn-area">
+                <button class="btn-load" @tap="showNavigationBarLoading">显示加载动画</button>
+                <button @tap="hideNavigationBarLoading">隐藏加载动画</button>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'navigationBarLoading'
+            }
+        },
+        methods: {
+            showNavigationBarLoading: function () {
+                uni.showNavigationBarLoading()
+            },
+            hideNavigationBarLoading: function () {
+                uni.hideNavigationBarLoading()
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    .btn-load{
+    	background-color:#007aff;
+    	color: #ffffff;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/navigator/index.vue b/examples/hello-uniapp/pages/API/navigator/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b0833c68d8fc3f5abfa2a8aa95f15489f77e91e1
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/navigator/index.vue
@@ -0,0 +1,43 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="btn-area">
+                <button @tap="navigateTo">跳转新页面</button>
+                <button @tap="navigateBack">返回上一页</button>
+                <button @tap="redirectTo">在当前页面打开</button>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'navigateTo/Back, redirectTo'
+            }
+        },
+        methods: {
+            navigateTo: function () {
+                uni.navigateTo({
+                    url: 'index'
+                })
+            },
+            navigateBack: function () {
+                uni.navigateBack()
+            },
+            redirectTo: function () {
+                uni.redirectTo({
+                    url: 'index'
+                })
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
diff --git a/examples/hello-uniapp/pages/API/on-accelerometer-change/index.vue b/examples/hello-uniapp/pages/API/on-accelerometer-change/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..02d4b2d296d8a330cdb77b102ee230c58b581f7b
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/on-accelerometer-change/index.vue
@@ -0,0 +1,69 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="page-section-spacing" >
+                	<button class="shake" @tap="shake">摇一摇</button>
+                </view>
+                <view class="page-section-spacing">
+                    <button class="btn" @tap="watchAcce">监听设备的加速度变化</button>
+                    <button class="btn" @tap="stopAcce">停止监听设备的加速度变化</button>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-spacing">
+                    <textarea :value="value" style="height: 9em" />
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    export default {
+        data() {
+            return {
+                title: 'onAccelerometerChange',
+                value: ''
+            }
+        },
+        onUnload(){
+        	uni.stopAccelerometer();
+        },
+        methods: {
+            watchAcce() {
+                uni.onAccelerometerChange((res) => {
+                    this.value = "监听设备的加速度变化:\n" + "Z轴：" + res.x.toFixed(2) + "\nY轴：" + res.y.toFixed(2) + "\nZ轴：" + res.z.toFixed(2);
+                })
+            },
+            stopAcce() {
+                uni.stopAccelerometer()
+            },
+            shake(){
+              uni.navigateTo({
+              	url: 'shake'
+              })
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    .btn{
+    	background-color: #007aff;
+    	color: #ffffff;
+    }
+    .shake{
+        background-color: #FFCC33;
+        color: #ffffff;
+        margin-bottom: 50rpx;
+    }
+    textarea{
+    	border: 2rpx solid #7A7E83;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/on-accelerometer-change/shake.vue b/examples/hello-uniapp/pages/API/on-accelerometer-change/shake.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3180082f5f3963f7e49d505398e94e03a0f47f7a
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/on-accelerometer-change/shake.vue
@@ -0,0 +1,77 @@
+<template>
+    <view class="root" :style="{backgroundImage:'url('+img+')'}">
+      <view :class="[show ? 'up' : '','shake-up']">
+        <image mode="aspectFit" src="../../../static/shake/shakeup.png"></image>
+      </view>
+      <view :class="[show ? 'down' : '','shake-down']">
+        <image mode="aspectFit" src="../../../static/shake/shakedown.png"></image>
+      </view>
+    </view>
+</template>
+<script>
+
+    export default {
+        data() {
+            return {
+                img: '../../../static/shake/1.jpg',
+                show:false
+            }
+        },
+        onLoad: function () {
+          let music = uni.createInnerAudioContext();
+          music.src = '../../../static/shake/shake.wav';
+          
+          let index = 1,t =null;
+          uni.onAccelerometerChange((res) => {
+              if(Math.abs(res.x) + Math.abs(res.y) + Math.abs(res.z) > 20 && !this.show){
+                music.play();
+                setTimeout(()=>{
+                  index++;
+                  if(index > 4){
+                  	index = 1
+                  }
+                  this.img = '../../../static/shake/' + index + '.jpg';
+                },2000);
+                this.show = true;
+                if(t){
+                  clearTimeout(t);
+                }
+                t = setTimeout(() => {
+                  t = null;
+                  this.show = false;
+                },600)
+              }
+          })
+        },
+        onUnload(){
+          this.show = false;
+          uni.stopAccelerometer();
+        }
+    }
+</script>
+
+<style>
+   .root{
+     height: 100%;
+     display: flex;
+     flex-direction: column;
+     background-position: center center;
+     background-repeat:no-repeat;
+   } 
+   .shake-up,.shake-down{
+     height: 50%;
+     overflow: hidden;
+     transition:all .5s ease-in-out;
+     background: #333;
+   }
+   .up{
+     transform: translateY(-50%);
+   }
+   .down{
+     transform: translateY(50%);
+   }
+   image{
+     height: 100%;
+     width: 100%;
+   }
+</style>
diff --git a/examples/hello-uniapp/pages/API/on-compass-change/index.vue b/examples/hello-uniapp/pages/API/on-compass-change/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..aba30d3d3cd1685674110d6118d985e2848e48ac
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/on-compass-change/index.vue
@@ -0,0 +1,91 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section page-section_center">
+                <text class="page-body-text">旋转手机即可获取方位信息</text>
+                <view class="direction">
+                    <view class="bg-compass-line"></view>
+                    <image class="bg-compass" src="../../../static/compass.png" :style="'transform: rotate('+direction+'deg)'"></image>
+                    <view class="direction-value">
+                        <text>{{direction}}</text>
+                        <text class="direction-degree">o</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'onCompassChange',
+                direction: 0
+            }
+        },
+        onReady: function () {
+            var that = this
+            uni.onCompassChange(function (res) {
+                that.direction = parseInt(res.direction)
+            })
+        },
+        onUnload(){
+           uni.startCompass();
+           this.direction = 0;
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    .direction {
+        position: relative;
+        margin-top: 70rpx;
+        display: flex;
+        width: 540rpx;
+        height: 540rpx;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .direction-value {
+        position: relative;
+        font-size: 200rpx;
+        color: #353535;
+        line-height: 1;
+        z-index: 1;
+    }
+
+    .direction-degree {
+        position: absolute;
+        top: 0;
+        right: -40rpx;
+        font-size: 60rpx;
+    }
+
+    .bg-compass {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 540rpx;
+        height: 540rpx;
+        transition: .1s;
+    }
+
+    .bg-compass-line {
+        position: absolute;
+        left: 267rpx;
+        top: -10rpx;
+        width: 6rpx;
+        height: 56rpx;
+        background-color: #1AAD19;
+        border-radius: 999rpx;
+        z-index: 1;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/open-location/index.vue b/examples/hello-uniapp/pages/API/open-location/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..85914ce50990af2c7041784326f457e8e6391a07
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/open-location/index.vue
@@ -0,0 +1,106 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <form @submit="openLocation">
+                    <view class="uni-list">
+                        <view class="uni-list-cell">
+                            <view class="uni-list-cell-left">
+                                <view class="uni-label">经度</view>
+                            </view>
+                            <view class="uni-list-cell-db">
+                                <input class="uni-input" type="text" :disabled="true" value="116.39742" name="longitude"></input>
+                            </view>
+                        </view>
+                        <view class="uni-list-cell">
+                            <view class="uni-list-cell-left">
+                                <view class="uni-label">纬度</view>
+                            </view>
+                            <view class="uni-list-cell-db">
+                                <input class="uni-input" type="text" :disabled="true" value="39.909" name="latitude"></input>
+                            </view>
+                        </view>
+                        <view class="uni-list-cell">
+                            <view class="uni-list-cell-left">
+                                <view class="uni-label">位置名称</view>
+                            </view>
+                            <view class="uni-list-cell-db">
+                                <input class="uni-input" type="text" :disabled="true" value="天安门" name="name"></input>
+                            </view>
+                        </view>
+                        <view class="uni-list-cell">
+                            <view class="uni-list-cell-left">
+                                <view class="uni-label">详细位置</view>
+                            </view>
+                            <view class="uni-list-cell-db">
+                                <input class="uni-input" type="text" :disabled="true" value="北京市东城区东长安街" name="address"></input>
+                            </view>
+                        </view>
+                    </view>
+                    <view class="btn-area">
+                        <button formType="submit">查看位置</button>
+                    </view>
+                </form>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'openLocation'
+            }
+        },
+        methods: {
+            openLocation: function (e) {
+                console.log(e)
+                var value = e.target.value
+                console.log(value)
+                uni.openLocation({
+                    longitude: Number(value.longitude),
+                    latitude: Number(value.latitude),
+                    name: value.name,
+                    address: value.address
+                })
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    .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;
+    }
+    .uni-list-cell-left{
+        padding: 0 30rpx;
+    }
+    button{
+    	background-color:#007aff;
+    	color: #ffffff;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/pull-down-refresh/index.vue b/examples/hello-uniapp/pages/API/pull-down-refresh/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b0657c32e0c286f755210360f2f7e27a39d8aa79
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/pull-down-refresh/index.vue
@@ -0,0 +1,58 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="page-body-info">
+                    <text class="page-body-text">下滑页面即可刷新</text>
+                </view>
+                <view class="btn-area">
+                    <button @tap="stopPullDownRefresh">停止刷新</button>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'on/stopPullDownRefresh'
+            }
+        },
+        methods: {
+            onPullDownRefresh: function () {
+                uni.showToast({
+                    title: 'loading...',
+                    icon: 'loading'
+                })
+                console.log('onPullDownRefresh', new Date())
+            },
+            stopPullDownRefresh: function () {
+                uni.stopPullDownRefresh({
+                    complete: function (res) {
+                        uni.hideToast()
+                        console.log(res, new Date())
+                    }
+                })
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    .page-body-info {
+        background-color: transparent;
+    }
+
+    .btn-area {
+        margin-top: 300rpx;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/request-payment/index.vue b/examples/hello-uniapp/pages/API/request-payment/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..503190982d299c132e5d2b6c230e1be3230c47c8
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/request-payment/index.vue
@@ -0,0 +1,139 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view>支付金额</view>
+                <view class="price">0.01</view>
+                <view class="desc">实际应用中可自定义金额</view>
+                <view class="btn-area">
+                    <button v-for="(item,index) in providerList" :key="index" @tap="requestPayment(item,index)" :loading="item.loading">{{item.name}}支付</button>
+                </view>
+            </view>
+        </view>
+
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    export default {
+        data() {
+            return {
+                title: 'request-payment',
+                providerList: []
+            }
+        },
+        onLoad: function () {
+            uni.getProvider({
+                service: "payment",
+                success: (e) => {
+                    console.log("payment success", e);
+                    this.providerList = e.provider.map((value) => {
+                        switch (value) {
+                            case 'alipay':
+                                return {
+                                    name: '支付宝',
+                                    id: value,
+                                    loading: false
+                                }
+                            case 'wxpay':
+                                return {
+                                    name: '微信',
+                                    id: value,
+                                    loading: false
+                                }
+                        }
+                    })
+                },
+                fail: (e) => {
+                    console.log("获取登录通道失败", e);
+                }
+            });
+        },
+        methods: {
+            async requestPayment(e,index) {
+                this.providerList[index].loading = true;
+                let orderInfo = await this.getOrderInfo(e.id);
+                console.log("得到订单信息",orderInfo);
+                if(orderInfo.statusCode !== 200){
+                    console.log("获得订单信息失败",orderInfo);
+                    return;
+                }
+                uni.requestPayment({
+                    provider: e.id,
+                    orderInfo: orderInfo.data,
+                    success: (e) => {
+                        console.log("success", e);
+                        uni.showToast({
+                            title:"感谢您的赞助!"
+                        })
+                    },
+                    fail: (e) => {
+                        console.log("fail", e)
+                    },
+                    complete:() => {
+                        this.providerList[index].loading = false;
+                    }
+                })
+            },
+            getOrderInfo(e){
+                let appid = uni.os.plus ? plus.runtime.appid : "";
+                
+                let url = 'http://demo.dcloud.net.cn/payment/?payid=' + e + '&appid=' + appid + '&total=0.01';
+                return new Promise((res) => {
+                    uni.request({
+                        url: url,
+                        success: function (result) {
+                            res(result);
+                        },
+                        fail: function (e) {
+                            res(e);
+                        }
+                    })
+                })
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    
+    .page-section {
+        width: auto;
+        margin: 30rpx;
+        padding: 64rpx 30rpx;
+        background-color: #fff;
+        text-align: center;
+        font-size: 28rpx;
+    }
+
+    .desc {
+        color: #B2B2B2;
+    }
+
+    .price {
+        margin-top: 30rpx;
+        margin-bottom: 25rpx;
+        position: relative;
+        display: inline-block;
+        font-size: 78rpx;
+        line-height: 1;
+    }
+
+    .price:before {
+        content: "¥";
+        position: absolute;
+        font-size: 40rpx;
+        top: 8rpx;
+        left: -40rpx;
+    }
+
+    button {
+        background-color: #007aff;
+        color: #ffffff;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/request/index.vue b/examples/hello-uniapp/pages/API/request/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c989f64f6116d4ad759f27888838d3dfe878e0c6
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/request/index.vue
@@ -0,0 +1,70 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-body-wording">
+                <text class="page-body-text">
+                    点击向服务器发起请求
+                </text>
+            </view>
+            <view class="btn-area">
+                <button @tap="makeRequest" :loading="loading">request</button>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    const requestUrl = "https://service.dcloud.net.cn/ajax/echo/text?name=uni-app"
+    const duration = 2000
+    export default {
+        data() {
+            return {
+                title: 'request',
+                loading: false
+            }
+        },
+        methods: {
+            makeRequest: function () {
+                var self = this
+                this.loading = true
+                uni.request({
+                    url: requestUrl,
+                    data: {
+                        noncestr: Date.now()
+                    },
+                    success: function (result) {
+                        uni.showToast({
+                            title: '请求成功',
+                            icon: 'success',
+                            mask: true,
+                            duration: duration
+                        })
+                        self.loading = false
+                        console.log('request success', result)
+                    },
+
+                    fail: function ({
+                        errMsg
+                    }) {
+                        console.log('request fail', errMsg)
+                        this.loading = false
+                    }
+                })
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    button{
+    	background-color:#007aff;
+    	color: #ffffff;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/scan-code/index.vue b/examples/hello-uniapp/pages/API/scan-code/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1c5feb55c08053f7787cf6492d62ce8fd290f924
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/scan-code/index.vue
@@ -0,0 +1,57 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section-title">扫码结果</view>
+            <view class="uni-list">
+                <view class="uni-cell">
+                    <view class="uni-input">{{result}}</view>
+                </view>
+            </view>
+            <view class="btn-area">
+                <button @tap="scanCode">扫一扫</button>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'scanCode',
+                result: ''
+            }
+        },
+        methods: {
+            scanCode: function () {
+                var that = this
+                uni.scanCode({
+                    success: function (res) {
+                        that.result = res.result
+                    },
+                    fail: function (res) {}
+                })
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    
+    .uni-input {
+        padding: 0 30rpx;
+        word-break: break-all;
+    }
+    button{
+    	background-color:#007aff;
+    	color: #ffffff;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/set-navigation-bar-title/index.vue b/examples/hello-uniapp/pages/API/set-navigation-bar-title/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b1dfc7c1d06807869d58501a283d8580a180d631
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/set-navigation-bar-title/index.vue
@@ -0,0 +1,61 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <form class="page-body" @submit="setNaivgationBarTitle">
+            <view class="uni-list">
+                <view class="uni-list-cell">
+                    <view class="uni-list-cell-left">
+                        页面标题
+                    </view>
+                    <view class="uni-list-cell-db">
+                        <input class="uni-input" type="text" placeholder="请输入页面标题并点击设置即可" name="title"></input>
+                    </view>
+                </view>
+            </view>
+            <view class="btn-area">
+                <button formType="submit">设置</button>
+            </view>
+        </form>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'setNaivgationBarTitle'
+            }
+        },
+        methods: {
+            setNaivgationBarTitle: function (e) {
+                var title = e.target.value.title
+                console.log(title)
+                uni.setNavigationBarTitle({
+                    title: title,
+                    success: function () {
+                        console.log('setNavigationBarTitle success')
+                    },
+                    fail: function (err) {
+                        console.log('setNavigationBarTitle fail, err is', err)
+                    }
+                })
+                return false
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    
+    button{
+    	background-color:#007aff;
+    	color: #ffffff;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/speech/index.vue b/examples/hello-uniapp/pages/API/speech/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b695878a2fe888056076df9f36cc0f8c827b8948
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/speech/index.vue
@@ -0,0 +1,71 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="page-section-spacing">
+                    <button class="btn-speech" @tap="startRecognize">开始语音识别</button>
+                    <button class="btn-speech" @tap="startRecognizeEnglish">开始语音识别（英语）</button>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-spacing">
+                    <textarea :value="value" style="height: 3em" />
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    export default {
+        data() {
+            return {
+                title: 'speech',
+                value:''
+            }
+        },
+        methods: {
+            startRecognize: function() {
+                var options = {};
+                var that = this;
+                options.engine = 'iFly';
+                that.value = "";
+                plus.speech.startRecognize(options, function (s) {
+                    console.log(s);
+                    that.value += s;
+                }, function (e) {
+                    console.log("语音识别失败：" + e.message);
+                });
+            },
+            startRecognizeEnglish: function() {
+                var options = {};
+                var that = this;
+                options.engine = 'iFly';
+                options.lang = 'en-us';
+                that.value = "";
+                plus.speech.startRecognize(options, function (s) {
+                    console.log(s);
+                    that.value += s;
+                }, function (e) {
+                    console.log("语音识别失败：" + e.message);
+                });
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    .btn-speech {
+        background-color: #007aff;
+        color: #ffffff;
+    }
+    textarea{
+        border: 2rpx solid #7A7E83;
+        height:76rpx;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/storage/index.vue b/examples/hello-uniapp/pages/API/storage/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b04758ef06edc220b9b32a97ba998e2feb4dadd4
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/storage/index.vue
@@ -0,0 +1,126 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <view class="uni-list-cell-left">
+                            <view class="uni-label">key</view>
+                        </view>
+                        <view class="uni-list-cell-db">
+                            <input class="uni-input" type="text" placeholder="请输入key" name="key" :value="key" @input="keyChange"></input>
+                        </view>
+                    </view>
+                    <view class="uni-list-cell">
+                        <view class="uni-list-cell-left">
+                            <view class="uni-label">value</view>
+                        </view>
+                        <view class="uni-list-cell-db">
+                            <input class="uni-input" type="text" placeholder="请输入value" name="data" :value="data" @input="dataChange"></input>
+                        </view>
+                    </view>
+                </view>
+                <view class="btn-area">
+                    <button class="btn-setstorage" @tap="setStorage">存储数据</button>
+                    <button @tap="getStorage">读取数据</button>
+                    <button @tap="clearStorage">清理数据</button>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'get/set/clearStorage',
+                key: '',
+                data: ''
+            }
+        },
+        methods: {
+            keyChange: function (e) {
+                this.key = e.target.value
+            },
+            dataChange: function (e) {
+                this.data = e.target.value
+            },
+            getStorage: function () {
+                var key = this.key,
+                    data = this.data
+                var storageData
+
+                if (key.length === 0) {
+                    this.key = key,
+                        this.data = data
+                    uni.showModal({
+                        title: '读取数据失败',
+                        content: "key 不能为空"
+                    })
+                } else {
+                    storageData = uni.getStorageSync(key)
+                    if (storageData === "") {
+                        this.key = key,
+                            this.data = data
+                        uni.showModal({
+                            title: '读取数据失败',
+                            content: "找不到 key 对应的数据"
+                        })
+                    } else {
+                        this.key = key,
+                            this.data = data
+                        uni.showModal({
+                            title: '读取数据成功',
+                            content: "data: '" + storageData + "'"
+                        })
+                    }
+                }
+            },
+            setStorage: function () {
+                var key = this.key
+                var data = this.data
+                if (key.length === 0) {
+                    this.key = key,
+                        this.data = data
+                    uni.showModal({
+                        title: '保存数据失败',
+                        content: 'key 不能为空'
+                    })
+                } else {
+                    uni.setStorageSync(key, data)
+                    this.key = key,
+                        this.data = data
+                    uni.showModal({
+                        title: '存储数据成功',
+                        content: ' '
+                    })
+                }
+            },
+            clearStorage: function () {
+                uni.clearStorageSync()
+                this.key = '',
+                    this.data = ''
+                uni.showModal({
+                    title: '清除数据成功',
+                    content: ' '
+                })
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    .btn-setstorage{
+        background-color:#007aff;
+        color: #ffffff;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/toast/index.vue b/examples/hello-uniapp/pages/API/toast/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d91e0883b5e452bf1fa2af7776798949da30e702
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/toast/index.vue
@@ -0,0 +1,61 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="btn-area">
+                <view class="body-view">
+                    <button type="default" @tap="toast1Tap">点击弹出默认toast</button>
+                </view>
+                <view class="body-view">
+                    <button type="default" @tap="toast2Tap">点击弹出设置duration的toast</button>
+                </view>
+                <view class="body-view">
+                    <button type="default" @tap="toast3Tap">点击弹出显示loading的toast</button>
+                </view>
+                <view class="body-view">
+                    <button type="default" @tap="hideToast">点击隐藏toast</button>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'toast'
+            }
+        },
+        methods: {
+            toast1Tap: function () {
+                uni.showToast({
+                    title: "默认"
+                })
+            },
+            toast2Tap: function () {
+                uni.showToast({
+                    title: "duration 3000",
+                    duration: 3000
+                })
+            },
+            toast3Tap: function () {
+                uni.showToast({
+                    title: "loading",
+                    icon: "loading",
+                    duration: 5000
+                })
+            },
+            hideToast: function () {
+                uni.hideToast()
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
diff --git a/examples/hello-uniapp/pages/API/upload-file/index.vue b/examples/hello-uniapp/pages/API/upload-file/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..878138c690f457f5d4f3f70dddafae0bbfc0c907
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/upload-file/index.vue
@@ -0,0 +1,107 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="page-body-info">
+
+                    <block v-if="imageSrc">
+                        <image :src="imageSrc" class="image" mode="aspectFit"></image>
+                    </block>
+
+                    <block v-else>
+                        <view class="image-plus image-plus-nb" @tap="chooseImage">
+                            <view class="image-plus-horizontal"></view>
+                            <view class="image-plus-vertical"></view>
+                        </view>
+                        <view class="image-plus-text">选择图片</view>
+                    </block>
+
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'uploadFile',
+                imageSrc:''
+            }
+        },
+        onUnload(){
+            this.imageSrc = '';  
+        },
+        methods: {
+            chooseImage: function () {
+                var self = this
+
+                uni.chooseImage({
+                    count: 1,
+                    sizeType: ['compressed'],
+                    sourceType: ['album'],
+                    success: function (res) {
+                        console.log('chooseImage success, temp path is', res.tempFilePaths[0])
+
+                        var imageSrc = res.tempFilePaths[0]
+
+                        uni.uploadFile({
+                            url: "https://demo.dcloud.net.cn/helloh5/uploader/upload.php",
+                            filePath: imageSrc,
+                            name: 'data',
+                            success: function (res) {
+                                console.log('uploadImage success, res is:', res)
+
+                                uni.showToast({
+                                    title: '上传成功',
+                                    icon: 'success',
+                                    duration: 1000
+                                })
+
+                                self.imageSrc = imageSrc
+                            },
+                            fail: function ({
+                                errMsg
+                            }) {
+                                console.log('uploadImage fail, errMsg is', errMsg)
+                            }
+                        })
+
+                    },
+                    fail: function ({
+                        errMsg
+                    }) {
+                        console.log('chooseImage fail, err is', errMsg)
+                    }
+                })
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    .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;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/video/index.vue b/examples/hello-uniapp/pages/API/video/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e0ec418bc1f9b7de557ebc9aa4b61b3d81cab89b
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/video/index.vue
@@ -0,0 +1,129 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <view class="uni-list-cell-left">
+                            <view class="uni-label">视频来源</view>
+                        </view>
+                        <view class="uni-list-cell-right">
+                            <picker :range="sourceType" @change="sourceTypeChange" :value="sourceTypeIndex">
+                                <view class="uni-input">{{sourceType[sourceTypeIndex]}}</view>
+                            </picker>
+                        </view>
+                    </view>
+                    <view class="uni-list-cell">
+                        <view class="uni-list-cell-left">
+                            <view class="uni-label">摄像头</view>
+                        </view>
+                        <view class="uni-list-cell-right">
+                            <picker :range="camera" @change="cameraChange" :value="cameraIndex">
+                                <view class="uni-input">{{camera[cameraIndex]}}</view>
+                            </picker>
+                        </view>
+                    </view>
+                    <view class="uni-list-cell">
+                        <view class="uni-list-cell-left">
+                            <view class="uni-label">拍摄长度</view>
+                        </view>
+                        <view class="uni-list-cell-right">
+                            <picker :range="duration" @change="durationChange" :value="durationIndex">
+                                <view class="uni-input">{{duration[durationIndex]}}</view>
+                            </picker>
+                        </view>
+                    </view>
+                </view>
+
+                <view class="page-body-info">
+                    <block v-if="src === ''">
+                        <view class="image-plus image-plus-nb" @tap="chooseVideo">
+                            <view class="image-plus-horizontal"></view>
+                            <view class="image-plus-vertical"></view>
+                        </view>
+                        <view class="image-plus-text">添加视频</view>
+                    </block>
+                    <block v-if="src != ''">
+                        <video :src="src" class="video"></video>
+                    </block>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    var sourceType = [
+        ['camera'],
+        ['album'],
+        ['camera', 'album']
+    ]
+    var camera = [
+        ['front'],
+        ['back'],
+        ['front', 'back']
+    ]
+    var duration = Array.apply(null, {
+        length: 60
+    }).map(function (n, i) {
+        return i + 1
+    })
+    export default {
+        data() {
+            return {
+                title: 'chooseVideo',
+                sourceTypeIndex: 2,
+                sourceType: ['拍摄', '相册', '拍摄或相册'],
+                cameraIndex: 2,
+                camera: ['前置', '后置', '前置或后置'],
+                durationIndex: 59,
+                duration: duration.map(function (t) {
+                    return t + '秒'
+                }),
+                src: ''
+            }
+        },
+        methods: {
+            sourceTypeChange: function (e) {
+                this.sourceTypeIndex = e.target.value
+            },
+            cameraChange: function (e) {
+                this.cameraIndex = e.target.value
+            },
+            durationChange: function (e) {
+                this.durationIndex = e.target.value
+            },
+            chooseVideo: function () {
+                var that = this
+                uni.chooseVideo({
+                    sourceType: sourceType[this.sourceTypeIndex],
+                    camera: camera[this.cameraIndex],
+                    maxDuration: duration[this.durationIndex],
+                    success: function (res) {
+                        that.src = res.tempFilePath
+                    }
+                })
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    .page-body-info {
+        display: flex;
+        margin-top: 40rpx;
+        padding: 0;
+        height: 360rpx;
+        border-top: 1rpx solid #D9D9D9;
+        border-bottom: 1rpx solid #D9D9D9;
+        align-items: center;
+        justify-content: center;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/API/voice/index.vue b/examples/hello-uniapp/pages/API/voice/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0a08fca008198b7432ff6ec79edca3e134293b9f
--- /dev/null
+++ b/examples/hello-uniapp/pages/API/voice/index.vue
@@ -0,0 +1,212 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <block v-if="recording === false && playing === false && hasRecord === false">
+                    <view class="page-body-time">
+                        <text class="time-big">{{formatedRecordTime}}</text>
+                    </view>
+                    <view class="page-body-buttons">
+                        <view class="page-body-button"></view>
+                        <view class="page-body-button" @tap="startRecord">
+                            <image src="../../../static/record.png"></image>
+                        </view>
+                        <view class="page-body-button"></view>
+                    </view>
+                </block>
+
+                <block v-if="recording === true">
+                    <view class="page-body-time">
+                        <text class="time-big">{{formatedRecordTime}}</text>
+                    </view>
+                    <view class="page-body-buttons">
+                        <view class="page-body-button"></view>
+                        <view class="page-body-button" @tap="stopRecord">
+                            <view class="button-stop-record"></view>
+                        </view>
+                        <view class="page-body-button"></view>
+                    </view>
+                </block>
+
+                <block v-if="hasRecord === true && playing === false">
+                    <view class="page-body-time">
+                        <text class="time-big">{{formatedPlayTime}}</text>
+                        <text class="time-small">{{formatedRecordTime}}</text>
+                    </view>
+                    <view class="page-body-buttons">
+                        <view class="page-body-button"></view>
+                        <view class="page-body-button" @tap="playVoice">
+                            <image src="../../../static/play.png"></image>
+                        </view>
+                        <view class="page-body-button" @tap="clear">
+                            <image src="../../../static/trash.png"></image>
+                        </view>
+                    </view>
+                </block>
+
+                <block v-if="hasRecord === true && playing === true">
+                    <view class="page-body-time">
+                        <text class="time-big">{{formatedPlayTime}}</text>
+                        <text class="time-small">{{formatedRecordTime}}</text>
+                    </view>
+                    <view class="page-body-buttons">
+                        <view class="page-body-button" @tap="stopVoice">
+                            <image src="../../../static/stop.png"></image>
+                        </view>
+                        <view class="page-body-button" @tap="clear">
+                            <image src="../../../static/trash.png"></image>
+                        </view>
+                    </view>
+                </block>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    var util = require('../../../common/util.js')
+    var playTimeInterval = null;
+    var recordTimeInterval = null;
+    var recorderManager = null;
+    var music = null;
+    export default {
+        data() {
+            return {
+                title: 'start/stopRecord、play/stopVoice',
+                recording: false,//录音中
+                playing: false,//播放中
+                hasRecord: false,//是否有了一个
+                tempFilePath:'',
+                recordTime: 0,
+                playTime: 0,
+                formatedRecordTime: '00:00:00',//录音的总时间
+                formatedPlayTime: '00:00:00'//播放录音的当前时间
+            }
+        },
+        onUnload: function () {
+          this.end();  
+        },
+        onLoad:function(){
+            music = uni.createInnerAudioContext();
+            music.onEnded(() => {
+              console.log('结束');
+              clearInterval(playTimeInterval)
+              var playTime = 0
+              console.log('play voice finished')
+              this.playing = false;
+              this.formatedPlayTime = util.formatTime(playTime);
+              this.playTime = playTime;
+            });
+            recorderManager = uni.getRecorderManager();
+            recorderManager.onStart(() => {
+              console.log('recorder start');
+            });
+            recorderManager.onStop((res) => {
+              console.log('停止录音 stop', res);
+              
+              music.src = res.tempFilePath;
+              
+              this.hasRecord = true;
+              this.recording = false;
+            });
+        },
+        methods: {
+            startRecord () {//开始录音
+                this.recording = true;
+
+                recordTimeInterval = setInterval(() => {
+                    this.recordTime += 1;
+                    this.formatedRecordTime = util.formatTime(this.recordTime);
+                }, 1000)
+                
+                recorderManager.start();  
+            },
+            stopRecord() {//停止录音
+                recorderManager.stop();  
+                clearInterval(recordTimeInterval);
+            },
+            playVoice() {
+                playTimeInterval = setInterval(() => {
+                    this.playing = true;
+                    this.playTime += 1;
+                    this.formatedPlayTime = util.formatTime(this.playTime);
+                }, 1000)
+                music.play();
+            },
+            stopVoice() {
+                clearInterval(playTimeInterval)
+                this.playing = false,
+                    this.formatedPlayTime = util.formatTime(0),
+                    this.playTime = 0;
+                music.stop();
+            },
+            end(){
+              music.stop();
+              recorderManager.stop();
+              clearInterval(recordTimeInterval)
+              clearInterval(playTimeInterval);
+              this.recording = false,this.playing=false,this.hasRecord = false;
+              this.playTime = 0,this.recordTime = 0;
+              this.formatedRecordTime = "00:00:00",this.formatedRecordTime = "00:00:00";
+            },
+            clear() {
+              this.end();
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    image {
+        width: 150rpx;
+        height: 150rpx;
+    }
+
+    .page-body-wrapper {
+        justify-content: space-between;
+        flex-grow: 1;
+        margin-bottom: 300rpx;
+    }
+
+    .page-body-time {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .time-big {
+        font-size: 60rpx;
+        margin: 20rpx;
+    }
+
+    .time-small {
+        font-size: 30rpx;
+    }
+
+    .page-body-buttons {
+        margin-top: 60rpx;
+        display: flex;
+        justify-content: space-around;
+    }
+
+    .page-body-button {
+        width: 250rpx;
+        text-align: center;
+    }
+
+    .button-stop-record {
+        width: 110rpx;
+        height: 110rpx;
+        border: 20rpx solid #fff;
+        background-color: #f55c23;
+        border-radius: 130rpx;
+        margin: 0 auto;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/component/audio/index.vue b/examples/hello-uniapp/pages/component/audio/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bd59cfb5d2bf4e4d61050ba2707968c680e022f4
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/audio/index.vue
@@ -0,0 +1,39 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section page-section-gap" style="text-align: center;">
+                <audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author"
+                    :action="audioAction" controls></audio>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'audio',
+                current: {
+                    poster: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/friendship.jpg',
+                    name: '友谊地久天长',
+                    author: '群星',
+                    src: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/friendship.mp3',
+                },
+                audioAction: {
+                    method: 'pause'
+                }
+            }
+        },
+        methods: {
+
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
diff --git a/examples/hello-uniapp/pages/component/button/index.vue b/examples/hello-uniapp/pages/component/button/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d1eebc6b6482df2bd005a7c075fa0121a390b3b9
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/button/index.vue
@@ -0,0 +1,62 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="btn-area" id="buttonContainer">
+                <button type="primary">页面主操作 Normal</button>
+                <button type="primary" loading="true">页面主操作 Loading</button>
+                <button type="primary" disabled="true">页面主操作 Disabled</button>
+
+                <button type="default">页面次要操作 Normal</button>
+                <button type="default" disabled="true">页面次要操作 Disabled</button>
+
+                <button type="warn">警告类操作 Normal</button>
+                <button type="warn" disabled="true">警告类操作 Disabled</button>
+
+                <view class="button-sp-area">
+                    <button type="primary" plain="true">按钮</button>
+                    <button type="primary" disabled="true" plain="true">不可点击的按钮</button>
+
+                    <button type="default" plain="true">按钮</button>
+                    <button type="default" disabled="true" plain="true">按钮</button>
+
+                    <button class="mini-btn" type="primary" size="mini">按钮</button>
+                    <button class="mini-btn" type="default" size="mini">按钮</button>
+                    <button class="mini-btn" type="warn" size="mini">按钮</button>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'button'
+            }
+        },
+        methods: {},
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    button {
+        margin-top: 30rpx;
+        margin-bottom: 30rpx;
+    }
+
+    .button-sp-area {
+        margin: 0 auto;
+        width: 60%;
+    }
+
+    .mini-btn {
+        margin-right: 10rpx;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/component/canvas/index.vue b/examples/hello-uniapp/pages/component/canvas/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d824fba3addd5b85826f482decec0f3950776f04
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/canvas/index.vue
@@ -0,0 +1,90 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-body-wrapper">
+                <canvas canvas-id="canvas" class="canvas"></canvas>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'canvas',
+                position: {
+                    x: 150,
+                    y: 150,
+                    vx: 2,
+                    vy: 2
+                }
+            }
+        },
+        onReady: function () {
+            this.interval = setInterval(this.drawBall, 17)
+        },
+        onUnload: function () {
+            clearInterval(this.interval)
+        },
+        methods: {
+            drawBall: function () {
+                var p = this.position
+                p.x += p.vx
+                p.y += p.vy
+                if (p.x >= 300) {
+                    p.vx = -2
+                }
+                if (p.x <= 7) {
+                    p.vx = 2
+                }
+                if (p.y >= 300) {
+                    p.vy = -2
+                }
+                if (p.y <= 7) {
+                    p.vy = 2
+                }
+
+                var context = uni.createContext()
+
+                function ball(x, y) {
+                    context.beginPath(0)
+                    context.arc(x, y, 5, 0, Math.PI * 2)
+                    context.setFillStyle('#1aad19')
+                    context.setStrokeStyle('rgba(1,1,1,0)')
+                    context.fill()
+                    context.stroke()
+                }
+
+                ball(p.x, 150)
+                ball(150, p.y)
+                ball(300 - p.x, 150)
+                ball(150, 300 - p.y)
+                ball(p.x, p.y)
+                ball(300 - p.x, 300 - p.y)
+                ball(p.x, 300 - p.y)
+                ball(300 - p.x, p.y)
+
+                uni.drawCanvas({
+                    canvasId: 'canvas',
+                    actions: context.getActions()
+                })
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    .canvas {
+        width: 305px;
+        height: 305px;
+        background-color: #fff;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/component/checkbox/index.vue b/examples/hello-uniapp/pages/component/checkbox/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0a79f2a55628a1b83e70013245a2030aa18523e8
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/checkbox/index.vue
@@ -0,0 +1,96 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section page-section-gap">
+                <view class="page-section-title">默认样式</view>
+                <label class="checkbox">
+                    <checkbox value="cb" checked="true" />选中
+                </label>
+                <label class="checkbox">
+                    <checkbox value="cb" />未选中
+                </label>
+            </view>
+
+            <view class="page-section">
+                <view class="page-section-title">推荐展示样式</view>
+                <view class="uni-list">
+                    <checkbox-group bindchange="checkboxChange">
+                        <label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
+                            <view>
+                                <checkbox :value="item.value" :checked="item.checked" />
+                            </view>
+                            <view>{{item.name}}</view>
+                        </label>
+                    </checkbox-group>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'checkbox',
+                items: [
+                    {
+                        value: 'USA',
+                        name: '美国'
+                    },
+                    {
+                        value: 'CHN',
+                        name: '中国',
+                        checked: 'true'
+                    },
+                    {
+                        value: 'BRA',
+                        name: '巴西'
+                    },
+                    {
+                        value: 'JPN',
+                        name: '日本'
+                    },
+                    {
+                        value: 'ENG',
+                        name: '英国'
+                    },
+                    {
+                        value: 'FRA',
+                        name: '法国'
+                    }
+                ]
+            }
+        },
+        methods: {
+            checkboxChange: function (e) {
+                var items = this.items,
+                    values = e.target.value;
+                for (var i = 0, lenI = items.length; i < lenI; ++i) {
+                    items[i].checked = false;
+                    for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
+                        if (items[i].value == values[j]) {
+                            items[i].checked = true;
+                            break
+                        }
+                    }
+                }
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    
+    .uni-list-cell{
+        justify-content:flex-start
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/component/form/index.vue b/examples/hello-uniapp/pages/component/form/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ff84116728fe80444ec90aae978def93bca813c1
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/form/index.vue
@@ -0,0 +1,103 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <form catchsubmit="formSubmit" catchreset="formReset">
+                <view class="page-section page-section-gap">
+                    <view class="page-section-title">switch</view>
+                    <switch name="switch" />
+                </view>
+
+                <view class="page-section page-section-gap">
+                    <view class="page-section-title">radio</view>
+                    <radio-group class="uni-flex" name="radio">
+                        <label>
+                            <radio value="radio1" />选项一</label>
+                        <label>
+                            <radio value="radio2" />选项二</label>
+                    </radio-group>
+                </view>
+
+                <view class="page-section page-section-gap">
+                    <view class="page-section-title">checkbox</view>
+                    <checkbox-group class="uni-flex" name="checkbox">
+                        <label>
+                            <checkbox value="checkbox1" />选项一</label>
+                        <label>
+                            <checkbox value="checkbox2" />选项二</label>
+                    </checkbox-group>
+                </view>
+
+                <view class="page-section page-section-gap">
+                    <view class="page-section-title">slider</view>
+                    <slider value="50" name="slider" show-value></slider>
+                </view>
+
+                <view class="page-section">
+                    <view class="page-section-title">input</view>
+                    <view class="uni-list">
+                        <view class="uni-list-cell uni-list-cell-pd">
+                            <input class="weui-input" name="input" placeholder="这是一个输入框" />
+                        </view>
+                    </view>
+                </view>
+
+                <view class="btn-area">
+                    <button class="btn-submit" formType="submit">Submit</button>
+                    <button type="default" formType="reset">Reset</button>
+                </view>
+            </form>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'form',
+                pickerHidden: true,
+                chosen: ''
+            }
+        },
+        methods: {
+            pickerConfirm: function (e) {
+                this.pickerHidden = true
+                this.chosen = e.target.value
+            },
+            pickerCancel: function (e) {
+                this.pickerHidden = true
+            },
+            pickerShow: function (e) {
+                this.pickerHidden = false
+            },
+            formSubmit: function (e) {
+                console.log('form发生了submit事件，携带数据为：', e.target.value)
+            },
+            formReset: function (e) {
+                console.log('form发生了reset事件，携带数据为：', e.target.value)
+                this.chosen = ''
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    label {
+        display: flex;
+        flex-direction: row;
+        min-width: 270rpx;
+        margin-right: 20rpx;
+    }
+    .btn-submit{
+    	background-color:#007aff;
+    	color: #ffffff;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/component/icon-/index.vue b/examples/hello-uniapp/pages/component/icon-/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ad2288a78189612d33a4313cc3d53351583e3d04
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/icon-/index.vue
@@ -0,0 +1,165 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="icon-box">
+            <icon class="icon-box-img" type="success" size="93"></icon>
+            <view class="icon-box-ctn">
+                <view class="icon-box-title">成功</view>
+                <view class="icon-box-desc">用于表示操作顺利完成</view>
+            </view>
+        </view>
+        <view class="icon-box">
+            <icon class="icon-box-img" type="info" size="93"></icon>
+            <view class="icon-box-ctn">
+                <view class="icon-box-title">提示</view>
+                <view class="icon-box-desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view>
+            </view>
+        </view>
+        <view class="icon-box">
+            <icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon>
+            <view class="icon-box-ctn">
+                <view class="icon-box-title">普通警告</view>
+                <view class="icon-box-desc">用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果</view>
+            </view>
+        </view>
+        <view class="icon-box">
+            <icon class="icon-box-img" type="warn" size="93"></icon>
+            <view class="icon-box-ctn">
+                <view class="icon-box-title">强烈警告</view>
+                <view class="icon-box-desc">用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可严重的挽回的后果的情况</view>
+            </view>
+        </view>
+        <view class="icon-box">
+            <icon class="icon-box-img" type="waiting" size="93"></icon>
+            <view class="icon-box-ctn">
+                <view class="icon-box-title">等待</view>
+                <view class="icon-box-desc">用于表示等待，告知用户结果需等待</view>
+            </view>
+        </view>
+        <view class="icon-box">
+            <view class="icon-small-wrp">
+                <icon class="icon-small" type="success" size="23"></icon>
+            </view>
+            <view class="icon-box-ctn">
+                <view class="icon-box-title">多选控件图标_已选择</view>
+                <view class="icon-box-desc">用于多选控件中，表示已选择该项目</view>
+            </view>
+        </view>
+        <view class="icon-box">
+            <view class="icon-small-wrp">
+                <icon class="icon-small" type="circle" size="23"></icon>
+            </view>
+            <view class="icon-box-ctn">
+                <view class="icon-box-title">多选控件图标_未选择</view>
+                <view class="icon-box-desc">用于多选控件中，表示该项目可被选择，但还未选择</view>
+            </view>
+        </view>
+        <view class="icon-box">
+            <view class="icon-small-wrp">
+                <icon class="icon-small" type="warn" size="23"></icon>
+            </view>
+            <view class="icon-box-ctn">
+                <view class="icon-box-title">错误提示</view>
+                <view class="icon-box-desc">用于在表单中表示出现错误</view>
+            </view>
+        </view>
+        <view class="icon-box">
+            <view class="icon-small-wrp">
+                <icon class="icon-small" type="success_no_circle" size="23"></icon>
+            </view>
+            <view class="icon-box-ctn">
+                <view class="icon-box-title">单选控件图标_已选择</view>
+                <view class="icon-box-desc">用于单选控件中，表示已选择该项目</view>
+            </view>
+        </view>
+        <view class="icon-box">
+            <view class="icon-small-wrp">
+                <icon class="icon-small" type="download" size="23"></icon>
+            </view>
+            <view class="icon-box-ctn">
+                <view class="icon-box-title">下载</view>
+                <view class="icon-box-desc">用于表示可下载</view>
+            </view>
+        </view>
+        <view class="icon-box">
+            <view class="icon-small-wrp">
+                <icon class="icon-small" type="info_circle" size="23"></icon>
+            </view>
+            <view class="icon-box-ctn">
+                <view class="icon-box-title">提示</view>
+                <view class="icon-box-desc">用于在表单中表示有信息提示</view>
+            </view>
+        </view>
+        <view class="icon-box">
+            <view class="icon-small-wrp">
+                <icon class="icon-small" type="cancel" size="23"></icon>
+            </view>
+            <view class="icon-box-ctn">
+                <view class="icon-box-title">停止或关闭</view>
+                <view class="icon-box-desc">用于在表单中，表示关闭或停止</view>
+            </view>
+        </view>
+        <view class="icon-box">
+            <view class="icon-small-wrp">
+                <icon class="icon-small" type="search" size="14"></icon>
+            </view>
+            <view class="icon-box-ctn">
+                <view class="icon-box-title">搜索</view>
+                <view class="icon-box-desc">用于搜索控件中，表示可搜索</view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'icon'
+            }
+        },
+        methods: {},
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    .icon-box {
+        margin-bottom: 40rpx;
+        padding: 0 75rpx;
+        display: flex;
+        align-items: center;
+    }
+
+    .icon-box-img {
+        margin-right: 46rpx;
+    }
+
+    .icon-box-ctn {
+        flex-shrink: 100;
+    }
+
+    .icon-box-title {
+        font-size: 34rpx;
+    }
+
+    .icon-box-desc {
+        margin-top: 12rpx;
+        font-size: 26rpx;
+        color: #888;
+    }
+
+    .icon-small-wrp {
+        margin-right: 46rpx;
+        width: 93px;
+        height: 93px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/component/icon/index.vue b/examples/hello-uniapp/pages/component/icon/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..da5f902e13743920c03b854a4ac3d063ec6773bc
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/icon/index.vue
@@ -0,0 +1,148 @@
+<template>
+    <view class="page">
+        <page-head :title="title"></page-head>
+        <view class="flex-container">
+            <view class="icon-item" v-for="(item,index) in iconClassList" :key="index">
+                <view class="uni-icon" :class="[item, activeIndex === index ? 'uni-active' : '']" @click="switchActive(index)"></view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    export default {
+        data() {
+            return {
+                iconClassList: [
+                    'uni-icon-contact',
+                    'uni-icon-person',
+                    'uni-icon-personadd',
+                    'uni-icon-contact-filled',
+                    'uni-icon-person-filled',
+                    'uni-icon-personadd-filled',
+                    'uni-icon-phone',
+                    'uni-icon-email',
+                    'uni-icon-chatbubble',
+                    'uni-icon-chatboxes',
+                    'uni-icon-phone-filled',
+                    'uni-icon-email-filled',
+                    'uni-icon-chatbubble-filled',
+                    'uni-icon-chatboxes-filled',
+                    'uni-icon-weibo',
+                    'uni-icon-weixin',
+                    'uni-icon-pengyouquan',
+                    'uni-icon-chat',
+                    'uni-icon-qq',
+                    'uni-icon-videocam',
+                    'uni-icon-camera',
+                    'uni-icon-mic',
+                    'uni-icon-location',
+                    'uni-icon-mic-filled',
+                    'uni-icon-location-filled',
+                    'uni-icon-micoff',
+                    'uni-icon-image',
+                    'uni-icon-map',
+                    'uni-icon-compose',
+                    'uni-icon-trash',
+                    'uni-icon-upload',
+                    'uni-icon-download',
+                    'uni-icon-close',
+                    'uni-icon-redo',
+                    'uni-icon-undo',
+                    'uni-icon-refresh',
+                    'uni-icon-star',
+                    'uni-icon-plus',
+                    'uni-icon-minus',
+                    'uni-icon-circle',
+                    'uni-icon-clear',
+                    'uni-icon-refresh-filled',
+                    'uni-icon-star-filled',
+                    'uni-icon-plus-filled',
+                    'uni-icon-minus-filled',
+                    'uni-icon-circle-filled',
+                    'uni-icon-checkbox-filled',
+                    'uni-icon-closeempty',
+                    'uni-icon-refreshempty',
+                    'uni-icon-reload',
+                    'uni-icon-starhalf',
+                    'uni-icon-spinner',
+                    'uni-icon-spinner-cycle',
+                    'uni-icon-search',
+                    'uni-icon-plusempty',
+                    'uni-icon-forward',
+                    'uni-icon-back',
+                    'uni-icon-checkmarkempty',
+                    'uni-icon-home',
+                    'uni-icon-navigate',
+                    'uni-icon-gear',
+                    'uni-icon-paperplane',
+                    'uni-icon-info',
+                    'uni-icon-help',
+                    'uni-icon-locked',
+                    'uni-icon-more',
+                    'uni-icon-flag',
+                    'uni-icon-home-filled',
+                    'uni-icon-gear-filled',
+                    'uni-icon-info-filled',
+                    'uni-icon-help-filled',
+                    'uni-icon-more-filled',
+                    'uni-icon-settings',
+                    'uni-icon-list',
+                    'uni-icon-bars',
+                    'uni-icon-loop',
+                    'uni-icon-paperclip',
+                    'uni-icon-eye',
+                    'uni-icon-arrowup',
+                    'uni-icon-arrowdown',
+                    'uni-icon-arrowleft',
+                    'uni-icon-arrowright',
+                    'uni-icon-arrowthinup',
+                    'uni-icon-arrowthindown',
+                    'uni-icon-arrowthinleft',
+                    'uni-icon-arrowthinright',
+                    'uni-icon-pulldown'
+                ],
+                title: 'icon',
+                activeIndex: -1
+            };
+        },
+        components: {
+            pageHead
+        },
+        methods: {
+            switchActive(index) {
+                this.activeIndex = index
+            }
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/icon.css";
+    .flex-container {
+        padding: 20rpx;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-flex-flow: row wrap;
+        justify-content: space-between;
+        text-align: center;
+    }
+    
+    .flex-container .icon-item {
+        display: inline-block;
+        width: 100rpx;
+        height: 100rpx;
+        text-align: center;
+        border: 2rpx solid #dddddd;
+        border-radius: 50rpx;
+        margin: 6rpx;
+    }
+    
+    .uni-icon {
+        margin-top: 24rpx;
+        color: #8f8f94;
+    }
+</style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/component/image/index.vue b/examples/hello-uniapp/pages/component/image/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..71e964f639ac3da818ae2e5ffd47f008c17c9ebf
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/image/index.vue
@@ -0,0 +1,48 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section page-section-gap">
+                <view class="page-section-title">Local Image</view>
+                <view class="page-section-ctn">
+                    <image class="image" src="../../../static/uni@2x.png" />
+                </view>
+            </view>
+            <view class="page-section page-section-gap">
+                <view class="page-section-title">Internet Image</view>
+                <view class="page-section-ctn">
+                    <image class="image" src="http://img-cdn-qiniu.dcloud.net.cn/newpage/images/uni@2x.png" />
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'image'
+            }
+        },
+        methods: {},
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    .page-section-ctn {
+        text-align: center;
+    }
+
+    .image {
+        margin-top: 30rpx;
+        width: 200rpx;
+        height: 200rpx;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/component/index.vue b/examples/hello-uniapp/pages/component/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..47a6a9d2ca1e58f0df6b91e33a15da2a9688aa42
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/index.vue
@@ -0,0 +1,98 @@
+<template>
+    <view class="index">
+        <view class="index-hd">
+            <image class="index-logo" src="../../static/componentIndex.png"></image>
+            <view class="page-section-title" style="text-align: left;">以下将展示uni-app官方组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见uni-app开发文档。</view>
+        </view>
+        <view class="uni-card" v-for="(list,index) in lists" :key="index">
+            <view class="uni-list"  >
+            	<view class="uni-list-cell uni-collapse">
+            		<view class="uni-list-cell-navigate uni-navigate-bottom" hover-class="uni-list-cell-hover" :class="list.open ? 'uni-active' : ''" @click="trigerCollapse(index)">
+            			{{list.name}}
+            		</view>
+            		<view class="uni-list uni-collapse"  :class="list.open ? 'uni-active' : ''">
+            			<view class="uni-list-cell" hover-class="uni-list-cell-hover"  v-for="(item,key) in list.pages" :key="key" :url="item + '/index'" @click="goDetailPage(item)">
+            				<view class="uni-list-cell-navigate uni-navigate-right"> {{item}} </view>
+            			</view>
+            		</view>
+            	</view>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                lists: [{
+                    id: 'view',
+                    name: '视图容器',
+                    open: false,
+                    pages: ['view', 'scroll-view', 'swiper']
+                }, {
+                    id: 'content',
+                    name: '基础内容',
+                    open: false,
+                    pages: ['text', 'icon', 'progress']
+                }, {
+                    id: 'form',
+                    name: '表单组件',
+                    open: false,
+                    pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'radio', 'slider',
+                        'switch', 'textarea'
+                    ]
+                }, {
+                    id: 'nav',
+                    name: '导航',
+                    open: false,
+                    pages: ['navigator']
+                }, {
+                    id: 'media',
+                    name: '媒体组件',
+                    open: false,
+                    pages: ['image', 'audio', 'video']
+                }, {
+                    id: 'map',
+                    name: '地图',
+                    open: false,
+                    pages: ['map']
+                }, {
+                    id: 'canvas',
+                    name: '画布',
+                    open: false,
+                    pages: ['canvas']
+                }]
+            }
+        },
+        methods: {
+            trigerCollapse(e){
+                for (let i = 0, len = this.lists.length; i < len; ++i) {
+                	if (e === i) {
+                		this.lists[i].open = !this.lists[i].open;
+                	} else {
+                		this.lists[i].open = false;
+                	}
+                }
+            },
+            goDetailPage(e){
+            	uni.navigateTo({
+            		url: '/pages/component/' + e + '/index'
+            	})
+            }
+        }
+    }
+</script>
+
+<style>
+    @import "../../common/uni.css";
+   
+      .uni-card{
+      box-shadow: none;
+      }
+      .uni-list:after{
+      height: 0;
+      }
+      .uni-list:before{
+      height: 0;
+      }
+</style>
diff --git a/examples/hello-uniapp/pages/component/input/index.vue b/examples/hello-uniapp/pages/component/input/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2730de772dcfa4d6cf6fe7353e1b8d0507f9d9ec
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/input/index.vue
@@ -0,0 +1,191 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="page-section-title">可以自动聚焦的input</view>
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <input class="uni-input" autofocus="autofocus" placeholder="将会获取焦点" />
+                    </view>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-title">控制最大输入长度的input</view>
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <input class="uni-input" maxlength="10" placeholder="最大输入长度为10" />
+                    </view>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-title">实时获取输入值：{{inputValue}}</view>
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <input class="uni-input" maxlength="10" @input="bindKeyInput" placeholder="输入同步到view中" />
+                    </view>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-title">控制输入的input</view>
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <input class="uni-input" @input="bindReplaceInput" placeholder="连续的两个1会变成2" />
+                    </view>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-title">控制键盘的input</view>
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <input class="uni-input" ref="input1" @input="bindHideKeyboard" placeholder="输入123自动收起键盘" />
+                    </view>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-title">数字输入的input</view>
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <input class="uni-input" type="number" placeholder="这是一个数字输入框" />
+                    </view>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-title">密码输入的input</view>
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <input class="uni-input" password type="text" placeholder="这是一个密码输入框" />
+                    </view>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-title">带小数点的input</view>
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <input class="uni-input" type="digit" placeholder="带小数点的数字键盘" />
+                    </view>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-title">身份证输入的input</view>
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <input class="uni-input" type="idcard" placeholder="身份证输入键盘" />
+                    </view>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-title">控制占位符颜色的input</view>
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <input class="uni-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
+                    </view>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-title">带清除按钮的输入框</view>
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="bindClearInput"/>
+                        <view class="uni-icon uni-icon-clear" v-if="showClearIcon" @click="clearIcon"></view>
+                    </view>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-title">可查看密码的输入框</view>
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <input class="uni-input" placeholder="请输入密码" :password="showPassword"/>
+                        <view class="uni-icon uni-icon-eye" :class="[!showPassword ? 'uni-active' : '']" @click="changePassword"></view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'input',
+                focus: false,
+                inputValue: '',
+                showClearIcon:false,
+                inputClearValue:"",
+                showPassword:true,
+                src:"../../../static/eye-1.png"
+            }
+        },
+        methods: {
+            bindKeyInput: function (e) {
+                this.inputValue = e.target.value
+            },
+            bindReplaceInput: function (e) {
+                var value = e.target.value
+                var pos = e.target.cursor
+                var left
+                if (pos !== -1) {
+                    // 光标在中间
+                    left = e.target.value.slice(0, pos)
+                    // 计算光标的位置
+                    pos = left.replace(/11/g, '2').length
+                }
+
+                // 直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
+                return {
+                    value: value.replace(/11/g, '2'),
+                    cursor: pos
+                }
+
+                // 或者直接返回字符串,光标在最后边
+                // return value.replace(/11/g,'2'),
+            },
+            bindHideKeyboard: function (e) {
+                if (e.target.value === '123') {
+                    console.log('......................e.target.value=' + e.target.value);
+                    // 收起键盘
+                    uni.hideKeyboard();
+                }
+            },
+            bindClearInput:function (e) {
+                this.inputClearValue = e.target.value;
+                if(e.target.value.length > 0){
+                    this.showClearIcon = true;
+                }else{
+                    this.showClearIcon = false;
+                }
+            },
+            clearIcon:function(){
+                this.inputClearValue = "";
+                this.showClearIcon = false;
+            },
+            changePassword:function(){
+                this.showPassword = !this.showPassword;
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    @import "../../../common/icon.css";
+    .page-section {
+        margin-bottom: 20rpx;
+    }
+    .uni-list-cell{
+        padding: 0 30rpx;
+    }
+    .uni-input{
+        flex: 1;
+    }
+    .uni-icon{
+        color: #999;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/component/label/index.vue b/examples/hello-uniapp/pages/component/label/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..43bc535a823077a705fa5e4104d2396d223abe48
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/label/index.vue
@@ -0,0 +1,124 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section page-section-gap">
+                <view class="page-section-title">表单组件在label内</view>
+                <checkbox-group class="group" @change="checkboxChange">
+                    <view class="label-1" v-for="item in checkboxItems" :key="item.name">
+                        <label>
+                            <checkbox :value="item.name" :checked="item.checked"></checkbox>
+                            <text class="label-1-text">{{item.value}}</text>
+                        </label>
+                    </view>
+                </checkbox-group>
+            </view>
+
+            <view class="page-section page-section-gap">
+                <view class="page-section-title">label用for标识表单组件</view>
+                <radio-group class="group" @change="radioChange">
+                    <view class="label-2" v-for="item in radioItems">
+                        <radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
+                        <label class="label-2-text" :for="item.name">
+                            <text>{{item.name}}</text>
+                        </label>
+                    </view>
+                </radio-group>
+            </view>
+
+            <view class="page-section page-section-gap">
+                <view class="page-section-title">label内有多个时选中第一个</view>
+                <label class="label-3">
+                    <checkbox class="checkbox-3">选项一</checkbox>
+                    <checkbox class="checkbox-3">选项二</checkbox>
+                    <view class="label-3-text">点击该label下的文字默认选中第一个checkbox</view>
+                </label>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'label',
+                checkboxItems: 
+                    [{
+                        name: 'USA',
+                        value: '美国'
+                    },
+                    {
+                        name: 'CHN',
+                        value: '中国',
+                        checked: 'true'
+                    }
+                ],
+                radioItems: [
+                    {
+                        name: 'USA',
+                        value: '美国'
+                    },
+                    {
+                        name: 'CHN',
+                        value: '中国',
+                        checked: 'true'
+                    }
+                ],
+                hidden: false
+            }
+        },
+        methods: {
+            checkboxChange: function (e) {
+                var checked = e.target.value
+                var changed = {}
+                for (var i = 0; i < this.checkboxItems.length; i++) {
+                    if (checked.indexOf(this.checkboxItems[i].name) !== -1) {
+                        changed['checkboxItems[' + i + '].checked'] = true
+                    } else {
+                        changed['checkboxItems[' + i + '].checked'] = false
+                    }
+                }
+                // this.setData(changed)
+            },
+            radioChange: function (e) {
+                var checked = e.target.value
+                var changed = {}
+                for (var i = 0; i < this.radioItems.length; i++) {
+                    if (checked.indexOf(this.radioItems[i].name) !== -1) {
+                        changed['radioItems[' + i + '].checked'] = true
+                    } else {
+                        changed['radioItems[' + i + '].checked'] = false
+                    }
+                }
+                // this.setData(changed)
+            },
+            tapEvent: function (e) {
+                console.log('按钮被点击')
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    .label-1,
+    .label-2 {
+        margin: 30rpx 0;
+    }
+
+    .label-3-text {
+        color: #576B95;
+        font-size: 28rpx;
+    }
+
+    .checkbox-3 {
+        display: block;
+        margin: 30rpx 0;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/component/map/index.vue b/examples/hello-uniapp/pages/component/map/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5b2b5e6e617a6b9436780d2a2f369fdbb48400c3
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/map/index.vue
@@ -0,0 +1,42 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section page-section-gap">
+                <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
+                </map>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'map',
+                latitude: 39.909,
+                longitude: 116.39742,
+                covers: [{
+                    latitude: 39.909,
+                    longitude: 116.39742,
+                    iconPath: '../../../static/location.png'
+                }, {
+                    latitude: 39.90,
+                    longitude: 116.39,
+                    iconPath: '../../../static/location.png'
+                }]
+            }
+        },
+        methods: {
+
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
diff --git a/examples/hello-uniapp/pages/component/navigator/index.vue b/examples/hello-uniapp/pages/component/navigator/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3d35c6ad0e1dc1ca19ee2090a4c36fd52086a5d8
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/navigator/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="btn-area">
+                <navigator url="navigate?title=navigate" hover-class="navigator-hover">
+                    <button type="default">跳转到新页面</button>
+                </navigator>
+                <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">
+                    <button type="default">在当前页打开</button>
+                </navigator>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    export default {
+        data() {
+            return {
+                title: 'navigator'
+            }
+        },
+        methods: {
+
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
diff --git a/examples/hello-uniapp/pages/component/navigator/navigate.vue b/examples/hello-uniapp/pages/component/navigator/navigate.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1f5fd5972f552ed36e4d848ccbf6ab75d8e74b8f
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/navigator/navigate.vue
@@ -0,0 +1,19 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    export default {
+        data() {
+            return {
+                title: '新建的页面'
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
diff --git a/examples/hello-uniapp/pages/component/navigator/redirect.vue b/examples/hello-uniapp/pages/component/navigator/redirect.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0237f914b1375a74f20ce6cb94d0046d3701e236
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/navigator/redirect.vue
@@ -0,0 +1,19 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    export default {
+        data() {
+            return {
+                title: '当前页'
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
diff --git a/examples/hello-uniapp/pages/component/picker/index.vue b/examples/hello-uniapp/pages/component/picker/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..64fe3a9921f3e1efe0be1f395d7064a6f75012cd
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/picker/index.vue
@@ -0,0 +1,92 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="page-section-title">地区选择器</view>
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <view class="list-left">
+                            当前选择
+                        </view>
+                        <view class="uni-list-cell-db">
+                            <picker @change="bindPickerChange" :value="index" :range="array">
+                                <view class="uni-input">{{array[index]}}</view>
+                            </picker>
+                        </view>
+                    </view>
+                </view>
+
+                <view class="page-section-title">时间选择器</view>
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <view class="list-left">
+                            当前选择
+                        </view>
+                        <view class="uni-list-cell-db">
+                            <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
+                                <view class="uni-input">{{time}}</view>
+                            </picker>
+                        </view>
+                    </view>
+                </view>
+
+                <view class="page-section-title">日期选择器</view>
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <view class="list-left">
+                           当前选择
+                        </view>
+                        <view class="uni-list-cell-db">
+                            <picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
+                                <view class="uni-input">{{date}}</view>
+                            </picker>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'picker',
+                array: ['中国', '美国', '巴西', '日本'],
+                index: 0,
+                date: '2016-09-01',
+                time: '12:01'
+            }
+        },
+        methods: {
+            bindPickerChange: function (e) {
+                console.log('picker发送选择改变，携带值为', e.target.value)
+                this.index = e.target.value
+            },
+            bindDateChange: function (e) {
+                this.date = e.target.value
+            },
+            bindTimeChange: function (e) {
+                this.time = e.target.value
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    .uni-list-cell{
+        justify-content: flex-start;
+    }
+    .uni-list-cell-db,.list-left{
+        padding: 0 24rpx;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/component/progress/index.vue b/examples/hello-uniapp/pages/component/progress/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e57e0b5b5c4e4616d334feed583c0a66299f8318
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/progress/index.vue
@@ -0,0 +1,57 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section page-section-gap">
+                <view class="progress-box">
+                    <progress percent="20" show-info stroke-width="3" />
+                </view>
+                <view class="progress-box">
+                    <progress percent="40" active stroke-width="3" />
+                    <icon class="progress-cancel" type="cancel"></icon>
+                </view>
+                <view class="progress-box">
+                    <progress percent="60" active stroke-width="3" />
+                </view>
+                <view class="progress-box">
+                    <progress percent="80" color="#10AEFF" active stroke-width="3" />
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'progress'
+            }
+        },
+        methods: {
+
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    progress {
+        width: 100%;
+    }
+
+    .progress-box {
+        display: flex;
+        height: 50rpx;
+        margin-bottom: 60rpx;
+    }
+
+    .progress-cancel {
+        margin-left: 40rpx;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/component/radio/index.vue b/examples/hello-uniapp/pages/component/radio/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fb4ffff073ed8eed572d4eab25046e6ae26ed2ee
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/radio/index.vue
@@ -0,0 +1,93 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section page-section-gap">
+                <view class="page-section-title">默认样式</view>
+                <label class="radio">
+                    <radio value="r1" checked="true" />选中
+                </label>
+                <label class="radio">
+                    <radio value="r2" />未选中
+                </label>
+            </view>
+
+
+            <view class="page-section">
+                <view class="page-section-title">推荐展示样式</view>
+                <view class="uni-list">
+                    <radio-group bindchange="radioChange">
+                        <label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
+                            <view>
+                                <radio :value="item.value" checked="true" />
+                            </view>
+                            <view>{{item.name}}</view>
+                        </label>
+                    </radio-group>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'radio',
+                items: [
+                    {
+                        value: 'USA',
+                        name: '美国'
+                    },
+                    {
+                        value: 'CHN',
+                        name: '中国',
+                        checked: 'true'
+                    },
+                    {
+                        value: 'BRA',
+                        name: '巴西'
+                    },
+                    {
+                        value: 'JPN',
+                        name: '日本'
+                    },
+                    {
+                        value: 'ENG',
+                        name: '英国'
+                    },
+                    {
+                        value: 'FRA',
+                        name: '法国'
+                    },
+                ]
+            }
+        },
+        methods: {
+            radioChange: function (e) {
+                console.log('radio发生change事件，携带value值为：', e.target.value)
+                var items = this.items;
+                for (var i = 0, len = items.length; i < len; ++i) {
+                    items[i].checked = items[i].value == e.target.value
+                }
+
+                this.items = items
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    
+    .uni-list-cell{
+    	justify-content:flex-start
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/component/scroll-view/index.vue b/examples/hello-uniapp/pages/component/scroll-view/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c94c59db9f4a6e21cb2247750ad78ba341df2a06
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/scroll-view/index.vue
@@ -0,0 +1,87 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="page-section-title">
+                    <text>Vertical Scroll\n纵向滚动</text>
+                </view>
+                <view class="page-section-spacing">
+                    <scroll-view scroll-y="true" style="height: 300rpx;" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" :scroll-into-view="toView"
+                        :scroll-top="scrollTop">
+                        <view id="demo1" class="scroll-view-item color1">A</view>
+                        <view id="demo2" class="scroll-view-item color2">B</view>
+                        <view id="demo3" class="scroll-view-item color3">C</view>
+                    </scroll-view>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-title">
+                    <text>Horizontal Scroll\n横向滚动</text>
+                </view>
+                <view class="page-section-spacing">
+                    <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" style="width: 100%">
+                        <view id="demo1" class="scroll-view-item_H color1">A</view>
+                        <view id="demo2" class="scroll-view-item_H color2">B</view>
+                        <view id="demo3" class="scroll-view-item_H color3">C</view>
+                    </scroll-view>
+                </view>
+            </view>
+        </view>
+
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    export default {
+        data() {
+            return {
+                title: 'scroll-view',
+                toView: 'green',
+                order: ['demo1', 'demo2', 'demo3']
+            }
+        },
+        methods: {
+            upper: function (e) {
+                console.log(e)
+            },
+            lower: function (e) {
+                console.log(e)
+            },
+            scroll: function (e) {
+                console.log(e)
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    .page-section-spacing {
+        margin-top: 60rpx;
+    }
+
+    .scroll-view_H {
+        white-space: nowrap;
+    }
+
+    .scroll-view-item {
+        height: 300rpx;
+        line-height: 300rpx;
+        text-align: center;
+        font-size: 36rpx;
+    }
+
+    .scroll-view-item_H {
+        display: inline-block;
+        width: 100%;
+        height: 300rpx;
+        line-height: 300rpx;
+        text-align: center;
+        font-size: 36rpx;
+    }
+
+</style>
diff --git a/examples/hello-uniapp/pages/component/slider/index.vue b/examples/hello-uniapp/pages/component/slider/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2aa36e21e07d2fd177bd6870e7301e42a3255df5
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/slider/index.vue
@@ -0,0 +1,42 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section page-section-gap">
+                <view class="page-section-title">设置step</view>
+                <view class="body-view">
+                    <slider value="60" @change="slider2change" step="5" />
+                </view>
+            </view>
+
+            <view class="page-section page-section-gap">
+                <view class="page-section-title">显示当前value</view>
+                <view class="body-view">
+                    <slider value="50" @change="slider3change" show-value/>
+                </view>
+            </view>
+
+            <view class="page-section page-section-gap">
+                <view class="page-section-title">设置最小/最大值</view>
+                <view class="body-view">
+                    <slider value="100" @change="slider4change" min="50" max="200" show-value/>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'slider'
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/component/swiper/index.vue b/examples/hello-uniapp/pages/component/swiper/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bc247b4890f0d63381ecc7b46218c8bcaa67be34
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/swiper/index.vue
@@ -0,0 +1,106 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section page-section-spacing swiper">
+                <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
+                    <swiper-item>
+                        <view class="swiper-item color1">A</view>
+                    </swiper-item>
+                    <swiper-item>
+                        <view class="swiper-item color2">B</view>
+                    </swiper-item>
+                    <swiper-item>
+                        <view class="swiper-item color3">C</view>
+                    </swiper-item>
+                </swiper>
+            </view>
+            <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
+                <view class="uni-list">
+                    <view class="uni-list-cell uni-list-cell-pd">
+                        <view class="uni-list-cell-db">指示点</view>
+                        <switch :checked="indicatorDots" @change="changeIndicatorDots" />
+                    </view>
+                    <view class="uni-list-cell uni-list-cell-pd">
+                        <view class="uni-list-cell-db">自动播放</view>
+                        <switch :checked="autoplay" @change="changeAutoplay" />
+                    </view>
+                </view>
+            </view>
+
+            <view class="page-section page-section-spacing">
+                <view class="page-section-title">
+                    <text>幻灯片切换时长(ms)</text>
+                    <text class="info">{{duration}}</text>
+                </view>
+                <slider @change="durationChange" :value="duration" min="500" max="2000" />
+                <view class="page-section-title">
+                    <text>自动播放间隔时长(ms)</text>
+                    <text class="info">{{interval}}</text>
+                </view>
+                <slider @change="intervalChange" :value="interval" min="2000" max="10000" />
+            </view>
+        </view>
+
+
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    export default {
+        data() {
+            return {
+                title: 'swiper',
+                background: ['color1', 'color2', 'color3'],
+                indicatorDots: true,
+                vertical: false,
+                autoplay: false,
+                interval: 2000,
+                duration: 500
+            }
+        },
+        methods: {
+            changeIndicatorDots(e) {
+                this.indicatorDots = !this.indicatorDots
+            },
+            changeAutoplay(e) {
+                this.autoplay = !this.autoplay
+            },
+            intervalChange(e) {
+                this.interval = e.target.value
+            },
+            durationChange(e) {
+                this.duration = e.target.value
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+
+    .swiper-item {
+        display: block;
+        height: 150px;
+        line-height: 150px;
+        text-align: center;
+    }
+
+    .page-section-title {
+        padding: 0;
+        margin-top: 60rpx;
+        position: relative;
+    }
+
+    .info {
+        position: absolute;
+        right: 0;
+        color: #353535;
+        font-size: 30rpx;
+    }
+
+</style>
diff --git a/examples/hello-uniapp/pages/component/switch/index.vue b/examples/hello-uniapp/pages/component/switch/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e0dc8919094490aa982730ed1acd7ffbc6f4094f
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/switch/index.vue
@@ -0,0 +1,55 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section page-section-gap">
+                <view class="page-section-title">默认样式</view>
+                <view class="body-view">
+                    <switch checked @change="switch1Change" />
+                    <switch @change="switch2Change" />
+                </view>
+            </view>
+
+            <view class="page-section">
+                <view class="page-section-title">推荐展示样式</view>
+                <view class="uni-list">
+                    <view class="uni-list-cell uni-list-cell-pd">
+                        <view class="uni-list-cell-db">开启中</view>
+                        <switch checked />
+                    </view>
+                    <view class="uni-list-cell uni-list-cell-pd">
+                        <view class="uni-list-cell-db">关闭</view>
+                        <switch />
+                    </view>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'switch'
+            }
+        },
+        methods: {
+            switch1Change: function (e) {
+                console.log('switch1 发生 change 事件，携带值为', e.target.value)
+            },
+            switch2Change: function (e) {
+                console.log('switch2 发生 change 事件，携带值为', e.target.value)
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+</style>
diff --git a/examples/hello-uniapp/pages/component/text/index.vue b/examples/hello-uniapp/pages/component/text/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1412f9edb3484ae847006cbb07b0ed61a0eb45da
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/text/index.vue
@@ -0,0 +1,82 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section page-section-spacing">
+                <view class="text-box" scroll-y="true">
+                    <text>{{text}}</text>
+                </view>
+                <button :disabled="!canAdd" @tap="add">add line</button>
+                <button :disabled="!canRemove" @tap="remove">remove line</button>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'text',
+                texts: [
+                    'HBuilder，200万开发者选择的IDE',
+                    'MUI，轻巧、漂亮的前端开源框架',
+                    'wap2app，M站快速转换原生体验的App',
+                    '5+Runtime，为HTML5插上原生的翅膀',
+                    'HBuilderX，轻巧、极速，极客编辑器',
+                    'Uni-app，终极跨平台方案',
+                    'HBuilder，200万开发者选择的IDE',
+                    'MUI，轻巧、漂亮的前端开源框架',
+                    'wap2app，M站快速转换原生体验的App',
+                    '5+Runtime，为HTML5插上原生的翅膀',
+                    'HBuilderX，轻巧、极速，极客编辑器',
+                    'Uni-app，终uni-app台方案',
+                    '......'
+                ],
+                text: '',
+                canAdd: true,
+                canRemove: false,
+                extraLine: []
+            }
+        },
+        methods: {
+            add: function (e) {
+                this.extraLine.push(this.texts[this.extraLine.length % 12])
+                this.text = this.extraLine.join('\n'),
+                    this.canAdd = this.extraLine.length < 12,
+                    this.canRemove = this.extraLine.length > 0
+            },
+            remove: function (e) {
+                if (this.extraLine.length > 0) {
+                    this.extraLine.pop()
+                    this.text = this.extraLine.join('\n'),
+                        this.canAdd = this.extraLine.length < 12,
+                        this.canRemove = this.extraLine.length > 0
+                }
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+
+    .text-box {
+        margin-bottom: 70rpx;
+        padding: 40rpx 0;
+        display: flex;
+        min-height: 300rpx;
+        background-color: #FFFFFF;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        font-size: 30rpx;
+        color: #353535;
+        line-height: 2em;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/component/textarea/index.vue b/examples/hello-uniapp/pages/component/textarea/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..22c609e60561c7de945157b636ee6a36d4ee0ee5
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/textarea/index.vue
@@ -0,0 +1,54 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="page-section-title">输入区域高度自适应，不会出现滚动条</view>
+                <view class="textarea-wrp">
+                    <textarea @blur="bindTextAreaBlur" auto-height />
+                </view>
+            </view>
+
+            <view class="page-section">
+                <view class="page-section-title">这是一个可以自动聚焦的textarea</view>
+                <view class="textarea-wrp">
+                    <textarea auto-focus="true" style="height: 3em" />
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'textarea',
+                focus: false
+            }
+        },
+        methods: {
+            bindTextAreaBlur: function (e) {
+                console.log(e.detail.value)
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    textarea {
+        width: 700rpx;
+        padding: 25rpx 0;
+    }
+
+    .textarea-wrp {
+        padding: 0 25rpx;
+        background-color: #fff;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/component/video/index.vue b/examples/hello-uniapp/pages/component/video/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9c7f0d565ac647a2feba19cee86efd77e7debfa8
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/video/index.vue
@@ -0,0 +1,111 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <video id="myVideo" src="http://img.cdn.qiniu.dcloud.net.cn/wap2appvsnative.mp4"
+                    @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
+
+                <view class="uni-list">
+                    <view class="uni-list-cell">
+                        <view style="padding: 0 24rpx;">
+                            <view class="uni-label">弹幕内容</view>
+                        </view>
+                        <view class="uni-list-cell-db">
+                            <input @blur="bindInputBlur" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
+                        </view>
+                    </view>
+                </view>
+                <view class="btn-area">
+                    <button @tap="bindSendDanmu" class="page-body-button"  formType="submit">发送弹幕</button>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'video',
+                src: '',
+                inputValue: '',
+                danmuList: [
+                    {
+                        text: '第 1s 出现的弹幕',
+                        color: '#ff0000',
+                        time: 1
+                    },
+                    {
+                        text: '第 3s 出现的弹幕',
+                        color: '#ff00ff',
+                        time: 3
+                    }
+                ]
+            }
+        },
+        onReady: function (res) {
+            this.videoContext = uni.createVideoContext('myVideo')
+        },
+        methods: {
+            bindInputBlur: function (e) {
+                this.inputValue = e.target.value
+            },
+            bindButtonTap: function () {
+                var that = this
+                uni.chooseVideo({
+                    sourceType: ['album', 'camera'],
+                    maxDuration: 60,
+                    camera: ['front', 'back'],
+                    success: function (res) {
+                        this.src = res.tempFilePath
+                    }
+                })
+            },
+            bindSendDanmu: function () {
+                this.videoContext.sendDanmu({
+                    text: this.inputValue,
+                    color: this.getRandomColor()
+                })
+            },
+            videoErrorCallback: function (e) {
+                console.log('视频错误信息:')
+                console.log(e.target.errMsg)
+            },
+            getRandomColor: function () {
+                const rgb = []
+                for (let i = 0; i < 3; ++i) {
+                    let color = Math.floor(Math.random() * 256).toString(16)
+                    color = color.length == 1 ? '0' + color : color
+                    rgb.push(color)
+                }
+                return '#' + rgb.join('')
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    
+    button{
+        background-color:#007aff;
+        color: #ffffff;
+    }
+    .uni-list{
+        margin-top: 40rpx;
+    }
+    .uni-input{
+        text-align: left;
+    }
+    .page-section{
+        text-align: center;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/component/view/index.vue b/examples/hello-uniapp/pages/component/view/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..57e885bccb4f89e577916cb935ee25aa03fdbf78
--- /dev/null
+++ b/examples/hello-uniapp/pages/component/view/index.vue
@@ -0,0 +1,68 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="page-section-title">
+                    <text>flex-direction: row\n横向布局</text>
+                </view>
+                <view class="page-section-spacing">
+                    <view class="uni-flex" style="flex-direction:row;">
+                        <view class="flex-item color1">A</view>
+                        <view class="flex-item color2">B</view>
+                        <view class="flex-item color3">C</view>
+                    </view>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-title">
+                    <text>flex-direction: column\n纵向布局</text>
+                </view>
+                <view class="uni-flex" style="flex-direction:column;">
+                    <view class="flex-item flex-item-V color1">A</view>
+                    <view class="flex-item flex-item-V color2">B</view>
+                    <view class="flex-item flex-item-V color3">C</view>
+                </view>
+            </view>
+        </view>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'view'
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    
+    .uni-flex {
+        margin-top: 60rpx;
+    }
+
+    .flex-item {
+        width: 200rpx;
+        height: 300rpx;
+        text-align: center;
+        line-height: 300rpx;
+        font-size: 26rpx;
+    }
+
+    .flex-item-V {
+        margin: 0 auto;
+        width: 300rpx;
+        height: 200rpx;
+        text-align: center;
+        line-height: 200rpx;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/template/accordion/index.vue b/examples/hello-uniapp/pages/template/accordion/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c62f652f6d8aec47d8d97491961f082bba2b73eb
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/accordion/index.vue
@@ -0,0 +1,107 @@
+<template>
+    <view class="page">
+        <page-head :title="title"></page-head>
+        <view class="uni-card">
+        	<view class="uni-list">
+            <block  v-for="(list,index) in lists" :key="index">
+              <view class="uni-list-cell uni-collapse">
+              	<view class="uni-list-cell-navigate uni-navigate-bottom" :class="list.show ? 'uni-active' : ''" @click="trigerCollapse(index)">
+              		{{list.title}}
+              	</view>
+              	<view class="uni-collapse-content" :class="list.show ? 'uni-active' : ''">
+              		<swiper v-if="list.type === 'swiper'"  autoplay="true" indicator-dots="true" circular="true">
+                      <swiper-item v-for="(img,key) in imgUrls" :key="key">
+                        <image :src="img" style="width: 100%;"/>
+                      </swiper-item>
+                  </swiper>
+                  <view v-if="list.type === 'font'" style="padding: 18px;">
+                  		<view style="font-size: 50rpx;">hello uni-app</view>
+                  		<view style="font-size: 40rpx;">hello uni-app</view>
+                  		<view style="font-size: 30rpx;">hello uni-app</view>
+                  		<view style="font-size: 20rpx;">hello uni-app</view>
+                  		<view style="font-size: 10rpx;">hello uni-app</view>
+                  </view>
+                  <view v-if="list.type === 'list'">
+                  		<view class="uni-list">
+                  			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
+                  				<view class="uni-list-cell-navigate uni-navigate-right">hello uni-app</view>
+                  			</view>
+                  			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
+                  				<view class="uni-list-cell-navigate uni-navigate-right">hello uni-app</view>
+                  			</view>
+                  			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
+                  				<view class="uni-list-cell-navigate uni-navigate-right">hello uni-app</view>
+                  			</view>
+                  		</view>
+                  </view>
+              	</view>
+              </view>
+            </block>
+        	</view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    export default {
+        data: {
+            title: 'accordion',
+            lists:[
+            	{
+            		title:"图片轮播",
+                type:'swiper',
+            		show:false
+            	},
+            	{
+            		title:"列表",
+                type:'list',
+            		show:false
+            	},
+            	{
+            		title:"文字排版",
+                type:'font',
+            		show:false
+            	}
+            ],
+            imgUrls: [
+              'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
+              'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
+              'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
+            ]
+        },
+        methods: {
+        	trigerCollapse(e) {
+            for (let i = 0, len = this.lists.length; i < len; ++i) {
+            	if (e === i) {
+            		this.lists[i].show = !this.lists[i].show;
+            	} else {
+            		this.lists[i].show = false;
+            	}
+            }
+        	}
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    
+    .page {
+        padding-top: 60rpx;
+    }
+
+    page {
+        background: #efeff4;
+    }
+    .list-collapse{
+      padding-left: 18px;
+      box-sizing: border-box;
+    }
+    
+    
+</style>
diff --git a/examples/hello-uniapp/pages/template/badge/index.vue b/examples/hello-uniapp/pages/template/badge/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c11b0e7c3b16fad7826758862a0810540278607b
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/badge/index.vue
@@ -0,0 +1,57 @@
+<template>
+    <view class="page">
+        <page-head :title="title"></page-head>
+        <view class='title'>
+            <text>有底色</text>
+        </view>
+        <view>
+            <text class="uni-badge">1</text>
+            <text class="uni-badge uni-badge-primary">12</text>
+            <text class="uni-badge uni-badge-success">123</text>
+            <text class="uni-badge uni-badge-warning">3</text>
+            <text class="uni-badge uni-badge-danger">45</text>
+            <text class="uni-badge uni-badge-purple">456</text>
+        </view>
+        <view class='title'>
+            <text>无底色</text>
+        </view>
+        <view>
+            <text class="uni-badge uni-badge-inverted">1</text>
+            <text class="uni-badge uni-badge-primary uni-badge-inverted">12</text>
+            <text class="uni-badge uni-badge-success uni-badge-inverted">123</text>
+            <text class="uni-badge uni-badge-warning uni-badge-inverted">3</text>
+            <text class="uni-badge uni-badge-danger uni-badge-inverted">45</text>
+            <text class="uni-badge uni-badge-purple uni-badge-inverted">456</text>
+        </view>
+    </view>
+</template>
+
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    export default {
+        data: {
+            title: 'badge'
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    
+    .page {
+        padding-top: 60rpx;
+    }
+
+    page {
+        background: #efeff4;
+    }
+    
+    .uni-badge,.title{
+        margin: 20rpx;
+    }
+    
+</style>
diff --git a/examples/hello-uniapp/pages/template/cardview/index.vue b/examples/hello-uniapp/pages/template/cardview/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..27c9296f3d38936166eae8353f0e8b706d5a0a3d
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/cardview/index.vue
@@ -0,0 +1,79 @@
+<template>
+    <view class="page">
+        <page-head :title="title"></page-head>
+        <view class="uni-card">
+            <view class="uni-card-content">
+                <view class="uni-card-content-inner">
+                    这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等
+                </view>
+            </view>
+        </view>
+        <view class="uni-card">
+            <view class="uni-card-header">页眉</view>
+            <view class="uni-card-content">
+                <view class="uni-card-content-inner">
+                    包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
+                </view>
+            </view>
+            <view class="uni-card-footer">页脚</view>
+        </view>
+        <view class="uni-card">
+            <view class="uni-card-header uni-card-media">
+                <image class="uni-card-media-logo" src="http://img-cdn-qiniu.dcloud.net.cn/newpage/images/uni.png"></image>
+                <view class="uni-card-media-body">
+                    <text class="uni-card-media-text-top">小U</text>
+                    <text class="uni-card-media-text-bottom">发表于 2018-01-30 15:30</text>
+                </view>
+            </view>
+            <view class="uni-card-content" style="height: 480rpx;overflow: hidden;">
+                <image src="../../../static/shuijiao.jpg" style="width: 100%;"></image>
+            </view>
+            <view class="uni-card-footer">
+                <view class="uni-card-link">Like</view>
+                <view class="uni-card-link">Comment</view>
+                <view class="uni-card-link">Read more</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    export default {
+        data: {
+            title: 'cardview',
+            show1: false,
+            show2: false,
+            imgUrls: [
+                'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
+                'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
+                'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
+            ]
+        },
+        methods: {
+            triggerCollapse1() {
+                this.show1 = !this.show1;
+            },
+            triggerCollapse2() {
+                this.show2 = !this.show2;
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+
+    .page {
+        padding-top: 60rpx;
+    }
+
+    page {
+        background: #efeff4;
+    }
+    
+</style>
diff --git a/examples/hello-uniapp/pages/template/drag-left-zoom/index.vue b/examples/hello-uniapp/pages/template/drag-left-zoom/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a97edac5a86eaf63b6857c43d67b95de76ad553d
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/drag-left-zoom/index.vue
@@ -0,0 +1,132 @@
+<template>
+    <view class="index">
+        <view class="page-bottom" @touchmove="tap_drag" @touchend="tap_end" @touchstart="tap_start">
+            <view class="page-content">
+                <view class="wc">
+                    <navigator url="#" hover-class="navigator-hover">第一个菜单</navigator>
+                </view>
+                <view class="wc">
+                    <navigator url="#" hover-class="navigator-hover">第二个菜单（缩放）</navigator>
+                </view>
+                <view class="wc">
+                    <navigator url="#" hover-class="navigator-hover">第三个菜单（拖动）</navigator>
+                </view>
+                <view class="wc">
+                    <navigator url="#" hover-class="navigator-hover">第四个菜单</navigator>
+                </view>
+            </view>
+        </view>
+        <view @touchmove="tap_drag" @touchend="tap_end" @touchstart="tap_start" :class="['page-top',openDrag ? 'c-state2' : '',openClick ? 'c-state2' : '']">
+            <image src="../../../static/menu.png" @tap="tap_ch"></image>
+        </view>
+    </view>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                openDrag: false,
+                openClick:false,
+                markX: 0,
+                newmarkX: 0,
+                markY:0,
+                newmarkY:0,
+                istoright: true
+            }
+        },
+        onReady:function(){
+        	//如果返回时侧滑仍是打开状态，则再次打开页面，侧滑依然显示。如果不想看到，可以进来的时候重置下状态
+        	this.openDrag = false; 
+        	this.openClick = false; 
+        },
+        methods: {
+            tap_ch: function (e) {
+                if (this.openClick || this.openDrag) {
+                	this.openClick = false
+                	this.openDrag = false
+                } else {
+                	this.openClick = true
+                }
+            },
+            tap_start: function (e) {
+                this.markX = this.newmarkX = e.touches[0].pageX;
+                this.markY = this.newmarkY = e.touches[0].pageY;
+                console.log('e.touches[0].pageX:' + e.touches[0].pageX);
+            },
+            tap_drag: function (e) {
+                this.newmarkX = e.touches[0].pageX;
+                this.newmarkY = e.touches[0].pageY;
+                console.log('this.newmarkX:' + e.touches[0].pageX);
+                if (this.markX > this.newmarkX) {
+                    this.istoright = false;
+                }else{
+                    this.istoright = true;
+                }
+                this.markX = this.newmarkX;
+            },
+            tap_end: function () {
+                if(this.newmarkY - this.markY > 25 || this.markY - this.newmarkY > 25){//防止上下拖动时触发侧滑
+                	return false;
+                }
+                this.markX = 0;
+                this.newmarkX = 0;
+                this.markY = 0;
+                this.newmarkY = 0;
+                if (!this.istoright) {
+                    this.openDrag = true
+                }else{
+                    this.openDrag = false
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .page-bottom {
+        height: 100%;
+        width: 750rpx;
+        position: fixed;
+        background-color: rgb(0, 68, 97);
+        z-index: 0;
+    }
+
+    .wc {
+        color: white;
+        padding: 30rpx 0 30rpx 40rpx;
+        text-align: right;
+    }
+
+    .page-content {
+        padding-top: 300rpx;
+        padding-right: 30rpx;
+    }
+
+    .page-top {
+        height: 100%;
+        position: fixed;
+        width: 750rpx;
+        background-color: rgb(57, 125, 230);
+        z-index: 0;
+        transition: All 0.4s ease;
+        -webkit-transition: All 0.4s ease;
+    }
+
+    .page-top image {
+        position: absolute;
+        width: 68rpx;
+        height: 68rpx;
+        right: 20rpx;
+        top: 20rpx;
+    }
+
+    .c-state1 {
+        transform: rotate(0deg) scale(1) translate(-75%, 0%);
+        -webkit-transform: rotate(0deg) scale(1) translate(-75%, 0%);
+    }
+
+    .c-state2 {
+        transform: rotate(0deg) scale(.8) translate(-75%, 0%);
+        -webkit-transform: rotate(0deg) scale(.8) translate(-75%, 0%);
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/template/drag-left/index.vue b/examples/hello-uniapp/pages/template/drag-left/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d40bc97f762b94d6d500963fc01ffcf9e07ce3ef
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/drag-left/index.vue
@@ -0,0 +1,128 @@
+<template>
+    <view class="index">
+        <view class="page-bottom" @touchmove="tap_drag" @touchend="tap_end" @touchstart="tap_start">
+            <view class="page-content">
+                <view class="wc">
+                    <navigator url="#" hover-class="navigator-hover">第一个菜单</navigator>
+                </view>
+                <view class="wc">
+                    <navigator url="#" hover-class="navigator-hover">第二个菜单（缩放）</navigator>
+                </view>
+                <view class="wc">
+                    <navigator url="#" hover-class="navigator-hover">第三个菜单（拖动）</navigator>
+                </view>
+                <view class="wc">
+                    <navigator url="#" hover-class="navigator-hover">第四个菜单</navigator>
+                </view>
+            </view>
+        </view>
+        <view @touchmove="tap_drag" @touchend="tap_end" @touchstart="tap_start" :class="['page-top',openDrag ? 'c-state1' : '',openClick ? 'c-state1' : '']">
+            <image src="../../../static/menu.png" @tap="tap_ch"></image>
+
+        </view>
+    </view>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                openDrag: false,
+                openClick:false,
+                markX: 0,
+                newmarkX: 0,
+                markY:0,
+                newmarkY:0,
+                istoright: true
+            }
+        },
+        onReady:function(){
+        	//如果返回时侧滑仍是打开状态，则再次打开页面，侧滑依然显示。如果不想看到，可以进来的时候重置下状态
+        	this.openDrag = false; 
+        	this.openClick = false; 
+        },
+        methods: {
+            tap_ch: function (e) {
+                if (this.openClick || this.openDrag) {
+                	this.openClick = false
+                	this.openDrag = false
+                } else {
+                	this.openClick = true
+                }
+            },
+            tap_start: function (e) {
+                this.markX = this.newmarkX = e.touches[0].pageX;
+                this.markY = this.newmarkY = e.touches[0].pageY;
+                console.log('e.touches[0].pageX:' + e.touches[0].pageX);
+            },
+            tap_drag: function (e) {
+                this.newmarkX = e.touches[0].pageX;
+                this.newmarkY = e.touches[0].pageY;
+                console.log('this.newmarkX:' + e.touches[0].pageX);
+                if (this.markX > this.newmarkX) {
+                    this.istoright = false;
+                }else{
+                    this.istoright = true;
+                }
+                this.markX = this.newmarkX;
+            },
+            tap_end: function () {
+                if(this.newmarkY - this.markY > 25 || this.markY - this.newmarkY > 25){//防止上下拖动时触发侧滑
+                	return false;
+                }
+                this.markX = 0;
+                this.newmarkX = 0;
+                this.markY = 0;
+                this.newmarkY = 0;
+                if (!this.istoright) {
+                    this.openDrag = true
+                }else{
+                    this.openDrag = false
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .page-bottom {
+        height: 100%;
+        width: 750rpx;
+        position: fixed;
+        background-color: rgb(0, 68, 97);
+        z-index: 0;
+    }
+
+    .wc {
+        color: white;
+        padding: 30rpx 0 30rpx 40rpx;
+        text-align: right;
+    }
+
+    .page-content {
+        padding-top: 300rpx;
+        padding-right: 30rpx;
+    }
+
+    .page-top {
+        height: 100%;
+        position: fixed;
+        width: 750rpx;
+        background-color: rgb(57, 125, 230);
+        z-index: 0;
+        transition: All 0.4s ease;
+        -webkit-transition: All 0.4s ease;
+    }
+
+    .page-top image {
+        position: absolute;
+        width: 68rpx;
+        height: 68rpx;
+        right: 20rpx;
+        top: 20rpx;
+    }
+
+    .c-state1 {
+        transform: rotate(0deg) scale(1) translate(-75%, 0%);
+        -webkit-transform: rotate(0deg) scale(1) translate(-75%, 0%);
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/template/drag-right-zoom/index.vue b/examples/hello-uniapp/pages/template/drag-right-zoom/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..80ed428da1d99ee78913c4126eeca5f4723fa57f
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/drag-right-zoom/index.vue
@@ -0,0 +1,130 @@
+<template>
+    <view class="index">
+        <view class="page-bottom" @touchmove="tap_drag" @touchend="tap_end" @touchstart="tap_start">
+            <view class="page-content">
+                <view class="wc">
+                    <navigator url="#" hover-class="navigator-hover">第一个菜单</navigator>
+                </view>
+                <view class="wc">
+                    <navigator url="#" hover-class="navigator-hover">第二个菜单（缩放）</navigator>
+                </view>
+                <view class="wc">
+                    <navigator url="#" hover-class="navigator-hover">第三个菜单（拖动）</navigator>
+                </view>
+                <view class="wc">
+                    <navigator url="#" hover-class="navigator-hover">第四个菜单</navigator>
+                </view>
+            </view>
+        </view>
+        <view  @touchmove="tap_drag" @touchend="tap_end" @touchstart="tap_start" :class="['page-top',openDrag ? 'c-state2' : '',openClick ? 'c-state2' : '']">
+            <image src="../../../static/menu.png" @tap="tap_ch"></image>
+        </view>
+    </view>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                openDrag: false,
+                openClick:false,
+                markX: 0,
+                newmarkX: 0,
+                markY:0,
+                newmarkY:0,
+                istoright: false
+            }
+        },
+        onReady:function(){
+        	//如果返回时侧滑仍是打开状态，则再次打开页面，侧滑依然显示。如果不想看到，可以进来的时候重置下状态
+        	this.openDrag = false; 
+        	this.openClick = false; 
+        },
+        methods: {
+            tap_ch: function (e) {
+                if (this.openClick || this.openDrag) {
+                	this.openClick = false
+                	this.openDrag = false
+                } else {
+                	this.openClick = true
+                }
+            },
+            tap_start: function (e) {
+                this.markX = this.newmarkX = e.touches[0].pageX;
+                this.markY = this.newmarkY = e.touches[0].pageY;
+                console.log('e.touches[0].pageX:' + e.touches[0].pageX);
+            },
+            tap_drag: function (e) {
+                this.newmarkX = e.touches[0].pageX;
+                this.newmarkY = e.touches[0].pageY;
+                console.log('this.newmarkX:' + e.touches[0].pageX);
+                if (this.markX > this.newmarkX) {
+                    this.istoright = false;
+                }else{
+                    this.istoright = true;
+                }
+                this.markX = this.newmarkX;
+            },
+            tap_end: function () {
+                if(this.newmarkY - this.markY > 25 || this.markY - this.newmarkY > 25){//防止上下拖动时触发侧滑
+                	return false;
+                }
+                this.markX = 0;
+                this.newmarkX = 0;
+                this.markY = 0;
+                this.newmarkY = 0;
+                if (this.istoright) {
+                    this.openDrag = true
+                }else{
+                    this.openDrag = false
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .page-bottom {
+        height: 100%;
+        width: 750rpx;
+        position: fixed;
+        background-color: rgb(0, 68, 97);
+        z-index: 0;
+    }
+
+    .wc {
+        color: white;
+        padding: 30rpx 0 30rpx 40rpx;
+    }
+
+    .page-content {
+        padding-top: 300rpx;
+    }
+
+    .page-top {
+        height: 100%;
+        position: fixed;
+        width: 750rpx;
+        background-color: rgb(57, 125, 230);
+        z-index: 0;
+        transition: All 0.4s ease;
+        -webkit-transition: All 0.4s ease;
+    }
+
+    .page-top image {
+        position: absolute;
+        width: 68rpx;
+        height: 68rpx;
+        left: 20rpx;
+        top: 20rpx;
+    }
+
+    .c-state1 {
+        transform: rotate(0deg) scale(1) translate(75%, 0%);
+        -webkit-transform: rotate(0deg) scale(1) translate(75%, 0%);
+    }
+
+    .c-state2 {
+        transform: rotate(0deg) scale(.8) translate(75%, 0%);
+        -webkit-transform: rotate(0deg) scale(.8) translate(75%, 0%);
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/template/drag-right/index.vue b/examples/hello-uniapp/pages/template/drag-right/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1d65ba7cb7617c9ee2d14e240f03e70119178484
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/drag-right/index.vue
@@ -0,0 +1,123 @@
+<template>
+    <view class="index">
+        <view class="page-bottom" @touchmove="tap_drag" @touchend="tap_end" @touchstart="tap_start">
+            <view class="page-content">
+                <view class="wc">
+                    <navigator url="#" hover-class="navigator-hover">第一个菜单</navigator>
+                </view>
+                <view class="wc">
+                    <navigator url="#" hover-class="navigator-hover">第二个菜单（缩放）</navigator>
+                </view>
+                <view class="wc">
+                    <navigator url="#" hover-class="navigator-hover">第三个菜单（拖动）</navigator>
+                </view>
+                <view class="wc">
+                    <navigator url="#" hover-class="navigator-hover">第四个菜单</navigator>
+                </view>
+            </view>
+        </view>
+        <view  @touchmove="tap_drag" @touchend="tap_end" @touchstart="tap_start"  :class="['page-top',openDrag ? 'c-state1' : '',openClick ? 'c-state1' : '']">
+            <image src="../../../static/menu.png" @tap="tap_ch"></image>
+        </view>
+    </view>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                openDrag: false,
+                openClick:false,
+                markX: 0,
+                newmarkX: 0,
+                markY:0,
+                newmarkY:0,
+                istoright: false
+            }
+        },
+        onReady:function(){
+          //如果返回时侧滑仍是打开状态，则再次打开页面，侧滑依然显示。如果不想看到，可以进来的时候重置下状态
+           this.openDrag = false; 
+           this.openClick = false; 
+        },
+        methods: {
+            tap_ch: function (e) {
+                if (this.openClick || this.openDrag) {
+                	this.openClick = false
+                	this.openDrag = false
+                } else {
+                	this.openClick = true
+                }
+            },
+            tap_start: function (e) {
+                this.markX = this.newmarkX = e.touches[0].pageX;
+                this.markY = this.newmarkY = e.touches[0].pageY;
+            },
+            tap_drag: function (e) {
+                this.newmarkX = e.touches[0].pageX;
+                this.newmarkY = e.touches[0].pageY;
+                if (this.markX > this.newmarkX) {
+                    this.istoright = false;
+                }else{
+                    this.istoright = true;
+                }
+                this.markX = this.newmarkX;
+            },
+            tap_end: function () {
+                if(this.newmarkY - this.markY > 25 || this.markY - this.newmarkY > 25){//防止上下拖动时触发侧滑
+                    return false;
+                }
+                this.markX = 0;
+                this.newmarkX = 0;
+                this.markY = 0;
+                this.newmarkY = 0;
+                if (this.istoright) {
+                    this.openDrag = true
+                }else{
+                    this.openDrag = false
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    .page-bottom {
+        height: 100%;
+        width: 750rpx;
+        position: fixed;
+        background-color: rgb(0, 68, 97);
+        z-index: 0;
+    }
+
+    .wc {
+        color: white;
+        padding: 30rpx 0 30rpx 40rpx;
+    }
+
+    .page-content {
+        padding-top: 300rpx;
+    }
+
+    .page-top {
+        height: 100%;
+        position: fixed;
+        width: 750rpx;
+        background-color: rgb(57, 125, 230);
+        z-index: 0;
+        transition: All 0.4s ease;
+        -webkit-transition: All 0.4s ease;
+    }
+
+    .page-top image {
+        position: absolute;
+        width: 68rpx;
+        height: 68rpx;
+        left: 20rpx;
+        top: 20rpx;
+    }
+
+    .c-state1 {
+        transform: rotate(0deg) scale(1) translate(75%, 0%);
+        -webkit-transform: rotate(0deg) scale(1) translate(75%, 0%);
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/template/grid/index.vue b/examples/hello-uniapp/pages/template/grid/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b526a0726bf15bae7e303918b65549bd0fbbc2c7
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/grid/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <view class="page">
+    <page-head :title="title"></page-head>
+    <view class="uni-grid-9">
+      <view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover" v-for="(item,index) in date" :key="index" :class="index % 3 === 2 ? 'no-border-right' : ''">
+        <image class="uni-grid-9-image" :src="item"></image>
+        <text class="uni-grid-9-text">grid</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import pageHead from '../../../components/page-head.vue'
+  
+  export default {
+    data:{
+      title: 'grid',
+      date:["../../../static/c1.png","../../../static/c2.png","../../../static/c3.png","../../../static/c4.png","../../../static/c5.png","../../../static/c6.png","../../../static/c7.png","../../../static/c8.png","../../../static/c9.png"]
+    },
+
+    created () {
+      
+    },
+    components: {
+    	pageHead
+    }
+  }
+</script>
+
+<style>
+  @import "../../../common/uni.css";
+  .page{
+    padding-top: 60rpx;
+  }
+  page{
+  	background: #efeff4;
+  }
+</style>
diff --git a/examples/hello-uniapp/pages/template/index.vue b/examples/hello-uniapp/pages/template/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b0588c775c55a08fbeffd104c414c764a799acce
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/index.vue
@@ -0,0 +1,117 @@
+<template>
+    <view class="index">
+        <view class="index-hd">
+            <image class="index-logo" src="../../static/templateIndex.png"></image>
+            <view class="page-section-title">以下是uni-app的一些常用的模版示例，具体属性参数详见uni-app开发文档。</view>
+        </view>
+        <view class="uni-card" v-for="(list,index) in lists" :key="index">
+            <view class="uni-list">
+                <view class="uni-list-cell uni-collapse">
+                    <view class="uni-list-cell-navigate" hover-class="uni-list-cell-hover" :class="[list.open ? 'uni-active' : '',list.pages ? 'uni-navigate-bottom' : 'uni-navigate-right']"
+                        @click="trigerCollapse(index)">
+                        {{list.name}}
+                    </view>
+                    <view class="uni-list uni-collapse" v-if="list.pages" :class="list.open ? 'uni-active' : ''">
+                        <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key) in list.pages" :key="key" :url="(item.url ? item.url : item) + '/index'"
+                            @click="goDetailPage(item)">
+                            <view class="uni-list-cell-navigate uni-navigate-right"> {{item.name ? item.name : item}} </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                lists: [{
+                        name: '折叠面板',
+                        url: 'accordion'
+                    }, {
+                        name: '数字角标',
+                        url: 'badge'
+                    }, {
+                        name: '卡片视图',
+                        url: 'cardview'
+                    }, {
+                        id: 'lists',
+                        name: '列表',
+                        open: false,
+                        pages: [{
+                            name: '右侧带角标',
+                            url: 'list-with-badges'
+                        }, {
+                            name: '二级列表',
+                            url: 'list-with-collapses'
+                        }, {
+                            name: '三行列表',
+                            url: 'list-triplex-row'
+                        }]
+                    }, {
+                        name: '图文列表',
+                        url: 'media-list'
+                    }, {
+                        name: '九宫格',
+                        url: 'grid'
+                    }, {
+                        name: 'popup',
+                        url: 'popup'
+                    }, {
+                        name: '选项卡',
+                        url: 'tabbar'
+                    },
+                    //                 {
+                    //                     id: 'drags',
+                    //                     name: '侧滑导航',
+                    //                     open: false,
+                    //                     pages: ['drag-right', 'drag-right-zoom', 'drag-left', 'drag-left-zoom']
+                    //                 }, 
+                    {
+                        name: '数字选择框',
+                        url: 'number-box'
+                    }, {
+                        name: '列表到详情的最佳实践',
+                        url: 'list-to-detail'
+                    }
+                ]
+            }
+        },
+        methods: {
+            trigerCollapse(e) {
+                for (var i = 0, len = this.lists.length; i < len; ++i) {
+                    if (e === i) {
+                        this.lists[i].pages ? this.lists[i].open = !this.lists[e].open : this.goDetailPage(this.lists[i]
+                            .url);
+                    } else {
+                        this.lists[i].pages ? this.lists[i].open = false : "";
+                    }
+                }
+            },
+            goDetailPage(e) {
+                let path = e.url ? e.url : e;
+                uni.navigateTo({
+                    url: '/pages/template/' + path + '/index'
+                })
+            }
+        }
+    }
+</script>
+
+<style>
+    @import "../../common/uni.css";
+
+    .uni-card {
+        box-shadow: none;
+    }
+
+    .uni-list:after {
+        height: 0;
+    }
+
+    .uni-list:before {
+        height: 0;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/template/list-to-detail/detail.vue b/examples/hello-uniapp/pages/template/list-to-detail/detail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5d516ac47aafbe7c7ef9151400ea83b6516dc701
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/list-to-detail/detail.vue
@@ -0,0 +1,104 @@
+<template>
+    <view class="page">
+        <view class="banner" @click="goDetail(banner)">
+        	<image class="banner-img" :src="banner.cover"></image>
+        	<view class="banner-title">{{banner.title}}</view>
+        </view>
+        <view class="article-meta">
+            <text class="article-author">{{banner.author_name}}</text>
+            <text class="article-text">发表于</text>
+            <text class="article-time">{{banner.published_at}}</text>
+        </view>
+        <view class="article-content">
+            <rich-text :nodes="htmlString"></rich-text>
+        </view>
+    </view>
+</template>
+
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    export default {
+        data: {
+            title: 'list-triplex-row',
+            banner:{},
+            htmlString:""
+        },
+        onLoad(e){
+            this.banner = JSON.parse(e.detailDate);
+            this.getDetail();
+            uni.setNavigationBarTitle({
+                title:this.banner.title
+            })
+        },
+        onUnload(){
+          this.htmlString = "";
+          this.banner = {}
+        },
+        methods:{
+            getDetail(){
+                uni.request({
+                    url: 'http://spider.dcloud.net.cn/api/news/36kr/' + this.banner.post_id,
+                    success: (data) => {
+                        if (data.statusCode == 200) {
+                            this.htmlString = data.data.content.replace(/\\/g,"");
+                        }
+                    },
+                    fail: () => {
+                        console.log('...fail...');
+                    }
+                })
+            }
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    page {
+        background: #efeff4;
+    }
+    .banner {
+    	height: 180px;
+    	overflow: hidden;
+    	position: relative;
+    	background-color: #ccc;
+    }
+    .banner-img{
+    	width: 100%;
+    }
+    .banner-title{
+    	max-height: 84rpx;
+    	overflow: hidden;
+    	position: absolute;
+    	left: 30rpx;
+    	bottom: 30rpx;
+    	width: 90%;
+    	font-size: 32rpx;
+    	font-weight: 400;
+    	line-height: 42rpx;
+    	color: white;
+    	z-index: 11;
+    }
+    .article-meta{
+        padding: 20rpx 40rpx;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        color: gray;
+    }
+    .article-text{
+        font-size: 26rpx;
+        line-height: 50rpx;
+        margin: 0 20rpx;
+    }
+    .article-author,.article-time{
+        font-size: 30rpx;
+    }
+    .article-content{
+        padding: 0 30rpx;
+        overflow: hidden;
+        font-size: 30rpx;
+    }
+    
+</style>
diff --git a/examples/hello-uniapp/pages/template/list-to-detail/index.vue b/examples/hello-uniapp/pages/template/list-to-detail/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a8b12e8cf57de0e9a79ac5933a17ec3d46862357
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/list-to-detail/index.vue
@@ -0,0 +1,187 @@
+<template>
+    <view class="page">
+        <view class="banner" @click="goDetail(banner)">
+            <image class="banner-img" :src="banner.cover"></image>
+            <view class="banner-title">{{banner.title}}</view>
+        </view>
+        <view class="uni-list">
+            <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in listData" :key="key" @click="goDetail(value)">
+                <view class="uni-media-list">
+                    <image class="uni-media-list-logo" :src="value.cover"></image>
+                    <view class="uni-media-list-body">
+                        <view class="uni-media-list-text-top">{{value.title}}</view>
+                        <view class="uni-media-list-text-bottom">
+                            <text>{{value.author_name}}</text>
+                            <text>{{value.published_at}}</text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    var dateUtils = require('../../../common/util.js').dateUtils;
+
+    export default {
+        data: {
+            banner: {},
+            listData: [],
+            last_id: "",
+            reload:false
+        },
+        onLoad() {
+            this.getBanner();
+            this.getList();
+        },
+        onPullDownRefresh() {
+            this.reload = true;
+            this.last_id = "";
+            this.getBanner();
+            this.getList();
+        },
+        onUnload() {
+            this.banner = {},
+                this.listData = [],
+                this.last_id = "";
+        },
+        onReachBottom() {
+            this.getList();
+        },
+        methods: {
+            getBanner() {
+                let data = {
+                    column: "id,post_id,title,author_name,cover,published_at" //需要的字段名
+                };
+                uni.request({
+                    url: 'http://spider.dcloud.net.cn/api/banner/36kr',
+                    data: data,
+                    success: (data) => {
+                        uni.stopPullDownRefresh();
+                        if (data.statusCode == 200) {
+                            console.log(data.data)
+                            this.banner = data.data;
+                        }
+                    },
+                    fail: (data, code) => {
+                        console.log('...fail...');
+                    }
+                })
+            },
+            getList() {
+                var data = {
+                    column: "id,post_id,title,author_name,cover,published_at" //需要的字段名
+                };
+                console.log(this.last_id);
+                if (this.last_id) { //说明已有数据，目前处于上拉加载
+                    data.minId = this.last_id;
+                    data.time = new Date().getTime() + "";
+                    data.pageSize = 10;
+                }
+                uni.request({
+                    url: 'http://spider.dcloud.net.cn/api/news',
+                    data: data,
+                    success: (data) => {
+                        if (data.statusCode == 200) {
+                            console.log(data.data)
+                            let list = this.setTime(data.data);
+                            this.listData = this.reload ? list : this.listData.concat(list);
+                            this.last_id = list[list.length - 1].id;
+                            this.reload = false;
+                        }
+                    },
+                    fail: (data, code) => {
+                        console.log('...fail...');
+                    }
+                })
+            },
+            goDetail: function (e) {
+                console.log(e);
+                if (!/前|刚刚/.test(e.published_at)) {
+                    e.published_at = dateUtils.format(e.published_at);
+                }
+                let detail = {
+                    author_name: e.author_name,
+                    cover: e.cover,
+                    id: e.id,
+                    post_id: e.post_id,
+                    published_at: e.published_at,
+                    title: e.title
+                }
+                uni.navigateTo({
+                    url: "./detail?detailDate=" + JSON.stringify(detail)
+                })
+            },
+            setTime: function (items) {
+                var newItems = [];
+                items.forEach(function (e) {
+                    newItems.push({
+                        author_name: e.author_name,
+                        cover: e.cover,
+                        id: e.id,
+                        post_id: e.post_id,
+                        published_at: dateUtils.format(e.published_at),
+                        title: e.title
+                    });
+                });
+                return newItems;
+            }
+        },
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+
+    page {
+        background: #efeff4;
+    }
+
+    .banner {
+        height: 180px;
+        overflow: hidden;
+        position: relative;
+        background-color: #ccc;
+    }
+
+    .banner-img {
+        width: 100%;
+    }
+
+    .banner-title {
+        max-height: 84rpx;
+        overflow: hidden;
+        position: absolute;
+        left: 30rpx;
+        bottom: 30rpx;
+        width: 90%;
+        font-size: 32rpx;
+        font-weight: 400;
+        line-height: 42rpx;
+        color: white;
+        z-index: 11;
+    }
+
+    .uni-media-list-logo {
+        width: 180rpx;
+        height: 140rpx;
+    }
+
+    .uni-media-list-body {
+        height: auto;
+        justify-content: space-around;
+    }
+
+    .uni-media-list-text-top {
+        height: 74rpx;
+        font-size: 28rpx;
+        overflow: hidden;
+    }
+
+    .uni-media-list-text-bottom {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/template/list-triplex-row/index.vue b/examples/hello-uniapp/pages/template/list-triplex-row/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5211904694502d1c8d9b8e44d6b1e75a67db4ab1
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/list-triplex-row/index.vue
@@ -0,0 +1,57 @@
+<template>
+    <view class="page">
+        <page-head :title="title"></page-head>
+        <view class="uni-list">
+            <block v-for="(item,index) in lists" :key="index">
+                <view class="uni-list-cell" hover-class="uni-list-cell-hover">
+                	<view class="uni-triplex-row">
+                		<view class="uni-triplex-left">
+                			<text class="uni-h4 uni-ellipsis">列表主标题</text>
+                			<text class="uni-h5">列表副标题</text>
+                			<text class="uni-h6 uni-ellipsis">列表内容文字,列表内容文字,列表内容文字,列表内容文字,列表内容文字,列表内容文字</text>
+                		</view>
+                		<view class="uni-triplex-right">
+                			<text class="uni-h5">12:15</text>
+                		</view>
+                	</view>
+                </view>
+            </block>
+        </view>
+    </view>
+</template>
+
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    export default {
+        data: {
+            title: 'list-triplex-row',
+            lists:[]
+        },
+        onLoad(){
+            let list = [];
+            for (let i = 0; i < 5; i++) {
+            	list.push(i)
+            }
+            this.lists = list;
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    
+    .page {
+        padding-top: 60rpx;
+    }
+
+    page {
+        background: #efeff4;
+    }
+    
+    
+    
+</style>
diff --git a/examples/hello-uniapp/pages/template/list-with-badges/index.vue b/examples/hello-uniapp/pages/template/list-with-badges/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..48643f4ef69e3ca3529b9c23865ffa96f6746f57
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/list-with-badges/index.vue
@@ -0,0 +1,79 @@
+<template>
+    <view class="page">
+        <page-head :title="title"></page-head>
+        <view class="uni-card">
+            <view class="uni-list">
+                <view class="uni-list-cell-divider">
+                	左侧带箭头
+                </view>
+                <view class="uni-list-cell" hover-class="uni-list-cell-hover">
+                	<view class="uni-list-cell-navigate uni-navigate-right">
+                		Item1
+                	</view>
+                </view>
+                <view class="uni-list-cell" hover-class="uni-list-cell-hover">
+                	<view class="uni-list-cell-navigate uni-navigate-right">
+                		Item2
+                	</view>
+                </view>
+                <view class="uni-list-cell-divider">
+                	左侧带数字角标
+                </view>
+                <view class="uni-list-cell" hover-class="uni-list-cell-hover">
+                    <view class="uni-list-cell-navigate">
+                    	Item2
+                        <text class="uni-badge uni-badge-success">123</text>
+                    </view>
+                </view>
+                <view class="uni-list-cell" hover-class="uni-list-cell-hover">
+                    <view class="uni-list-cell-navigate">
+                    	Item1
+                    	<text class="uni-badge uni-badge-success">123</text>
+                    </view>
+                </view>
+                <view class="uni-list-cell-divider">
+                	左侧带数字角标+箭头
+                </view>
+                <view class="uni-list-cell" hover-class="uni-list-cell-hover">
+                    <view class="uni-list-cell-navigate uni-navigate-right">
+                        Item1
+                        <text class="uni-badge uni-badge-success uni-navigate-badge">123</text>
+                    </view>
+                </view>
+                <view class="uni-list-cell uni-list-cell-last" hover-class="uni-list-cell-hover">
+                    <view class="uni-list-cell-navigate uni-navigate-right">
+                    	Item2
+                    	<text class="uni-badge uni-badge-primary uni-navigate-badge">12</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    export default {
+        data: {
+            title: 'list-with-badges'
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    
+    .page {
+        padding-top: 60rpx;
+    }
+
+    page {
+        background: #efeff4;
+    }
+    
+    
+</style>
diff --git a/examples/hello-uniapp/pages/template/list-with-collapses/index.vue b/examples/hello-uniapp/pages/template/list-with-collapses/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..85a482738f4400748f1cb8e45d8b9a80451b7025
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/list-with-collapses/index.vue
@@ -0,0 +1,73 @@
+<template>
+    <view class="page">
+        <page-head :title="title"></page-head>
+        <view class="uni-card">
+            <view class="uni-list">
+                <view class="uni-list-cell uni-collapse" v-for="(list,index) in lists" :key="index" :class="index === lists.length - 1 ? 'uni-list-cell-last' : ''">
+                	<view class="uni-list-cell-navigate uni-navigate-bottom" hover-class="uni-list-cell-hover" :class="list.show ? 'uni-active' : ''" @click="trigerCollapse(index)">
+                		{{list.title}}
+                	</view>
+                    <view class="uni-list uni-collapse"  :class="list.show ? 'uni-active' : ''">
+                    	<view class="uni-list-cell" hover-class="uni-list-cell-hover"  v-for="(item,key) in list.item" :key="key" :class="key === list.item.length - 1 ? 'uni-list-cell-last' : ''">
+                    		<view class="uni-list-cell-navigate uni-navigate-right"> {{item}} </view>
+                    	</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    export default {
+        data: {
+            title: 'list-with-collapses',
+            lists:[
+                {
+                	title:"产品",
+                	show:false,
+                	item:["iOS","Android","HTML5"]
+                },
+                {
+                	title:"方案",
+                	show:false,
+                	item:["PC方案","手机方案","TV方案"]
+                },
+                {
+                	title:"新闻",
+                	show:false,
+                	item:["公司新闻","行业新闻"]
+                }
+            ]
+        },
+        methods: {
+        	trigerCollapse(e) {
+                for (let i = 0, len = this.lists.length; i < len; ++i) {
+                	if (e === i) {
+                		this.lists[i].show = !this.lists[i].show;
+                	} else {
+                		this.lists[i].show = false;
+                	}
+                }
+        		
+        	}
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    
+    .page {
+        padding-top: 60rpx;
+    }
+
+    page {
+        background: #efeff4;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/template/media-list/index.vue b/examples/hello-uniapp/pages/template/media-list/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a59d9f5cb3669101c9019bbcc74d8a46b456c376
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/media-list/index.vue
@@ -0,0 +1,95 @@
+<template>
+    <view class="page">
+        <page-head :title="title"></page-head>
+        <view class="title">缩略图居左</view>
+        <view class="uni-list">
+        	<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in date" :key="key">
+        		<view class="uni-media-list">
+        			<image class="uni-media-list-logo" :src="value.img"></image>
+        			<view class="uni-media-list-body">
+        				<view class="uni-media-list-text-top">{{value.title}}</view>
+        				<view class="uni-media-list-text-bottom uni-ellipsis">{{value.content}}</view>
+        			</view>
+        		</view>
+        	</view>
+        </view>
+        <view class="title">缩略图居右</view>
+        <view class="uni-list">
+        	<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in date" :key="key">
+        		<view class="uni-media-list uni-pull-right">
+        			<image class="uni-media-list-logo" :src="value.img"></image>
+        			<view class="uni-media-list-body">
+        				<view class="uni-media-list-text-top">{{value.title}}</view>
+        				<view class="uni-media-list-text-bottom uni-ellipsis">{{value.content}}</view>
+        			</view>
+        		</view>
+        	</view>
+        </view>
+        <view class="title">右侧带箭头</view>
+        <view class="uni-list">
+        	<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in date" :key="key">
+                <view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">
+                    <image class="uni-media-list-logo" :src="value.img"></image>
+                    <view class="uni-media-list-body">
+                        <view class="uni-media-list-text-top">{{value.title}}</view>
+                        <view class="uni-media-list-text-bottom uni-ellipsis">{{value.content}}</view>
+                    </view>
+                </view>
+        	</view>
+        </view>
+        <view class="title">卡片列表</view>
+        <view class="uni-card">
+            <view class="uni-list">
+            	<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in date" :key="key">
+            		<view class="uni-media-list uni-pull-right">
+            			<image class="uni-media-list-logo" :src="value.img"></image>
+            			<view class="uni-media-list-body">
+            				<view class="uni-media-list-text-top">{{value.title}}</view>
+            				<view class="uni-media-list-text-bottom uni-ellipsis">{{value.content}}</view>
+            			</view>
+            		</view>
+            	</view>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    export default {
+        data: {
+            title: 'media-list',
+            date: [
+                {
+                    title: "幸福",
+                    content: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？",
+                    img: "../../../static/shuijiao.jpg"
+                },
+                {
+                    title: "木屋",
+                    content: "想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖。",
+                    img: "../../../static/muwu.jpg"
+                },
+                {
+                    title: "CBD",
+                    content: "烤炉模式的城，到黄昏，如同打翻的调色盘一般。",
+                    img: "../../../static/cbd.jpg"
+                }
+            ]
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    
+    .page {
+        background: #efeff4;
+    }
+    .title{
+        padding: 10px;
+    }
+</style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/template/number-box/index.vue b/examples/hello-uniapp/pages/template/number-box/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..540aa6bb16b21951ac8a867bc8d8914e77ab4962
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/number-box/index.vue
@@ -0,0 +1,144 @@
+<template>
+    <view class="page">
+        <page-head :title="title"></page-head>
+        <view class="item">
+            <text class="item-title">默认</text>
+            <number-box></number-box>
+        </view>
+        <view class="item">
+            <text class="item-title">限定最小值和最大值（0~9）</text>
+            <number-box :min="0" :max="9"></number-box>
+        </view>
+        <view class="item">
+            <text class="item-title">设定步长值（步长10）</text>
+            <number-box :step="10"></number-box>
+        </view>
+        <view class="item">
+            <text class="item-title">在行内</text>
+            <view class="inline-item">
+                <text class="item-label">购买数量：</text>
+                <number-box></number-box>
+            </view>
+        </view>
+        <view class="item">
+            <text class="item-title">在表单中</text>
+            <view class="uni-input-group">
+                <view class="uni-input-row">
+                    <label>数字框一</label>
+                    <number-box></number-box>
+                </view>
+                <view class="uni-input-row">
+                    <label>数字框二</label>
+                    <number-box></number-box>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    import numberBox from '../../../components/number-box.vue'
+
+    export default {
+        data() {
+            return {
+                title: 'number-box'
+            }
+        },
+        components: {
+            pageHead,
+            numberBox
+        }
+    }
+</script>
+<style>
+    @import "../../../common/uni.css";
+    page {
+        background: #efeff4;
+    }
+
+    .page {
+        background: #efeff4;
+        font-size: 17px;
+        padding-bottom: 35px;
+    }
+
+    .item {
+        margin: 20rpx;
+        margin-top: 30rpx;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .item-title {
+        color: #8f8f94;
+        font-size: 28rpx;
+        font-weight: 400;
+    }
+
+    .item-label {
+        line-height: 70rpx;
+    }
+
+    .inline-item {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .uni-input-group {
+        position: relative;
+        padding: 0;
+        border: 0;
+        background-color: #fff;
+    }
+
+    .uni-input-group:before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        height: 1px;
+        content: '';
+        transform: scaleY(.5);
+        background-color: #c8c7cc;
+    }
+
+    .uni-input-group:after {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 1px;
+        content: '';
+        transform: scaleY(.5);
+        background-color: #c8c7cc;
+    }
+
+    .uni-input-row {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+    }
+
+    .uni-input-group .uni-input-row:after {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 15px;
+        height: 1px;
+        content: '';
+        transform: scaleY(.5);
+        background-color: #c8c7cc;
+    }
+
+    .uni-input-row {
+        padding: 22rpx 30rpx;
+        justify-content: space-between;
+    }
+
+    .uni-input-row label {
+        line-height: 70rpx;
+    }
+
+    .uni-input-row .uni-numbox {}
+</style>
diff --git a/examples/hello-uniapp/pages/template/popup/index.vue b/examples/hello-uniapp/pages/template/popup/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..778a13aad90aafaaa414684a5df77975dcc414a2
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/popup/index.vue
@@ -0,0 +1,154 @@
+<template>
+    <view class="page">
+        <page-head :title="title"></page-head>
+        <view class="mask" v-show="showMask" @click="hide"></view>
+        <view class="popup popup-middle" v-show="showState.middle">
+            <view class="desc">
+                <text>Hello</text>
+            </view>
+        </view>
+        <view class="popup popup-top" v-show="showState.top">
+            <text>顶部 popup</text>
+        </view>
+        <view class="popup popup-bottom" v-show="showState.bottom">
+            <text>底部 popup</text>
+        </view>
+        <view class="btn-row">
+            <button class="btn" type="button" @click="show">弹出 popup</button>
+            <button class="btn" type="button" @click="show" data-position="top">顶部弹出 popup</button>
+            <button class="btn" type="button" @click="show" data-position="bottom">底部弹出 popup</button>
+        </view>
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    export default {
+        data() {
+            return {
+                title: 'popup',
+                showState: {
+                    top: false,
+                    middle: false,
+                    bottom: false
+                },
+                showMask: false,
+                activePop: 'middle'
+            }
+        },
+        components: {
+            pageHead
+        },
+        methods: {
+            show(evt) {
+                var pos = evt.target.dataset.position
+                switch (pos) {
+                    case 'top':
+                        this.activePop = 'top'
+                        break
+                    case 'bottom':
+                        this.activePop = 'bottom'
+                        break
+                    default:
+                        this.activePop = 'middle'
+                }
+                this.showMask = true
+                this.showState[this.activePop] = true
+            },
+            hide() {
+                this.showMask = false
+                this.showState[this.activePop] = false
+            }
+        }
+    }
+</script>
+<style>
+    .mask {
+        position: fixed;
+        z-index: 998;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: rgba(0, 0, 0, .3);
+    }
+    
+    .popup {
+        position: absolute;
+        z-index: 999;
+        background-color: #ffffff;
+        -webkit-box-shadow: 0 0 30rpx rgba(0, 0, 0, .1);
+        box-shadow: 0 0 30rpx rgba(0, 0, 0, .1);
+    }
+    
+    .popup-middle {
+        width: 400rpx;
+        height: 400rpx;
+        border-radius: 10rpx;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        margin: auto;
+    }
+    
+    .popup-top {
+        top: 0;
+        width: 100%;
+        height: 100rpx;
+        text-align: center;
+    }
+    
+    .popup-top text {
+        line-height: 100rpx;
+        margin-left: 20rpx;
+        font-size: 32rpx;
+    }
+    
+    .popup-bottom {
+        bottom: 0;
+        width: 100%;
+        height: 100rpx;
+        text-align: center;
+    }
+    
+    .popup-bottom text {
+        line-height: 100rpx;
+        font-size: 32rpx;
+    }
+    
+    .popup .list-view {
+        height: 600rpx;
+    }
+    
+    .list-view-item {
+        position: relative;
+        padding: 22rpx 30rpx;
+        overflow: hidden;
+        font-size: 28rpx;
+    }
+    
+    .list-view-item::after {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 30rpx;
+        height: 2rpx;
+        content: '';
+        -webkit-transform: scaleY(.5);
+        transform: scaleY(.5);
+        background-color: #c8c7cc;
+    }
+    
+    .btn-row .btn {
+        margin: 20rpx;
+    }
+    
+    .desc {
+        padding: 10rpx 20rpx;
+        font-size: 30rpx;
+        line-height: 30rpx;
+        margin-top: 150rpx;
+        text-align: center;
+    }
+</style>
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/template/tabbar/index.vue b/examples/hello-uniapp/pages/template/tabbar/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..934a5a5ed9b1f5c3a4a7bf134a20064940213122
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/tabbar/index.vue
@@ -0,0 +1,189 @@
+<template>
+    <view class="index">
+        <scroll-view id="tab-bar" class="swiper-tab" scroll-x :scroll-left="scrollLeft" >
+            <block v-for="(tab,index) in tabs" :key="tab.id">
+                <view :class="['swiper-tab-list',currentTab==index ? 'on' : '']" :id="tab.id" :data-current="index" @tap="swichNav">{{tab.name}}</view>
+            </block>
+        </scroll-view>
+        <swiper :current="currentTab" class="swiper-box" duration="300" @change="bindChange">
+            <block v-for="(tab,index1) in newsitems" :key="index1">
+                <swiper-item>
+                    <scroll-view class="index-bd" scroll-y @scrolltolower="loadMore(index1)">
+                        <block v-for="(newsitem,index2) in tab" :key="index2">
+                            <view class="tab-list">{{newsitem.name}}-{{newsitem.label}}</view>
+                        </block>
+                    </scroll-view>
+                </swiper-item>
+            </block>
+        </swiper>
+    </view>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                title: 'tabbar',
+                scrollLeft:0,
+                isClickChange:false,
+                currentTab: 0,
+                tabs: [{
+                    name: '关注',
+                    id: 'guanzhu'
+                }, {
+                    name: '推荐',
+                    id: 'tuijian'
+                }, {
+                    name: '体育',
+                    id: 'tiyu'
+                }, {
+                    name: '热点',
+                    id: 'redian'
+                }, {
+                    name: '财经',
+                    id: 'caijing'
+                }, {
+                    name: '娱乐',
+                    id: 'yule'
+                }, {
+                    name: '军事',
+                    id: 'junshi'
+                }, {
+                    name: '历史',
+                    id: 'lishi'
+                }, {
+                    name: '本地',
+                    id: 'bendi'
+                }],
+                newsitems: []
+            }
+        },
+        onLoad: function () {
+            this.newsitems = this.randomfn()
+        },
+        methods: {
+            bindChange:async function (e) {
+                let index = e.target.current;
+                if(this.isClickChange){
+                  this.currentTab = index;
+                  this.isClickChange = false;
+                  return;
+                }
+                let tabBar = await this.getWidth("tab-bar"),tabBarScrollLeft = tabBar.scrollLeft;
+                console.log("tabBar"+tabBarScrollLeft);
+                
+                let width = 0;
+                
+                for(let i = 0;i<index;i++){
+                  let result = await this.getWidth(this.tabs[i].id);
+                  width += result.width;
+                }
+                
+                let winWidth = uni.getSystemInfoSync().windowWidth,nowElement = await this.getWidth(this.tabs[index].id),nowWidth = nowElement.width;
+                console.log("scrollLeft=",this.scrollLeft,";width=",width,";nowWidth=",nowWidth); //左边距离不够向左滑动时滑动距离登录左边元素宽度之和；右边距离不够向右滑动，滑动距离是前面所有元素宽之和+当前元素宽-屏幕的宽度。
+                
+                if(width + nowWidth - tabBarScrollLeft > winWidth){
+                  console.log("向右移动")
+                  this.scrollLeft = width + nowWidth - winWidth; 
+                }
+                if(width < tabBarScrollLeft){
+                  console.log("向左移动");
+                  this.scrollLeft = width;
+                }
+                this.isClickChange = false;
+                this.currentTab = index;//一旦访问data就会出问题
+            },
+            getWidth:function(id){//得到元素的宽高
+              return new Promise((res,rej) => {
+                uni.createSelectorQuery().select("#"+id).fields({
+                  size: true,
+                  scrollOffset: true
+                }, function(data){
+                  if(id ==='tab-bar'){console.log("id=",id,"数据:",data)}
+                  res(data);
+                }).exec();
+              })
+            },
+            swichNav: async function (e) {//点击tab-bar
+                if (this.currentTab === e.target.dataset.current) {
+                    return false;
+                } else {
+                  let tabBar = await this.getWidth("tab-bar"),tabBarScrollLeft = tabBar.scrollLeft;//点击的时候记录并设置scrollLeft
+                  console.log("tabBar"+tabBarScrollLeft);
+                  this.scrollLeft = tabBarScrollLeft;
+                  this.isClickChange = true;
+                  this.currentTab = e.target.dataset.current
+                }
+            },
+            loadMore:function(e){
+              let last = this.newsitems[e][this.newsitems[e].length-1].label,
+                  name = this.newsitems[e][this.newsitems[e].length-1].name;
+              for(let i = 1; i<= 10; i++) {
+              	this.newsitems[e].push({name:name,label: i + last});
+              }
+            },
+            randomfn () {
+                let ary = [];
+                for(let i=0,length=this.tabs.length; i < length; i++){
+                  let aryItem = [];
+                  for(let j = 1; j<= 20; j++) {
+                    aryItem.push({name:this.tabs[i].name,label: j});
+                  }
+                  ary.push(aryItem);
+                }
+                return ary;
+            }
+        }
+    }
+</script>
+
+<style>
+    .index{
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+    }
+    .index-bd {
+        padding: 0 30rpx;
+        width: 690rpx;
+        height: 100%;
+    }
+
+    .swiper-tab {
+        width: 100%;
+        white-space: nowrap;
+        line-height: 64rpx;
+        height: 64rpx;
+    }
+
+
+    .swiper-tab-list {
+        font-size: 30rpx;
+        width: 150rpx;
+        display: inline-block;
+        text-align: center;
+        color: #777777;
+    }
+
+    .on {
+        color: #FF0000;
+        border-bottom: 5rpx solid #FF0000;
+    }
+
+    .swiper-box {
+        flex: 1;
+        width: 100%;
+        height: calc(100vh - 64rpx);
+    }
+
+    .swiper-box view {
+        text-align: center;
+    }
+
+    .tab-list {
+        width: 100%;
+        height: 90rpx;
+        line-height: 90rpx;
+        text-align: left;
+        border-bottom: 1px solid #EFEFF4;
+    }
+</style>
diff --git a/examples/hello-uniapp/platforms/app-plus/orientation/index.vue b/examples/hello-uniapp/platforms/app-plus/orientation/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..16380ba15b728841dbf4f7bf397dead2c9d91db5
--- /dev/null
+++ b/examples/hello-uniapp/platforms/app-plus/orientation/index.vue
@@ -0,0 +1,75 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="page-section-spacing">
+                    <button class="btn-orientation" @tap="getOrient">获取设备的方向信息</button>
+                    <button class="btn-orientation" @tap="watchOrient">监听设备的方向变化</button>
+                    <button class="btn-orientation" @tap="watchStop">停止监听</button>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-spacing">
+                    <textarea :value="value" style="height: 9em" />
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    var id = null
+    export default {
+        data() {
+            return {
+                title: 'orientation',
+                value:''
+            }
+        },
+        methods: {
+            getOrient: function () {
+                var that = this;
+                plus.orientation.getCurrentOrientation(function (o) {
+                    that.value = "alpha：" + o.alpha + "\nbeta：" + o.beta + "\ngamma：" + o.gamma;
+                }, function (e) {
+                    console.log("获取失败:" + e.message);
+                });
+            },
+            watchOrient: function () {
+                var that = this;
+                if (id) {
+                    return;
+                }
+                id = plus.orientation.watchOrientation(function (o) {
+                    that.value = "监听设备方向变化信息\n" + "alpha：" + o.alpha + "\nbeta：" + o.beta + "\ngamma：" + o.gamma;
+                }, function (e) {
+                    plus.orientation.clearWatch(id);
+                    id = null;
+                    console.log("监听失败:" + e.message);
+                });
+            },
+            watchStop: function () {
+                if (id) {
+                    plus.orientation.clearWatch(id);
+                    id = null;
+                } else {
+                    console.log("没有监听设备方向变化");
+                }
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    .btn-orientation {
+        background-color: #007aff;
+        color: #ffffff;
+    }
+    textarea{
+    	border: 2rpx solid #7A7E83;
+    }
+</style>
diff --git a/examples/hello-uniapp/platforms/app-plus/proximity/index.vue b/examples/hello-uniapp/platforms/app-plus/proximity/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..458579a8035d51979365d79519f34b3a7dadc672
--- /dev/null
+++ b/examples/hello-uniapp/platforms/app-plus/proximity/index.vue
@@ -0,0 +1,81 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="page-section-spacing">
+                    <button class="btn-proximity" @tap="getProximity">获取距离传感器信息</button>
+                    <button class="btn-proximity" @tap="watchProximity">监听距离传感器变化</button>
+                    <button class="btn-proximity" @tap="watchStop">停止监听</button>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-spacing">
+                    <textarea :value="value" style="height: 9em" />
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    var id = null
+    var bright = null
+    export default {
+        data() {
+            return {
+                title: 'orientation',
+                value: ''
+            }
+        },
+        methods: {
+            getProximity: function () {
+                var that = this;
+                plus.proximity.getCurrentProximity(function (d) {
+                    that.value = "距离为：" + d;
+                }, function (e) {
+                    that.value = "获取失败:" + e.message;
+                });
+            },
+            watchProximity: function () {
+                var that = this;
+                if (id) {
+                    return;
+                }
+                bright = plus.screen.getBrightness();
+                id = plus.proximity.watchProximity(function (d) {
+                    that.value = "距离变化：" + d;
+                    plus.screen.setBrightness((d < 1) ? 0.01 : bright);
+                }, function (e) {
+                    plus.proximity.clearWatch(id);
+                    id = null;
+                    that.value = "监听失败:" + e.message;
+                });
+            },
+            watchStop: function () {
+                var that = this;
+                if (id) {
+                    that.value = "停止监听设备距离传感器信息";
+                    plus.proximity.clearWatch(id);
+                    id = null;
+                } else {
+                    that.value = "没有监听设备距离传感器";
+                }
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    .btn-proximity {
+        background-color: #007aff;
+        color: #ffffff;
+    }
+
+    textarea {
+        border: 2rpx solid #7A7E83;
+    }
+</style>
diff --git a/examples/hello-uniapp/platforms/app-plus/push/index.vue b/examples/hello-uniapp/platforms/app-plus/push/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..94921f241e5a59ca93525cc8ea6142ccf1916f44
--- /dev/null
+++ b/examples/hello-uniapp/platforms/app-plus/push/index.vue
@@ -0,0 +1,121 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body" v-if="provider[0]">
+            <view class="btn-area">
+                <button @tap="openPush">开启push</button>
+                <button @tap="closePush">关闭push</button>
+                <button @tap="listenTranMsg">监听透传数据</button>
+                <button @tap="removeTranMsg">移除监听透传数据</button>
+            </view>
+            <view class="btn-area">
+                <button @tap="requireTranMsg">发送"透传数据"消息</button>
+            </view>
+        </view>
+
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    export default {
+        data() {
+            return {
+                title: 'push',
+                provider: [],
+                pushServer:'http://demo.dcloud.net.cn/push/?'
+            }
+        },
+        onLoad: function () {
+            uni.getProvider({
+                service: "push",
+                success: (e) => {
+                    console.log("payment success", e);
+                    this.provider = e.provider;
+                },
+                fail: (e) => {
+                    console.log("获取推送通道失败", e);
+                }
+            });
+        },
+        methods: {
+            openPush(){
+                uni.subscribePush({
+                    provider:this.provider[0],
+                    success: (e) => {
+                        console.log("开启push");
+                        uni.showToast({
+                          title:"已开启push接收"
+                        })
+                    }
+                })
+            },
+            closePush(){
+                uni.unsubscribePush({
+                    provider:this.provider[0],
+                    success: (e) => {
+                        console.log("关闭push");
+                        uni.showToast({
+                        	title:"已关闭push接收"
+                        })
+                    }
+                })
+            },
+            listenTranMsg(){
+                uni.onPush({
+                    provider:this.provider[0],
+                    success: (e) => {
+                        console.log("监听透传数据")
+                        uni.showToast({
+                        	title:"开始监听透传数据"
+                        })
+                    },
+                    callback:(e) => {
+                        console.log(123963)
+                        uni.showToast({
+                        	title:"接收到透传数据"
+                        });
+                        console.log(123)
+                        console.log(e);
+                    }
+                })
+            },
+            removeTranMsg(){
+                uni.offPush({
+                    provider:this.provider[0],
+                    success: (e) => {
+                        console.log("移除监听透传数据");
+                        uni.showToast({
+                        	title:"移除监听透传数据"
+                        })
+                    }
+                })
+            },
+            requireTranMsg(){//请求‘透传数据’推送消息
+                var inf = plus.push.getClientInfo();
+                var url = this.pushServer+'type=tran&appid='+encodeURIComponent(plus.runtime.appid);
+                inf.id&&(url+='&id='+inf.id);
+                url += ('&cid='+encodeURIComponent(inf.clientid));
+                if(plus.os.name == 'iOS'){
+                    url += ('&token='+encodeURIComponent(inf.token));
+                }
+                url += ('&title='+encodeURIComponent('Hello H5+'));
+                url += ('&content='+encodeURIComponent('带透传数据推送通知，可通过plus.push API获取数据并进行业务逻辑处理！'));
+                url += ('&payload='+encodeURIComponent('{"title":"Hello H5+ Test","content":"test content","payload":"1234567890"}'));
+                url += ('&version='+encodeURIComponent(plus.runtime.version));
+                plus.runtime.openURL( url );
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+   
+    button {
+        background-color: #007aff;
+        color: #ffffff;
+    }
+</style>
diff --git a/examples/hello-uniapp/platforms/app-plus/share/index.vue b/examples/hello-uniapp/platforms/app-plus/share/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1bab3eada83b5fc68684df38cbfa3d49a6e9d912
--- /dev/null
+++ b/examples/hello-uniapp/platforms/app-plus/share/index.vue
@@ -0,0 +1,128 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section-title">分享内容</view>
+            <view class="page-section">
+                <view class="textarea-wrp">
+                    <textarea class="textarea" :value="shareText" />
+                </view>
+            </view>
+            <view class="page-section-title">分享图片：</view>
+            <view class="page-section">
+                <view class="uni-uploader-body">
+                    <view class="uni-uploader__input-box" v-if="!image" @tap="chooseImage"></view>
+                    <image class="uni-uploader__img" v-if="image" :src="image"></image>
+                </view>
+            </view>
+            <view class="btn-area">
+                <button v-for="(value,index) in providerList" :key="index" @tap="share(value)">{{value.name}}</button>
+            </view>
+        </view>
+
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    export default {
+        data() {
+            return {
+                title: 'share',
+                shareText: '我正在使用HBuilderX开发移动应用，赶紧跟我一起来体验！',
+                image: '',
+                providerList: []
+            }
+        },
+        onLoad: function () {
+            uni.getProvider({
+                service: "share",
+                success: (e) => {
+                    console.log("success", e);
+                    this.providerList = e.provider.map((value) => {
+                        switch (value) {
+                            case 'weixin':
+                                return {
+                                    name: '分享到微信',
+                                    id: value
+                                }
+                            case 'tencentweibo':
+                                return {
+                                    name: '分享到腾讯微博',
+                                    id: value
+                                }
+                            case 'sinaweibo':
+                                return {
+                                    name: '分享到新浪微博',
+                                    id: value
+                                }
+                        }
+                    })
+                },
+                fail: (e) => {
+                    console.log("获取登录通道失败", e);
+                }
+            });
+        },
+        methods: {
+            share(e) {
+                console.log("分享~", e);
+                
+                uni.share({
+                    provider: e.id,
+                    scene:"WXSceneSession",//WXSceneSession”分享到聊天界面，“WXSenceTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏     
+                    type:0,
+                    title:this.shareText,
+                    imageUrl :this.image,
+                    href:"http://www.dcloud.io",
+                    success:(e) => {
+                        console.log("success",e)
+                    },
+                    fail:(e) => {
+                        console.log("fail",e)
+                        uni.showToast({
+                        	title:e.errMsg
+                        })
+                    }
+                })
+            },
+            chooseImage() {
+                uni.chooseImage({
+                    count: 1,
+                    sourceType: ['album', 'camera'],
+                    sizeType: ['compressed', 'original'],
+                    success: (res) => {
+                        this.image = res.tempFilePaths[0]
+                    }
+                })
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    
+    .textarea-wrp {
+        padding: 0 20rpx;
+    }
+
+    .textarea {
+        border: 2rpx solid #D8D8D8;
+        height: 3em;
+        width: 100%;
+    }
+
+    button {
+        background-color: #007aff;
+        color: #ffffff;
+    }
+
+    .uni-uploader-body {
+        display: flex;
+        justify-content: center;
+    }
+</style>
diff --git a/examples/hello-uniapp/platforms/app-plus/speech/index.vue b/examples/hello-uniapp/platforms/app-plus/speech/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b695878a2fe888056076df9f36cc0f8c827b8948
--- /dev/null
+++ b/examples/hello-uniapp/platforms/app-plus/speech/index.vue
@@ -0,0 +1,71 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="page-section-spacing">
+                    <button class="btn-speech" @tap="startRecognize">开始语音识别</button>
+                    <button class="btn-speech" @tap="startRecognizeEnglish">开始语音识别（英语）</button>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-spacing">
+                    <textarea :value="value" style="height: 3em" />
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+
+    export default {
+        data() {
+            return {
+                title: 'speech',
+                value:''
+            }
+        },
+        methods: {
+            startRecognize: function() {
+                var options = {};
+                var that = this;
+                options.engine = 'iFly';
+                that.value = "";
+                plus.speech.startRecognize(options, function (s) {
+                    console.log(s);
+                    that.value += s;
+                }, function (e) {
+                    console.log("语音识别失败：" + e.message);
+                });
+            },
+            startRecognizeEnglish: function() {
+                var options = {};
+                var that = this;
+                options.engine = 'iFly';
+                options.lang = 'en-us';
+                that.value = "";
+                plus.speech.startRecognize(options, function (s) {
+                    console.log(s);
+                    that.value += s;
+                }, function (e) {
+                    console.log("语音识别失败：" + e.message);
+                });
+            }
+        },
+        components: {
+            pageHead
+        }
+    }
+</script>
+
+<style>
+    .btn-speech {
+        background-color: #007aff;
+        color: #ffffff;
+    }
+    textarea{
+        border: 2rpx solid #7A7E83;
+        height:76rpx;
+    }
+</style>
diff --git a/examples/hello-uniapp/platforms/mp-weixin/custom-message/index.vue b/examples/hello-uniapp/platforms/mp-weixin/custom-message/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a41a513994667e24de40d13c43e39720a07d5c34
--- /dev/null
+++ b/examples/hello-uniapp/platforms/mp-weixin/custom-message/index.vue
@@ -0,0 +1,31 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <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>
+        
+    </view>
+</template>
+<script>
+    import pageHead from '../../../components/page-head.vue'
+    
+    export default {
+        data() {
+            return {
+                title: 'customMessage'
+            }
+        },
+        methods: {},
+        components: {
+            pageHead
+        }
+    }
+</script>
diff --git a/examples/hello-uniapp/platforms/mp-weixin/template-message/index.vue b/examples/hello-uniapp/platforms/mp-weixin/template-message/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..44fbded97bae76dd43367db9d5736b8794fb49da
--- /dev/null
+++ b/examples/hello-uniapp/platforms/mp-weixin/template-message/index.vue
@@ -0,0 +1,117 @@
+<template>
+    <view class="index">
+        <page-head :title="title"></page-head>
+        <form class="page-body" @submit="submitForm" report-submit="true">
+            <view class="page-section-title">点击提交，发送示例模板消息</view>
+            <view class="uni-list">
+                <view class="uni-list-cell">
+                    <view class="uni-list-cell-left">
+                        <view class="uni-label">购买地点</view>
+                    </view>
+                    <view class="uni-list-cell-db">
+                        <input class="uni-input" type="text" :disabled="true" :value="formData.address" name="address"></input>
+                    </view>
+                </view>
+                <view class="uni-list-cell">
+                    <view class="uni-list-cell-left">
+                        <view class="uni-label">购买时间</view>
+                    </view>
+                    <view class="uni-list-cell-db">
+                        <input class="uni-input" type="text" :disabled="true" :value="formData.time" name="time"></input>
+                    </view>
+                </view>
+                <view class="uni-list-cell">
+                    <view class="uni-list-cell-left">
+                        <view class="uni-label">物品名称</view>
+                    </view>
+                    <view class="uni-list-cell-db">
+                        <input class="uni-input" type="text" :disabled="true" :value="formData.name" name="name"></input>
+                    </view>
+                </view>
+                <view class="uni-list-cell">
+                    <view class="uni-list-cell-left">
+                        <view class="uni-label">交易单号</view>
+                    </view>
+                    <view class="uni-list-cell-db">
+                        <input class="uni-input" type="text" :disabled="true" :value="formData.serial" name="serial"></input>
+                    </view>
+                </view>
+            </view>
+            <view class="btn-area">
+                <button size="40" formType="submit" :loading="loading">点我提交</button>
+            </view>
+        </form>
+        
+    </view>
+</template>
+<script>
+    import {
+        mapActions
+    } from 'vuex'
+    import pageHead from '../../../components/page-head.vue'
+    
+    const templateMessageUrl = `https://www.example.com/templateMessage`;//开发者自己的接口地址
+    export default {
+        data() {
+            return {
+                title: 'templateMessage',
+                formData: {
+                    address: 'T.I.T 造舰厂',
+                    time: '2017.01.09',
+                    name: '帝国歼星舰',
+                    serial: '123456789'
+                },
+                loading: false
+            }
+        },
+        methods: {
+            ...mapActions(['getUserOpenId']),
+            submitForm: async function (e) {
+                var self = this
+                var form_id = e.target.formId
+                var formData = e.target.value
+
+                console.log('form_id is:', form_id)
+
+                self.loading = true
+                try {
+                    const openid = await this.getUserOpenId()
+                    console.log('openid:::::' + openid)
+                    uni.request({
+                        url: templateMessageUrl,
+                        method: 'POST',
+                        data: {
+                            form_id,
+                            openid,
+                            formData
+                        },
+                        success: function (res) {
+                            console.log('submit form success', res)
+                            uni.showToast({
+                                title: '发送成功',
+                                icon: 'success'
+                            })
+                            self.loading = false
+                        }
+
+                    })
+                } catch (e) {
+                    self.loading = false
+                    console.log('submit form fail, errMsg is:', e)
+                }
+            }
+        },
+        components: {
+            pageHead
+            
+        }
+    }
+</script>
+
+<style>
+    @import "../../../common/uni.css";
+    button{
+    	background-color:#007aff;
+    	color: #ffffff;
+    }
+</style>
diff --git a/examples/hello-uniapp/static/api.png b/examples/hello-uniapp/static/api.png
new file mode 100644
index 0000000000000000000000000000000000000000..b38f27983c372a3ce3640d0d89484a217b247ed7
Binary files /dev/null and b/examples/hello-uniapp/static/api.png differ
diff --git a/examples/hello-uniapp/static/apiHL.png b/examples/hello-uniapp/static/apiHL.png
new file mode 100644
index 0000000000000000000000000000000000000000..79269b9db722148e691dfa20c6abb38f180368ec
Binary files /dev/null and b/examples/hello-uniapp/static/apiHL.png differ
diff --git a/examples/hello-uniapp/static/apiIndex.png b/examples/hello-uniapp/static/apiIndex.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed3a831a82caade131626b0d394b5b7ee6665b14
Binary files /dev/null and b/examples/hello-uniapp/static/apiIndex.png differ
diff --git a/examples/hello-uniapp/static/c1.png b/examples/hello-uniapp/static/c1.png
new file mode 100644
index 0000000000000000000000000000000000000000..26ff51be7df5bedf9c924e92eae620206b4434d1
Binary files /dev/null and b/examples/hello-uniapp/static/c1.png differ
diff --git a/examples/hello-uniapp/static/c2.png b/examples/hello-uniapp/static/c2.png
new file mode 100644
index 0000000000000000000000000000000000000000..bee8f73365136d12e7b2d284a57200db74664bcc
Binary files /dev/null and b/examples/hello-uniapp/static/c2.png differ
diff --git a/examples/hello-uniapp/static/c3.png b/examples/hello-uniapp/static/c3.png
new file mode 100644
index 0000000000000000000000000000000000000000..aeda45a1eb40ed10efcf75a76cc765d96bddeb4a
Binary files /dev/null and b/examples/hello-uniapp/static/c3.png differ
diff --git a/examples/hello-uniapp/static/c4.png b/examples/hello-uniapp/static/c4.png
new file mode 100644
index 0000000000000000000000000000000000000000..a59f22bf4c23f0955e39710bba4f07604238f20d
Binary files /dev/null and b/examples/hello-uniapp/static/c4.png differ
diff --git a/examples/hello-uniapp/static/c5.png b/examples/hello-uniapp/static/c5.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7a6ba579b114ed28d1f0a8c5e0cd5c56979dab7
Binary files /dev/null and b/examples/hello-uniapp/static/c5.png differ
diff --git a/examples/hello-uniapp/static/c6.png b/examples/hello-uniapp/static/c6.png
new file mode 100644
index 0000000000000000000000000000000000000000..4264c6456c45828357f05977b9fdf0f8f00b9339
Binary files /dev/null and b/examples/hello-uniapp/static/c6.png differ
diff --git a/examples/hello-uniapp/static/c7.png b/examples/hello-uniapp/static/c7.png
new file mode 100644
index 0000000000000000000000000000000000000000..3d14ffbc47fce2d629040fd48fb7f121f07735f1
Binary files /dev/null and b/examples/hello-uniapp/static/c7.png differ
diff --git a/examples/hello-uniapp/static/c8.png b/examples/hello-uniapp/static/c8.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb81ed26f4055773377d5c4b418ca36951021252
Binary files /dev/null and b/examples/hello-uniapp/static/c8.png differ
diff --git a/examples/hello-uniapp/static/c9.png b/examples/hello-uniapp/static/c9.png
new file mode 100644
index 0000000000000000000000000000000000000000..c664796c5cc718920862e260786b94e92d0fa052
Binary files /dev/null and b/examples/hello-uniapp/static/c9.png differ
diff --git a/examples/hello-uniapp/static/cbd.jpg b/examples/hello-uniapp/static/cbd.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a47323ea8ce4267998b7fe8a9dfd6bd485f162b5
Binary files /dev/null and b/examples/hello-uniapp/static/cbd.jpg differ
diff --git a/examples/hello-uniapp/static/compass.png b/examples/hello-uniapp/static/compass.png
new file mode 100644
index 0000000000000000000000000000000000000000..fba87a58d7a06d366936d72a69abc0ea0bb8ca32
Binary files /dev/null and b/examples/hello-uniapp/static/compass.png differ
diff --git a/examples/hello-uniapp/static/component.png b/examples/hello-uniapp/static/component.png
new file mode 100644
index 0000000000000000000000000000000000000000..c93ca0c0b59f489e6fdb054a1d76003e6ca081c3
Binary files /dev/null and b/examples/hello-uniapp/static/component.png differ
diff --git a/examples/hello-uniapp/static/componentHL.png b/examples/hello-uniapp/static/componentHL.png
new file mode 100644
index 0000000000000000000000000000000000000000..042d9e1225ed55727fc349503cacf71112155640
Binary files /dev/null and b/examples/hello-uniapp/static/componentHL.png differ
diff --git a/examples/hello-uniapp/static/componentIndex.png b/examples/hello-uniapp/static/componentIndex.png
new file mode 100644
index 0000000000000000000000000000000000000000..94d5a6c25d2105c0a1fff6253b6661519b22804a
Binary files /dev/null and b/examples/hello-uniapp/static/componentIndex.png differ
diff --git a/examples/hello-uniapp/static/eye-1.png b/examples/hello-uniapp/static/eye-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..356df9d1764a7ee446b71fb966115e9cebafbf71
Binary files /dev/null and b/examples/hello-uniapp/static/eye-1.png differ
diff --git a/examples/hello-uniapp/static/eye-2.png b/examples/hello-uniapp/static/eye-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..c36d3e59b47cff3a7a6560b825ca976550b52e42
Binary files /dev/null and b/examples/hello-uniapp/static/eye-2.png differ
diff --git a/examples/hello-uniapp/static/location.png b/examples/hello-uniapp/static/location.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9e731ea6a3c2d1660047e4d868bb601f3557453
Binary files /dev/null and b/examples/hello-uniapp/static/location.png differ
diff --git a/examples/hello-uniapp/static/menu.png b/examples/hello-uniapp/static/menu.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3a92c1992cfe8a5fed3c89d8efdd8810e7fc47c
Binary files /dev/null and b/examples/hello-uniapp/static/menu.png differ
diff --git a/examples/hello-uniapp/static/muwu.jpg b/examples/hello-uniapp/static/muwu.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b578b7dd13487ac36083df6e2624ae5668577027
Binary files /dev/null and b/examples/hello-uniapp/static/muwu.jpg differ
diff --git a/examples/hello-uniapp/static/pause.png b/examples/hello-uniapp/static/pause.png
new file mode 100644
index 0000000000000000000000000000000000000000..9acb73de0bb4bd2232f1caa4aa10fa092b8f87c5
Binary files /dev/null and b/examples/hello-uniapp/static/pause.png differ
diff --git a/examples/hello-uniapp/static/play.png b/examples/hello-uniapp/static/play.png
new file mode 100644
index 0000000000000000000000000000000000000000..982f2f27586d043f2d54e5ce7833ce881cba233d
Binary files /dev/null and b/examples/hello-uniapp/static/play.png differ
diff --git a/examples/hello-uniapp/static/plus.png b/examples/hello-uniapp/static/plus.png
new file mode 100644
index 0000000000000000000000000000000000000000..73ddfe38b3506689a58960ac244a04b871f90074
Binary files /dev/null and b/examples/hello-uniapp/static/plus.png differ
diff --git a/examples/hello-uniapp/static/record.png b/examples/hello-uniapp/static/record.png
new file mode 100644
index 0000000000000000000000000000000000000000..a62ef8163bebeef49d18a495a5d12f82f854dec0
Binary files /dev/null and b/examples/hello-uniapp/static/record.png differ
diff --git a/examples/hello-uniapp/static/shake/1.jpg b/examples/hello-uniapp/static/shake/1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bbbef2da71b73b21781b7912467d617ee11319fd
Binary files /dev/null and b/examples/hello-uniapp/static/shake/1.jpg differ
diff --git a/examples/hello-uniapp/static/shake/2.jpg b/examples/hello-uniapp/static/shake/2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c9843aa782d0b6dcd058de882805f8b8cb426213
Binary files /dev/null and b/examples/hello-uniapp/static/shake/2.jpg differ
diff --git a/examples/hello-uniapp/static/shake/3.jpg b/examples/hello-uniapp/static/shake/3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3c2974501642ac3ecaecd098a5c953cae45e58a2
Binary files /dev/null and b/examples/hello-uniapp/static/shake/3.jpg differ
diff --git a/examples/hello-uniapp/static/shake/4.jpg b/examples/hello-uniapp/static/shake/4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d00db2694a209f4524e2e56325ba547fb1a75f07
Binary files /dev/null and b/examples/hello-uniapp/static/shake/4.jpg differ
diff --git a/examples/hello-uniapp/static/shake/shake.wav b/examples/hello-uniapp/static/shake/shake.wav
new file mode 100644
index 0000000000000000000000000000000000000000..a353d667c8b7f2674bcf636b932a8623e67cada5
Binary files /dev/null and b/examples/hello-uniapp/static/shake/shake.wav differ
diff --git a/examples/hello-uniapp/static/shake/shakedown.png b/examples/hello-uniapp/static/shake/shakedown.png
new file mode 100644
index 0000000000000000000000000000000000000000..92b931880eb3056197d2a40365484245c4aca640
Binary files /dev/null and b/examples/hello-uniapp/static/shake/shakedown.png differ
diff --git a/examples/hello-uniapp/static/shake/shakeup.png b/examples/hello-uniapp/static/shake/shakeup.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec36b52355864dcc759bc1a8d606a795418b6ba6
Binary files /dev/null and b/examples/hello-uniapp/static/shake/shakeup.png differ
diff --git a/examples/hello-uniapp/static/shuijiao.jpg b/examples/hello-uniapp/static/shuijiao.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..824876804f145c57f60df139102f5a51c2bc4f11
Binary files /dev/null and b/examples/hello-uniapp/static/shuijiao.jpg differ
diff --git a/examples/hello-uniapp/static/stop.png b/examples/hello-uniapp/static/stop.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e65f3e8cf2c9e7f2a4707d1d0c51b0214daadf2
Binary files /dev/null and b/examples/hello-uniapp/static/stop.png differ
diff --git a/examples/hello-uniapp/static/template.png b/examples/hello-uniapp/static/template.png
new file mode 100644
index 0000000000000000000000000000000000000000..4434ae3ee01fce50df412d45c4a4bc98ace296de
Binary files /dev/null and b/examples/hello-uniapp/static/template.png differ
diff --git a/examples/hello-uniapp/static/templateHL.png b/examples/hello-uniapp/static/templateHL.png
new file mode 100644
index 0000000000000000000000000000000000000000..264ed2f3444f0b5756c2009903969191a56f35bc
Binary files /dev/null and b/examples/hello-uniapp/static/templateHL.png differ
diff --git a/examples/hello-uniapp/static/templateIndex.png b/examples/hello-uniapp/static/templateIndex.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e6d2805f88449edea719718aab963d535dd4ab6
Binary files /dev/null and b/examples/hello-uniapp/static/templateIndex.png differ
diff --git a/examples/hello-uniapp/static/trash.png b/examples/hello-uniapp/static/trash.png
new file mode 100644
index 0000000000000000000000000000000000000000..83d68f3afb8e886dd6ec79597dcdab3b58f05cc4
Binary files /dev/null and b/examples/hello-uniapp/static/trash.png differ
diff --git a/examples/hello-uniapp/static/uni@2x.png b/examples/hello-uniapp/static/uni@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..3c80e5d12a1b6aba9df966fa217aae8f22ebdebb
Binary files /dev/null and b/examples/hello-uniapp/static/uni@2x.png differ
diff --git a/examples/hello-uniapp/store/index.js b/examples/hello-uniapp/store/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..42ced57e7d775ae8f81174064daf15100379f728
--- /dev/null
+++ b/examples/hello-uniapp/store/index.js
@@ -0,0 +1,56 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+    state: {
+        hasLogin: false,
+        loginProvider:"",
+        openid: null
+    },
+    mutations: {
+        login(state,provider) {
+            state.hasLogin = true;
+            state.loginProvider = provider;
+        },
+        logout(state) {
+            state.hasLogin = false
+            state.openid = null
+        },
+        setOpenid(state, openid) {
+            state.openid = openid
+        }
+    },
+    actions: {
+        // lazy loading openid
+        getUserOpenId: async function ({
+            commit,
+            state
+        }) {
+            return await new Promise((resolve, reject) => {
+                if (state.openid) {
+                    resolve(state.openid)
+                } else {
+                    uni.login({
+                        success: function (data) {
+                            commit('login')
+                            setTimeout(function () { //模拟异步请求服务器获取 openid
+                                const openid = '123456789'
+                                console.log('uni.request mock openid[' + openid + ']')
+                                commit('setOpenid', openid)
+                                resolve(openid)
+                            }, 1000)
+                        },
+                        fail: function (err) {
+                            console.log('uni.login 接口调用失败，将无法正常使用开放接口等服务', err)
+                            reject(err)
+                        }
+                    })
+                }
+            })
+        }
+    }
+})
+
+export default store