├── .gitignore ├── .npmignore ├── .babelrc ├── assets ├── 0.png ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png └── wx.jpg ├── blog ├── 20180325 │ └── index.md ├── 20180326 │ └── index.md ├── 20180328 │ ├── assets │ │ ├── 0.png │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ └── 5.png │ └── index.md ├── 20180331 │ ├── 0.png │ ├── title.png │ └── index.md └── 20180401 │ ├── 0.jpg │ ├── 1.gif │ ├── 2.jpg │ ├── 3.jpg │ └── index.md ├── src ├── Common │ ├── Image │ │ ├── qr.png │ │ ├── v2.png │ │ ├── back.png │ │ ├── logo.png │ │ ├── plus.png │ │ ├── dingyue.png │ │ ├── lanucher.jpg │ │ ├── search.png │ │ ├── wechat.ttf │ │ ├── find_normal.png │ │ ├── find_pressed.png │ │ ├── icon_de_ping.png │ │ ├── icon_de_yao.png │ │ ├── icon_me_card.png │ │ ├── icon_me_money.png │ │ ├── icon_me_photo.png │ │ ├── icon_me_smail.png │ │ ├── weixin_normal.png │ │ ├── icon_de_nearby.png │ │ ├── icon_me_collect.png │ │ ├── icon_me_setting.png │ │ ├── profile_normal.png │ │ ├── profile_pressed.png │ │ ├── weixin_pressed.png │ │ ├── icon_de_saoyisao.png │ │ ├── contact_list_normal.png │ │ └── contact_list_pressed.png │ └── css │ │ ├── title.css │ │ └── list.css ├── app.ux ├── Welcome │ └── index.ux ├── DemoDetail │ └── index.ux ├── Demo │ ├── index.ux │ ├── webtest │ │ └── index.ux │ ├── comm2 │ │ ├── father.ux │ │ ├── son2.ux │ │ └── son.ux │ └── comm │ │ ├── father.ux │ │ └── son.ux ├── Web │ └── index.ux ├── util.js ├── Title │ └── index.ux ├── Main │ ├── friends.ux │ ├── me.ux │ ├── weixin.ux │ ├── index.ux │ └── contacts.ux ├── GZH │ └── index.ux ├── manifest.json └── About │ └── index.ux ├── dist └── com.application.demo.rpk ├── tp.ux ├── README.md ├── LICENSE ├── sign └── debug │ ├── certificate.pem │ └── private.pem ├── .eslintrc.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } -------------------------------------------------------------------------------- /assets/0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/assets/0.png -------------------------------------------------------------------------------- /assets/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/assets/1.png -------------------------------------------------------------------------------- /assets/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/assets/2.png -------------------------------------------------------------------------------- /assets/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/assets/3.png -------------------------------------------------------------------------------- /assets/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/assets/4.png -------------------------------------------------------------------------------- /assets/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/assets/5.png -------------------------------------------------------------------------------- /assets/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/assets/6.png -------------------------------------------------------------------------------- /assets/wx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/assets/wx.jpg -------------------------------------------------------------------------------- /blog/20180331/0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/blog/20180331/0.png -------------------------------------------------------------------------------- /blog/20180401/0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/blog/20180401/0.jpg -------------------------------------------------------------------------------- /blog/20180401/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/blog/20180401/1.gif -------------------------------------------------------------------------------- /blog/20180401/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/blog/20180401/2.jpg -------------------------------------------------------------------------------- /blog/20180401/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/blog/20180401/3.jpg -------------------------------------------------------------------------------- /blog/20180331/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/blog/20180331/title.png -------------------------------------------------------------------------------- /src/Common/Image/qr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/qr.png -------------------------------------------------------------------------------- /src/Common/Image/v2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/v2.png -------------------------------------------------------------------------------- /blog/20180328/assets/0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/blog/20180328/assets/0.png -------------------------------------------------------------------------------- /blog/20180328/assets/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/blog/20180328/assets/1.png -------------------------------------------------------------------------------- /blog/20180328/assets/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/blog/20180328/assets/2.png -------------------------------------------------------------------------------- /blog/20180328/assets/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/blog/20180328/assets/3.png -------------------------------------------------------------------------------- /blog/20180328/assets/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/blog/20180328/assets/4.png -------------------------------------------------------------------------------- /blog/20180328/assets/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/blog/20180328/assets/5.png -------------------------------------------------------------------------------- /src/Common/Image/back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/back.png -------------------------------------------------------------------------------- /src/Common/Image/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/logo.png -------------------------------------------------------------------------------- /src/Common/Image/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/plus.png -------------------------------------------------------------------------------- /dist/com.application.demo.rpk: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/dist/com.application.demo.rpk -------------------------------------------------------------------------------- /src/Common/Image/dingyue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/dingyue.png -------------------------------------------------------------------------------- /src/Common/Image/lanucher.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/lanucher.jpg -------------------------------------------------------------------------------- /src/Common/Image/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/search.png -------------------------------------------------------------------------------- /src/Common/Image/wechat.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/wechat.ttf -------------------------------------------------------------------------------- /src/Common/Image/find_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/find_normal.png -------------------------------------------------------------------------------- /src/Common/Image/find_pressed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/find_pressed.png -------------------------------------------------------------------------------- /src/Common/Image/icon_de_ping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/icon_de_ping.png -------------------------------------------------------------------------------- /src/Common/Image/icon_de_yao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/icon_de_yao.png -------------------------------------------------------------------------------- /src/Common/Image/icon_me_card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/icon_me_card.png -------------------------------------------------------------------------------- /src/Common/Image/icon_me_money.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/icon_me_money.png -------------------------------------------------------------------------------- /src/Common/Image/icon_me_photo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/icon_me_photo.png -------------------------------------------------------------------------------- /src/Common/Image/icon_me_smail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/icon_me_smail.png -------------------------------------------------------------------------------- /src/Common/Image/weixin_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/weixin_normal.png -------------------------------------------------------------------------------- /src/Common/Image/icon_de_nearby.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/icon_de_nearby.png -------------------------------------------------------------------------------- /src/Common/Image/icon_me_collect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/icon_me_collect.png -------------------------------------------------------------------------------- /src/Common/Image/icon_me_setting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/icon_me_setting.png -------------------------------------------------------------------------------- /src/Common/Image/profile_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/profile_normal.png -------------------------------------------------------------------------------- /src/Common/Image/profile_pressed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/profile_pressed.png -------------------------------------------------------------------------------- /src/Common/Image/weixin_pressed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/weixin_pressed.png -------------------------------------------------------------------------------- /src/Common/Image/icon_de_saoyisao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/icon_de_saoyisao.png -------------------------------------------------------------------------------- /src/Common/Image/contact_list_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/contact_list_normal.png -------------------------------------------------------------------------------- /src/Common/Image/contact_list_pressed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/HEAD/src/Common/Image/contact_list_pressed.png -------------------------------------------------------------------------------- /tp.ux: -------------------------------------------------------------------------------- 1 | 5 | 10 | -------------------------------------------------------------------------------- /src/app.ux: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /blog/20180401/index.md: -------------------------------------------------------------------------------- 1 | # 小程序快应用要互相兼容了 2 | 3 | 对于程序员来说，程序互不不兼容是令程序员非常头疼的事情。 4 | 5 | ![](./0.jpg) 6 | 7 | 好消息是小程序快应用互相兼容了，程序员喜大奔普的日子来了。 8 | 9 | ![](./1.gif) 10 | 11 | 根据腾信最新消息，马哥已经发布最新消息称小程序快应用要互相兼容，这样小程序和快应用之间的优势就互补了，马哥称如果互相兼容就有以下好处： 12 | 13 | 14 | - 小程序可以直接由系统调用，这样可以更快； 15 | 16 | - 小程序彻底编译成系统控件，这样体验更流畅； 17 | 18 | - 小程序入口也变多了，可以直接在各大应用市场搜索启动； 19 | 20 | - 对于快应用来说，可以直接从微信里拉起了； 21 | 22 | - 互相兼容，解放程序员； 23 | 24 | - 每一天都要快乐，特别是今天； 25 | 26 | ![](./2.jpg) -------------------------------------------------------------------------------- /src/Welcome/index.ux: -------------------------------------------------------------------------------- 1 | 6 | 12 | -------------------------------------------------------------------------------- /src/DemoDetail/index.ux: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | 21 | 35 | -------------------------------------------------------------------------------- /src/Common/css/title.css: -------------------------------------------------------------------------------- 1 | #title { 2 | background-color: #272727; 3 | height: 100px; 4 | align-items: center; 5 | justify-content: space-between 6 | } 7 | 8 | #title #name { 9 | font-size: 40px; 10 | margin-left: 30px; 11 | color: #FFFFFF; 12 | } 13 | 14 | #title #back { 15 | width: 50px; 16 | height: 50px; 17 | margin-left: 30px; 18 | } 19 | 20 | #title>.actions { 21 | height: 100%; 22 | align-items: center; 23 | margin-right: 30px; 24 | } 25 | 26 | .search { 27 | width: 50px; 28 | height: 50px; 29 | background-image: url(/Common/Image/search.png); 30 | margin-right: 50px; 31 | } 32 | 33 | .plus { 34 | width: 40px; 35 | height: 40px; 36 | background-image: url(/Common/Image/plus.png); 37 | } -------------------------------------------------------------------------------- /src/Common/css/list.css: -------------------------------------------------------------------------------- 1 | .content-item { 2 | align-items: center; 3 | justify-content: space-between; 4 | padding: 20px; 5 | border-bottom-color: #eeeeee; 6 | border-bottom-width: 1px; 7 | } 8 | 9 | .content-item>.right { 10 | flex-direction: column; 11 | height: 100%; 12 | } 13 | 14 | .content-item>.right text { 15 | color: #aaaaaa; 16 | font-size: 30px; 17 | } 18 | 19 | .content-item>.left { 20 | align-items: center 21 | } 22 | 23 | .content-item>.left>.img { 24 | width: 80px; 25 | height: 80px; 26 | } 27 | 28 | .content-item>.left>.texts { 29 | flex-direction: column; 30 | margin-left: 20px; 31 | } 32 | 33 | .content-item>.left .name { 34 | color: #000000; 35 | font-size: 36px; 36 | } 37 | 38 | .content-item>.left .msg { 39 | font-size: 28px; 40 | color: #aaaaaa; 41 | } -------------------------------------------------------------------------------- /src/Demo/index.ux: -------------------------------------------------------------------------------- 1 | 9 | 10 | 32 | 33 | 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 快应用实现的微信Demo 2 | 3 | > 欢迎大家一起学习快应用开发 4 | 5 | 6 | 7 | 8 | 9 | 10 | ## 目前进度 11 | 12 | - [x] 基本UI 13 | - [ ] 详细功能 14 | 15 | ## [入门教程](https://juejin.im/post/5ab4d4c36fb9a028b92d149c) 16 | 17 | ## 快应用开发中发现的问题： 18 | 19 | ### CSS问题 20 | 21 | - 默认是flex布局，css就不用显示设置了； 22 | - 一定要看文档提示，有些属性不支持，比如 `justify-content` 不支持 `space-around` 23 | 24 | ### 布局问题 25 | 26 | - 自定义布局导入到父布局后默认宽高还是屏幕尺寸，并不是限制到父布局宽高 27 | 28 | ### 事件 29 | 30 | - 没有touch事件 31 | 32 | ### DOM 33 | 34 | - 不能操作document，比如所document.getElementById 35 | - onReady后才能操作DOM 36 | - $element(id) 不能直接修改style 37 | 38 | ### MVVM 39 | 40 | - VM的属性值必须在onInit之前修改好，等onReady后再修改无效，view不能更新 41 | 42 | ## 欢迎大家关注`快应用栈`公众号 43 | 44 | ![](/assets/wx.jpg) -------------------------------------------------------------------------------- /src/Demo/webtest/index.ux: -------------------------------------------------------------------------------- 1 | 9 | 10 | 32 | 33 | 48 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Yale 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /sign/debug/certificate.pem: -------------------------------------------------------------------------------- 1 | -----BEGIN CERTIFICATE----- 2 | MIIDMTCCAhmgAwIBAgIJAMKpjyszxkDpMA0GCSqGSIb3DQEBCwUAMC4xCzAJBgNV 3 | BAYTAkNOMQwwCgYDVQQKDANSUEsxETAPBgNVBAMMCFJQS0RlYnVnMCAXDTE3MDQx 4 | OTAyMzE0OVoYDzIxMTYwMzI2MDIzMTQ5WjAuMQswCQYDVQQGEwJDTjEMMAoGA1UE 5 | CgwDUlBLMREwDwYDVQQDDAhSUEtEZWJ1ZzCCASIwDQYJKoZIhvcNAQEBBQADggEP 6 | ADCCAQoCggEBAK3kPd9jzvTctTIA3XNZVv9cHHDbAc6nTBfdZp9mtPOTkXFpvyCb 7 | kL0QjOog0+1pv8D7dFeP4ptWXU5CT3ImvaPR+16dAtMRcsxEr5q4zieJzx3O6huL 8 | UBa1k+xrzjXpRzkcOysmc8fTxt0tAwbDgJ2AA5TlXLTcVyb7GmJ+hl5CjnhoG5NN 9 | LrkqI7S29c1U3uokj8Q7hzaj0TURu/uB5ZIMCLZY9KFDugqaEcvmUyJiD0fuV6sA 10 | O/4kpiZUOnhV8/xWpRbMI4WFQsfgLOCV+X9uzUa29D677y//46t/EDSuQTHyBZbl 11 | AcNMENkpMWZsH7J/+F19+U0/Hd5bJgneVRkCAwEAAaNQME4wHQYDVR0OBBYEFKDN 12 | SZtt47ttOBDQzIchFYyxsg3mMB8GA1UdIwQYMBaAFKDNSZtt47ttOBDQzIchFYyx 13 | sg3mMAwGA1UdEwQFMAMBAf8wDQYJKoZIhvcNAQELBQADggEBABaZctNrn4gLmNf/ 14 | eNJ3x5CJIPjPwm6j9nwKhtadJ6BF+TIzSkJuHSgxULjW436F37otv94NPzT5PCBF 15 | WxgXoqgLqnWwvsaqC4LUEjsZviWW4CB824YDUquEUVGFLE/U5KTZ7Kh1ceyUk4N8 16 | +mtkXkanWoBBk0OF24lNrAsNLB63yTLr9HxEe75+kmvxf1qVJUGtaOEWIhiFMiAB 17 | 5D4w/j2EFWktumjuy5TTwU0zhl52bc8V9SNixM1IaqzNrVPrdjv8viUX548pU3WT 18 | xZ5ylDsxhMC1q4BXQVeIY8C0cMEX+WHOmOCvWrkxCkP91pKsSPkuVrWlzrkn8Ojo 19 | swP6sBw= 20 | -----END CERTIFICATE----- 21 | -------------------------------------------------------------------------------- /blog/20180331/index.md: -------------------------------------------------------------------------------- 1 | # 快应用中的‘EventBus’ 2 | 3 | > 前边一片文章 `快应用教程-实现自定义组件` 已经讲过如何自定义组件和组件之间通信，今天要讲的BroadcastChannel不同于前面的方式，BroadcastChannel可以让通信彻底解耦，不同页面、组件之间都可以用。BroadcastChannel就像是Android界的EventBus。 4 | 5 | 以下用到的代码例子都在这里[快应用实现的微信Demo](https://github.com/yale8848/quickapp-wechat): 6 | 7 | ``` 8 | git clone https://github.com/yale8848/quickapp-wechat 9 | cd quickapp-wechat 10 | git checkout v0.1.1 11 | 12 | ``` 13 | 14 | BroadcastChannel就是一种订阅发布组件，发布者给某一事件发送消息，所有订阅相同事件的订阅者会收到同一个消息； 15 | 16 | ## 订阅事件 17 | 18 | 订阅'说话'事件 19 | 20 | ``` 21 | onInit() { 22 | this.sayEvent = new BroadcastChannel('say') 23 | 24 | this.sayEvent.onmessage = function (event) { 25 | 26 | } 27 | } 28 | ``` 29 | 30 | ## 发布事件 31 | 32 | 发布'说话'事件，注意，`自己不会收到自己发的消息` 33 | 34 | ``` 35 | this.sayEvent = new BroadcastChannel('say'); 36 | this.sayEvent.postMessage('') 37 | 38 | ``` 39 | 40 | ## 关闭事件 41 | 42 | 当当前页面销毁的时候记得要关闭事件 43 | 44 | ``` 45 | onDestroy(){ 46 | this.sayEvent.close() 47 | } 48 | ``` 49 | 50 | 大家可以把manifest.json 中的entry改为`"entry": "Demo/comm"`试一试 51 | 52 | ![](./0.png) 53 | 54 | 55 | 56 | ## 欢迎大家关注`快应用栈`公众号 57 | 58 | ![输入图片说明](https://static.oschina.net/uploads/img/201803/27155338_kbfw.jpg "在这里输入图片标题") -------------------------------------------------------------------------------- /src/Demo/comm2/father.ux: -------------------------------------------------------------------------------- 1 | 2 | 3 | 15 | 34 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "commonjs": true 4 | }, 5 | "extends": "eslint:recommended", 6 | "parser": "babel-eslint", 7 | "parserOptions": { 8 | "sourceType": "module", 9 | "ecmaFeatures": { 10 | "experimentalObjectRestSpread": true, 11 | "jsx": true 12 | } 13 | }, 14 | "globals": { 15 | "loadData": false, 16 | "saveData": false, 17 | "history": false, 18 | "console": false, 19 | "setTimeout": false, 20 | "clearTimeout": false, 21 | "setInterval": false, 22 | "clearInterval": false 23 | }, 24 | "plugins": [ 25 | "hybrid" 26 | ], 27 | "rules": { 28 | "indent": [ 29 | "warn", 30 | 2 31 | ], 32 | "no-console": [ 33 | "warn", 34 | { 35 | "allow": [ 36 | "info", 37 | "warn", 38 | "error" 39 | ] 40 | } 41 | ], 42 | "no-unused-vars": [ 43 | "warn", 44 | { 45 | "varsIgnorePattern": "prompt" 46 | } 47 | ], 48 | "quotes": [ 49 | "warn", 50 | "single", 51 | { 52 | "avoidEscape": true, 53 | "allowTemplateLiterals": true 54 | } 55 | ], 56 | "linebreak-style": [ 57 | "warn", 58 | "unix" 59 | ], 60 | "semi": [ 61 | "warn", 62 | "never" 63 | ] 64 | } 65 | } -------------------------------------------------------------------------------- /src/Web/index.ux: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 16 | 17 | -------------------------------------------------------------------------------- /src/Demo/comm2/son2.ux: -------------------------------------------------------------------------------- 1 | 13 | 37 | -------------------------------------------------------------------------------- /blog/20180326/index.md: -------------------------------------------------------------------------------- 1 | ## 快应用实现的微信Demo，欢迎大家一起学习快应用开发 2 | 3 | [github地址，欢迎关注](https://github.com/yale8848/quickapp-wechat) 4 | 5 | > 目前搭建了基本UI 6 | 7 | ![输入图片说明](https://static.oschina.net/uploads/img/201803/27155010_NvLB.png "在这里输入图片标题") 8 | ![输入图片说明](https://static.oschina.net/uploads/img/201803/27155021_hJhV.png "在这里输入图片标题") 9 | ![输入图片说明](https://static.oschina.net/uploads/img/201803/27155040_TpS3.png "在这里输入图片标题") 10 | ![输入图片说明](https://static.oschina.net/uploads/img/201803/27155059_KLnW.png "在这里输入图片标题") 11 | ![输入图片说明](https://static.oschina.net/uploads/img/201803/27155112_eTHn.png "在这里输入图片标题") 12 | ![输入图片说明](https://static.oschina.net/uploads/img/201803/27155138_QU06.png "在这里输入图片标题") 13 | ![输入图片说明](https://static.oschina.net/uploads/img/201803/27155154_ZoT3.png "在这里输入图片标题") 14 | 15 | [快应用入门教程](https://juejin.im/post/5ab4d4c36fb9a028b92d149c) 16 | 17 | ## 快应用开发中发现的问题： 18 | ### CSS问题 19 | 20 | - 默认是flex布局，css就不用显示设置了； 21 | - 一定要看文档提示，有些属性不支持，比如 `justify-content` 不支持 `space-around` 22 | 23 | ### 布局问题 24 | 25 | - 自定义布局导入到父布局后默认宽高还是屏幕尺寸，并不是限制到父布局宽高 26 | 27 | ### 事件 28 | 29 | - 没有touch事件 30 | 31 | ### DOM 32 | 33 | - 不能操作document，比如所document.getElementById 34 | - onReady后才能操作DOM 35 | - $element(id) 不能直接修改style 36 | 37 | ### MVVM 38 | 39 | - VM的属性值必须在onInit之前修改好，等onReady后再修改无效，view不能更新 40 | 41 | ## [github地址，欢迎关注](https://github.com/yale8848/quickapp-wechat) 42 | ## 欢迎大家关注`快应用栈`公众号 43 | 44 | ![输入图片说明](https://static.oschina.net/uploads/img/201803/27155338_kbfw.jpg "在这里输入图片标题") -------------------------------------------------------------------------------- /src/Demo/comm2/son.ux: -------------------------------------------------------------------------------- 1 | 13 | 37 | -------------------------------------------------------------------------------- /src/util.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 显示菜单 3 | */ 4 | function showMenu () { 5 | var prompt = require('@system.prompt'); 6 | var router = require('@system.router'); 7 | var appInfo = require('@system.app').getInfo() 8 | prompt.showContextMenu({ 9 | itemList: ['保存桌面', '关于', '取消'], 10 | success: function (ret) { 11 | switch (ret.index) { 12 | case 0: 13 | // 保存桌面 14 | createShortcut(); 15 | break; 16 | case 1: 17 | // 关于 18 | router.push({ 19 | uri: '/About', 20 | params: { name: appInfo.name, icon: appInfo.icon } 21 | }) 22 | break; 23 | case 2: 24 | // 取消 25 | break; 26 | default: 27 | prompt.showToast({ message: 'error' }) 28 | } 29 | } 30 | }) 31 | } 32 | 33 | /** 34 | * 创建桌面图标 35 | * 注意：使用加载器测试`创建桌面快捷方式`功能时，请先在`系统设置`中打开`应用加载器`的`桌面快捷方式`权限 36 | */ 37 | function createShortcut () { 38 | var prompt = require('@system.prompt'); 39 | var shortcut = require('@system.shortcut'); 40 | shortcut.hasInstalled({ 41 | success: function (ret) { 42 | if (ret) { 43 | prompt.showToast({ message: '已创建桌面图标' }) 44 | } else { 45 | shortcut.install({ 46 | success: function () { 47 | prompt.showToast({ message: '成功创建桌面图标' }) 48 | }, 49 | fail: function (errmsg, errcode) { 50 | prompt.showToast({ message: 'error: ' + errcode + '---' + errmsg }) 51 | } 52 | }) 53 | } 54 | } 55 | }) 56 | } 57 | 58 | export default { 59 | showMenu, 60 | createShortcut 61 | } 62 | -------------------------------------------------------------------------------- /src/Demo/comm/father.ux: -------------------------------------------------------------------------------- 1 | 2 | 13 | 32 | -------------------------------------------------------------------------------- /sign/debug/private.pem: -------------------------------------------------------------------------------- 1 | -----BEGIN PRIVATE KEY----- 2 | MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCt5D3fY8703LUy 3 | AN1zWVb/XBxw2wHOp0wX3WafZrTzk5Fxab8gm5C9EIzqINPtab/A+3RXj+KbVl1O 4 | Qk9yJr2j0ftenQLTEXLMRK+auM4nic8dzuobi1AWtZPsa8416Uc5HDsrJnPH08bd 5 | LQMGw4CdgAOU5Vy03Fcm+xpifoZeQo54aBuTTS65KiO0tvXNVN7qJI/EO4c2o9E1 6 | Ebv7geWSDAi2WPShQ7oKmhHL5lMiYg9H7lerADv+JKYmVDp4VfP8VqUWzCOFhULH 7 | 4Czglfl/bs1GtvQ+u+8v/+OrfxA0rkEx8gWW5QHDTBDZKTFmbB+yf/hdfflNPx3e 8 | WyYJ3lUZAgMBAAECggEBAJTnCBBdUB+fSs1prjeS/gsmnfgJoY+K9H7PCIxgj3yw 9 | FXAvZAmRDKzJGlF2EOOQlTG0YNiGDj6EAtv7rjoKcINyULSg8IU6wLmn61MrAuUa 10 | fa+Bujgh4E/B5swhOHAztNhzkzsM70Hi17wXSislh+HWd7qteOgqcbqgdOR4gaj+ 11 | HUqtcxG3H3hCL3dWugnjLZMtestLKGHSSZvbQNjYM3kKy2LvO8NpxmDE4a+TXygK 12 | qhaZjmS/dc/nJBJzOfkzby58RvGbzlJflfW/Uu3/gizj13GFQKWonq1xh630RAhv 13 | xX5ySok2aAx/+/SiJSpNXvM09grQuoORSr7D1tm+5rECgYEA3vf0hRfua0XAOu6f 14 | pyzNvLRRJ/pEew7XpNPCyS2TuMTd1yvXjGVxQfP46N6x1IM3SRU0zE+LSk80EF7l 15 | u1Or7GyCEhabYNe/7P2F8ENP73Do0HwvcI1jGrgr6r9oK0J27Xei+f6Q0bgJOPI2 16 | qaLj+V37cOjkNSM1mhTjtDwK8k0CgYEAx6cMrkjHl1+lDIIOc3qAEL3jb3xQveYk 17 | WrMF/B+j048k6boU4VvFJAIyQxOxMNxLjw3/9+zXCFJT4WaZK3TMXlg614ASGx3H 18 | tKjJM9O07ywwMq1gbutFS4nHCg3L3Os6esL0SPwMdATR3Yh22n5OGI9o+/aURulL 19 | GPEXef1Z2/0CgYEAgmwp5LxV4vu+8Pnp+4DSq4ISQr861XyeGTUhKEp3sUm+tgFY 20 | KTChakHKpHS3Mqa6bQ5xft08je/8dWL9IHFWDIqAHxKIOsKY6oh1k0/cbyPtmx45 21 | Ja4efV+jmMHzrfJH3KnxdCg7D+GFy4CrBtlYXuJhlO81pft9fC6h7yh8ArUCgYBq 22 | gvkl5Zftbs4rnRq+iqTVyagTKvwcQzIz3PwdZHfO/rfPpUFMdNv4eN99n3zRN0Vs 23 | HSjoiEazntA3GLgwUdBRqLpDi4SdSMbo337vkksdqbJQ5uPiaMuAIBG6kF+pDSkW 24 | ovkWErlGD+gySoI10FozihaVDRhPuFgjB0PiBcIxtQKBgGNSzX+Bx5+ux1Qny0Sn 25 | SUcBtepLnO8M8wafoGNyehbMnLzfuMbaDiJOdozGlBNHZTtPB3r4AYb8WnltdKW0 26 | 7i3fk26YZGiMVeUJvewA6/LOBEaqMdwoNwnoptvbR6ehHeE/PPtRtge2cD3bPIM7 27 | U9VlWgfgj9Dxfwhslqb9hmyp 28 | -----END PRIVATE KEY----- 29 | -------------------------------------------------------------------------------- /src/Title/index.ux: -------------------------------------------------------------------------------- 1 | 14 | 54 | 55 | -------------------------------------------------------------------------------- /src/Main/friends.ux: -------------------------------------------------------------------------------- 1 | 31 | 69 | -------------------------------------------------------------------------------- /src/GZH/index.ux: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 28 | 29 | 35 | -------------------------------------------------------------------------------- /src/Demo/comm/son.ux: -------------------------------------------------------------------------------- 1 | 15 | 39 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "package": "com.application.demo", 3 | "name": "quickapp-wechat", 4 | "versionName": "1.0.0", 5 | "versionCode": "1", 6 | "minPlatformVersion": "101", 7 | "icon": "/Common/Image/logo.png", 8 | "features": [ 9 | { "name": "system.prompt" }, 10 | { "name": "system.device" }, 11 | { "name": "system.router" }, 12 | { "name": "system.shortcut" }, 13 | { "name": "system.webview" }, 14 | { "name": "system.prompt" } 15 | ], 16 | "permissions": [ 17 | { "origin": "*" } 18 | ], 19 | "config": { 20 | "logLevel": "debug" 21 | }, 22 | "router": { 23 | "entry": "Welcome", 24 | "pages": { 25 | "Welcome": { 26 | "component": "index" 27 | }, 28 | "Main": { 29 | "component": "index" 30 | }, 31 | "Demo": { 32 | "component": "index" 33 | }, 34 | "DemoDetail": { 35 | "component": "index" 36 | }, 37 | "About": { 38 | "component": "index" 39 | }, 40 | "GZH": { 41 | "component": "index" 42 | }, 43 | "Web": { 44 | "component": "index" 45 | }, 46 | "Demo/comm": { 47 | "component": "father" 48 | }, 49 | "Demo/comm2": { 50 | "component": "father" 51 | } 52 | 53 | } 54 | }, 55 | "display": { 56 | "titleBarBackgroundColor": "#272727", 57 | "titleBarTextColor": "#414141", 58 | "menu": true, 59 | "pages": { 60 | "Welcome": { 61 | "fullScreen": true, 62 | "titleBar": false 63 | }, 64 | "Main": { 65 | "titleBar": false 66 | }, 67 | "Demo": { 68 | "titleBarText": "示例页", 69 | "menu": false 70 | }, 71 | "DemoDetail": { 72 | "titleBarText": "详情页" 73 | }, 74 | "About": { 75 | "menu": false 76 | }, 77 | "GZH": { 78 | "titleBar": false 79 | }, 80 | "Web": { 81 | "titleBar": false 82 | } 83 | } 84 | } 85 | } -------------------------------------------------------------------------------- /src/Main/me.ux: -------------------------------------------------------------------------------- 1 | 44 | 107 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quickapp-wechat", 3 | "version": "1.0.0", 4 | "subversion": { 5 | "toolkit": "0.0.26", 6 | "packager": "0.0.5" 7 | }, 8 | "description": "", 9 | "scripts": { 10 | "build": "cross-env NODE_PLATFORM=na NODE_PHASE=dv webpack --config ./node_modules/hap-tools/webpack.config.js", 11 | "release": "cross-env NODE_PLATFORM=na NODE_PHASE=ol webpack --config ./node_modules/hap-tools/webpack.config.js", 12 | "clear": "rm -rf build/* && rm -rf dist/*", 13 | "server": "cross-env NODE_MOUNTED_ROUTER=\"debug bundle\" node ./node_modules/hap-tools/debugger/server/index.js", 14 | "debug": "npm run server -- --debug-only --port=8081", 15 | "notify": "node ./node_modules/hap-tools/debugger/command/notify.js", 16 | "watch": "cross-env NODE_PLATFORM=na NODE_PHASE=dv webpack --config ./node_modules/hap-tools/webpack.config.js --watch", 17 | "watch:na": "npm run na:dv -- --watch", 18 | "na": "npm run na:dv -- --watch", 19 | "lint": "./node_modules/.bin/eslint src/", 20 | "na:dv": "cross-env NODE_PLATFORM=na NODE_PHASE=dv webpack --config ./node_modules/hap-tools/webpack.config.js", 21 | "na:qa": "cross-env NODE_PLATFORM=na NODE_PHASE=qa webpack --config ./node_modules/hap-tools/webpack.config.js", 22 | "na:ol": "cross-env NODE_PLATFORM=na NODE_PHASE=ol webpack --config ./node_modules/hap-tools/webpack.config.js", 23 | "postinstall": "npm run postinstall:koaStatic && npm run postinstall:koaSend", 24 | "postinstall:koaStatic": "babel -d ./node_modules/koa-static ./node_modules/koa-static", 25 | "postinstall:koaSend": "babel -d ./node_modules/koa-send ./node_modules/koa-send" 26 | }, 27 | "dependencies": { 28 | "archiver": "^1.3.0", 29 | "babel-polyfill": "^6.26.0", 30 | "babel-preset-env": "^1.6.0", 31 | "babel-plugin-transform-runtime": "^6.9.0", 32 | "babel-runtime": "^6.9.2", 33 | "babel-template": "^6.24.1", 34 | "babel-traverse": "^6.24.1", 35 | "babel-types": "^6.24.1", 36 | "babylon": "^6.17.0", 37 | "babylon-jsx": "^1.0.0", 38 | "browserify": "^13.1.1", 39 | "chalk": "^1.1.3", 40 | "css": "~2.2.1", 41 | "escodegen": "~1.7.1", 42 | "esprima": "~2.7.0", 43 | "fs-extra": "^3.0.1", 44 | "fsmonitor": "^0.2.4", 45 | "hash-sum": "^1.0.2", 46 | "loader-utils": "~0.2.14", 47 | "md5": "^2.1.0", 48 | "parse5": "^3.0.0", 49 | "prompt": "^1.0.0", 50 | "qr-image": "^3.2.0", 51 | "resolve-bin": "^0.4.0", 52 | "serve": "^3.4.0", 53 | "source-map": "^0.5.6", 54 | "xtoolkit": "^0.1.7", 55 | "yargs": "^6.6.0", 56 | "jsrsasign": "^7.1.2", 57 | "jsrsasign-util": "^1.0.0", 58 | "qrcode-terminal": "^0.11.0", 59 | "socket.io": "^2.0.3", 60 | "tar": "^3.1.5" 61 | }, 62 | "devDependencies": { 63 | "babel-cli": "^6.10.1", 64 | "babel-core": "^6.10.4", 65 | "babel-eslint": "^8.2.1", 66 | "babel-loader": "^6.2.4", 67 | "babel-plugin-syntax-jsx": "^6.18.0", 68 | "babel-polyfill": "^6.23.0", 69 | "cross-env": "^3.2.4", 70 | "css-what": "^2.1.0", 71 | "eslint": "^4.3.0", 72 | "eslint-plugin-hybrid": "~0.0.1", 73 | "file-loader": "^0.9.0", 74 | "html-webpack-plugin": "^2.28.0", 75 | "hybrid-chai": "~0.0.1", 76 | "hybrid-mocha": "~0.0.1", 77 | "js-base64": "^2.1.9", 78 | "koa": "^2.3.0", 79 | "koa-body": "^2.5.0", 80 | "koa-router": "^7.2.1", 81 | "koa-send": "^4.1.1", 82 | "koa-static": "^4.0.1", 83 | "sinon": "^1.17.3", 84 | "sinon-chai": "^2.8.0", 85 | "url-loader": "^0.5.7", 86 | "webdriverio": "^4.8.0", 87 | "webpack": "~1.13.0", 88 | "webpack-dev-server": "^1.16.5" 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /src/Main/weixin.ux: -------------------------------------------------------------------------------- 1 | 24 | 25 | 28 | -------------------------------------------------------------------------------- /src/About/index.ux: -------------------------------------------------------------------------------- 1 | 38 | 39 | 135 | 136 | 162 | -------------------------------------------------------------------------------- /src/Main/index.ux: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 43 | 80 | -------------------------------------------------------------------------------- /src/Main/contacts.ux: -------------------------------------------------------------------------------- 1 | 34 | 35 | 73 | -------------------------------------------------------------------------------- /blog/20180328/index.md: -------------------------------------------------------------------------------- 1 | # 快应用教程-实现自定义组件 2 | 3 | 以下用到的代码例子都在这里[快应用实现的微信Demo](https://github.com/yale8848/quickapp-wechat): 4 | 5 | ``` 6 | git clone https://github.com/yale8848/quickapp-wechat 7 | cd quickapp-wechat 8 | git checkout v0.1.1 9 | 10 | ``` 11 | 12 | ## 为什么用自定义组件 13 | 14 | 自定义组件首先是一个组件，至少包含一个.ux文件，文件里把组件要实现的UI，逻辑封装起来共外界调用，这样可以让组件之间解耦，组件功能更加单一、灵活；举个微信Demo中的一个例子，我要实现微信的titlebar功能， 15 | 16 | ![](./assets/0.png) 17 | 18 | 当然我可以用系统的titlebar，但是为了功能更丰富，我把它作为一个组件来实现，下面来看看实现自定义组件的过程。 19 | 20 | ### 创建ux文件 21 | 22 | 如微信Demo里的Title/index.ux,创建好`