├── hello-quickapp
    ├── dcloud_stat_conf.js
    ├── Common
    │   ├── logo.png
    │   ├── img
    │   │   ├── c1.png
    │   │   ├── c2.png
    │   │   ├── c3.png
    │   │   ├── c4.png
    │   │   ├── c5.png
    │   │   ├── c6.png
    │   │   ├── c7.png
    │   │   ├── c8.png
    │   │   ├── ag1-.png
    │   │   ├── ag1.png
    │   │   ├── ag2-.png
    │   │   ├── ag2.png
    │   │   ├── ag3-.png
    │   │   ├── ag3.png
    │   │   ├── ag4-.png
    │   │   ├── ag4.png
    │   │   ├── cbd.jpg
    │   │   ├── muwu.jpg
    │   │   ├── mi_logo.png
    │   │   ├── stack1.png
    │   │   ├── shuijiao.jpg
    │   │   ├── youjiantou.png
    │   │   ├── yuantiao.jpg
    │   │   └── arrow_right.png
    │   └── css
    │   │   └── common.css
    ├── unpackage
    │   └── io.dcloud.quickapp.sample.signed.rpk
    ├── app.ux
    ├── Component
    │   ├── A
    │   │   ├── Detail
    │   │   │   └── index.ux
    │   │   └── index.ux
    │   ├── Richtext
    │   │   └── index.ux
    │   ├── Textarea
    │   │   └── index.ux
    │   ├── Stack
    │   │   └── index.ux
    │   ├── Label
    │   │   └── index.ux
    │   ├── Div
    │   │   └── index.ux
    │   ├── Swiper
    │   │   ├── Default
    │   │   │   └── index.ux
    │   │   ├── index.ux
    │   │   └── Grid
    │   │   │   └── index.ux
    │   ├── Switch
    │   │   └── index.ux
    │   ├── Text
    │   │   ├── Default
    │   │   │   └── index.ux
    │   │   └── index.ux
    │   ├── Span
    │   │   └── index.ux
    │   ├── Video
    │   │   └── index.ux
    │   ├── Input
    │   │   ├── Default
    │   │   │   └── index.ux
    │   │   └── index.ux
    │   ├── Progress
    │   │   └── index.ux
    │   ├── Checkbox
    │   │   └── index.ux
    │   ├── Radio
    │   │   └── index.ux
    │   ├── Image
    │   │   └── index.ux
    │   ├── Tabs
    │   │   ├── Default
    │   │   │   └── index.ux
    │   │   └── index.ux
    │   ├── List
    │   │   ├── index.ux
    │   │   └── Default
    │   │   │   └── index.ux
    │   ├── Refresh
    │   │   └── index.ux
    │   └── Button
    │   │   └── index.ux
    ├── Interface
    │   ├── Router
    │   │   ├── Detail
    │   │   │   └── index.ux
    │   │   └── index.ux
    │   ├── Webview
    │   │   └── index.ux
    │   ├── Barcode
    │   │   └── index.ux
    │   ├── Share
    │   │   └── index.ux
    │   ├── Request
    │   │   └── index.ux
    │   ├── Shortcut
    │   │   └── index.ux
    │   ├── Network
    │   │   └── index.ux
    │   ├── Notification
    │   │   └── index.ux
    │   ├── Fetch
    │   │   └── index.ux
    │   ├── Device
    │   │   └── index.ux
    │   ├── Geolocation
    │   │   └── index.ux
    │   ├── Clipboard
    │   │   └── index.ux
    │   ├── Prompt
    │   │   └── index.ux
    │   ├── Sensor
    │   │   └── index.ux
    │   ├── Storage
    │   │   └── index.ux
    │   └── File
    │   │   └── index.ux
    ├── Templates
    │   ├── About
    │   │   └── index.ux
    │   ├── Login
    │   │   └── index.ux
    │   └── Setting
    │   │   └── index.ux
    ├── dcloud_stat.js
    ├── manifest.json
    └── Home
    │   └── index.ux
└── README.md


/hello-quickapp/dcloud_stat_conf.js:
--------------------------------------------------------------------------------
1 | exports.app_key = ""; //请在此行填写快应用包名


--------------------------------------------------------------------------------
/hello-quickapp/Common/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/logo.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/c1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/c1.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/c2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/c2.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/c3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/c3.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/c4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/c4.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/c5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/c5.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/c6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/c6.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/c7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/c7.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/c8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/c8.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/ag1-.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/ag1-.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/ag1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/ag1.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/ag2-.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/ag2-.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/ag2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/ag2.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/ag3-.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/ag3-.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/ag3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/ag3.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/ag4-.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/ag4-.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/ag4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/ag4.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/cbd.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/cbd.jpg


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/muwu.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/muwu.jpg


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/mi_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/mi_logo.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/stack1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/stack1.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/shuijiao.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/shuijiao.jpg


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/youjiantou.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/youjiantou.png


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/yuantiao.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/yuantiao.jpg


--------------------------------------------------------------------------------
/hello-quickapp/Common/img/arrow_right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/Common/img/arrow_right.png


--------------------------------------------------------------------------------
/hello-quickapp/unpackage/io.dcloud.quickapp.sample.signed.rpk:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dcloudio/quickapp/HEAD/hello-quickapp/unpackage/io.dcloud.quickapp.sample.signed.rpk


--------------------------------------------------------------------------------
/hello-quickapp/app.ux:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import './dcloud_stat.js';
 3 |     module.exports = {
 4 |         onCreate: function () {
 5 |             /**
 6 |              *  uni统计服务类似于快应用里的友盟或阿拉丁，可登录 http://dev.dcloud.net.cn 查看统计数据
 7 |              *  使用该服务可在一点看到所有渠道的运营数据，避免登陆不同渠道的后台，更方便的掌握业务运营状态。
 8 |              *   如不需要此服务，请注释掉本行代码
 9 |              */
10 |             dc_stat.report();
11 | 						
12 |             //其它业务代码
13 |         },
14 |         /**manifest**/
15 |     }
16 | </script>
17 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/A/Detail/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-content">
 4 |             <text>我是上个页面传过来的参数，pageInfo={{pageInfo}}</text>
 5 |         </div>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <style>
10 | 	@import '../../../Common/css/common.css';
11 | 	.item-content text{
12 | 		padding: 30px;
13 | 	}
14 | </style>
15 | 
16 | <script>
17 |     module.exports = {
18 |         props: ['pageInfo'],
19 |         onInit: function (e) {
20 |             this.$page.setTitleBar({
21 |                 text: 'Detail'
22 |             })
23 |         }
24 |     }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/hello-quickapp/Interface/Router/Detail/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-content">
 4 |             <text>我是上个页面传过来的参数，id={{id}}</text>
 5 |         </div>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <style>
10 | 	 @import '../../../Common/css/common.css';
11 |     .item-content text {
12 |         padding: 30px;
13 |     }
14 | </style>
15 | 
16 | <script>
17 |     module.exports = {
18 |         data: {
19 |             id: ''
20 |         },
21 |         props: ['datas'],
22 |         onInit: function (e) {
23 |             this.$page.setTitleBar({
24 |                 text: 'Detail'
25 |             })
26 |             this.id = JSON.parse(this.datas).id;
27 |         }
28 |     }
29 | </script>
30 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Richtext/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>richtext</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <richtext type="html">{{type_html}}</richtext>
 8 |         </div>
 9 |     </div>
10 | </template>
11 | 
12 | <style>
13 |     @import '../../Common/css/common.css';
14 | </style>
15 | 
16 | <script>
17 |     module.exports = {
18 |         data: {
19 |             type_html: '<div style="width: 100%;height: 100px;background-color: #99cc99; text-align: center; line-height: 100px;color: #ffffff;">richtext</div>',
20 |         },
21 |         onInit: function (e) {
22 |             this.$page.setTitleBar({
23 |                 text: 'Richtext'
24 |             })
25 |         }
26 |     }
27 | </script>
28 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Textarea/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>textarea</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <textarea class="textarea" placeholder="请输入..."></textarea>
 8 |         </div>
 9 |     </div>
10 | </template>
11 | 
12 | <style>
13 |     @import '../../Common/css/common.css';
14 |     .textarea {
15 |         height: 300px;
16 |         color: #888888;
17 |         font-size: 32px;
18 |         border-color: #CCCCCC;
19 |         border-width: 1px;
20 |         border-radius: 5px;
21 |         padding: 10px;
22 |     }
23 | </style>
24 | 
25 | <script>
26 |     module.exports = {
27 |         onInit: function (e) {
28 |             this.$page.setTitleBar({
29 |                 text: 'Textarea'
30 |             })
31 |         }
32 |     }
33 | </script>
34 | 


--------------------------------------------------------------------------------
/hello-quickapp/Interface/Webview/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>webview</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <input type="button" name="webview" class="item-group-button" value="打开DCloud官网" onclick="openWebview" />
 8 |         </div>
 9 |     </div>
10 | </template>
11 | 
12 | <style>
13 |     @import '../../Common/css/common.css';
14 | </style>
15 | 
16 | <script>
17 |     import webview from "@system.webview";
18 |     module.exports = {
19 |         onInit: function (e) {
20 |             this.$page.setTitleBar({
21 |                 text: 'Webview'
22 |             })
23 |         },
24 |         openWebview: function () {
25 |             webview.loadUrl({
26 |                 url: 'http://www.dcloud.io/streamapp.html'
27 |             })
28 |         }
29 |     }
30 | </script>
31 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Stack/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>stack</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <stack>
 8 |                 <image src="/Common/img/stack1.png" class="item-stack-img"></image>
 9 |                 <text class="item-stack-text">我是stack。子组件排列方式为层叠排列，每个直接子组件按照先后顺序依次堆叠，覆盖前一个子组件。</text>
10 |             </stack>
11 |         </div>
12 |     </div>
13 | </template>
14 | 
15 | <style>
16 |     @import '../../Common/css/common.css';
17 |     .item-stack-img {
18 |         width: 670px;
19 |         height: 400px;
20 |     }
21 | 
22 |     .item-stack-text {
23 |         color: #ffffff;
24 |         padding: 20px;
25 |     }
26 | </style>
27 | 
28 | <script>
29 |     module.exports = {
30 |         onInit: function (e) {
31 |             this.$page.setTitleBar({
32 |                 text: 'Stack'
33 |             })
34 |         }
35 |     }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/A/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>a</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <a href="http://www.dcloud.io/streamapp.html">Dcloud官方网页</a>
 8 |             <a href="/Component/A/Detail?pageInfo=detail">页面间传参数</a>
 9 |         </div>
10 |     </div>
11 | </template>
12 | 
13 | <style>
14 |     @import '../../Common/css/common.css';
15 |     .item-content a {
16 |         margin: 50px;
17 |         height: 100px;
18 |         flex: 1;
19 |         border-radius: 6px;
20 |         border-color: #888888;
21 |         border-width: 1px;
22 |         text-decoration: underline;
23 |         color: #A4ACA5;
24 |         text-align: center;
25 |     }
26 | </style>
27 | 
28 | <script>
29 |     module.exports = {
30 |         onInit: function (e) {
31 |             this.$page.setTitleBar({
32 |                 text: 'A'
33 |             })
34 |         }
35 |     }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/hello-quickapp/Common/css/common.css:
--------------------------------------------------------------------------------
 1 | text {
 2 |     color: #888888;
 3 | }
 4 | 
 5 | .container {
 6 |     flex-direction: column;
 7 |     flex: 1;
 8 | }
 9 | 
10 | .item-title {
11 |     margin: 90px 0px;
12 |     width: 750px;
13 |     justify-content: center;
14 | }
15 | 
16 | .item-title text {
17 |     padding: 10px 30px;
18 |     border-bottom-color: #D8D8D8;
19 |     border-bottom-width: 1px;
20 |     text-align: center;
21 |     color: #BEBEBE;
22 |     font-size: 32px;
23 | }
24 | 
25 | .item-content {
26 |     margin: 0px 40px;
27 |     flex-direction: column;
28 | 	flex: 1;
29 | }
30 | 
31 | .item-group {
32 |     flex-direction: column;
33 |     padding: 10px 20px;
34 |     margin: 30px 0px;
35 |     background-color: #ffffff;
36 | }
37 | 
38 | .item-group-button {
39 |     height: 80px;
40 |     background-color: #dd524d;
41 |     margin: 20px 0px;
42 |     color: #ffffff;
43 | 	border-radius: 8px;
44 | }
45 | 
46 | .item-group-text {
47 |     padding: 20px;
48 |     color: #888888;
49 | }
50 | 


--------------------------------------------------------------------------------
/hello-quickapp/Interface/Barcode/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>barcode</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <input type="button" class="item-group-button" name="barcode" value="扫描二维码" onclick="startBarcode" />
 8 |         </div>
 9 |     </div>
10 | </template>
11 | 
12 | <style>
13 |     @import '../../Common/css/common.css';
14 | </style>
15 | 
16 | <script>
17 |     import barcode from "@system.barcode";
18 |     module.exports = {
19 |         onInit: function (e) {
20 |             this.$page.setTitleBar({
21 |                 text: 'Barcode'
22 |             })
23 |         },
24 |         startBarcode: function () {
25 |             barcode.scan({
26 |                 success: function (data) {
27 |                     console.log("handling success: " + data.result);
28 |                 },
29 |                 fail: function (data, code) {
30 |                     console.log("handling fail, code=" + code);
31 |                 }
32 |             })
33 |         }
34 |     }
35 | </script>
36 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # quickapp
 2 | 
 3 | 快应用是基于手机硬件平台的新型应用形态，标准是由主流手机厂商组成的快应用联盟联合制定。
 4 | 
 5 | 这里是DCloud为快应用提供的工具服务集锦，包括开发IDE、源码示例、新手教程等。
 6 | 
 7 | ## IDE
 8 | 
 9 | DCloud的HBuilder，是拥有190万开发者的优秀国产开发工具。
10 | 下一代产品HBuilderX，完全重新开发，基于C++架构，性能体验秒杀基于java系或nodewebkit系的产品。
11 | 
12 | HBuidlerX针对快应用提供了高效的语法提示、转到定义、格式化、真机同步、debug、打包等全流程服务，可以大幅提高开发者的开发效率。
13 | 
14 | HBuilderX的字处理极其高效，具备众多以往顶尖编辑器都不具备的高效字处理能力。
15 | 
16 | HBuiderX下载地址：[http://quickapp.dcloud.io](http://quickapp.dcloud.io)
17 | 
18 | ## 转换器
19 | 
20 | 如果你已经有了一款微信小程序，那就没必要从头重新开发快应用，可以利用DCloud提供的转换器，快速将微信小程序转换为快应用。
21 | 
22 | 转换器源码已开源，地址：[https://github.com/dcloudio/uni-migration](https://github.com/dcloudio/uni-migration)，欢迎大家一起参与完善小程序转换器，拒绝重复劳动，提高开发效率。
23 | 
24 | 详细转换步骤参考：[小程序转快应用教程](http://ask.dcloud.net.cn/article/13175)
25 | 
26 | ## 源码示例
27 | 
28 | ### hello-quickapp
29 | 
30 | hello-quickapp是DCloud发布的快应用Demo示例，提供快应用接口能力及组件进行展示。
31 | 
32 | <img src="http://img.cdn.aliyun.dcloud.net.cn/quickapp/guide/hello-quickapp-04.jpg" width="450px">
33 | 
34 | 开发者可以通过如下两种方式体验hello-quickapp：
35 | 
36 | - 下载Hello QuickApp项目源码，拖拽到[HBuidlerX](http://quickapp.dcloud.io)中，通过数据线将Android手机连接到电脑，在手机上进行真机运行及调试；
37 | - 将hello-quickapp编译后的rpk文件，安装到快应用联盟的加载器中直接运行
38 | 
39 | 
40 | 更多源码示例，敬请期待。
41 | 


--------------------------------------------------------------------------------
/hello-quickapp/Interface/Share/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>share</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <input type="button" name="sharetext" class="item-group-button" value="分享文本" onclick="share('text/html','今天天气不错')" />
 8 |             <input type="button" name="shareimage" class="item-group-button" value="分享图片" onclick="share('image/*','/Common/img/mi_logo.png')"
 9 |             />
10 |         </div>
11 |     </div>
12 | </template>
13 | 
14 | <style>
15 |     @import '../../Common/css/common.css';
16 | </style>
17 | 
18 | <script>
19 |     import share from "@system.share";
20 |     module.exports = {
21 |         onInit: function (e) {
22 |             this.$page.setTitleBar({
23 |                 text: 'Share'
24 |             })
25 |         },
26 |         share: function (type, data) {
27 |             share.share({
28 |                 type: type,
29 |                 data: data,
30 |                 success: function (data) {
31 |                     console.log('...success...')
32 |                 },
33 |                 fail: function (data, code) {
34 |                     console.log('...fail...')
35 |                 }
36 |             })
37 |         }
38 |     }
39 | </script>
40 | 


--------------------------------------------------------------------------------
/hello-quickapp/Templates/About/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <list class="mine-list">
 4 |             <list-item type="mine" for="{{list}}" class="mine-item-list line">
 5 |                 <text>{{$item}}</text>
 6 |                 <image src="/Common/img/arrow_right.png"></image>
 7 |             </list-item>
 8 |         </list>
 9 |     </div>
10 | </template>
11 | <style>
12 |     @import '../../Common/css/common.css';
13 |     .container {
14 |         background-color: #EFEFF4;
15 |     }
16 | 
17 |     .line {
18 |         border-bottom-width: 1px;
19 |         border-bottom-color: #C8C8CB;
20 |     }
21 | 
22 |     .mine-list {
23 |         height: 450px;
24 |         width: 750px;
25 |         background-color: #ffffff;
26 |         margin-top: 25px;
27 |         border-color: #C8C8CB;
28 |         border-bottom-width: 1px;
29 |         border-top-width: 1px;
30 |     }
31 | 
32 |     .mine-item-list {
33 |         width: 720px;
34 |         height: 90px;
35 |         margin-left: 30px;
36 |         flex-direction: row;
37 |     }
38 | 
39 |     .mine-item-list text {
40 |         width: 200px;
41 |         height: 90px;
42 |         text-align: left;
43 |     }
44 | 
45 |     .mine-item-list image {
46 |         width: 16px;
47 |         height: 30px;
48 |         margin-left: 479px;
49 |         margin-top: 30px;
50 |     }
51 | </style>
52 | <script>
53 |     import prompt from '@system.prompt'
54 |     module.exports = {
55 |         data: {
56 |             list: ['评分鼓励', '分享推荐', '客服电话', '问题反馈', '检查更新']
57 |         },
58 |         onInit: function (e) {
59 |             this.$page.setTitleBar({
60 |                 text: '关于'
61 |             })
62 |         }
63 |     }
64 | </script>
65 | 


--------------------------------------------------------------------------------
/hello-quickapp/Interface/Request/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>request</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <div class="item-group">
 8 |                 <text class="item-group-text">下载文件：{{uri}}</text>
 9 |                 <input type="button" name="fetch" class="item-group-button" value="下载" onclick="downloadFile" />
10 |             </div>
11 |         </div>
12 |     </div>
13 | </template>
14 | 
15 | <style>
16 |     @import '../../Common/css/common.css';
17 | </style>
18 | 
19 | <script>
20 |     import request from "@system.request";
21 |     import prompt from "@system.prompt";
22 |     module.exports = {
23 |         data: {
24 |             uri: ''
25 |         },
26 |         onInit: function (e) {
27 |             this.$page.setTitleBar({
28 |                 text: 'Request'
29 |             })
30 |         },
31 |         downloadFile: function () {
32 |             var that = this;
33 |             request.download({
34 |                 url: 'http://img-cdn-qiniu.dcloud.net.cn/icon3.png',
35 |                 success: function (data) {
36 |                     request.onDownloadComplete({
37 |                         token: data.token,
38 |                         success: function (data) {
39 |                             that.uri = data.uri
40 |                         },
41 |                         fail: function (data, code) {
42 |                             console.log('...fail...');
43 |                         }
44 |                     })
45 |                 },
46 |                 fail: function (code, data) {
47 |                     console.log('...fail...');
48 |                 }
49 |             });
50 | 
51 |         }
52 |     }
53 | </script>
54 | 


--------------------------------------------------------------------------------
/hello-quickapp/Interface/Router/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>router</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <input type="button" class="item-group-button" name="home" value="跳转到首页" onclick="routerTest('/Home')" />
 8 |             <input type="button" class="item-group-button" name="back" value="返回" onclick="routerTest('back')" />
 9 |             <input type="button" class="item-group-button" name="dcloud" value="DCloud官方网页" onclick="routerTest('http://m.dcloud.io/index.html')" />
10 |             <input type="button" class="item-group-button" name="tel" value="打电话" onclick="routerTest('tel:10086')" />
11 |             <input type="button" class="item-group-button" name="params" value="跨页面传参数" onclick="routerDetail('/Interface/Router/Detail')"/>
12 |         </div>
13 |     </div>
14 | </template>
15 | 
16 | <style>
17 |     @import '../../Common/css/common.css';
18 | </style>
19 | 
20 | <script>
21 |     import router from "@system.router";
22 |     module.exports = {
23 |         onInit: function (e) {
24 |             this.$page.setTitleBar({
25 |                 text: 'Router'
26 |             })
27 |         },
28 |         routerTest: function (uri) {
29 |             if (uri == 'back') {
30 |                 router.back();
31 |             } else {
32 |                 router.push({
33 |                     uri: uri
34 |                 })
35 |             }
36 |         },
37 |         routerDetail: function (uri) {
38 |             router.push({
39 |                 uri: uri,
40 |                 params: {
41 |                     datas: {
42 |                         id: "123456"
43 |                     }
44 |                 }
45 |             })
46 |         }
47 |     }
48 | </script>
49 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Label/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>label</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <div class="item-input-group">
 8 |                 <label target="username">text：</label>
 9 |                 <input type="text" name="username" id="username" placeholder="请输入..." />
10 |             </div>
11 |             <div class="item-input-group">
12 |                 <label target="radio">radio：</label>
13 |                 <input type="radio" id="radio" />
14 |             </div>
15 |             <div class="item-input-group">
16 |                 <label target="textarea" id="checkbox">checkbox：</label>
17 |                 <input class="flex-1" type="checkbox" id="checkbox">
18 |             </div>
19 |             <div class="item-input-group">
20 |                 <label target="textarea">textarea：</label>
21 |                 <textarea placeholder="请输入..." id="textarea" class="textarea"></textarea>
22 |             </div>
23 |         </div>
24 | 
25 |     </div>
26 | </template>
27 | 
28 | <style>
29 |     @import '../../Common/css/common.css';
30 |     .item-content {
31 |         background-color: #ffffff;
32 |     }
33 | 
34 |     .item-input-group {
35 |         margin-left: 30px;
36 |         height: 90px;
37 |     }
38 | 
39 |     .item-input-group label {
40 |         width: 200px;
41 |         color: #888888;
42 |     }
43 | 
44 |     .textarea {
45 |         margin-top: 15px;
46 |         color: #888888;
47 |         padding: 10px;
48 |     }
49 | </style>
50 | 
51 | <script>
52 |     module.exports = {
53 |         onInit: function (e) {
54 |             this.$page.setTitleBar({
55 |                 text: 'Label'
56 |             })
57 |         }
58 |     }
59 | </script>
60 | 


--------------------------------------------------------------------------------
/hello-quickapp/Interface/Shortcut/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>shortcut</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <input type="button" name="shortcut_hasInstalled" class="item-group-button" value="桌面图标是否创建" onclick="hasInstalledShortcut"
 8 |             />
 9 |             <input type="button" name="shortcut_install" class="item-group-button" value="创建桌面图标" onclick="installShortcut" />
10 |         </div>
11 |     </div>
12 | </template>
13 | 
14 | <style>
15 |     @import '../../Common/css/common.css';
16 | </style>
17 | 
18 | <script>
19 |     import shortcut from "@system.shortcut";
20 |     import prompt from "@system.prompt";
21 |     module.exports = {
22 |         onInit: function (e) {
23 |             this.$page.setTitleBar({
24 |                 text: 'Shortcut'
25 |             })
26 |         },
27 |         hasInstalledShortcut: function () {
28 |             shortcut.hasInstalled({
29 |                 success: function (data) {
30 |                     prompt.showToast({
31 |                         message: data ? '已创建' : '未创建'
32 |                     })
33 |                 }
34 |             })
35 |         },
36 |         installShortcut: function () {
37 |             shortcut.install({
38 |                 success: function () {
39 |                     prompt.showToast({
40 |                         message: '创建成功'
41 |                     })
42 |                 },
43 |                 fail: function (code) {
44 |                     if (code == 201) {
45 |                         prompt.showToast({
46 |                             message: '获取创建桌面图标权限失败'
47 |                         })
48 |                     }
49 |                 }
50 |             })
51 |         }
52 |     }
53 | </script>
54 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Div/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>div</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <text>flex-direction: row</text>
 8 |             <text>横向布局</text>
 9 |             <div class="item-row">
10 |                 <text class="color1"></text>
11 |                 <text class="color2"></text>
12 |                 <text class="color3"></text>
13 |             </div>
14 |             <text>flex-direction: column</text>
15 |             <text>纵向布局</text>
16 |             <div class="item-column">
17 |                 <text class="color3"></text>
18 |                 <text class="color2"></text>
19 |                 <text class="color1"></text>
20 |             </div>
21 |         </div>
22 |     </div>
23 | </template>
24 | 
25 | <style>
26 |     @import '../../Common/css/common.css';
27 |     .item-row {
28 |         margin: 60px 0px;
29 |         flex-direction: row;
30 |         justify-content: center;
31 |     }
32 | 
33 |     .item-row text {
34 |         width: 150px;
35 |         height: 250px;
36 |     }
37 | 
38 |     .item-column {
39 |         margin-top: 40px;
40 |         flex-direction: column;
41 |         align-items: center;
42 |     }
43 | 
44 |     .item-column text {
45 |         width: 250px;
46 |         height: 130px;
47 |     }
48 | 
49 |     .color1 {
50 |         background-color: #339900;
51 |     }
52 | 
53 |     .color2 {
54 |         background-color: #33ccff;
55 |     }
56 | 
57 |     .color3 {
58 |         background-color: #929292;
59 |     }
60 | </style>
61 | 
62 | <script>
63 |     module.exports = {
64 |         onInit: function (e) {
65 |             this.$page.setTitleBar({
66 |                 text: 'Div'
67 |             })
68 |         }
69 |     }
70 | </script>
71 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Swiper/Default/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>swiper</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <swiper class="swiper" autoplay="{{autoPlay}}" interval="{{sliderValue}}" indicator="{{indicator}}">
 8 |                 <image src="/Common/img/cbd.jpg"></image>
 9 |                 <image src="/Common/img/muwu.jpg"></image>
10 |                 <image src="/Common/img/shuijiao.jpg"></image>
11 |                 <image src="/Common/img/yuantiao.jpg"></image>
12 |             </swiper>
13 |             <div class="swiper-contral">
14 |                 <text>定时轮播</text>
15 |                 <switch onchange="changeAutoplay" checked="true"></switch>
16 |             </div>
17 |             <div class="swiper-contral">
18 |                 <text>指示器</text>
19 |                 <switch onchange="changeIndicator" checked="true"></switch>
20 |             </div>
21 |         </div>
22 |     </div>
23 | </template>
24 | 
25 | <style>
26 |     @import '../../../Common/css/common.css';
27 |     .swiper {
28 |         height: 400px;
29 |         margin-bottom: 50px;
30 |     }
31 | 
32 |     .swiper-contral {
33 |         justify-content: space-between;
34 |         padding: 10px;
35 |     }
36 | </style>
37 | 
38 | <script>
39 |     module.exports = {
40 |         data: {
41 |             autoPlay: true,
42 |             indicator: true,
43 |             sliderValue: 2000
44 |         },
45 |         onInit: function (e) {
46 |             this.$page.setTitleBar({
47 |                 text: 'Swiper'
48 |             })
49 |         },
50 |         changeAutoplay: function () {
51 |             this.autoPlay = !this.autoPlay;
52 |         },
53 |         changeIndicator: function () {
54 |             this.indicator = !this.indicator;
55 |         }
56 |     }
57 | </script>
58 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Switch/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>switch</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <list class="list">
 8 |                  <list-item type="switch" class="line">
 9 |                     <text>{{text1}}</text>
10 |                     <switch onchange="changeText1()"></switch>
11 |                 </list-item>
12 |                 <list-item type="switch" class="list-item">
13 |                     <text>{{text2}}</text>
14 |                     <switch  onchange="changeText2()"></switch>
15 |                 </list-item>
16 |             </list>
17 |         </div>
18 |     </div>
19 | </template>
20 | 
21 | <style>
22 |     @import '../../Common/css/common.css';
23 | 
24 |     .list {
25 |         border-color: #D8D8D8;
26 |         border-top-width: 1px;
27 |         border-bottom-width: 1px;
28 |         background-color: #ffffff;
29 | 		flex: 1;
30 |     }
31 | 
32 | 	.item-content{
33 | 		height: 180px;
34 | 		flex: 0;
35 | 	}
36 | 	
37 |     .list list-item {
38 |         flex-direction: row;
39 |         height: 90px;
40 |         padding-right: 40px;
41 |         justify-content: space-between;
42 |         margin-left: 40px;
43 |     }
44 | 
45 |     .line {
46 |         border-color: #D8D8D8;
47 |         border-bottom-width: 1px;
48 |     }
49 | </style>
50 | 
51 | <script>
52 |     module.exports = {
53 |         data: {
54 |             text1: '关闭',
55 |             text2: '关闭',
56 |         },
57 |         onInit: function (e) {
58 |             this.$page.setTitleBar({
59 |                 text: 'Switch'
60 |             })
61 |         },
62 | 		changeText1:function(e){
63 | 			this.text1 = e.checked ? '开启' : '关闭';
64 | 		},
65 | 		changeText2:function(e){
66 | 			this.text2 = e.checked ? '开启' : '关闭';
67 | 		}
68 |     }
69 | </script>
70 | 


--------------------------------------------------------------------------------
/hello-quickapp/dcloud_stat.js:
--------------------------------------------------------------------------------
1 | import app from '@system.app';import fetch from '@system.fetch';import device from '@system.device';import storage from '@system.storage';import dc_stat_conf from './dcloud_stat_conf.js';let dcloud_stat={stat_data:{p:"a"},retryTime:0,report:function(logType){this.stat_data.lt=logType||1;this.getAppInfo();let _self=this;this.getDeviceId(function(){if(dc_stat_conf.app_key){_self.stat_data.ak=dc_stat_conf.app_key;fetch.fetch({url:"https://stream.dcloud.net.cn/quickapp/stat",data:_self.stat_data,success:function(rsp){},fail:function(data,code){if(++_self.retryTime<3){setTimeout((logType)=>{_self.report(logType)},500)}}})}})},getAppInfo:function(){let appInfo=app.getInfo();if(appInfo){this.stat_data.vn=appInfo.versionName;this.stat_data.vc=appInfo.versionCode}},getDeviceId:function(callback){let _self=this;device.getId({type:["device","mac","user"],success:function(data){_self.stat_data.imei="|"+data.device+"|"+data.mac+"|"+data.user+"||";_self.getDeviceInfo(callback)},fail:function(data,code){let dt=new Date();storage.get({key:'__DC_STAT_DEVICE_R',success:function(data){let rid='';if(data){rid=data}else{rid="__DS_RID__"+dt.getFullYear()+(dt.getMonth()+1)+dt.getDate()+dt.getHours()+parseInt(Math.random()*100000);storage.set({key:'__DC_STAT_DEVICE_R',value:rid})}_self.stat_data.imei="||||"+rid+"|";_self.getDeviceInfo(callback)},fail:function(data,code){console.log("storage handling fail, code="+code)}})}})},getDeviceInfo:function(callback){let _self=this;device.getInfo({success:function(data){_self.stat_data.brand=data.brand;_self.stat_data.vd=data.manufacturer;_self.stat_data.md=data.model;_self.stat_data.os=data.osVersionCode;_self.stat_data.pvn=data.platformVersionName;_self.stat_data.vb=data.platformVersionCode;_self.stat_data.lang=data.language;_self.stat_data.region=data.region;_self.stat_data.sw=data.screenWidth;_self.stat_data.sh=data.screenHeight},fail:function(){},complete:function(){callback()}})}};(global.__proto__||global).dc_stat=dcloud_stat;export default dcloud_stat;


--------------------------------------------------------------------------------
/hello-quickapp/Interface/Network/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>network</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <div class="item-group">
 8 |                 <text class="item-group-text">网络类型：{{type}}</text>
 9 |                 <input type="button" name="gettype" class="item-group-button" value="获取网络类型" onclick="getType" />
10 |             </div>
11 |             <div class="item-group">
12 |                 <text class="item-group-text">监听网络连接类型：{{sub_type}}</text>
13 |                 <input type="button" name="subscribe" class="item-group-button" value="监听网络" onclick="subscribe" />
14 |                 <input type="button" name="unsubscribe" class="item-group-button" value="取消监听网络" onclick="unsubscribe" />
15 |             </div>
16 |         </div>
17 |     </div>
18 | </template>
19 | 
20 | <style>
21 |     @import '../../Common/css/common.css';
22 | </style>
23 | 
24 | <script>
25 |     import network from "@system.network";
26 |     module.exports = {
27 |         data: {
28 |             type: '',
29 |             sub_type: ''
30 |         },
31 |         onInit: function (e) {
32 |             this.$page.setTitleBar({
33 |                 text: 'Network'
34 |             })
35 |         },
36 |         getType: function () {
37 |             var that = this;
38 |             network.getType({
39 |                 success: function (data) {
40 |                     that.type = data.type;
41 |                 }
42 |             })
43 |         },
44 |         subscribe: function () {
45 |             var that = this;
46 |             network.subscribe({
47 |                 callback: function (data) {
48 |                     that.sub_type = data.type;
49 |                 }
50 |             })
51 |         },
52 |         unsubscribe: function () {
53 |             network.unsubscribe();
54 |         }
55 |     }
56 | </script>
57 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Text/Default/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>text</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <text>子节点为文本</text>
 8 |             <text class="item-group item-text1">
 9 |                 text组件，子组件仅支持span和a
10 |             </text>
11 | 
12 |             <text>子节点为span</text>
13 |             <text class="item-group">
14 |                 <span class="item-text2">变大且带下划线的span,</span>
15 |                 <span class="item-text3">带中划线的span</span>
16 |             </text>
17 | 
18 |             <text>子组件为a</text>
19 |             <text class="item-group">
20 |                 <a href="http://www.dcloud.io/" class="item-text4">变大且带下划线的a,</a>
21 |                 <a href="http://www.dcloud.io/" class="item-text5">带中划线的a</a>
22 |             </text>
23 |         </div>
24 |     </div>
25 | </template>
26 | 
27 | <style>
28 |     @import '../../../Common/css/common.css';
29 |     .item-group {
30 |         padding: 0px 20px;
31 |         height: 80px;
32 |         margin-bottom: 30px;
33 |     }
34 | 
35 |     .item-text1 {
36 |         color: #F0AD4E;
37 |         text-decoration: underline;
38 |     }
39 | 
40 |     .item-text2 {
41 |         color: #007AFF;
42 |         text-decoration: underline;
43 |         font-size: 35px;
44 |     }
45 | 
46 |     .item-text3 {
47 |         color: #007AFF;
48 |         text-decoration: line-through;
49 |     }
50 | 
51 |     .item-text4 {
52 |         color: #4CD964;
53 |         text-decoration: underline;
54 |         font-size: 35px;
55 |     }
56 | 
57 |     .item-text5 {
58 |         color: #4CD964;
59 |         text-decoration: line-through;
60 |     }
61 | </style>
62 | 
63 | <script>
64 |     module.exports = {
65 |         onInit: function (e) {
66 |             this.$page.setTitleBar({
67 |                 text: 'Text'
68 |             })
69 |         }
70 |     }
71 | </script>
72 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Span/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>span</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <text>span文本</text>
 8 |             <text class="item-group">
 9 |                 <span class="item-text1">
10 |                     span组件，父组件只支持text或者a
11 |                 </span>
12 |             </text>
13 | 
14 |             <text>父组件为text</text>
15 |             <text class="item-group">
16 |                 <span class="item-text2">变大且带下划线的span,</span>
17 |                 <span class="item-text3">带中划线的span</span>
18 |             </text>
19 | 
20 |             <text>父组件为a</text>
21 |             <a class="item-group" href="http://www.dcloud.io/">
22 |                 <span class="item-text4">变大且带下划线的span,</span>
23 |                 <span class="item-text5">带中划线的span</span>
24 |             </a>
25 |         </div>
26 |     </div>
27 | </template>
28 | 
29 | <style>
30 |     @import '../../Common/css/common.css';
31 |     .item-group {
32 |         padding: 0px 20px;
33 |         height: 80px;
34 |         margin-bottom: 30px;
35 |     }
36 | 
37 |     .item-text1 {
38 |         color: #F0AD4E;
39 |         text-decoration: underline;
40 |     }
41 | 
42 |     .item-text2 {
43 |         color: #007AFF;
44 |         text-decoration: underline;
45 |         font-size: 35px
46 |     }
47 | 
48 |     .item-text3 {
49 |         color: #007AFF;
50 |         text-decoration: line-through;
51 |     }
52 | 
53 |     .item-text4 {
54 |         color: #4CD964;
55 |         font-size: 35px;
56 |         text-decoration: underline
57 |     }
58 | 
59 |     .item-text5 {
60 |         color: #4CD964;
61 |         text-decoration: line-through;
62 |     }
63 | </style>
64 | 
65 | <script>
66 |     module.exports = {
67 |         onInit: function (e) {
68 |             this.$page.setTitleBar({
69 |                 text: 'Span'
70 |             })
71 |         }
72 |     }
73 | </script>
74 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Video/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>video</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <video id="video" src="https://vd3.bdstatic.com/mda-iatj2fgg8z6k3p8f/mda-iatj2fgg8z6k3p8f.mp4?playlist=%5B%22hd%22%5D&auth_key=1517196150-0-0-eea1109a3e6adb4cb9b0acc4022196e7&bcevod_channel=searchbox_feed&pd=alading_paeC&br=60&platform=2&fmt=auto&level=0&sdtfrom=v3010&guid=38af158f0c6b061cf96a249a117f91c5" autoplay="true"></video>
 8 |         </div>
 9 |         <div class="item-control">
10 |             <text onclick="start">开始</text>
11 |             <text onclick="pause">暂停</text>
12 |             <text onclick="setCurrentTime">跳转至10秒</text>
13 |         </div>
14 |     </div>
15 | </template>
16 | 
17 | <style>
18 |     @import '../../Common/css/common.css';
19 |     video {
20 |         height: 350px;
21 |         flex: 1;
22 |     }
23 | 	.item-content {
24 | 		flex: 0;
25 | 	}
26 |     .item-control {
27 |         margin: 30px 40px;
28 |         height: 80px;
29 |         flex-direction: row;
30 |         justify-content: space-between;
31 |     }
32 | 
33 |     .item-control text {
34 |         width: 180px;
35 |         height: 80px;
36 |         background-color: #fd7420;
37 |         border-radius: 5px;
38 |         color: #ffffff;
39 |         text-align: center;
40 |     }
41 | </style>
42 | 
43 | <script>
44 |     module.exports = {
45 |         onInit: function (e) {
46 |             this.$page.setTitleBar({
47 |                 text: 'Video'
48 |             })
49 |         },
50 |         start: function () {
51 |             this.$element('video').start();
52 |         },
53 |         pause: function () {
54 |             this.$element('video').pause();
55 |         },
56 |         setCurrentTime: function () {
57 |             this.$element('video').setCurrentTime({
58 |                 currenttime: 10
59 |             });
60 |         }
61 | 
62 |     }
63 | </script>
64 | 


--------------------------------------------------------------------------------
/hello-quickapp/Interface/Notification/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>notification</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <div class="item-group">
 8 |                 <div class="input-group">
 9 |                     <label>标题：</label>
10 |                     <input type="text" name="title" value="{{title}}" onchange="getNewTitle" placeholder="请输入标题" />
11 |                 </div>
12 |                 <div class="input-group">
13 |                     <label>内容：</label>
14 |                     <input type="text" name="text" value="{{text}}" onchange="getNewText" placeholder="请输入内容" />
15 |                 </div>
16 |                 <input type="button" name="share" class="item-group-button" value="发送通知" onclick="notification" />
17 |             </div>
18 |         </div>
19 |     </div>
20 | </template>
21 | 
22 | <style>
23 |     @import '../../Common/css/common.css';
24 |     .input-group {
25 |         padding: 20px;
26 |     }
27 | 
28 |     .input-group label {
29 |         width: 150px;
30 |     }
31 | </style>
32 | 
33 | <script>
34 |     import notification from "@system.notification";
35 |     module.exports = {
36 |         data: {
37 |             title: '',
38 |             text: ''
39 |         },
40 |         onInit: function (e) {
41 |             this.$page.setTitleBar({
42 |                 text: 'Notification'
43 |             })
44 |         },
45 |         getNewTitle: function (e) {
46 |             this.title = e.text;
47 |         },
48 |         getNewText: function (e) {
49 |             this.text = e.text;
50 |         },
51 |         notification: function () {
52 |             var that = this;
53 |             notification.show({
54 |                 contentTitle: that.title || '标题',
55 |                 contentText: that.text || '内容',
56 |                 clickAction: {
57 |                     uri: '/Home'
58 |                 }
59 |             })
60 |         }
61 |     }
62 | </script>
63 | 


--------------------------------------------------------------------------------
/hello-quickapp/Interface/Fetch/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>fetch</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <div class="item-group">
 8 |                 <text class="item-group-text" for="infos">{{$item}}</text>
 9 |                 <input type="button" name="fetch" class="item-group-button" value="刷新" onclick="fetch('refresh')" />
10 |             </div>
11 |         </div>
12 |     </div>
13 | </template>
14 | 
15 | <style>
16 |     @import '../../Common/css/common.css';
17 | </style>
18 | 
19 | <script>
20 |     import fetch from "@system.fetch";
21 |     import prompt from "@system.prompt";
22 |     module.exports = {
23 |         data: {
24 |             infos: []
25 |         },
26 |         onInit: function (e) {
27 |             this.$page.setTitleBar({
28 |                 text: 'Fetch'
29 |             });
30 |             this.fetch();
31 |         },
32 |         fetch: function (p) {
33 |             var that = this;
34 |             fetch.fetch({
35 |                 url: 'http://www.dcloud.io/docs/HBuilder.json?timestamp=',
36 |                 success: function (data) {
37 |                     if (data.code == 200) {
38 |                         var infos = [];
39 |                         var rs = JSON.parse(data.data);
40 |                         infos.push('HBuilderX版本号：' + rs.win[1].version);
41 |                         infos.push('HBuilderX名称：' + rs.win[1].name);
42 |                         infos.push('HBuilderX大小：' + rs.win[1].size);
43 |                         that.infos = infos;
44 |                         if (p) {
45 |                             prompt.showToast({
46 |                                 message: '刷新成功'
47 |                             })
48 |                         }
49 |                     }
50 |                 },
51 |                 fail: function (data, code) {
52 |                     console.log('...fail...');
53 |                 }
54 |             })
55 |         }
56 |     }
57 | </script>
58 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Input/Default/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>input</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <div class="item-input-group">
 8 |                 <label target="text">text：</label>
 9 |                 <input type="text" name="text" id="text" placeholder="请输入..." />
10 |             </div>
11 |             <div class="item-input-group">
12 |                 <label target="email">email：</label>
13 |                 <input type="email" name="email" id="email" placeholder="请输入..." />
14 |             </div>
15 |             <div class="item-input-group">
16 |                 <label target="date">date：</label>
17 |                 <input type="date" name="date" id="date" placeholder="请输入..." />
18 |             </div>
19 |             <div class="item-input-group">
20 |                 <label target="time">time：</label>
21 |                 <input type="time" name="time" id="time" placeholder="请输入..." />
22 |             </div>
23 |             <div class="item-input-group">
24 |                 <label target="number">number：</label>
25 |                 <input type="number" name="number" id="number" placeholder="请输入..." />
26 |             </div>
27 |             <div class="item-input-group">
28 |                 <label target="password">password：</label>
29 |                 <input type="password" name="password" id="password" placeholder="请输入..." />
30 |             </div>
31 |         </div>
32 |     </div>
33 | </template>
34 | 
35 | <style>
36 |     @import '../../../Common/css/common.css';
37 |     .item-content {
38 |         background-color: #ffffff;
39 |     }
40 | 
41 |     .item-input-group {
42 |         margin-left: 30px;
43 |         height: 90px;
44 |     }
45 | 
46 |     .item-input-group label {
47 |         width: 300px;
48 |         color: #888888;
49 |     }
50 | </style>
51 | 
52 | <script>
53 |     module.exports = {
54 |         onInit: function (e) {
55 |             this.$page.setTitleBar({
56 |                 text: 'Input'
57 |             })
58 |         }
59 |     }
60 | </script>
61 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Progress/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>progress</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <div class="item-progerss-group">
 8 |                 <text>type: horizontal</text>
 9 |                 <progress class="progerss-default" percent="20" style="color: #929292;"></progress>
10 |                 <progress class="progerss-default" percent="40"></progress>
11 |                 <progress class="progerss-default" percent="60"></progress>
12 |                 <progress class="progerss-default" percent="80" style="color: #1AAD19;"></progress>
13 |             </div>
14 |             <div class="item-progerss-group">
15 |                 <text>type: circular</text>
16 |                 <progress class="progerss-circular progerss-s" type="circular"></progress>
17 |                 <progress class="progerss-circular progerss-m" type="circular"></progress>
18 |                 <progress class="progerss-circular progerss-l" type="circular"></progress>
19 |             </div>
20 |         </div>
21 |     </div>
22 | </template>
23 | 
24 | <style>
25 |     @import '../../Common/css/common.css';
26 |     .item-progerss-group {
27 |         flex-direction: column;
28 |     }
29 | 
30 |     .item-progerss-group text {
31 |         padding: 10px 0px;
32 |     }
33 | 
34 |     .progerss-default {
35 |         padding: 20px;
36 |         stroke-width: 10px;
37 |         margin: 20px 0px;
38 |     }
39 | 
40 |     .progerss-circular {
41 |         margin: 20px 0px;
42 |         color: #33CCFF;
43 |     }
44 | 
45 |     .progerss-s {
46 |         width: 50px;
47 |         height: 50px;
48 |     }
49 | 
50 |     .progerss-m {
51 |         width: 70px;
52 |         height: 70px;
53 |     }
54 | 
55 |     .progerss-l {
56 |         width: 90px;
57 |         height: 90px;
58 |     }
59 | </style>
60 | 
61 | <script>
62 |     module.exports = {
63 |         onInit: function (e) {
64 |             this.$page.setTitleBar({
65 |                 text: 'Progress'
66 |             })
67 |         }
68 |     }
69 | </script>
70 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Checkbox/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>checkbox</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <list class="list">
 8 |                 <list-item type="checkbox" class="line">
 9 |                     <input type="checkbox" id="checkbox1" name="checkbox" value="checkbox1" />
10 |                     <label target="checkbox1">HBuilder</label>
11 |                 </list-item>
12 |                 <list-item type="checkbox" class="line">
13 |                     <input type="checkbox" id="checkbox2" name="checkbox" value="checkbox2" />
14 |                     <label target="checkbox2">5+客户端</label>
15 |                 </list-item>
16 |                 <list-item type="checkbox" class="line">
17 |                     <input type="checkbox" id="checkbox3" name="checkbox" value="checkbox3" />
18 |                     <label target="checkbox3">wap2app</label>
19 |                 </list-item>
20 |                 <list-item type="checkbox">
21 |                     <input type="checkbox" id="checkbox4" name="checkbox" value="checkbox4" />
22 |                     <label target="checkbox4">mui</label>
23 |                 </list-item>
24 |             </list>
25 |         </div>
26 |     </div>
27 | </template>
28 | 
29 | <style>
30 |     @import '../../Common/css/common.css';
31 |     .list {
32 |         border-color: #D8D8D8;
33 |         border-top-width: 1px;
34 |         border-bottom-width: 1px;
35 |         background-color: #ffffff;
36 | 		flex: 1;
37 |     }
38 | 	
39 | 	.item-content{
40 | 		height: 360px;
41 | 		flex: 0;
42 | 	}
43 | 	
44 |     label {
45 |         color: #888888;
46 |     }
47 | 
48 |     .list list-item {
49 |         flex-direction: row;
50 |         height: 90px;
51 |         padding-right: 40px;
52 |         margin-left: 40px;
53 |     }
54 | 
55 |     .line {
56 |         border-color: #D8D8D8;
57 |         border-bottom-width: 1px;
58 |     }
59 | </style>
60 | 
61 | <script>
62 |     module.exports = {
63 |         onInit: function (e) {
64 |             this.$page.setTitleBar({
65 |                 text: 'Checkbox'
66 |             })
67 |         }
68 |     }
69 | </script>
70 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Radio/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>radio</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <list class="list">
 8 |                 <list-item type="radio" class="line">
 9 |                     <input type="radio" id="radio1" name="radio" value="radio1" onchange="checkRadio"></input>
10 |                     <label target="radio1">HBuilder</label>
11 |                 </list-item>
12 |                 <list-item type="radio" class="line">
13 |                     <input type="radio" id="radio2" name="radio" value="radio2" onchange="checkRadio"></input>
14 |                     <label target="radio2">5+客户端</label>
15 |                 </list-item>
16 |                 <list-item type="radio" class="line">
17 |                     <input type="radio" id="radio3" name="radio" value="radio3" onchange="checkRadio"></input>
18 |                     <label target="radio3">wap2app</label>
19 |                 </list-item>
20 |                 <list-item type="radio">
21 |                     <input type="radio" id="radio4" name="radio" value="radio4" onchange="checkRadio"></input>
22 |                     <label target="radio4">mui</label>
23 |                 </list-item>
24 |             </list>
25 |         </div>
26 |     </div>
27 | </template>
28 | 
29 | <style>
30 |     @import '../../Common/css/common.css';
31 |     .list {
32 |         border-color: #D8D8D8;
33 |         border-top-width: 1px;
34 |         border-bottom-width: 1px;
35 |         background-color: #ffffff;
36 |     }
37 | 	.item-content{
38 | 		height: 360px;
39 | 		flex: 0;
40 | 	}
41 |     label {
42 |         color: #888888;
43 |     }
44 | 
45 |     .list list-item {
46 |         flex-direction: row;
47 |         height: 90px;
48 |         padding-right: 40px;
49 |         margin-left: 40px;
50 |     }
51 | 
52 |     .line {
53 |         border-color: #D8D8D8;
54 |         border-bottom-width: 1px;
55 |     }
56 | </style>
57 | 
58 | <script>
59 |     module.exports = {
60 |         onInit: function (e) {
61 |             this.$page.setTitleBar({
62 |                 text: 'Radio'
63 |             })
64 |         },
65 | 		checkRadio:function () {
66 | 			
67 | 		}
68 |     }
69 | </script>
70 | 


--------------------------------------------------------------------------------
/hello-quickapp/Interface/Device/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>device</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <div class="item-group">
 8 |                 <text class="item-group-text" for="infos">{{$item}}</text>
 9 |                 <input type="button" name="device" class="item-group-button" value="获取设备信息" onclick="getDeviceInfos" />
10 |             </div>
11 |             <div class="item-group">
12 |                 <text class="item-group-text" show="{{show}}">{{devideId}}</text>
13 |                 <input type="button" name="deviceId" class="item-group-button" value="获取设备ID" onclick="getDeviceId" />
14 |             </div>
15 |         </div>
16 |     </div>
17 | </template>
18 | 
19 | <style>
20 |     @import '../../Common/css/common.css';
21 | </style>
22 | 
23 | <script>
24 |     import device from "@system.device"
25 |     module.exports = {
26 |         data: {
27 |             infos: [],
28 |             devideId: '',
29 |             show: false
30 |         },
31 |         onInit: function (e) {
32 |             this.$page.setTitleBar({
33 |                 text: 'Device'
34 |             })
35 |         },
36 |         getDeviceInfos: function () {
37 |             var that = this;
38 |             device.getInfo({
39 |                 success: function (data) {
40 |                     var infos = [];
41 |                     infos.push('设备品牌：' + data.brand);
42 |                     infos.push('设备型号：' + data.model);
43 |                     infos.push('设备代号：' + data.product);
44 |                     infos.push('操作系统版本名称：' + data.osVersionName);
45 |                     infos.push('操作系统版本号：' + data.osVersionCode);
46 |                     infos.push('屏幕宽：' + data.screenWidth);
47 |                     infos.push('屏幕高：' + data.screenHeight);
48 |                     that.infos = infos;
49 |                 }
50 |             })
51 |         },
52 |         getDeviceId: function () {
53 |             var that = this;
54 |             device.getId({
55 |                 type: ["device", "mac"],
56 |                 success: function (data) {
57 |                     that.show = true;
58 |                     that.devideId = '设备Id：' + data.device;
59 |                 }
60 |             })
61 |         }
62 |     }
63 | </script>
64 | 


--------------------------------------------------------------------------------
/hello-quickapp/Interface/Geolocation/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>geolocation</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <div class="item-group">
 8 |                 <text class="item-group-text">longitude：{{longitude}}</text>
 9 |                 <text class="item-group-text">latitude：{{latitude}}</text>
10 |                 <input type="button" name="gettype" class="item-group-button" value="获取地理位置" onclick="getLocation" />
11 |             </div>
12 |             <div class="item-group">
13 |                 <text class="item-group-text">longitude：{{sub_longitude}}</text>
14 |                 <text class="item-group-text">latitude：{{sub_latitude}}</text>
15 |                 <input type="button" name="subscribe" class="item-group-button" value="监听地理位置" onclick="subscribe" />
16 |                 <input type="button" name="unsubscribe" class="item-group-button" value="取消监听地理位置" onclick="unsubscribe" />
17 |             </div>
18 |         </div>
19 |     </div>
20 | </template>
21 | 
22 | <style>
23 |     @import '../../Common/css/common.css';
24 | </style>
25 | 
26 | <script>
27 |     import geolocation from "@system.geolocation";
28 |     module.exports = {
29 |         data: {
30 |             longitude: '',
31 |             latitude: '',
32 |             sub_longitude: '',
33 |             sub_latitude: ''
34 |         },
35 |         onInit: function (e) {
36 |             this.$page.setTitleBar({
37 |                 text: 'Geolocation'
38 |             })
39 |         },
40 |         getLocation: function () {
41 |             var that = this;
42 |             geolocation.getLocation({
43 |                 timeout: 3000,
44 |                 success: function (data) {
45 |                     that.longitude = data.longitude;
46 |                     that.latitude = data.latitude;
47 |                 }
48 |             })
49 |         },
50 |         subscribe: function () {
51 |             var that = this;
52 |             geolocation.subscribe({
53 |                 callback: function (data) {
54 |                     that.sub_longitude = data.longitude;
55 |                     that.sub_latitude = data.latitude;
56 |                 }
57 |             })
58 |         },
59 |         unsubscribe: function () {
60 |             geolocation.unsubscribe();
61 |         }
62 |     }
63 | </script>
64 | 


--------------------------------------------------------------------------------
/hello-quickapp/Interface/Clipboard/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>clipboard</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <div class="item-group">
 8 |                 <div class="item-group-content">
 9 |                     <label>剪切板内容：</label>
10 |                     <input type="text" name="title" value="{{content}}" onchange="getClipboardCnt" placeholder="剪切板内容..." />
11 |                 </div>
12 |                 <input type="button" name="setclipboard" class="item-group-button" value="设置剪切板内容" onclick="setClipboard" />
13 |                 <input type="button" name="getclipboard" class="item-group-button" value="读取剪贴板内容" onclick="getClipboard" />
14 |             </div>
15 |         </div>
16 |     </div>
17 | </template>
18 | 
19 | <style>
20 |     @import '../../Common/css/common.css';
21 | 
22 |     .item-group-content {
23 |         padding: 30px 10px;
24 |     }
25 | 
26 |     .item-group-content label {
27 |         width: 300px;
28 |         text-align: center;
29 |         color: #888888;
30 |     }
31 | 
32 |     .item-group-content input {
33 |         color: #888888;
34 |     }
35 | </style>
36 | 
37 | <script>
38 |     import clipboard from "@system.clipboard";
39 |     import prompt from "@system.prompt";
40 |     module.exports = {
41 |         data: {
42 |             content: ''
43 |         },
44 |         onInit: function (e) {
45 |             this.$page.setTitleBar({
46 |                 text: 'Clipboard'
47 |             })
48 |         },
49 |         setClipboard: function () {
50 |             var that = this;
51 |             that.content = that.content && that.content || '今天天气不错';
52 |             clipboard.set({
53 |                 text: that.content,
54 |                 success: function () {
55 |                     prompt.showToast({
56 |                         message: '设置成功'
57 |                     })
58 |                 }
59 |             })
60 |         },
61 |         getClipboard: function () {
62 |             clipboard.get({
63 |                 success: function (data) {
64 |                     prompt.showToast({
65 |                         message: data.text
66 |                     })
67 |                 }
68 |             })
69 |         },
70 |         getClipboardCnt: function (e) {
71 |             this.content = e.text;
72 |         }
73 |     }
74 | </script>
75 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Image/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>image</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <div class="item-image-group">
 8 |                 <text>本地图片</text>
 9 |                 <image src="/Common/img/mi_logo.png"></image>
10 |             </div>
11 |             <div class="item-image-group">
12 |                 <text>网络图片</text>
13 |                 <image src="http://img-cdn-qiniu.dcloud.net.cn/icon3.png" style="width: 150px;"></image>
14 |             </div>
15 |             <div class="item-image-group">
16 |                 <text>resize-mode:cover</text>
17 |                 <image src="/Common/img/mi_logo.png" class="item-content-image" style="resize-mode: cover;"></image>
18 |             </div>
19 |             <div class="item-image-group">
20 |                 <text>resize-mode:contain </text>
21 |                 <image src="/Common/img/mi_logo.png" class="item-content-image" style="resize-mode: contain;"></image>
22 |             </div>
23 |             <div class="item-image-group">
24 |                 <text>resize-mode:stretch</text>
25 |                 <image src="/Common/img/mi_logo.png" class="item-content-image" style="resize-mode: stretch;"></image>
26 |             </div>
27 |             <div class="item-image-group">
28 |                 <text>resize-mode:center</text>
29 |                 <image src="/Common/img/mi_logo.png" class="item-content-image" style="resize-mode: center;"></image>
30 |             </div>
31 |             <div class="item-image-group">
32 |                 <text>圆形图</text>
33 |                 <image src="/Common/img/mi_logo.png" class="item-content-image-circle"></image>
34 |             </div>
35 |         </div>
36 |     </div>
37 | </template>
38 | 
39 | <style>
40 |     @import '../../Common/css/common.css';
41 |     .item-image-group {
42 |         flex-direction: column;
43 |         margin: 30px;
44 |         align-items: center;
45 |     }
46 | 
47 |     .item-image-group text {
48 |         padding-bottom: 10px;
49 |     }
50 | 
51 |     .item-content-image {
52 |         width: 200px;
53 |         height: 140px;
54 |     }
55 | 
56 |     .item-content-image-circle {
57 |         width: 200px;
58 |         border-radius: 100px;
59 |     }
60 | </style>
61 | 
62 | <script>
63 |     module.exports = {
64 |         onInit: function (e) {
65 |             this.$page.setTitleBar({
66 |                 text: 'Image'
67 |             })
68 |         }
69 |     }
70 | </script>
71 | 


--------------------------------------------------------------------------------
/hello-quickapp/Interface/Prompt/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>prompt</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <input type="button" class="item-group-button" name="toast" value="toast" onclick="showToast" />
 8 |             <input type="button" class="item-group-button" name="dialog" value="dialog" onclick="showDialog" />
 9 |             <input type="button" class="item-group-button" name="contextMenu" value="contextMenu" onclick="contextMenu" />
10 |         </div>
11 |     </div>
12 | </template>
13 | 
14 | <style>
15 |     @import '../../Common/css/common.css';
16 | </style>
17 | 
18 | <script>
19 |     import prompt from "@system.prompt";
20 |     module.exports = {
21 |         onInit: function (e) {
22 |             this.$page.setTitleBar({
23 |                 text: 'Prompt'
24 |             })
25 |         },
26 |         showToast: function () {
27 |             prompt.showToast({
28 |                 message: '今天天气不错'
29 |             })
30 |         },
31 |         showDialog: function () {
32 |             prompt.showDialog({
33 |                 title: '提示',
34 |                 message: '是否要关闭？',
35 |                 buttons: [{
36 |                         text: '确定',
37 |                         color: '#0FAEFF'
38 |                     },
39 |                     {
40 |                         text: '取消',
41 |                         color: '#0FAEFF'
42 |                     }
43 |                 ],
44 |                 success: function (data) {
45 |                     if (data.index == 0) {
46 |                         prompt.showToast({
47 |                             message: '确定'
48 |                         })
49 |                     } else if (data.index == 1) {
50 |                         prompt.showToast({
51 |                             message: '取消'
52 |                         })
53 |                     }
54 |                 },
55 |                 fail: function (data, code) {
56 |                     console.log('...fail...')
57 |                 }
58 |             })
59 |         },
60 |         contextMenu: function () {
61 |             prompt.showContextMenu({
62 |                 itemList: ['item1', 'item2', 'item3', 'item4', 'item5'],
63 |                 itemColor: '#0FAEFF',
64 |                 success: function (data) {
65 |                     prompt.showToast({
66 |                         message: 'item' + (data.index + 1)
67 |                     })
68 |                 },
69 |                 fail: function (data, code) {
70 |                     console.log('...fail...')
71 |                 }
72 |             })
73 |         }
74 |     }
75 | </script>
76 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Tabs/Default/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <!--<div class="item-title">
 4 |             <text>tabs</text>
 5 |         </div>-->
 6 |         <tabs>
 7 |             <tab-bar class="tab-bar">
 8 |                 <text for="titles" tid="id" class="item-tabbar-text">{{$item}}</text>
 9 |             </tab-bar>
10 |             <tab-content class="tab-content">
11 |                 <div class="tab-group-content">
12 |                     <list class="item-list">
13 |                         <list-item type="item" for="list1" class="item-list-item">
14 |                             <text class="item-list-item-text">{{$item}}</text>
15 |                         </list-item>
16 |                     </list>
17 |                 </div>
18 |                 <div class="tab-group-content">
19 |                     <list class="item-list">
20 |                         <list-item type="item" for="list2" class="item-list-item">
21 |                             <text class="item-list-item-text">{{$item}}</text>
22 |                         </list-item>
23 |                     </list>
24 |                 </div>
25 |                 <div class="tab-group-content">
26 |                     <list class="item-list">
27 |                         <list-item type="item" for="list3" class="item-list-item">
28 |                             <text class="item-list-item-text">{{$item}}</text>
29 |                         </list-item>
30 |                     </list>
31 |                 </div>
32 |             </tab-content>
33 |         </tabs>
34 |     </div>
35 | </template>
36 | 
37 | <style>
38 |     @import '../../../Common/css/common.css';
39 |     .tab-bar {
40 |         height: 100px;
41 |         border-top-width: 1px;
42 |         border-bottom-width: 1px;
43 |         border-color: #0FAEFF;
44 |     }
45 | 
46 |     .tab-content {
47 |         flex: 1;
48 |         background-color: #ffffff;
49 |     }
50 | 
51 |     .tab-group-content {
52 |         margin-top: 30px;
53 |     }
54 | 
55 |     .item-list-item {
56 |         padding: 30px;
57 |         border-bottom-width: 1px;
58 |         border-color: #BBBBBB;
59 |     }
60 | 
61 |     .item-list-item-text {
62 |         font-size: 32px;
63 |         color: #908C8C;
64 |     }
65 | 
66 |     .item-tabbar-text {
67 | 		height: 100px;
68 | 		width: 33%;
69 |         text-align: center;
70 |         color: #0FAEFF;
71 |     }
72 | 
73 |     .item-tabbar-text:active {
74 |         background-color: #0FAEFF;
75 |         color: #ffffff;
76 |     }
77 | </style>
78 | 
79 | <script>
80 |     module.exports = {
81 |         data: {
82 |             titles: ['item1', 'item2', 'item3'],
83 |             list1: ['第一个选项卡子项-1', '第一个选项卡子项-2', '第一个选项卡子项-3'],
84 |             list2: ['第二个选项卡子项-1', '第二个选项卡子项-2', '第二个选项卡子项-3'],
85 |             list3: ['第三个选项卡子项-1', '第三个选项卡子项-2', '第三个选项卡子项-3']
86 |         },
87 |         onInit: function (e) {
88 |             this.$page.setTitleBar({
89 |                 text: '顶部选项卡'
90 |             })
91 |         }
92 |     }
93 | </script>
94 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Text/index.ux:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |         <text class="item-title">有底色</text>
  4 |         <div class="badge-content">
  5 |             <text class="badge">1</text>
  6 |             <text class="badge badge-primary">12</text>
  7 |             <text class="badge badge-success">123</text>
  8 |             <text class="badge badge-warning">3</text>
  9 |             <text class="badge badge-danger">45</text>
 10 |             <text class="badge badge-purple">456</text>
 11 |         </div>
 12 |         <text class="item-title">无底色</text>
 13 |         <div class="badge-content">
 14 |             <text class="badge badge-inverted">1</text>
 15 |             <text class="badge badge-primary-inverted badge-inverted">2</text>
 16 |             <text class="badge badge-success-inverted badge-inverted">3</text>
 17 |             <text class="badge badge-warning-inverted badge-inverted">4</text>
 18 |             <text class="badge badge-danger-inverted badge-inverted">5</text>
 19 |             <text class="badge badge-purple-inverted badge-inverted">6</text>
 20 |         </div>
 21 |     </div>
 22 | </template>
 23 | <style>
 24 |     @import '../../Common/css/common.css';
 25 |     .badge-content {
 26 |         flex-direction: row;
 27 |     }
 28 | 
 29 |     .badge-content text {
 30 |         margin-left: 30px;
 31 |     }
 32 | 
 33 |     .item-title {
 34 |         padding: 10px 20px;
 35 |         font-size: 30px;
 36 |         margin-top: 50px;
 37 |     }
 38 | 
 39 |     .badge {
 40 |         font-size: 22px;
 41 |         padding: 3px 6px;
 42 |         border-radius: 100px;
 43 |         background-color: rgba(0, 0, 0, .15);
 44 |         color: #333333;
 45 |     }
 46 | 
 47 |     .badge {
 48 |         color: #929292;
 49 |     }
 50 | 
 51 |     .badge-primary {
 52 |         color: #ffffff;
 53 |         background-color: #007aff;
 54 |     }
 55 | 
 56 |     .badge-success {
 57 |         color: #ffffff;
 58 |         background-color: #4cd964;
 59 |     }
 60 | 
 61 |     .badge-warning {
 62 |         color: #ffffff;
 63 |         background-color: #f0ad4e;
 64 |     }
 65 | 
 66 |     .badge-danger {
 67 |         color: #ffffff;
 68 |         background-color: #dd524d;
 69 |     }
 70 | 
 71 |     .badge-purple {
 72 |         color: #ffffff;
 73 |         background-color: #8a6de9;
 74 |     }
 75 | 
 76 |     .badge-inverted {
 77 |         background-color: transparent;
 78 |     }
 79 | 
 80 |     .badge-primary-inverted {
 81 |         color: #007aff;
 82 |     }
 83 | 
 84 |     .badge-success-inverted {
 85 |         color: #4cd964;
 86 |     }
 87 | 
 88 |     .badge-warning-inverted {
 89 |         color: #f0ad4e;
 90 |     }
 91 | 
 92 |     .badge-danger-inverted {
 93 |         color: #dd524d;
 94 |     }
 95 | 
 96 |     .badge-purple-inverted {
 97 |         color: #8a6de9;
 98 |     }
 99 | </style>
100 | <script>
101 |     module.exports = {
102 |         onInit: function (e) {
103 |             this.$page.setTitleBar({
104 |                 text: '数字角标'
105 |             })
106 |         }
107 |     }
108 | </script>
109 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/List/index.ux:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |         <div class="item-list-group">
  4 |             <text class="list-title">100条数据，测试滑动流畅度</text>
  5 |             <list class="list">
  6 |                 <list-item type="media" for="list" class="list-item list-item-top-line">
  7 |                     <div class="media-list middleline">
  8 |                         <image src="/Common/img/shuijiao.jpg"></image>
  9 |                         <div class="media-body">
 10 |                             <text class="media-title">{{$item.name}}</text>
 11 |                             <text class="media-content">{{$item.content}}</text>
 12 |                         </div>
 13 |                     </div>
 14 |                 </list-item>
 15 |             </list>
 16 |         </div>
 17 |         
 18 |     </div>
 19 | </template>
 20 | <style>
 21 |     .container {
 22 |         flex: 1;
 23 |         flex-direction: column;
 24 |     }
 25 | 
 26 |     .list-card {
 27 |         width: 710px;
 28 |         margin-left: 20px;
 29 |     }
 30 | 
 31 |     .item-list-group {
 32 |         width: 750px;
 33 | 		flex: 1;
 34 |         flex-direction: column;
 35 |     }
 36 | 
 37 |     .list-title {
 38 | 		text-align: center;
 39 |         padding: 20px;
 40 |     }
 41 | 	.list{
 42 | 		flex: 1;
 43 | 	}
 44 |     .list-card-top-radius {
 45 |         border-top-left-radius: 10px;
 46 |         border-top-right-radius: 10px;
 47 |     }
 48 | 
 49 |     .list-card-bottom-radius {
 50 |         border-bottom-left-radius: 10px;
 51 |         border-bottom-right-radius: 10px;
 52 |     }
 53 | 
 54 |     .list-item {
 55 |         background-color: #FFFFFF;
 56 |     }
 57 | 
 58 |     .list-item-top-line {
 59 |         border-top-width: 1px;
 60 |         border-top-color: #c8c7cc;
 61 |     }
 62 | 
 63 |     .list-item-bottom-line {
 64 |         border-bottom-width: 1px;
 65 |         border-bottom-color: #c8c7cc;
 66 |     }
 67 | 
 68 |     .middleline {
 69 |         border-bottom-width: 1px;
 70 |         border-bottom-color: #c8c7cc;
 71 |     }
 72 | 
 73 |     .media-list {
 74 |         margin-left: 20px;
 75 |         padding-top: 20px;
 76 |         padding-bottom: 20px;
 77 |         flex-direction: row;
 78 |         width: 730px;
 79 |     }
 80 | 
 81 |     .media-body {
 82 |         flex-direction: column;
 83 |     }
 84 | 
 85 |     .media-list image {
 86 |         width: 80px;
 87 |         height: 80px;
 88 |         margin-right: 20px;
 89 |     }
 90 | 
 91 |     .media-title {
 92 |         width: 600px;
 93 |         color: #000000;
 94 |         font-size: 32px;
 95 |     }
 96 | 
 97 |     .media-content {
 98 |         width: 600px;
 99 |         color: #BBBBBB;
100 |         font-size: 25px;
101 |         lines: 1;
102 |         text-overflow: ellipsis;
103 |         margin-top: 5px;
104 |     }
105 | </style>
106 | <script>
107 |     module.exports = {
108 | 		data:{
109 | 			list:[]
110 | 		},
111 |         onInit: function (e) {
112 |             this.$page.setTitleBar({
113 |                 text: '图文列表'
114 |             })
115 | 			var arr = [];
116 | 			for (var i = 1; i < 101; i++) {
117 | 				arr.push({
118 | 					name:'木屋' + i,
119 | 					content:'想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.'
120 | 				})
121 | 			}
122 | 			this.list = arr;
123 |         }
124 |     }
125 | </script>
126 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/List/Default/index.ux:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |         <div class="item-title">
  4 |             <text>list</text>
  5 |         </div>
  6 |         <div class="item-control">
  7 |             <div class="item-control-text">
  8 |                 <text>输入列数：</text>
  9 |                 <input type="text" name="num" value="{{columns}}" onchange="changeCloumnsNum" />
 10 |             </div>
 11 |             <div class="item-control-button">
 12 |                 <input type="button" name="colunm" value="改变列数" onclick="changeColumn">
 13 |                 <input type="button" name="scrollmode" value="切换滚动模式" onclick="changeScrollMode">
 14 |             </div>
 15 |         </div>
 16 | 		<list onscrollbottom="scrollBottom" onscrolltop="scrollTop" style="columns:{{columns}}" scrollpage="{{scrollpage}}" id="list">
 17 | 			<list-item class="item-list-item" type="item" for="{{lists}}">
 18 | 				<text>{{$item}}</text>
 19 | 			</list-item>
 20 | 		</list>
 21 |     </div>
 22 | </template>
 23 | 
 24 | <style>
 25 |     @import '../../../Common/css/common.css';
 26 |     .item-control {
 27 |         flex-direction: column;
 28 |     }
 29 | 	
 30 | 	#list{
 31 | 		flex: 1;
 32 | 	}
 33 | 	
 34 |     .item-control-text {
 35 |         font-size: 25px;
 36 |         color: #000000;
 37 |         height: 70px;
 38 |         padding-left: 50px;
 39 |     }
 40 | 
 41 |     .item-control-text text {
 42 |         width: 190px;
 43 |         text-align: center;
 44 |     }
 45 | 
 46 |     .item-control-button {
 47 |         flex-direction: row;
 48 |     }
 49 | 
 50 |     .item-control-button input {
 51 |         text-align: center;
 52 |         border-radius: 3px;
 53 |         background-color: #0faeff;
 54 |         margin: 40px;
 55 |         height: 70px;
 56 |         font-size: 25px;
 57 |         color: #ffffff;
 58 |     }
 59 | 
 60 |     .item-list-item {
 61 |         height: 100px;
 62 |         border-bottom-color: #DDDDDD;
 63 |         border-bottom-width: 1px;
 64 |         align-items: center;
 65 |         justify-content: center;
 66 |     }
 67 | </style>
 68 | 
 69 | <script>
 70 |     import prompt from "@system.prompt";
 71 |     module.exports = {
 72 |         data: {
 73 |             columns: 1,
 74 |             newcolumns: 0,
 75 |             scrollpage: false,
 76 |             lists: ['Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7', 'Item8', 'Item9', 'Item10']
 77 |         },
 78 |         onInit: function (e) {
 79 |             this.$page.setTitleBar({
 80 |                 text: 'List'
 81 |             })
 82 |         },
 83 |         changeCloumnsNum: function (e) {
 84 |             this.newcolumns = e.text || 0;
 85 |         },
 86 |         changeColumn: function () {
 87 |             if (this.newcolumns && this.newcolumns != this.columns) {
 88 |                 this.columns = this.newcolumns;
 89 |             }
 90 | 
 91 |         },
 92 |         changeScrollMode: function () {
 93 |             this.scrollpage = !this.scrollpage;
 94 |         },
 95 |         scrollBottom: function () {
 96 |             prompt.showToast({
 97 |                 message: "滚动到底部了"
 98 |             })
 99 |         },
100 |         scrollTop: function () {
101 |             prompt.showToast({
102 |                 message: "滚动到顶部了"
103 |             })
104 |         }
105 |     }
106 | </script>
107 | 


--------------------------------------------------------------------------------
/hello-quickapp/Templates/Login/index.ux:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |         <div class="item-login">
  4 |             <div class="item-input-group line">
  5 |                 <text>账号</text>
  6 |                 <input type="text" name="username" placeholder="请输入账号" />
  7 |             </div>
  8 |             <div class="item-input-group">
  9 |                 <text>密码</text>
 10 |                 <input type="password" name="password" placeholder="请输入密码" />
 11 |             </div>
 12 |         </div>
 13 |         <div class="login-auto">
 14 |             <text>自动登录</text>
 15 |             <switch></switch>
 16 |         </div>
 17 |         <input type="button" name="login" class="login-text" value="登录" onclick="s" />
 18 |         <div class="login-register-help">
 19 |             <text class="login-register">注册账号</text>
 20 |             <div class="r-h-line"></div>
 21 |             <text class="login-help">忘记密码</text>
 22 |         </div>
 23 |     </div>
 24 | </template>
 25 | <style>
 26 |     @import '../../Common/css/common.css';
 27 |     .doc-page {
 28 |         background-color: #EFEFF4;
 29 |     }
 30 | 
 31 |     .item-login {
 32 |         margin-top: 20px;
 33 |         background-color: #ffffff;
 34 |         border-color: #D3D3D3;
 35 |         border-top-width: 1px;
 36 |         border-bottom-width: 1px;
 37 |         flex-direction: column;
 38 |     }
 39 | 
 40 |     .item-input-group {
 41 |         margin-left: 30px;
 42 |         height: 90px;
 43 |     }
 44 | 
 45 |     .item-input-group text {
 46 |         height: 90px;
 47 |         padding-right: 100px;
 48 |     }
 49 | 
 50 |     .item-input-group input {
 51 |         width: 550px;
 52 |         height: 90px;
 53 |     }
 54 | 
 55 |     .login-auto {
 56 |         height: 90px;
 57 |         justify-content: space-between;
 58 |         align-items: center;
 59 |         margin-top: 20px;
 60 |         padding-right: 20px;
 61 |         background-color: #ffffff;
 62 |         border-color: #D3D3D3;
 63 |         border-top-width: 1px;
 64 |         border-bottom-width: 1px;
 65 |     }
 66 | 
 67 |     .login-auto text {
 68 |         padding-left: 30px;
 69 |     }
 70 | 
 71 |     .line {
 72 |         border-bottom-color: #D3D3D3;
 73 |         border-bottom-width: 1px;
 74 |     }
 75 | 
 76 |     .r-h-line {
 77 |         width: 2px;
 78 |         height: 30px;
 79 |         background-color: #AAAAAA;
 80 |         margin-left: 15px;
 81 |         margin-right: 15px;
 82 |         margin-top: 5px;
 83 |     }
 84 | 
 85 |     .login-text {
 86 |         height: 80px;
 87 |         background-color: #007AFF;
 88 |         margin: 0px 50px;
 89 |         color: #ffffff;
 90 |         border-radius: 8px;
 91 |         margin-top: 50px;
 92 |     }
 93 | 
 94 |     .login-register-help {
 95 |         margin-top: 50px;
 96 |         justify-content: center;
 97 |     }
 98 | 
 99 |     .login-register,
100 |     .login-help {
101 |         color: #007AFF;
102 |     }
103 | </style>
104 | <script>
105 |     import prompt from '@system.prompt'
106 |     module.exports = {
107 |         data: {},
108 |         onInit: function (e) {
109 |             this.$page.setTitleBar({
110 |                 text: '登录'
111 |             });
112 |             // this.height = 750/weex.config.env.deviceWidth*weex.config.env.deviceHeight-300;
113 |         }
114 |     }
115 | </script>
116 | 


--------------------------------------------------------------------------------
/hello-quickapp/Interface/Sensor/index.ux:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="item-title">
 4 |             <text>sensor</text>
 5 |         </div>
 6 |         <div class="item-content">
 7 |             <div class="item-group">
 8 |                 <text class="item-group-text" for="accelerometerInfos">{{$item}}</text>
 9 |                 <input type="button" class="item-group-button" name="accelerometer" value="监听重力感应数据" onclick="subscribeAccelerometer" />
10 |                 <input type="button" class="item-group-button" name="unaccelerometer" value="取消监听重力感应数据" onclick="unsubscribeAccelerometer"/>
11 |             </div>
12 |             <div class="item-group">
13 |                 <text class="item-group-text">{{direction}}</text>
14 |                 <input type="button" class="item-group-button" name="compass" value="监听罗盘数据" onclick="subscribeCompass" />
15 |                 <input type="button" class="item-group-button" name="uncompass" value="取消监听罗盘数据" onclick="unsubscribeCompass" />
16 |             </div>
17 |             <div class="item-group">
18 |                 <text class="item-group-text">{{distance}}</text>
19 |                 <input type="button" class="item-group-button" name="proximity" value="监听距离感应数据" onclick="subscribeProximity" />
20 |                 <input type="button" class="item-group-button" name="unproximity" value="取消监听距离感应数据" onclick="unsubscribeProximity" />
21 |             </div>
22 |         </div>
23 |     </div>
24 | </template>
25 | 
26 | <style>
27 |     @import '../../Common/css/common.css';
28 | </style>
29 | 
30 | <script>
31 |     import sensor from "@system.sensor";
32 |     module.exports = {
33 |         data: {
34 |             accelerometerInfos: [],
35 |             direction: '',
36 |             distance: ''
37 |         },
38 |         onInit: function (e) {
39 |             this.$page.setTitleBar({
40 |                 text: 'Sensor'
41 |             })
42 |         },
43 |         subscribeAccelerometer: function () {
44 |             var that = this;
45 |             sensor.subscribeAccelerometer({
46 |                 callback: function (data) {
47 |                     var arr = [];
48 |                     arr.push("X：" + data.x);
49 |                     arr.push("Y：" + data.x);
50 |                     arr.push("Z：" + data.x);
51 |                     that.accelerometerInfos = arr;
52 |                 }
53 |             })
54 |         },
55 |         unsubscribeAccelerometer: function () {
56 |             sensor.unsubscribeAccelerometer();
57 |         },
58 |         subscribeCompass: function () {
59 |             var that = this;
60 |             sensor.subscribeCompass({
61 |                 callback: function (data) {
62 |                     that.direction = "direction：" + data.direction;
63 |                 }
64 |             })
65 |         },
66 |         unsubscribeCompass: function () {
67 |             sensor.unsubscribeCompass();
68 |         },
69 |         subscribeProximity: function () {
70 |             var that = this;
71 |             sensor.subscribeProximity({
72 |                 callback: function (data) {
73 |                     that.show = true;
74 |                     that.distance = "distance：" + data.distance;
75 |                 }
76 |             })
77 |         },
78 |         unsubscribeProximity: function () {
79 |             sensor.unsubscribeProximity();
80 |         }
81 |     }
82 | </script>
83 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Refresh/index.ux:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |         <refresh class="refresh" onrefresh="refresh" refreshing="{{isRefreshing}}">
  4 |             <div class="item-title">
  5 |                 <text>refresh</text>
  6 |             </div>
  7 |             <list onscrollbottom="scrollbottom" id="list" class="list">
  8 |                 <list-item type="refresh" for="{{lists}}" class="list-item">
  9 |                     <text>{{$item}}</text>
 10 |                     <image src="/Common/img/arrow_right.png" class="rightarrow" />
 11 |                 </list-item>
 12 |                 <list-item if="{{more}}" type="moremsg" class="moremsg">
 13 |                     <text style="font-size: 25px;">{{moremsg}}</text>
 14 |                 </list-item>
 15 |             </list>
 16 |         </refresh>
 17 |     </div>
 18 | </template>
 19 | 
 20 | <style>
 21 |     @import '../../Common/css/common.css';
 22 |     .list {
 23 |         flex: 1;
 24 |         width: 750px;
 25 |         border-top-color: #DDDDDD;
 26 |         border-bottom-color: #DDDDDD;
 27 |         border-top-width: 1px;
 28 |         border-bottom-width: 1px;
 29 |     }
 30 | 
 31 |     .refresh {
 32 |         flex-direction: column;
 33 |         flex: 1;
 34 |     }
 35 | 
 36 |     .list-item {
 37 |         width: 730px;
 38 |         margin-left: 20px;
 39 |         height: 100px;
 40 |         border-bottom-color: #DDDDDD;
 41 |         border-bottom-width: 1px;
 42 |         align-items: center;
 43 |         flex-direction: row;
 44 |     }
 45 | 
 46 |     list-item text {
 47 |         padding-left: 30px;
 48 |         width: 220px;
 49 |         height: 100px;
 50 |     }
 51 | 
 52 |     .rightarrow {
 53 |         width: 20px;
 54 |         height: 20px;
 55 |         margin-left: 450px;
 56 |     }
 57 | 
 58 |     .moremsg {
 59 |         justify-content: center;
 60 |         border-bottom-width: 0px;
 61 |     }
 62 | </style>
 63 | 
 64 | <script>
 65 |     import prompt from '@system.prompt';
 66 |     module.exports = {
 67 |         data: {
 68 |             isRefreshing: false,
 69 |             more: true,
 70 |             moremsg: "正在努力加载",
 71 |             lists: [],
 72 |             initLists: ['Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7', 'Item8', 'Item9', 'Item10',
 73 |                 'Item11'
 74 |             ]
 75 |         },
 76 |         onInit: function (e) {
 77 |             this.lists = [].concat(this.initLists);
 78 |             this.$page.setTitleBar({
 79 |                 text: 'Refresh'
 80 |             })
 81 |         },
 82 |         refresh: function (e) {
 83 |             var that = this;
 84 |             that.isRefreshing = e.refreshing;
 85 |             that.moremsg = '正在努力加载';
 86 |             setTimeout(function () {
 87 |                 that.isRefreshing = false;
 88 |                 that.lists = that.initLists;
 89 |                 prompt.showToast({
 90 |                     message: '刷新完成'
 91 |                 })
 92 |             }, 1200)
 93 |         },
 94 |         scrollbottom: function () {
 95 |             var that = this;
 96 |             setTimeout(function () {
 97 |                 var arr = [];
 98 |                 for (var i = 0; i < 11; i++) {
 99 |                     arr.push('item' + (i + 12));
100 |                 }
101 |                 that.lists = that.initLists.concat(arr)
102 |                 that.moremsg = '我是有底线的';
103 |             }, 500);
104 |         }
105 |     }
106 | </script>
107 | 


--------------------------------------------------------------------------------
/hello-quickapp/Templates/Setting/index.ux:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |         <div class="setting-content">
  4 |             <div class="mine-header mine-common">
  5 |                 <image class="mine-header-logo" src="/Common/img/mi_logo.png"></image>
  6 |                 <text>请登录</text>
  7 |                 <image class="mine-header-arrow" src="/Common/img/arrow_right.png"></image>
  8 |             </div>
  9 |             <div class="mine-safe mine-common">
 10 |                 <text>账号与安全</text>
 11 |                 <image src="/Common/img/arrow_right.png"></image>
 12 |             </div>
 13 |             <list class="mine-list">
 14 |                 <list-item type="mine" for="{{list}}" class="mine-item-list line">
 15 |                     <text>{{$item}}</text>
 16 |                     <image src="/Common/img/arrow_right.png"></image>
 17 |                 </list-item>
 18 |             </list>
 19 |         </div>
 20 |     </div>
 21 | </template>
 22 | <style>
 23 |     @import '../../Common/css/common.css';
 24 |     .doc-page {
 25 |         background-color: #EFEFF4;
 26 |     }
 27 | 
 28 |     .setting-content {
 29 |         flex-direction: column;
 30 | 		flex: 1;
 31 |     }
 32 | 
 33 |     .line {
 34 |         border-bottom-width: 1px;
 35 |         border-bottom-color: #C8C8CB;
 36 |     }
 37 | 
 38 |     .mine-header-logo {
 39 |         margin-left: 30px;
 40 |         width: 90px;
 41 |     }
 42 | 
 43 |     .mine-header text {
 44 |         padding-left: 20px;
 45 |     }
 46 | 
 47 |     .mine-header-arrow {
 48 |         margin-left: 479px;
 49 |         width: 20px;
 50 |         height: 20px;
 51 |     }
 52 | 
 53 |     .mine-list {
 54 | 		height: 270px;
 55 |         width: 750px;
 56 |         background-color: #ffffff;
 57 |         margin-top: 25px;
 58 |         border-color: #C8C8CB;
 59 |         border-bottom-width: 1px;
 60 |         border-top-width: 1px;
 61 |     }
 62 | 
 63 |     .mine-header {
 64 |         margin-top: 20px;
 65 |         padding-top: 20px;
 66 |         padding-bottom: 20px;
 67 |         justify-content: flex-start;
 68 |         align-items: center;
 69 |     }
 70 | 
 71 |     .mine-common {
 72 |         width: 750px;
 73 |         background-color: #ffffff;
 74 |         border-color: #C8C8CB;
 75 |         border-top-width: 1px;
 76 |         border-bottom-width: 1px;
 77 |         flex-direction: row;
 78 |     }
 79 | 
 80 |     .mine-safe {
 81 |         margin-top: 50px;
 82 |     }
 83 | 
 84 |     .mine-item-list {
 85 |         width: 720px;
 86 |         height: 90px;
 87 |         margin-left: 30px;
 88 |         flex-direction: row;
 89 |     }
 90 | 
 91 |     .mine-safe text,
 92 |     .mine-item-list text {
 93 |         width: 200px;
 94 |         height: 90px;
 95 |         text-align: left;
 96 |     }
 97 | 
 98 |     .mine-safe image,
 99 |     .mine-item-list image {
100 |         width: 16px;
101 |         height: 30px;
102 |         margin-left: 479px;
103 |         margin-top: 35px;
104 |     }
105 | 
106 |     .mine-safe image {
107 |         margin-left: 509px;
108 |     }
109 | 
110 |     .mine-safe text {
111 |         padding-left: 30px;
112 |     }
113 | </style>
114 | <script>
115 |     import prompt from '@system.prompt';
116 |     module.exports = {
117 |         data: {
118 |             list: ['新消息通知', '隐私', '通用']
119 |         },
120 |         onInit: function (e) {
121 |             this.$page.setTitleBar({
122 |                 text: '设置'
123 |             })
124 |         }
125 |     }
126 | </script>
127 | 


--------------------------------------------------------------------------------
/hello-quickapp/Interface/Storage/index.ux:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |         <div class="item-title">
  4 |             <text>storage</text>
  5 |         </div>
  6 |         <div class="item-content">
  7 |             <div class="item-group">
  8 |                 <div class="input-group line">
  9 |                     <label>key：</label>
 10 |                     <input type="text" name="key" value="{{key}}" onchange="getNewKey" placeholder="key..." />
 11 |                 </div>
 12 |                 <div class="input-group" style="margin-bottom: 30px;">
 13 |                     <label>value：</label>
 14 |                     <input type="text" name="value" value="{{value}}" onchange="getNewValue" placeholder="value..." />
 15 |                 </div>
 16 |                 <input type="button" class="item-group-button" name="set" value="设置存储内容" onclick="setStorage" />
 17 |                 <input type="button" class="item-group-button" name="get" value="读取存储内容" onclick="getStorage" />
 18 |                 <input type="button" class="item-group-button" name="clear" value="清空存储内容" onclick="clearStorage" />
 19 |             </div>
 20 |         </div>
 21 |     </div>
 22 | </template>
 23 | 
 24 | <style>
 25 |     @import '../../Common/css/common.css';
 26 |     .input-group {
 27 |         padding: 30px 60px;
 28 |         background-color: #ffffff;
 29 |     }
 30 | 
 31 |     .input-group label {
 32 |         width: 150px;
 33 |     }
 34 | 
 35 |     .line {
 36 |         border-bottom-color: #888888;
 37 |         border-bottom-width: 1px;
 38 |     }
 39 | </style>
 40 | 
 41 | <script>
 42 |     import storage from "@system.storage";
 43 |     import prompt from "@system.prompt";
 44 | 
 45 |     module.exports = {
 46 |         data: {
 47 |             key: '',
 48 |             value: ''
 49 |         },
 50 |         onInit: function (e) {
 51 |             this.$page.setTitleBar({
 52 |                 text: 'Storage'
 53 |             })
 54 |         },
 55 |         setStorage: function () {
 56 |             var that = this;
 57 |             storage.set({
 58 |                 key: that.key,
 59 |                 value: that.value,
 60 |                 success: function (data) {
 61 |                     prompt.showToast({
 62 |                         message: '存储成功'
 63 |                     })
 64 |                 },
 65 |                 fail: function (data, code) {
 66 |                     console.log('...fail...')
 67 |                 }
 68 |             })
 69 |         },
 70 |         getStorage: function () {
 71 |             var that = this;
 72 |             storage.get({
 73 |                 key: that.key,
 74 |                 success: function (value) {
 75 |                     prompt.showToast({
 76 |                         message: 'key:' + that.key + '，value:' + value
 77 |                     })
 78 |                 },
 79 |                 fail: function (data, code) {
 80 |                     console.log('...fail...')
 81 |                 }
 82 |             })
 83 |         },
 84 |         clearStorage: function () {
 85 |             this.key = '';
 86 |             this.value = '';
 87 |             storage.clear({
 88 |                 success: function (data) {
 89 |                     prompt.showToast({
 90 |                         message: '清除成功'
 91 |                     })
 92 |                 },
 93 |                 fail: function (data, code) {
 94 |                     console.log('...fail...')
 95 |                 }
 96 |             })
 97 |         },
 98 |         getNewKey: function (e) {
 99 |             this.key = e.text;
100 |         },
101 |         getNewValue: function (e) {
102 |             this.value = e.text;
103 |         }
104 |     }
105 | </script>
106 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Swiper/index.ux:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |         <div class="item-content">
  4 |             <div class="swiper-title">
  5 |                 <text>定时轮播</text>
  6 |                 <switch onchange="change()" checked="true"></switch>
  7 |             </div>
  8 |             <div class="item-swiper">
  9 |                 <stack class="item-stack">
 10 |                     <swiper class="swiper" autoplay="{{autoPlay}}" onchange="getCurrentIndex" interval="{{sliderValue}}" indicator="false">
 11 |                         <stack class="swiper-item">
 12 |                             <image src="/Common/img/cbd.jpg"></image>
 13 |                             <text class="swiper-item-content">Color of SIP CBD</text>
 14 |                         </stack>
 15 |                         <stack class="swiper-item">
 16 |                             <image src="/Common/img/muwu.jpg"></image>
 17 |                             <text class="swiper-item-content">想要一间这样的木屋，静静的喝咖啡</text>
 18 |                         </stack>
 19 |                         <stack class="swiper-item">
 20 |                             <image src="/Common/img/shuijiao.jpg"></image>
 21 |                             <text class="swiper-item-content">幸福就是可以一起睡觉</text>
 22 |                         </stack>
 23 |                         <stack class="swiper-item">
 24 |                             <image src="/Common/img/yuantiao.jpg"></image>
 25 |                             <text class="swiper-item-content">静静看这世界</text>
 26 |                         </stack>
 27 |                     </swiper>
 28 |                     <div style="margin-top:460px;width: 220px;height: 20px;margin-left: 530px; justify-content:center;">
 29 |                         <div for="actives" class="circle {{$item}}"></div>
 30 |                     </div>
 31 |                 </stack>
 32 |             </div>
 33 |         </div>
 34 |     </div>
 35 | </template>
 36 | <style>
 37 |     .container {
 38 |         flex: 1;
 39 |         flex-direction: column;
 40 |     }
 41 | 
 42 |     .item-content {
 43 |         margin-bottom: 50px;
 44 |         margin-right: 0px;
 45 |         margin-left: 0px;
 46 |         flex-direction: column;
 47 |     }
 48 | 
 49 |     .item-stack {
 50 |         width: 750px;
 51 |         height: 500px;
 52 |     }
 53 | 
 54 |     .item-title {
 55 |         padding: 20px;
 56 |     }
 57 | 
 58 |     .item-swiper {
 59 |         flex-direction: column;
 60 |     }
 61 | 
 62 |     .swiper {
 63 |         flex-direction: column;
 64 |         height: 500px;
 65 |         width: 750px;
 66 |         indicator-color: #a4aca5;
 67 |         indicator-selected-color: #ffffff;
 68 |         indicator-size: 12px;
 69 |     }
 70 | 
 71 |     .swiper-title {
 72 |         flex-direction: row;
 73 |         justify-content: space-between;
 74 |         padding: 20px;
 75 |     }
 76 | 
 77 |     .swiper-item {
 78 |         width: 750px;
 79 |         height: 500px;
 80 |     }
 81 | 
 82 |     .swiper-item image {
 83 |         width: 750px;
 84 |         height: 500px;
 85 |     }
 86 | 
 87 |     .swiper-item-content {
 88 |         width: 750px;
 89 |         height: 60px;
 90 |         background-color: #000000;
 91 |         color: #ffffff;
 92 |         opacity: 0.5;
 93 |         margin-top: 440px;
 94 |         align-items: center;
 95 |         padding-left: 20px;
 96 |     }
 97 | 
 98 |     .circle {
 99 |         width: 12px;
100 |         height: 12px;
101 |         border-radius: 6px;
102 |         margin-left: 16px;
103 |         background-color: #a4aca5;
104 |     }
105 | 
106 |     .active {
107 |         background-color: #ffffff;
108 |     }
109 | 
110 |     .normal {
111 |         background-color: #a4aca5;
112 |     }
113 | </style>
114 | <script>
115 |     module.exports = {
116 |         data: {
117 |             autoPlay: true,
118 |             sliderValue: 2000,
119 |             actives: ['active', 'normal', 'normal', 'normal']
120 |         },
121 |         onInit: function (e) {
122 |             this.$page.setTitleBar({
123 |                 text: '下方悬浮标题'
124 |             })
125 |         },
126 |         change: function () {
127 |             if (this.autoPlay) {
128 |                 this.autoPlay = false;
129 |             } else {
130 |                 this.autoPlay = true;
131 |             }
132 |         },
133 |         getCurrentIndex: function (e) {
134 |             for (var i = 0; i < 4; i++) {
135 |                 if (e.index == 0) {
136 |                     this.actives = ['active', 'normal', 'normal', 'normal'];
137 |                 } else if (e.index == 1) {
138 |                     this.actives = ['normal', 'active', 'normal', 'normal'];
139 |                 } else if (e.index == 2) {
140 |                     this.actives = ['normal', 'normal', 'active', 'normal'];
141 |                 } else if (e.index == 3) {
142 |                     this.actives = ['normal', 'normal', 'normal', 'active'];
143 |                 }
144 |             }
145 |         }
146 |     }
147 | </script>
148 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Button/index.ux:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |         <div class="item-title">
  4 |             <text>button</text>
  5 |         </div>
  6 |         <div class="item-content">
  7 |             <div class="item-btn-group">
  8 |                 <text class="btn-text">有底色按钮：</text>
  9 |                 <div class="btn-content">
 10 |                     <input type="button" value="默认" class="btn-default" />
 11 |                     <input type="button" value="蓝色" class="btn-primary" />
 12 |                     <input type="button" value="绿色" class="btn-success" />
 13 |                     <input type="button" value="黄色" class="btn-warning" />
 14 |                     <input type="button" value="红色" class="btn-danger" />
 15 |                     <input type="button" value="紫色" class="btn-royal" />
 16 |                 </div>
 17 |             </div>
 18 | 
 19 |             <div class="item-btn-group">
 20 |                 <text class="btn-text">无底色按钮（使用父元素的背景色）：</text>
 21 |                 <div class="btn-content">
 22 |                     <input type="button" value="默认" class="btn-default-outline" />
 23 |                     <input type="button" value="操作" class="btn-primary-outline" />
 24 |                     <input type="button" value="成功" class="btn-success-outline" />
 25 |                     <input type="button" value="警告" class="btn-warning-outline" />
 26 |                     <input type="button" value="危险" class="btn-danger-outline" />
 27 |                     <input type="button" value="高贵" class="btn-royal-outline" />
 28 |                 </div>
 29 |             </div>
 30 |         </div>
 31 |     </div>
 32 | </template>
 33 | 
 34 | <style>
 35 |     @import '../../Common/css/common.css';
 36 |     .item-btn-group {
 37 |         flex-direction: column;
 38 |         margin-left: 30px;
 39 |         margin-right: 30px;
 40 |     }
 41 | 
 42 |     .btn-text {
 43 |         margin-top: 20px;
 44 |         color: #97969C;
 45 |         padding-bottom: 20px;
 46 |     }
 47 | 
 48 |     .btn-content {
 49 |         flex-direction: row;
 50 |         flex-wrap: wrap;
 51 |     }
 52 | 
 53 |     .item-btn-group input {
 54 |         width: 110px;
 55 |         height: 65px;
 56 |         margin-right: 20px;
 57 |         margin-bottom: 20px;
 58 |         border-radius: 5px;
 59 |         text-align: center;
 60 |     }
 61 | 
 62 |     .btn-primary,
 63 |     .btn-success,
 64 |     .btn-warning,
 65 |     .btn-danger,
 66 |     .btn-royal {
 67 |         color: #ffffff;
 68 |     }
 69 | 
 70 |     .btn-default {
 71 |         background-color: #ffffff;
 72 |         color: #000000;
 73 |         border-width: 1px;
 74 |         border-color: #908C8C;
 75 |     }
 76 | 
 77 |     .btn-default:active {
 78 |         color: #ffffff;
 79 |         background-color: #929292;
 80 |     }
 81 | 
 82 |     .btn-primary {
 83 |         background-color: #007aff;
 84 |     }
 85 | 
 86 |     .btn-primary:active {
 87 |         background-color: #0062cc;
 88 |     }
 89 | 
 90 |     .btn-success {
 91 |         background-color: #4cd964;
 92 |     }
 93 | 
 94 |     .btn-success:active {
 95 |         background-color: #2ac845;
 96 |     }
 97 | 
 98 |     .btn-warning {
 99 |         background-color: #f0ad4e;
100 |     }
101 | 
102 |     .btn-warning:active {
103 |         background-color: #ec971f;
104 |     }
105 | 
106 |     .btn-danger {
107 |         background-color: #dd524d;
108 |     }
109 | 
110 |     .btn-danger:active {
111 |         background-color: #cf2d28;
112 |     }
113 | 
114 |     .btn-royal {
115 |         background-color: #8a6de9;
116 |     }
117 | 
118 |     .btn-royal:active {
119 |         background-color: #6641e2;
120 |     }
121 | 
122 |     .btn-default-outline,
123 |     .btn-primary-outline,
124 |     .btn-success-outline,
125 |     .btn-warning-outline,
126 |     .btn-danger-outline,
127 |     .btn-royal-outline {
128 |         background-color: #fafafa;
129 |         border-width: 1px;
130 |     }
131 | 
132 |     .btn-default-outline:active,
133 |     .btn-primary-outline:active,
134 |     .btn-success-outline:active,
135 |     .btn-warning-outline:active,
136 |     .btn-danger-outline:active,
137 |     .btn-royal-outline:active {
138 |         color: #ffffff;
139 |     }
140 | 
141 |     .btn-default-outline {
142 |         border-color: #908C8C;
143 |         color: #000000;
144 |     }
145 | 
146 |     .btn-default-outline:active {
147 |         background-color: #929292;
148 |         color: #ffffff;
149 |     }
150 | 
151 |     .btn-primary-outline {
152 |         border-color: #007aff;
153 |         color: #007aff;
154 |     }
155 | 
156 |     .btn-primary-outline:active {
157 |         background-color: #007aff;
158 |     }
159 | 
160 |     .btn-success-outline {
161 |         border-color: #4cd964;
162 |         color: #4cd964;
163 |     }
164 | 
165 |     .btn-success-outline:active {
166 |         background-color: #4cd964;
167 |     }
168 | 
169 |     .btn-warning-outline {
170 |         border-color: #f0ad4e;
171 |         color: #f0ad4e;
172 |     }
173 | 
174 |     .btn-warning-outline:active {
175 |         background-color: #f0ad4e;
176 |     }
177 | 
178 |     .btn-danger-outline {
179 |         border-color: #dd524d;
180 |         color: #dd524d;
181 |     }
182 | 
183 |     .btn-danger-outline:active {
184 |         background-color: #dd524d;
185 |     }
186 | 
187 |     .btn-royal-outline {
188 |         border-color: #8a6de9;
189 |         color: #8a6de9;
190 |     }
191 | 
192 |     .btn-royal-outline:active {
193 |         background-color: #8a6de9;
194 |     }
195 | </style>
196 | 
197 | <script>
198 |     module.exports = {
199 |         onInit: function (e) {
200 |             this.$page.setTitleBar({
201 |                 text: 'Button'
202 |             })
203 |         }
204 |     }
205 | </script>
206 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Input/index.ux:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |         <div class="item-group">
  4 |             <text class="item-title">默认</text>
  5 |             <div class="item-content">
  6 |                 <input class="item-minus" type="button" name="minus" onclick="minus(1)" value="-" />
  7 |                 <input class="item-value" type="number" name="value" value="{{countOne}}" />
  8 |                 <input class="item-plus" type="button" name="plus" onclick="plus(1)" value="+" />
  9 |             </div>
 10 |         </div>
 11 |         <div class="item-group">
 12 |             <text class="item-title">限定最小值和最大值(1~9)</text>
 13 |             <div class="item-content">
 14 |                 <input class="item-minus" type="button" name="minus" onclick="minus('limit',1,9)" value="-" />
 15 |                 <input class="item-value" type="number" name="value" value="{{countTwo}}" />
 16 |                 <input class="item-plus" type="button" name="plus" onclick="plus('limit',1,9)" value="+" />
 17 |             </div>
 18 |         </div>
 19 |         <div class="item-group">
 20 |             <text class="item-title">设置步长值(步长10)</text>
 21 |             <div class="item-content">
 22 |                 <input class="item-minus" type="button" name="minus" onclick="minus('step',10,90)" value="-" />
 23 |                 <input class="item-value" type="number" name="value" value="{{countThree}}" />
 24 |                 <input class="item-plus" type="button" name="plus" onclick="plus('step',10,90)" value="+" />
 25 |             </div>
 26 |         </div>
 27 |         <div class="item-group" show="{{false}}">
 28 |             <text class="item-title">取值操作</text>
 29 |             <div class="item-content">
 30 |                 <input class="item-minus" type="button" name="minus" onclick="minus(4)" value="-" />
 31 |                 <input class="item-value" type="number" name="value" value="{{countFour}}" />
 32 |                 <input class="item-plus" type="button" name="plus" onclick="plus(4)" value="+" />
 33 |                 <input class="item-button" type="button" name="getCurValue" value="取当前值" onclick="getCurValue()" style="width:140px;margin-left:20px"
 34 |                 />
 35 |             </div>
 36 |         </div>
 37 |         <div class="item-group">
 38 |             <text class="item-title">在行内</text>
 39 |             <div class="item-content">
 40 |                 <text style="color: #000000;font-size: 30px;padding: 10px;">购买数量:</text>
 41 |                 <input class="item-minus" type="button" name="minus" onclick="minus(5)" value="-" />
 42 |                 <input class="item-value" type="number" name="value" value="{{countFive}}" />
 43 |                 <input class="item-plus" type="button" name="plus" onclick="plus(5)" value="+" />
 44 |             </div>
 45 |         </div>
 46 |     </div>
 47 | </template>
 48 | <style>
 49 |     .container {
 50 |         flex-direction: column;
 51 |         flex: 1;
 52 |     }
 53 | 
 54 |     .item-group {
 55 |         width: 710px;
 56 |         margin: 10px 20px;
 57 |         flex-direction: column;
 58 |     }
 59 | 
 60 |     .item-title {
 61 |         padding: 20px 0px;
 62 |         color: #97969C;
 63 |     }
 64 | 
 65 |     .item-content {
 66 |         flex-direction: row;
 67 |     }
 68 | 
 69 |     .item-minus,
 70 |     .item-plus,
 71 |     .item-button {
 72 |         background-color: #f9f9f9;
 73 |         border-color: #c8c8cb;
 74 |         border-width: 1px;
 75 |         width: 80px;
 76 |         height: 60px;
 77 |     }
 78 | 
 79 |     .item-value {
 80 |         border-color: #c8c8cb;
 81 |         border-top-width: 1px;
 82 |         border-bottom-width: 1px;
 83 |         width: 60px;
 84 |         height: 60px;
 85 |         text-align: center;
 86 |     }
 87 | </style>
 88 | <script>
 89 |     import prompt from '@system.prompt'
 90 |     module.exports = {
 91 |         data: {
 92 |             countOne: 0,
 93 |             countTwo: 5,
 94 |             countThree: 10,
 95 |             countFour: 0,
 96 |             countFive: 0
 97 |         },
 98 |         onInit: function (e) {
 99 |             this.$page.setTitleBar({
100 |                 text: '数字输入框'
101 |             })
102 |         },
103 |         minus: function (param, param1, param2) {
104 |             if (param == 1) {
105 |                 this.countOne = this.countOne - 1;
106 |             } else if (param == 4) {
107 |                 this.countFour = this.countFour - 1;
108 |             } else if (param == 5) {
109 |                 this.countFive = this.countFive - 1;
110 |             } else if (param == 'limit') {
111 |                 if (this.countTwo > param1 && this.countTwo <= param2) {
112 |                     this.countTwo = this.countTwo - 1;
113 |                 }
114 |             } else if (param == 'step') {
115 |                 if (this.countThree > param1 && this.countThree <= param2) {
116 |                     this.countThree = this.countThree - 10;
117 |                 }
118 |             }
119 |         },
120 |         plus: function (param, param1, param2) {
121 |             if (param == 1) {
122 |                 this.countOne = this.countOne + 1;
123 |             } else if (param == 4) {
124 |                 this.countFour = this.countFour + 1;
125 |             } else if (param == 5) {
126 |                 this.countFive = this.countFive + 1;
127 |             } else if (param == 'limit') {
128 |                 if (this.countTwo >= param1 && this.countTwo < param2) {
129 |                     this.countTwo = this.countTwo + 1;
130 |                 }
131 |             } else if (param == 'step') {
132 |                 if (this.countThree >= param1 && this.countThree < param2) {
133 |                     this.countThree = this.countThree + 10;
134 |                 }
135 |             }
136 |         },
137 |         getCurValue: function () {
138 |             prompt.showToast({
139 |                 message: this.countFour,
140 |                 duration: 1
141 |             })
142 |         }
143 |     }
144 | </script>
145 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Swiper/Grid/index.ux:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |         <swiper>
  4 |             <div class="item-grid">
  5 |                 <div class="item ">
  6 |                     <image src="/Common/img/c1.png"></image>
  7 |                     <text>grid</text>
  8 |                 </div>
  9 |                 <div class="item">
 10 |                     <image src="/Common/img/c2.png"></image>
 11 |                     <text>grid</text>
 12 |                 </div>
 13 |                 <div class="item ">
 14 |                     <image src="/Common/img/c3.png"></image>
 15 |                     <text>grid</text>
 16 |                 </div>
 17 |                 <div class="item ">
 18 |                     <image src="/Common/img/c4.png"></image>
 19 |                     <text>grid</text>
 20 |                 </div>
 21 |                 <div class="item">
 22 |                     <image src="/Common/img/c5.png"></image>
 23 |                     <text>grid</text>
 24 |                 </div>
 25 |                 <div class="item ">
 26 |                     <image src="/Common/img/c6.png"></image>
 27 |                     <text>grid</text>
 28 |                 </div>
 29 |                 <div class="item ">
 30 |                     <image src="/Common/img/c7.png"></image>
 31 |                     <text>grid</text>
 32 |                 </div>
 33 |                 <div class="item ">
 34 |                     <image src="/Common/img/c8.png"></image>
 35 |                     <text>grid</text>
 36 |                 </div>
 37 |             </div>
 38 |             <div class="item-grid">
 39 |                 <div class="item ">
 40 |                     <image src="/Common/img/c1.png"></image>
 41 |                     <text>grid</text>
 42 |                 </div>
 43 |                 <div class="item">
 44 |                     <image src="/Common/img/c2.png"></image>
 45 |                     <text>grid</text>
 46 |                 </div>
 47 |                 <div class="item ">
 48 |                     <image src="/Common/img/c3.png"></image>
 49 |                     <text>grid</text>
 50 |                 </div>
 51 |                 <div class="item ">
 52 |                     <image src="/Common/img/c4.png"></image>
 53 |                     <text>grid</text>
 54 |                 </div>
 55 |                 <div class="item">
 56 |                     <image src="/Common/img/c5.png"></image>
 57 |                     <text>grid</text>
 58 |                 </div>
 59 |                 <div class="item ">
 60 |                     <image src="/Common/img/c6.png"></image>
 61 |                     <text>grid</text>
 62 |                 </div>
 63 |                 <div class="item ">
 64 |                     <image src="/Common/img/c7.png"></image>
 65 |                     <text>grid</text>
 66 |                 </div>
 67 |                 <div class="item ">
 68 |                     <image src="/Common/img/c8.png"></image>
 69 |                     <text>grid</text>
 70 |                 </div>
 71 |             </div>
 72 |             <div class="item-grid">
 73 |                 <div class="item ">
 74 |                     <image src="/Common/img/c1.png"></image>
 75 |                     <text>grid</text>
 76 |                 </div>
 77 |                 <div class="item">
 78 |                     <image src="/Common/img/c2.png"></image>
 79 |                     <text>grid</text>
 80 |                 </div>
 81 |                 <div class="item ">
 82 |                     <image src="/Common/img/c3.png"></image>
 83 |                     <text>grid</text>
 84 |                 </div>
 85 |                 <div class="item ">
 86 |                     <image src="/Common/img/c4.png"></image>
 87 |                     <text>grid</text>
 88 |                 </div>
 89 |                 <div class="item">
 90 |                     <image src="/Common/img/c5.png"></image>
 91 |                     <text>grid</text>
 92 |                 </div>
 93 |                 <div class="item ">
 94 |                     <image src="/Common/img/c6.png"></image>
 95 |                     <text>grid</text>
 96 |                 </div>
 97 |                 <div class="item ">
 98 |                     <image src="/Common/img/c7.png"></image>
 99 |                     <text>grid</text>
100 |                 </div>
101 |                 <div class="item ">
102 |                     <image src="/Common/img/c8.png"></image>
103 |                     <text>grid</text>
104 |                 </div>
105 |             </div>
106 |         </swiper>
107 |     </div>
108 | </template>
109 | <style>
110 |     .container {
111 |         flex: 1;
112 |     }
113 | 
114 |     swiper {
115 |         width: 750px;
116 |         height: 375px;
117 |         background-color: #FBF9FE;
118 |     }
119 | 
120 |     .item-grid {
121 |         width: 750px;
122 |         flex-direction: row;
123 |         flex-wrap: wrap;
124 |     }
125 | 
126 |     .item {
127 |         width: 187.5px;
128 |         height: 187.5px;
129 |         flex-direction: column;
130 |         align-items: center;
131 |         border-color: #DDDDDD;
132 |     }
133 | 
134 |     .item-border-nobottom {
135 |         border-width: 1px;
136 |         border-bottom-width: 0px;
137 |     }
138 | 
139 |     .item-border {
140 |         border-width: 1px;
141 |     }
142 | 
143 |     .item-border-top-bottom {
144 |         border-top-width: 1px;
145 |         border-bottom-width: 1px;
146 |     }
147 | 
148 |     .item-border-bottom {
149 |         border-bottom-width: 1px;
150 |     }
151 | 
152 |     .item image {
153 |         width: 100px;
154 |         height: 100px;
155 |     }
156 | 
157 |     .item text {
158 |         width: 187.5px;
159 |         height: 50px;
160 |         text-align: center;
161 |         font-size: 23px;
162 |     }
163 | </style>
164 | <script>
165 |     import router from "@system.router"
166 |     module.exports = {
167 |         onInit: function (e) {
168 |             this.$page.setTitleBar({
169 |                 text: '可左右拖动的9宫导航'
170 |             })
171 |         },
172 |         onMenuPress: function () {
173 |             router.push({
174 |                 uri: 'Examples/About'
175 |             })
176 |         }
177 |     }
178 | </script>
179 | 


--------------------------------------------------------------------------------
/hello-quickapp/manifest.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "package": "io.dcloud.quickapp.sample",
  3 |     "name": "快应用示例",
  4 |     "versionName": "1.0.0",
  5 |     "versionCode": 100,
  6 |     "icon": "/Common/logo.png",
  7 |     "features": [{
  8 |             "name": "system.webview"
  9 |         },
 10 |         {
 11 |             "name": "system.prompt"
 12 |         },
 13 |         {
 14 |             "name": "system.fetch"
 15 |         },
 16 | 		{
 17 |             "name": "system.file"
 18 |         },
 19 |         {
 20 |             "name": "system.clipboard"
 21 |         },
 22 | 		{
 23 |             "name": "system.geolocation"
 24 |         },
 25 |         {
 26 |             "name": "system.request"
 27 |         },
 28 |         {
 29 |             "name": "system.calendar"
 30 |         },
 31 |         {
 32 |             "name": "system.device"
 33 |         },
 34 |         {
 35 |             "name": "system.storage"
 36 |         },
 37 |         {
 38 |             "name": "system.media"
 39 |         },
 40 |         {
 41 |             "name": "system.share"
 42 |         },
 43 |         {
 44 |             "name": "system.notification"
 45 |         },
 46 |         {
 47 |             "name": "system.barcode"
 48 |         },
 49 |         {
 50 |             "name": "system.sensor"
 51 |         },
 52 |         {
 53 |             "name": "system.shortcut"
 54 |         },
 55 |         {
 56 |             "name": "system.network"
 57 |         }
 58 |     ],
 59 |     "permissions": [{
 60 |         "origin": "*"
 61 |     }],
 62 |     "config": {
 63 |         "logLevel": "debug"
 64 |     },
 65 |     "router": {
 66 |         "entry": "Home",
 67 |         "pages": {
 68 |             "Home": {
 69 |                 "component": "index"
 70 |             },
 71 | 			"Component/Div": {
 72 |                 "component": "index"
 73 |             },
 74 | 			"Component/List/Default": {
 75 |                 "component": "index"
 76 |             },
 77 | 			"Component/List": {
 78 |                 "component": "index"
 79 |             },
 80 | 			"Component/Refresh": {
 81 |                 "component": "index"
 82 |             },
 83 | 			"Component/Richtext": {
 84 |                 "component": "index"
 85 |             },
 86 | 			"Component/Stack": {
 87 |                 "component": "index"
 88 |             },
 89 | 			"Component/Swiper/Default": {
 90 |                 "component": "index"
 91 |             },
 92 | 			"Component/Swiper/Grid": {
 93 |                 "component": "index"
 94 |             },
 95 | 			"Component/Swiper": {
 96 |                 "component": "index"
 97 |             },
 98 | 			"Component/Tabs/Default": {
 99 |                 "component": "index"
100 |             },
101 | 			"Component/Tabs": {
102 |                 "component": "index"
103 |             },
104 | 			"Component/A": {
105 |                 "component": "index"
106 |             },
107 | 			"Component/A/Detail": {
108 |                 "component": "index"
109 |             },
110 | 			"Component/Image": {
111 |                 "component": "index"
112 |             },
113 | 			"Component/Progress": {
114 |                 "component": "index"
115 |             },
116 | 			"Component/Span": {
117 |                 "component": "index"
118 |             },
119 | 			"Component/Text/Default": {
120 |                 "component": "index"
121 |             },
122 | 			"Component/Text": {
123 |                 "component": "index"
124 |             },
125 | 			"Component/Switch": {
126 |                 "component": "index"
127 |             },
128 | 			"Component/Input/Default": {
129 |                 "component": "index"
130 |             },
131 | 			"Component/Input": {
132 |                 "component": "index"
133 |             },
134 | 			"Component/Button": {
135 |                 "component": "index"
136 |             },
137 | 			"Component/Radio": {
138 |                 "component": "index"
139 |             },
140 | 			"Component/Checkbox": {
141 |                 "component": "index"
142 |             },
143 | 			"Component/Label": {
144 |                 "component": "index"
145 |             },
146 | 			"Component/Textarea": {
147 |                 "component": "index"
148 |             },
149 | 			"Component/Video": {
150 |                 "component": "index"
151 |             },
152 | 			"Interface/Router": {
153 |                 "component": "index"
154 |             },
155 | 			"Interface/Router/Detail": {
156 |                 "component": "index"
157 |             },
158 | 			"Interface/Share": {
159 |                 "component": "index"
160 |             },
161 | 			"Interface/Prompt": {
162 |                 "component": "index"
163 |             },
164 | 			"Interface/Webview": {
165 |                 "component": "index"
166 |             },
167 | 			"Interface/Notification": {
168 |                 "component": "index"
169 |             },
170 | 			"Interface/Request": {
171 |                 "component": "index"
172 |             },
173 | 			"Interface/Fetch": {
174 |                 "component": "index"
175 |             },
176 | 			"Interface/Storage": {
177 |                 "component": "index"
178 |             },
179 | 			"Interface/File": {
180 |                 "component": "index"
181 |             },
182 | 			"Interface/Sensor": {
183 |                 "component": "index"
184 |             },
185 | 			"Interface/Geolocation": {
186 |                 "component": "index"
187 |             },
188 | 			"Interface/Barcode": {
189 |                 "component": "index"
190 |             },
191 | 			"Interface/Clipboard": {
192 |                 "component": "index"
193 |             },
194 | 			"Interface/Device": {
195 |                 "component": "index"
196 |             },
197 | 			"Interface/Network": {
198 |                 "component": "index"
199 |             },
200 | 			"Interface/Shortcut": {
201 |                 "component": "index"
202 |             },
203 |             "Templates/Login": {
204 |                 "component": "index"
205 |             },
206 |             "Templates/Setting": {
207 |                 "component": "index"
208 |             },
209 |             "Templates/About": {
210 |                 "component": "index"
211 |             }
212 |         }
213 |     },
214 |     "display": {
215 |         "titleBarBackgroundColor": "#dd524d",
216 |         "backgroundColor": "#f8f8f8",
217 |         "titleBar": true,
218 |         "titleBarTextColor": "#ffffff",
219 |         "pages": {
220 |             "Home": {
221 |                 "titleBarText": "快应用组件展示"
222 |             }
223 |         }
224 |     }
225 | }
226 | 


--------------------------------------------------------------------------------
/hello-quickapp/Interface/File/index.ux:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |         <div class="item-title">
  4 |             <text>file</text>
  5 |         </div>
  6 |         <div class="item-content">
  7 |             <div class="item-group">
  8 |                 <text class="item-group-text">下载文件：{{downloadfile}}</text>
  9 |                 <input type="button" name="download" class="item-group-button" value="下载文件" onclick="downloadFile" />
 10 |             </div>
 11 |             <div class="item-group">
 12 |                 <text class="item-group-text">复制文件：{{copyfile}}</text>
 13 |                 <input type="button" name="copy" class="item-group-button" value="复制文件" onclick="copyFile" />
 14 |             </div>
 15 | 			<div class="item-group">
 16 |                 <text class="item-group-text">获取文件信息：{{getfile}}</text>
 17 |                 <input type="button" name="get" class="item-group-button" value="获取文件信息" onclick="getFile" />
 18 |             </div>
 19 |             <div class="item-group">
 20 |                 <text class="item-group-text">文件列表：</text>
 21 |                 <text class="item-group-text" for="listfile">{{$item.uri}}---{{$item.length}}---{{$item.lastModifiedTime}}</text>
 22 |                 <input type="button" name="list" class="item-group-button" value="文件列表" onclick="listFile" />
 23 |             </div>
 24 |             <div class="item-group">
 25 |                 <text class="item-group-text">移动文件：{{movefile}}</text>
 26 |                 <input type="button" name="move" class="item-group-button" value="移动文件" onclick="moveFile" />
 27 |             </div>
 28 |             <div class="item-group">
 29 |                 <text class="item-group-text">删除文件：{{deletefile}}</text>
 30 |                 <input type="button" name="delete" class="item-group-button" value="删除文件" onclick="deleteFile" />
 31 |             </div>
 32 |         </div>
 33 |     </div>
 34 | </template>
 35 | 
 36 | <style>
 37 |     @import '../../Common/css/common.css';
 38 | </style>
 39 | 
 40 | <script>
 41 |     import request from '@system.request';
 42 |     import file from '@system.file';
 43 |     module.exports = {
 44 |         data: {
 45 |             downloadfile: '',
 46 |             movefile: '',
 47 |             copyfile: '',
 48 |             listfile: [],
 49 |             getfile: '',
 50 |             deletefile: ''
 51 |         },
 52 |         onInit: function (e) {
 53 |             this.$page.setTitleBar({
 54 |                 text: 'File'
 55 |             })
 56 |         },
 57 |         downloadFile: function () {
 58 |             var that = this;
 59 |             request.download({
 60 |                 url: 'http://img-cdn-qiniu.dcloud.net.cn/icon3.png',
 61 |                 success: function (data) {
 62 |                     request.onDownloadComplete({
 63 |                         token: data.token,
 64 |                         success: function (data) {
 65 |                             that.downloadfile = data.uri
 66 |                         },
 67 |                         fail: function (data, code) {
 68 |                             console.log('...fail...');
 69 |                         }
 70 |                     })
 71 |                 },
 72 |                 fail: function (code, data) {
 73 |                     console.log('...fail...');
 74 |                 }
 75 |             });
 76 |         },
 77 |         moveFile: function () {
 78 |             var that = this;
 79 |             var dstUri = 'internal://mass/imgs/temp/';
 80 |             file.move({
 81 |                 srcUri: that.downloadfile,
 82 |                 dstUri: dstUri,
 83 |                 success: function (data) {
 84 |                     that.movefile = dstUri;
 85 |                 },
 86 |                 fail: function (data, code) {
 87 |                     that.movefile = code + '...' + dstUri;
 88 |                 }
 89 |             })
 90 |         },
 91 |         copyFile: function () {
 92 |             var that = this;
 93 |             var dstUri = 'internal://mass/imgs/';
 94 |             file.copy({
 95 |                 srcUri: that.downloadfile,
 96 |                 dstUri: dstUri,
 97 |                 success: function (data) {
 98 |                     that.copyfile = dstUri;
 99 |                 },
100 |                 fail: function (data, code) {
101 |                     that.copyfile = code + '...' + dstUri;
102 |                 }
103 |             })
104 |         },
105 |         listFile: function () {
106 |             var that = this;
107 |             var uri = 'internal://mass/imgs';
108 |             file.list({
109 |                 uri: uri,
110 |                 success: function (data) {
111 |                     var result = JSON.parse(data);
112 |                     var list = result.fileList;
113 |                     var copylist = [];
114 |                     for (var i = 0; i < list.length; i++) {
115 |                         copylist.push({
116 |                             uri: '路径:' + list[i].uri,
117 |                             length: '大小:' + list[i].length,
118 |                             lastModifiedTime: '创建时间:' + that.getDate(list[i].lastModifiedTime)
119 |                         })
120 |                     }
121 |                     that.listfile = [].concat(copylist);
122 |                 },
123 |                 fail: function (data, code) {
124 |                     that.listfile = code + '...' + that.downloadfile;
125 |                 }
126 |             })
127 |         },
128 |         getFile: function () {
129 |             var that = this;
130 |             file.get({
131 |                 uri: that.downloadfile,
132 |                 success: function (data) {
133 |                     var data = JSON.parse(data);
134 |                     that.getfile = '路径:' + data.uri + '---' + '大小:' + data.length + '---' + '创建时间:' +
135 |                         that.getDate(data.lastModifiedTime);
136 |                 },
137 |                 fail: function (data, code) {
138 |                     that.getfile = code + '...' + that.downloadfile;
139 |                 }
140 |             })
141 |         },
142 |         deleteFile: function () {
143 |             var that = this;
144 |             file.delete({
145 |                 uri: that.downloadfile,
146 |                 success: function () {
147 |                     that.deletefile = '删除成功';
148 |                 },
149 |                 fail: function (data, code) {
150 |                     that.deletefile = code + '...' + that.downloadfile;
151 |                 }
152 |             })
153 |         },
154 |         getDate: function (ms) {
155 |             var date = new Date(ms);
156 |             return date.toLocaleString();
157 |         }
158 |     }
159 | </script>
160 | 


--------------------------------------------------------------------------------
/hello-quickapp/Component/Tabs/index.ux:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |         <tabs onchange="changeTabbarDrag">
  4 |             <tab-content class="tab-content">
  5 |                 <div class="tab-group-content">
  6 |                     <list class="list">
  7 |                         <list-item type="media" class="list-item list-item-top-line">
  8 |                             <div class="media-list middleline">
  9 |                                 <image src="/Common/img/shuijiao.jpg"></image>
 10 |                                 <div class="media-body">
 11 |                                     <text class="media-title">幸福</text>
 12 |                                     <text class="media-content">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</text>
 13 |                                 </div>
 14 |                             </div>
 15 |                         </list-item>
 16 |                         <list-item type="media" class="list-item list-item-bottom-line">
 17 |                             <div class="media-list">
 18 |                                 <image src="/Common/img/yuantiao.jpg"></image>
 19 |                                 <div class="media-body">
 20 |                                     <text class="media-title">远眺</text>
 21 |                                     <text class="media-content">静静的看这个世界，最后终于疯了.</text>
 22 |                                 </div>
 23 |                             </div>
 24 |                         </list-item>
 25 |                     </list>
 26 |                 </div>
 27 |                 <div class="tab-group-content">
 28 |                     <list class="list list-card">
 29 |                         <list-item type="media" class="list-item list-item-top-line list-card-top-radius">
 30 |                             <div class="media-list middleline">
 31 |                                 <div class="media-body">
 32 |                                     <text class="media-title">幸福</text>
 33 |                                     <text class="media-content" style="width: 570px;">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</text>
 34 |                                 </div>
 35 |                                 <image src="/Common/img/shuijiao.jpg"></image>
 36 |                             </div>
 37 |                         </list-item>
 38 |                         <list-item type="media" class="list-item list-item-bottom-line list-card-bottom-radius">
 39 |                             <div class="media-list">
 40 |                                 <div class="media-body">
 41 |                                     <text class="media-title">远眺</text>
 42 |                                     <text class="media-content" style="width: 570px;">静静的看这个世界，最后终于疯了.</text>
 43 |                                 </div>
 44 |                                 <image src="/Common/img/yuantiao.jpg"></image>
 45 |                             </div>
 46 |                         </list-item>
 47 |                     </list>
 48 |                 </div>
 49 |                 <div class="tab-group-content">
 50 |                     <div class="mine-list">
 51 |                         <div class="mine-item-list line">
 52 |                             <text>Item1</text>
 53 |                             <image src="/Common/img/arrow_right.png"></image>
 54 |                         </div>
 55 |                         <div class="mine-item-list">
 56 |                             <text>Item2</text>
 57 |                             <image src="/Common/img/arrow_right.png"></image>
 58 |                         </div>
 59 |                     </div>
 60 |                 </div>
 61 |                 <div class="tab-group-content">
 62 |                     <div class="mine-list">
 63 |                         <div class="mine-item-list line">
 64 |                             <text>设置</text>
 65 |                             <image src="/Common/img/arrow_right.png"></image>
 66 |                         </div>
 67 |                         <div class="mine-item-list">
 68 |                             <text>关于</text>
 69 |                             <image src="/Common/img/arrow_right.png"></image>
 70 |                         </div>
 71 |                     </div>
 72 |                     <div class="mine-login">
 73 |                         <text>登录</text>
 74 |                     </div>
 75 |                 </div>
 76 |             </tab-content>
 77 |             <tab-bar class="tab-bar">
 78 |                 <div class="footer-item" for="lists" tid="id">
 79 |                     <image src="{{$item}}"></image>
 80 |                 </div>
 81 |             </tab-bar>
 82 |         </tabs>
 83 |     </div>
 84 | </template>
 85 | <style>
 86 |     @import '../../Common/css/common.css';
 87 |     .tab-bar {
 88 |         height: 100px;
 89 |         border-top-width: 1px;
 90 |         border-color: #bbbbbb;
 91 |         background-color: #ffffff;
 92 |     }
 93 | 
 94 |     .tab-content {
 95 |         background-color: #F1EBEB;
 96 |     }
 97 | 
 98 |     .tab-group-content {
 99 |         flex-direction: column;
100 |     }
101 | 
102 |     .list {
103 |         margin-top: 20px;
104 |     }
105 | 
106 |     .list-card {
107 |         width: 710px;
108 |         margin-left: 20px;
109 |     }
110 | 
111 |     .list-title {
112 |         padding: 20px;
113 |     }
114 | 
115 |     .list-card-top-radius {
116 |         border-top-left-radius: 10px;
117 |         border-top-right-radius: 10px;
118 |     }
119 | 
120 |     .list-card-bottom-radius {
121 |         border-bottom-left-radius: 10px;
122 |         border-bottom-right-radius: 10px;
123 |     }
124 | 
125 |     .list-item {
126 |         background-color: #FFFFFF;
127 |     }
128 | 
129 |     .list-item-top-line {
130 |         border-top-width: 1px;
131 |         border-top-color: #c8c7cc;
132 |     }
133 | 
134 |     .list-item-bottom-line {
135 |         border-bottom-width: 1px;
136 |         border-bottom-color: #c8c7cc;
137 |     }
138 | 
139 |     .middleline {
140 |         border-bottom-width: 1px;
141 |         border-bottom-color: #c8c7cc;
142 |     }
143 | 
144 |     .media-list {
145 |         margin-left: 20px;
146 |         padding-top: 20px;
147 |         padding-bottom: 20px;
148 |         flex-direction: row;
149 |         width: 730px;
150 |     }
151 | 
152 |     .media-body {
153 |         flex-direction: column;
154 |     }
155 | 
156 |     .media-list image {
157 |         width: 80px;
158 |         height: 80px;
159 |         margin-right: 20px;
160 |     }
161 | 
162 |     .media-title {
163 |         width: 600px;
164 |         color: #000000;
165 |         font-size: 32px;
166 |     }
167 | 
168 |     .media-content {
169 |         width: 600px;
170 |         color: #BBBBBB;
171 |         font-size: 25px;
172 |         lines: 1;
173 |         text-overflow: ellipsis;
174 |         margin-top: 5px;
175 |     }
176 | 
177 |     .mine-list {
178 |         width: 750px;
179 |         height: 180px;
180 |         background-color: #ffffff;
181 |         margin-top: 25px;
182 |         border-color: #C8C8CB;
183 |         border-bottom-width: 1px;
184 |         border-top-width: 1px;
185 |         flex-direction: column;
186 |     }
187 | 
188 |     .mine-item-list {
189 |         width: 730px;
190 |         height: 90px;
191 |         margin-left: 20px;
192 |         flex-direction: row;
193 |     }
194 | 
195 |     .mine-item-list text {
196 |         width: 200px;
197 |         height: 90px;
198 |         text-align: left;
199 |         padding-left: 15px;
200 |     }
201 | 
202 |     .mine-item-list image {
203 |         width: 16px;
204 |         height: 30px;
205 |         margin-left: 479px;
206 |         margin-top: 35px;
207 |     }
208 | 
209 |     .mine-login {
210 |         width: 750px;
211 |         height: 90px;
212 |         background-color: #ffffff;
213 |         border-color: #C8C8CB;
214 |         border-top-width: 1px;
215 |         border-bottom-width: 1px;
216 |         align-items: center;
217 |         justify-content: center;
218 |         margin-top: 50px;
219 |     }
220 | 
221 |     .line {
222 |         border-bottom-width: 1px;
223 |         border-bottom-color: #C8C8CB;
224 |     }
225 | 
226 |     .footer-item {
227 |         width: 250px;
228 |         justify-content: center;
229 |         align-items: center;
230 |     }
231 | 
232 |     .footer-item image {
233 |         width: 130px;
234 |     }
235 | </style>
236 | <script>
237 |     import prompt from '@system.prompt'
238 |     module.exports = {
239 |         data: {
240 |             active: 0,
241 |             lists: ['/Common/img/ag1-.png', '/Common/img/ag2.png', '/Common/img/ag3.png', '/Common/img/ag4.png']
242 |         },
243 |         onInit: function (e) {
244 |             this.$page.setTitleBar({
245 |                 text: '底部选项卡'
246 |             })
247 |         },
248 |         changeTabbarDrag: function (e) {
249 |             var index = e.index;
250 |             if (index == this.active) {
251 |                 return;
252 |             }
253 |             if (index == 0) {
254 |                 this.lists = ['/Common/img/ag1-.png', '/Common/img/ag2.png', '/Common/img/ag3.png',
255 |                     '/Common/img/ag4.png'
256 |                 ];
257 |             } else if (index == 1) {
258 |                 this.lists = ['/Common/img/ag1.png', '/Common/img/ag2-.png', '/Common/img/ag3.png',
259 |                     '/Common/img/ag4.png'
260 |                 ];
261 |             } else if (index == 2) {
262 |                 this.lists = ['/Common/img/ag1.png', '/Common/img/ag2.png', '/Common/img/ag3-.png',
263 |                     '/Common/img/ag4.png'
264 |                 ];
265 |             } else if (index == 3) {
266 |                 this.lists = ['/Common/img/ag1.png', '/Common/img/ag2.png', '/Common/img/ag3.png',
267 |                     '/Common/img/ag4-.png'
268 |                 ];
269 |             }
270 |             this.active = index;
271 |         }
272 |     }
273 | </script>
274 | 


--------------------------------------------------------------------------------
/hello-quickapp/Home/index.ux:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |         <tabs onchange="changeActive">
  4 |             <tab-content class="item-tabcnt">
  5 |                 <div class="item-group">
  6 |                     <div class="item-desc">
  7 |                         <text class="item-desc-detail">
  8 |                             以下将展示快应用组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见快应用开发文档
  9 |                         </text>
 10 |                     </div>
 11 |                     <div class="item-content">
 12 |                         <div class="item-title" onclick="showChild('view')">
 13 |                             <text class="{{active==='view'?'show-txt':''}}">容器组件</text>
 14 |                         </div>
 15 |                         <div class="item-list {{active==='view'?'show':''}}">
 16 |                             <div class="item-list-li" onclick="showDetail('Component/Div')">
 17 |                                 <text>div</text>
 18 |                                 <image src="/Common/img/arrow_right.png"></image>
 19 |                             </div>
 20 |                             <div class="item-list-li" onclick="showChildren('list')">
 21 |                                 <text class="{{childActive==='list'?'show-txt':''}}">list</text>
 22 |                                 <image src="/Common/img/arrow_right.png"></image>
 23 |                             </div>
 24 |                             <div class="item-list {{childActive==='list'?'show':''}}" style="padding-right: 0px;">
 25 |                                 <div class="item-list-li" onclick="showDetail('Component/List/Default')">
 26 |                                     <text>基本功能</text>
 27 |                                     <image src="/Common/img/arrow_right.png"></image>
 28 |                                 </div>
 29 |                                 <div class="item-list-li item-list-li-last" onclick="showDetail('Component/List')">
 30 |                                     <text>图文列表</text>
 31 |                                     <image src="/Common/img/arrow_right.png"></image>
 32 |                                 </div>
 33 |                             </div>
 34 |                             <div class="item-list-li" onclick="showDetail('Component/Refresh')">
 35 |                                 <text>refresh</text>
 36 |                                 <image src="/Common/img/arrow_right.png"></image>
 37 |                             </div>
 38 |                             <div class="item-list-li" onclick="showDetail('Component/Richtext')">
 39 |                                 <text>richtext</text>
 40 |                                 <image src="/Common/img/arrow_right.png"></image>
 41 |                             </div>
 42 |                             <div class="item-list-li" onclick="showDetail('Component/Stack')">
 43 |                                 <text>stack</text>
 44 |                                 <image src="/Common/img/arrow_right.png"></image>
 45 |                             </div>
 46 |                             <div class="item-list-li" onclick="showChildren('swiper')">
 47 |                                 <text class="{{childActive==='swiper'?'show-txt':''}}">swiper</text>
 48 |                                 <image src="/Common/img/arrow_right.png"></image>
 49 |                             </div>
 50 |                             <div class="item-list {{childActive==='swiper'?'show':''}}" style="padding-right: 0px;">
 51 |                                 <div class="item-list-li" onclick="showDetail('Component/Swiper/Default')">
 52 |                                     <text>图片轮播</text>
 53 |                                     <image src="/Common/img/arrow_right.png"></image>
 54 |                                 </div>
 55 |                                 <div class="item-list-li" onclick="showDetail('Component/Swiper')">
 56 |                                     <text>下方悬浮标题</text>
 57 |                                     <image src="/Common/img/arrow_right.png"></image>
 58 |                                 </div>
 59 |                                 <div class="item-list-li item-list-li-last" onclick="showDetail('Component/Swiper/Grid')">
 60 |                                     <text>可左右拖动的9宫导航</text>
 61 |                                     <image src="/Common/img/arrow_right.png"></image>
 62 |                                 </div>
 63 |                             </div>
 64 |                             <div class="item-list-li item-list-li-last" onclick="showChildren('tabs')">
 65 |                                 <text class="{{childActive==='tabs'?'show-txt':''}}">tabs</text>
 66 |                                 <image src="/Common/img/arrow_right.png"></image>
 67 |                             </div>
 68 |                             <div class="item-list {{childActive==='tabs'?'show':''}}" style="padding-right: 0px;">
 69 |                                 <div class="item-list-li" onclick="showDetail('Component/Tabs/Default')">
 70 |                                     <text>顶部选项卡</text>
 71 |                                     <image src="/Common/img/arrow_right.png"></image>
 72 |                                 </div>
 73 |                                 <div class="item-list-li item-list-li-last" onclick="showDetail('Component/Tabs')">
 74 |                                     <text>底部选项卡</text>
 75 |                                     <image src="/Common/img/arrow_right.png"></image>
 76 |                                 </div>
 77 |                             </div>
 78 |                         </div>
 79 |                     </div>
 80 |                     <div class="item-content">
 81 |                         <div class="item-title" onclick="showChild('basic')">
 82 |                             <text class="{{active==='basic'?'show-txt':''}}">基础组件</text>
 83 |                         </div>
 84 |                         <div class="item-list {{active==='basic'?'show':''}}">
 85 |                             <div class="item-list-li" onclick="showDetail('Component/A')">
 86 |                                 <text>a</text>
 87 |                                 <image src="/Common/img/arrow_right.png"></image>
 88 |                             </div>
 89 |                             <div class="item-list-li" onclick="showDetail('Component/Image')">
 90 |                                 <text>image</text>
 91 |                                 <image src="/Common/img/arrow_right.png"></image>
 92 |                             </div>
 93 |                             <div class="item-list-li" onclick="showDetail('Component/Progress')">
 94 |                                 <text>progress</text>
 95 |                                 <image src="/Common/img/arrow_right.png"></image>
 96 |                             </div>
 97 |                             <div class="item-list-li" onclick="showDetail('Component/Span')">
 98 |                                 <text>span</text>
 99 |                                 <image src="/Common/img/arrow_right.png"></image>
100 |                             </div>
101 |                             <div class="item-list-li item-list-li-last" onclick="showChildren('text')">
102 |                                 <text class="{{childActive==='text'?'show-txt':''}}">text</text>
103 |                                 <image src="/Common/img/arrow_right.png"></image>
104 |                             </div>
105 |                             <div class="item-list {{childActive==='text'?'show':''}}" style="padding-right: 0px;">
106 |                                 <div class="item-list-li" onclick="showDetail('Component/Text/Default')">
107 |                                     <text>基本功能</text>
108 |                                     <image src="/Common/img/arrow_right.png"></image>
109 |                                 </div>
110 |                                 <div class="item-list-li item-list-li-last" onclick="showDetail('Component/Text')">
111 |                                     <text>数字角标</text>
112 |                                     <image src="/Common/img/arrow_right.png"></image>
113 |                                 </div>
114 |                             </div>
115 |                         </div>
116 |                     </div>
117 |                     <div class="item-content">
118 |                         <div class="item-title" onclick="showChild('form')">
119 |                             <text class="{{active==='form'?'show-txt':''}}">表单组件</text>
120 |                         </div>
121 |                         <div class="item-list {{active==='form'?'show':''}}">
122 |                             <div class="item-list-li " onclick="showChildren('input')">
123 |                                 <text class="{{childActive==='input'?'show-txt':''}}">input</text>
124 |                                 <image src="/Common/img/arrow_right.png"></image>
125 |                             </div>
126 |                             <div class="item-list {{childActive==='input'?'show':''}}" style="padding-right: 0px;">
127 |                                 <div class="item-list-li" onclick="showDetail('Component/Input/Default')">
128 |                                     <text>基本功能</text>
129 |                                     <image src="/Common/img/arrow_right.png"></image>
130 |                                 </div>
131 |                                 <div class="item-list-li item-list-li-last" onclick="showDetail('Component/Input')">
132 |                                     <text>数字输入框</text>
133 |                                     <image src="/Common/img/arrow_right.png"></image>
134 |                                 </div>
135 |                             </div>
136 |                             <div class="item-list-li" onclick="showDetail('Component/Button')">
137 |                                 <text>button</text>
138 |                                 <image src="/Common/img/arrow_right.png"></image>
139 |                             </div>
140 |                             <div class="item-list-li" onclick="showDetail('Component/Radio')">
141 |                                 <text>radio</text>
142 |                                 <image src="/Common/img/arrow_right.png"></image>
143 |                             </div>
144 |                             <div class="item-list-li" onclick="showDetail('Component/Checkbox')">
145 |                                 <text>checkbox</text>
146 |                                 <image src="/Common/img/arrow_right.png"></image>
147 |                             </div>
148 |                             <div class="item-list-li" onclick="showDetail('Component/Label')">
149 |                                 <text>label</text>
150 |                                 <image src="/Common/img/arrow_right.png"></image>
151 |                             </div>
152 |                             <div class="item-list-li" onclick="showDetail('Component/Switch')">
153 |                                 <text>switch</text>
154 |                                 <image src="/Common/img/arrow_right.png"></image>
155 |                             </div>
156 |                             <div class="item-list-li item-list-li-last" onclick="showDetail('Component/Textarea')">
157 |                                 <text>textarea</text>
158 |                                 <image src="/Common/img/arrow_right.png"></image>
159 |                             </div>
160 |                         </div>
161 |                     </div>
162 |                     <div class="item-content">
163 |                         <div class="item-title" onclick="showChild('multimedia')">
164 |                             <text class="{{active==='multimedia'?'show-txt':''}}">多媒体</text>
165 |                         </div>
166 |                         <div class="item-list {{active==='multimedia'?'show':''}}">
167 |                             <div class="item-list-li item-list-li-last" onclick="showDetail('Component/Video')">
168 |                                 <text>video</text>
169 |                                 <image src="/Common/img/arrow_right.png"></image>
170 |                             </div>
171 |                         </div>
172 |                     </div>
173 |                 </div>
174 |                 <div class="item-group">
175 |                     <div class="item-desc">
176 |                         <text class="item-desc-detail">
177 |                             以下将展示快应用接口能力，具体属性参数详见快应用开发文档
178 |                         </text>
179 |                     </div>
180 |                     <div class="item-content">
181 |                         <div class="item-title" onclick="showChild('interBasic')">
182 |                             <text class="{{active==='interBasic'?'show-txt':''}}">基本功能</text>
183 |                         </div>
184 |                         <div class="item-list {{active==='interBasic'?'show':''}}">
185 |                             <div class="item-list-li item-list-li-last" onclick="showDetail('Interface/Router')">
186 |                                 <text>页面路由</text>
187 |                                 <image src="/Common/img/arrow_right.png"></image>
188 |                             </div>
189 |                         </div>
190 |                     </div>
191 |                     <div class="item-content">
192 |                         <div class="item-title" onclick="showChild('interAction')">
193 |                             <text class="{{active==='interAction'?'show-txt':''}}">界面交互</text>
194 |                         </div>
195 |                         <div class="item-list {{active==='interAction'?'show':''}}">
196 |                             <div class="item-list-li" onclick="showDetail('Interface/Share')">
197 |                                 <text>分享</text>
198 |                                 <image src="/Common/img/arrow_right.png"></image>
199 |                             </div>
200 |                             <div class="item-list-li" onclick="showDetail('Interface/Prompt')">
201 |                                 <text>弹窗</text>
202 |                                 <image src="/Common/img/arrow_right.png"></image>
203 |                             </div>
204 |                             <div class="item-list-li" onclick="showDetail('Interface/Webview')">
205 |                                 <text>打开网页</text>
206 |                                 <image src="/Common/img/arrow_right.png"></image>
207 |                             </div>
208 |                             <div class="item-list-li item-list-li-last" onclick="showDetail('Interface/Notification')">
209 |                                 <text>通知消息</text>
210 |                                 <image src="/Common/img/arrow_right.png"></image>
211 |                             </div>
212 |                         </div>
213 |                     </div>
214 |                     <div class="item-content">
215 |                         <div class="item-title" onclick="showChild('network')">
216 |                             <text class="{{active==='network'?'show-txt':''}}">网络访问</text>
217 |                         </div>
218 |                         <div class="item-list {{active==='network'?'show':''}}">
219 |                             <div class="item-list-li" onclick="showDetail('Interface/Request')">
220 |                                 <text>下载文件</text>
221 |                                 <image src="/Common/img/arrow_right.png"></image>
222 |                             </div>
223 |                             <div class="item-list-li item-list-li-last" onclick="showDetail('Interface/Fetch')">
224 |                                 <text>数据请求</text>
225 |                                 <image src="/Common/img/arrow_right.png"></image>
226 |                             </div>
227 |                         </div>
228 |                     </div>
229 |                     <div class="item-content">
230 |                         <div class="item-title" onclick="showChild('file')">
231 |                             <text class="{{active==='file'?'show-txt':''}}">文件数据</text>
232 |                         </div>
233 |                         <div class="item-list {{active==='file'?'show':''}}">
234 |                             <div class="item-list-li" onclick="showDetail('Interface/Storage')">
235 |                                 <text>数据储存</text>
236 |                                 <image src="/Common/img/arrow_right.png"></image>
237 |                             </div>
238 |                             <div class="item-list-li item-list-li-last" onclick="showDetail('Interface/File')">
239 |                                 <text>文件储存</text>
240 |                                 <image src="/Common/img/arrow_right.png"></image>
241 |                             </div>
242 |                         </div>
243 |                     </div>
244 |                     <div class="item-content">
245 |                         <div class="item-title" onclick="showChild('system')">
246 |                             <text class="{{active==='system'?'show-txt':''}}">系统能力</text>
247 |                         </div>
248 |                         <div class="item-list {{active==='system'?'show':''}}">
249 |                             <div class="item-list-li" onclick="showDetail('Interface/Sensor')">
250 |                                 <text>传感器</text>
251 |                                 <image src="/Common/img/arrow_right.png"></image>
252 |                             </div>
253 |                             <div class="item-list-li" onclick="showDetail('Interface/Geolocation')">
254 |                                 <text>地理位置</text>
255 |                                 <image src="/Common/img/arrow_right.png"></image>
256 |                             </div>
257 |                             <div class="item-list-li" onclick="showDetail('Interface/Barcode')">
258 |                                 <text>二维码</text>
259 |                                 <image src="/Common/img/arrow_right.png"></image>
260 |                             </div>
261 |                             <div class="item-list-li" onclick="showDetail('Interface/Clipboard')">
262 |                                 <text>剪切板</text>
263 |                                 <image src="/Common/img/arrow_right.png"></image>
264 |                             </div>
265 |                             <div class="item-list-li" onclick="showDetail('Interface/Device')">
266 |                                 <text>设备信息</text>
267 |                                 <image src="/Common/img/arrow_right.png"></image>
268 |                             </div>
269 |                             <div class="item-list-li" onclick="showDetail('Interface/Network')">
270 |                                 <text>网络状态</text>
271 |                                 <image src="/Common/img/arrow_right.png"></image>
272 |                             </div>
273 |                             <div class="item-list-li item-list-li-last" onclick="showDetail('Interface/Shortcut')">
274 |                                 <text>桌面图标</text>
275 |                                 <image src="/Common/img/arrow_right.png"></image>
276 |                             </div>
277 |                         </div>
278 |                     </div>
279 |                 </div>
280 |                 <div class="item-group">
281 |                     <div class="mine-list">
282 |                         <div onclick="showDetail('Templates/Setting')" class="mine-item-list line">
283 |                             <text>设置</text>
284 |                             <image src="/Common/img/arrow_right.png"></image>
285 |                         </div>
286 |                         <div onclick="showDetail('Templates/About')" class="mine-item-list">
287 |                             <text>关于</text>
288 |                             <image src="/Common/img/arrow_right.png"></image>
289 |                         </div>
290 |                     </div>
291 |                     <div class="mine-login" onclick="showDetail('Templates/Login')">
292 |                         <text>登录</text>
293 |                     </div>
294 |                 </div>
295 |             </tab-content>
296 |             <tab-bar class="item-tabbar">
297 |                 <text class="item-tabbar-text">组件</text>
298 |                 <text class="item-tabbar-text">接口</text>
299 |                 <text class="item-tabbar-text">模板</text>
300 |             </tab-bar>
301 |         </tabs>
302 |     </div>
303 | </template>
304 | 
305 | <style>
306 |     .slide-menu-container{
307 |         width: 100%;
308 |         height: 100%;
309 |         position: fixed;
310 |     }
311 |     .overlay {
312 |         width: 100%;
313 |         height: 100%;
314 |         opacity: 0.5;
315 |         background-color: #000000;
316 |     }
317 |     .slide-menu {
318 | 		width: 525px;
319 | 		transform: translateX(-525px);
320 | 		opacity:0;
321 |         height: 100%;
322 |         padding: 50px 20px;
323 |         flex-direction: column;
324 |         background-color: #000000;
325 |     }
326 | 	.slide-in{
327 | 		opacity:1;
328 | 		transform: translateX(0px);
329 | 		animation-duration:200ms;
330 | 	}
331 | 	
332 | 	.slide-out{
333 | 		opacity:0;
334 | 		transform: translateX(-525px);
335 | 		animation-duration:200ms;
336 | 	}
337 |     .slide-menu-text {
338 |         width: 100%;
339 |         height: 80px;
340 |         font-size: 35px;
341 |         color: #ffffff;
342 |     }
343 | 
344 |     .slide-menu-desc {
345 |         color: #AAAAAA;
346 |         margin-top: 30px;
347 |         font-size: 28px;
348 |     }
349 | 
350 |     .slide-menu-close {
351 |         margin: 30px 70px;
352 |         height: 80px;
353 |         border-radius: 8px;
354 |         background-color: #dd524d;
355 |         color: #ffffff;
356 |     }
357 | 
358 |     .slide-menu-title {
359 |         margin-top: 50px;
360 |     }
361 | 
362 |     .slide-menu-li list-item {
363 |         height: 70px;
364 |         flex-direction: row;
365 |         align-items: center;
366 |     }
367 | 
368 |     .slide-menu-li list-item text {
369 |         color: #ffffff;
370 |     }
371 | 
372 |     .slide-menu-li list-item image {
373 |         margin-left: 360px;
374 |         margin-top: 5px;
375 |     }
376 | 
377 | 
378 |     .container,
379 |     .item-tabcnt {
380 |         flex-direction: column;
381 |         flex: 1;
382 |     }
383 | 
384 |     .item-group {
385 |         flex-direction: column;
386 |     }
387 | 
388 |     .item-desc {
389 |         padding: 2px 70px;
390 |         margin: 70px 0;
391 |         flex-direction: column;
392 |         align-items: center;
393 |     }
394 | 
395 |     .item-desc image {
396 |         width: 95px;
397 |         margin-bottom: 30px;
398 |     }
399 | 
400 |     .item-desc-detail {
401 |         text-align: center;
402 |         flex: 1;
403 |         lines: 3;
404 |         line-height: 50px;
405 |         color: #888888;
406 |     }
407 | 
408 |     .item-content {
409 |         margin: 0px 30px 30px;
410 |         background-color: #ffffff;
411 |         flex-direction: column;
412 |     }
413 | 
414 |     .item-title {
415 |         padding: 30px;
416 |     }
417 | 
418 |     .item-list {
419 |         flex-direction: column;
420 |         padding: 0px 35px;
421 |         display: none;
422 |     }
423 | 
424 |     .item-list-li {
425 |         border-color: #bbbbbb;
426 |         border-bottom-width: 1px;
427 |         align-items: center;
428 |     }
429 | 
430 |     .item-list-li-last {
431 |         border-bottom-width: 0px;
432 |     }
433 | 
434 |     .item-list-li text {
435 |         padding: 25px 0px;
436 |         color: #000000;
437 |         width: 700px;
438 |     }
439 | 
440 |     .item-list-li image {
441 |         height: 20px;
442 |         width: 20px;
443 |         margin-right: 28px;
444 |         resize-mode: contain;
445 |     }
446 | 
447 |     .item-tabbar {
448 |         height: 120px;
449 |         border-top-width: 1px;
450 |         border-top-color: #bbbbbb;
451 |         background-color: #ffffff;
452 |     }
453 | 
454 |     .item-tabbar-text {
455 |         text-align: center;
456 |         color: #a8abad;
457 |     }
458 | 
459 |     .item-tabbar-text:active {
460 |         color: #1aad19;
461 |     }
462 | 
463 |     .mine-list {
464 |         width: 750px;
465 |         height: 180px;
466 |         background-color: #ffffff;
467 |         margin-top: 25px;
468 |         border-color: #C8C8CB;
469 |         border-bottom-width: 1px;
470 |         border-top-width: 1px;
471 |         flex-direction: column;
472 |     }
473 | 
474 |     .mine-item-list {
475 |         width: 730px;
476 |         height: 90px;
477 |         margin-left: 20px;
478 |         flex-direction: row;
479 |     }
480 | 
481 |     .mine-item-list text {
482 |         width: 200px;
483 |         height: 90px;
484 |         text-align: left;
485 |         padding-left: 15px;
486 |     }
487 | 
488 |     .mine-item-list image {
489 |         width: 16px;
490 |         height: 30px;
491 |         margin-left: 479px;
492 |         margin-top: 35px;
493 |     }
494 | 
495 |     .mine-login {
496 |         width: 750px;
497 |         height: 90px;
498 |         background-color: #ffffff;
499 |         border-color: #C8C8CB;
500 |         border-top-width: 1px;
501 |         border-bottom-width: 1px;
502 |         align-items: center;
503 |         justify-content: center;
504 |         margin-top: 50px;
505 |     }
506 | 
507 |     .line {
508 |         border-bottom-width: 1px;
509 |         border-bottom-color: #C8C8CB;
510 |     }
511 | 
512 |     .show {
513 |         display: flex;
514 |     }
515 | 
516 |     .item-content .item-title .show-txt,
517 |     .item-list .item-list-li .show-txt {
518 |         color: #cccccc;
519 |     }
520 | </style>
521 | 
522 | <script>
523 |     import router from '@system.router';
524 |     import prompt from '@system.prompt';
525 |     module.exports = {
526 |         data: {
527 |             active: '',
528 |             childActive: '',
529 | 			slideAnimation:'',
530 | 			showCover:false,
531 | 			menuList:[1,2,3,4,5]
532 |         },
533 |         showChild: function (target) {
534 |             if (this.active == target) {
535 |                 this.active = '';
536 | 				this.childActive = '';
537 |             } else {
538 |                 this.active = target;
539 |             }
540 |         },
541 |         showChildren: function (target) {
542 |             if (this.childActive == target) {
543 |                 this.childActive = '';
544 |             } else {
545 |                 this.childActive = target;
546 |             }
547 |         },
548 |         changeActive: function (e) {
549 |             var title = e.index == 0 ? '快应用组件展示' : (e.index == 1 ? '快应用接口能力展示' : '快应用模板展示');
550 |             this.$page.setTitleBar({
551 |                 text: title
552 |             });
553 |         },
554 |         showDetail: function (uri) {
555 |             router.push({
556 |                 uri: uri
557 |             })
558 |         },
559 | 		hideMenu:function () {
560 | 			this.setSlide();
561 | 		},
562 | 		onMenuPress:function () {
563 | 			this.setSlide();
564 | 		},
565 | 		swipeShowMenu:function(e){
566 | 			if(e.direction == 'right'){
567 | 				this.setSlide();
568 | 			}
569 | 		},
570 | 		swipeCloseMenu:function(e){
571 | 			if(e.direction == 'left'){
572 | 				this.setSlide();
573 | 			}
574 | 		},
575 | 		setSlide:function(){
576 | 			this.showCover = !this.showCover;
577 | 			if(this.showCover){
578 | 				this.slideAnimation = 'slide-in';
579 | 			}else{
580 | 				this.slideAnimation = 'slide-out';
581 | 			}
582 | 		}
583 |     }
584 | </script>
585 | 


--------------------------------------------------------------------------------