first commit

examples/hello-uniapp/App.vue

+<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>

examples/hello-uniapp/common/icon.css

+@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';
+}

examples/hello-uniapp/common/uni.css

+@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;
+}

examples/hello-uniapp/common/util.js

+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
+}

examples/hello-uniapp/components/number-box.vue

+<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>

examples/hello-uniapp/components/page-head.vue

+<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>

examples/hello-uniapp/main.js

+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()

examples/hello-uniapp/manifest.json

+{
+    "name": "demo",
+    "appid": "__uni123213213",
+    "description": "应用描述",
+    "icons": [{
+        "sizes": "分辨率，192x192",
+        "src": "图片路径"
+    }],
+    "versionName": "版本名称",
+    "versionCode": "版本号",
+    "app-plus": { // 5+App特有相关
+    },
+    "quickapp": { // 快应用特有相关
+
+    },
+    "mp-weixin": { // 小程序特有相关
+
+    }
+}

examples/hello-uniapp/pages.json

+{
+    "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": "模版"
+            }
+        ]
+    }
+}

examples/hello-uniapp/pages/API/action-sheet/index.vue

+<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>
+

examples/hello-uniapp/pages/API/animation/index.vue

+<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>

examples/hello-uniapp/pages/API/background-audio/index.vue

+<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>

examples/hello-uniapp/pages/API/canvas/index.vue

+<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>

examples/hello-uniapp/pages/API/choose-location/index.vue

+<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>

examples/hello-uniapp/pages/API/download-file/index.vue

+<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>

examples/hello-uniapp/pages/API/file/index.vue

+<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>

examples/hello-uniapp/pages/API/get-location/index.vue

+<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>

examples/hello-uniapp/pages/API/get-network-type/index.vue

+<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>

examples/hello-uniapp/pages/API/get-system-info/index.vue

+<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>

examples/hello-uniapp/pages/API/get-user-info/index.vue

+<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>

examples/hello-uniapp/pages/API/image/index.vue

+<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>

examples/hello-uniapp/pages/API/index.vue

+<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>

examples/hello-uniapp/pages/API/login/index.vue

+<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>

examples/hello-uniapp/pages/API/make-phone-call/index.vue

+<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>

examples/hello-uniapp/pages/API/modal/index.vue

+<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>

examples/hello-uniapp/pages/API/navigation-bar-loading/index.vue

+<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>

examples/hello-uniapp/pages/API/navigator/index.vue

+<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>

examples/hello-uniapp/pages/API/on-accelerometer-change/index.vue

+<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>

examples/hello-uniapp/pages/API/on-accelerometer-change/shake.vue

+<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>

examples/hello-uniapp/pages/API/on-compass-change/index.vue

+<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>

examples/hello-uniapp/pages/API/open-location/index.vue

+<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>

examples/hello-uniapp/pages/API/pull-down-refresh/index.vue

+<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>

examples/hello-uniapp/pages/API/request-payment/index.vue

+<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>

examples/hello-uniapp/pages/API/request/index.vue

+<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>

examples/hello-uniapp/pages/API/scan-code/index.vue

+<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>

examples/hello-uniapp/pages/API/set-navigation-bar-title/index.vue

+<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>

examples/hello-uniapp/pages/API/speech/index.vue

+<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>

examples/hello-uniapp/pages/API/storage/index.vue

+<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>

examples/hello-uniapp/pages/API/toast/index.vue

+<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>
+

examples/hello-uniapp/pages/component/audio/index.vue

+<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>