├── .babelrc ├── .eslintrc.json ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── 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 │ ├── index.md │ └── title.png └── 20180401 │ ├── 0.jpg │ ├── 1.gif │ ├── 2.jpg │ ├── 3.jpg │ └── index.md ├── build ├── About │ ├── index.js │ └── index.js.map ├── Common │ └── Image │ │ ├── back.png │ │ ├── contact_list_normal.png │ │ ├── contact_list_pressed.png │ │ ├── dingyue.png │ │ ├── find_normal.png │ │ ├── find_pressed.png │ │ ├── icon_de_nearby.png │ │ ├── icon_de_ping.png │ │ ├── icon_de_saoyisao.png │ │ ├── icon_de_yao.png │ │ ├── icon_me_card.png │ │ ├── icon_me_collect.png │ │ ├── icon_me_money.png │ │ ├── icon_me_photo.png │ │ ├── icon_me_setting.png │ │ ├── icon_me_smail.png │ │ ├── lanucher.jpg │ │ ├── logo.png │ │ ├── plus.png │ │ ├── profile_normal.png │ │ ├── profile_pressed.png │ │ ├── qr.png │ │ ├── search.png │ │ ├── v2.png │ │ ├── wechat.ttf │ │ ├── weixin_normal.png │ │ └── weixin_pressed.png ├── Demo │ ├── comm │ │ ├── father.js │ │ └── father.js.map │ ├── comm2 │ │ ├── father.js │ │ └── father.js.map │ ├── index.js │ └── index.js.map ├── DemoDetail │ ├── index.js │ └── index.js.map ├── GZH │ ├── index.js │ └── index.js.map ├── Main │ ├── index.js │ └── index.js.map ├── Web │ ├── index.js │ └── index.js.map ├── Welcome │ ├── index.js │ └── index.js.map ├── app.js ├── app.js.map └── manifest.json ├── dist └── com.application.demo.rpk ├── package.json ├── sign └── debug │ ├── certificate.pem │ └── private.pem ├── src ├── About │ └── index.ux ├── Common │ ├── Image │ │ ├── back.png │ │ ├── contact_list_normal.png │ │ ├── contact_list_pressed.png │ │ ├── dingyue.png │ │ ├── find_normal.png │ │ ├── find_pressed.png │ │ ├── icon_de_nearby.png │ │ ├── icon_de_ping.png │ │ ├── icon_de_saoyisao.png │ │ ├── icon_de_yao.png │ │ ├── icon_me_card.png │ │ ├── icon_me_collect.png │ │ ├── icon_me_money.png │ │ ├── icon_me_photo.png │ │ ├── icon_me_setting.png │ │ ├── icon_me_smail.png │ │ ├── lanucher.jpg │ │ ├── logo.png │ │ ├── plus.png │ │ ├── profile_normal.png │ │ ├── profile_pressed.png │ │ ├── qr.png │ │ ├── search.png │ │ ├── v2.png │ │ ├── wechat.ttf │ │ ├── weixin_normal.png │ │ └── weixin_pressed.png │ └── css │ │ ├── list.css │ │ └── title.css ├── Demo │ ├── comm │ │ ├── father.ux │ │ └── son.ux │ ├── comm2 │ │ ├── father.ux │ │ ├── son.ux │ │ └── son2.ux │ ├── index.ux │ └── webtest │ │ └── index.ux ├── DemoDetail │ └── index.ux ├── GZH │ └── index.ux ├── Main │ ├── contacts.ux │ ├── friends.ux │ ├── index.ux │ ├── me.ux │ └── weixin.ux ├── Title │ └── index.ux ├── Web │ └── index.ux ├── Welcome │ └── index.ux ├── app.ux ├── manifest.json └── util.js └── tp.ux /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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) -------------------------------------------------------------------------------- /assets/0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/4d70c64803a663cb2f54a16edfc748647e9024f2/assets/0.png -------------------------------------------------------------------------------- /assets/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/4d70c64803a663cb2f54a16edfc748647e9024f2/assets/1.png -------------------------------------------------------------------------------- /assets/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/4d70c64803a663cb2f54a16edfc748647e9024f2/assets/2.png -------------------------------------------------------------------------------- /assets/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/4d70c64803a663cb2f54a16edfc748647e9024f2/assets/3.png -------------------------------------------------------------------------------- /assets/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/4d70c64803a663cb2f54a16edfc748647e9024f2/assets/4.png -------------------------------------------------------------------------------- /assets/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/4d70c64803a663cb2f54a16edfc748647e9024f2/assets/5.png -------------------------------------------------------------------------------- /assets/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/4d70c64803a663cb2f54a16edfc748647e9024f2/assets/6.png -------------------------------------------------------------------------------- /assets/wx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/4d70c64803a663cb2f54a16edfc748647e9024f2/assets/wx.jpg -------------------------------------------------------------------------------- /blog/20180325/index.md: -------------------------------------------------------------------------------- 1 | # 快应用学习教程-入门 2 | 3 | > 官方文档地址：https://doc.quickapp.cn/ 4 | 5 | ## 环境搭建 6 | 7 | ### 安装nodejs 8 | 9 | 官方建议不使用8.0.*版本．这个版本内部ZipStream实现与node-archive包不兼容，会引起报； 10 | 11 | Windows用户我推荐下载[node v7.10.1-x86.msi](https://nodejs.org/download/release/v7.10.1/node-v7.10.1-x86.msi) 一路点next就ok； 12 | 13 | 对于Android开发者来说对node不是很熟悉，没有关系，推荐看看知乎这篇文章[Node.js是用来做什么的？](https://www.zhihu.com/question/33578075)先了解一下。这里用node是把它作为搭建开发工具环境用的，主要用于开发、debug、编译和打包。 14 | 15 | `开发快应用真正用到的还是html(ux)、css和js的语法` 16 | 17 | 安装完node环境后建议安装cnpm，这样下载库时会走淘宝的node仓库，会更快： 18 | 19 | ``` 20 | npm install -g cnpm --registry=https://registry.npm.taobao.org 21 | ``` 22 | 23 | 安装完cnpm后，所有使用npm的地方都可以换做cnpm 24 | 25 | 26 | ### 安装hap-toolkit 27 | 28 | ``` 29 | cnpm install -g hap-toolkit 30 | ``` 31 | -g 参数是全局安装在环境变量能访问的地方，这样直接在命令行中可以执行hap命令，查看版本 32 | 33 | ``` 34 | hap -V 35 | ``` 36 | 37 | hap 是官方给的辅助开发工具，主要功能是初始化工程模板，这样就省去了初始化繁琐的工作； 38 | 39 | ## 开发工具 40 | 41 | 开发工具有很多种选择，我个人很喜欢VsCode [VsCode 下载地址](https://code.visualstudio.com/),推荐用VsCode 42 | 43 | 温馨提示：VsCode 快捷键 `Ctrl+Shift+y`可以调出调试控制台、终端 44 | 45 | ## 创建项目 46 | 47 | ### 创建 48 | 49 | ``` 50 | hap init 51 | ``` 52 | 53 | ``` 54 | ├── node_modules 55 | ├── sign rpk包签名模块 56 | │ └── debug 调试环境 57 | │ ├── certificate.pem 证书文件 58 | │ └── private.pem 私钥文件 59 | ├── src 60 | │ ├── Common 公用的资源文件和组件文件 61 | │ │ └── logo.png manifest.json中配置的icon 62 | │ ├── Demo 页面目录 63 | │ | └── index.ux 页面文件，文件名不必与父文件夹相同 64 | │ ├── app.ux APP文件（用于包括公用资源） 65 | │ └── manifest.json 项目配置文件（如：应用描述、接口申明、页面路由等） 66 | └── package.json 定义项目需要的各种模块及配置信息，npm install根据这个配置文件，自动下载所需的运行和开发环境 67 | 68 | ``` 69 | 70 | 目录的简要说明如下： 71 | 72 | - src：项目源文件夹 73 | - node_modules：项目的依赖类库 74 | - sign：签名模块，当前仅有debug签名，如果内测上线，请添加release文件夹，增加线上签名；签名生成方法请参考文档：编译工具的openssl 75 | 76 | Web前端同学可能不太了解sign，可以看看这篇文章[Android 你了解Android签名文件吗?](https://blog.csdn.net/u010316858/article/details/53159678) 77 | 78 | 79 | ### 编译 80 | 81 | 请先将命令行执行目录切换至你刚创建的目录下，后面所有命令都在这个目录下执行。 82 | 83 | 根据package.json [nodejs package.json详解](https://blog.csdn.net/hh12211221/article/details/77567627)安装库： 84 | 85 | ``` 86 | cnpm install 87 | ``` 88 | 89 | 编译 90 | 91 | ``` 92 | npm run build 93 | ``` 94 | 95 | 实际上是调用package.json中的scripts-->build命令,[npm scripts 使用指南](http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html) 96 | 97 | ``` 98 | { 99 | "scripts": { 100 | "build": "cross-env NODE_PLATFORM=na NODE_PHASE=dv webpack --config ./node_modules/hap-tools/webpack.config.js" 101 | } 102 | } 103 | ``` 104 | 105 | 编译打包成功后，项目根目录下会生成文件夹：build、dist 106 | 107 | - build：临时产出，包含编译后的页面js，图片等 108 | - dist：最终产出，包含rpk文件。其实是将build目录下的资源打包压缩为一个文件，后缀名为rpk，这个rpk文件就是项目编译后的最终产出 109 | 110 | 111 | ![](https://gitee.com/lefutong/assets/raw/master/quickcn/struct.png) 112 | 113 | 我们大概看看其主要文件是.ux，里面的结构分为template，style，script三大块，这个结构是典型的Web前端[MVVM](https://baike.baidu.com/item/MVVM/96310?fr=aladdin)结构，用到了CSS [Flex](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)看来一个.ux就是一个模块，类似一个Android中的Activity。manifest.json就类似Android中的AndroidManifest.xml 114 | 115 | 116 | `rpk文件就是快应用安装包类似Android的APK包，它只能在支持快应用的Android操作系统或Android App里执行` 117 | 118 | ### 自动重新编译 119 | 120 | 如果希望每次修改源代码文件后，都自动重新编译项目，请使用如下命令： 121 | 122 | ``` 123 | npm run watch 124 | ``` 125 | 126 | `注意：` 127 | 128 | 如果报错遇到Cannot find module '.../webpack.config.js'，请重新执行一次hap update --force。这是由于高版本的npm在npm install时，会校验并删除了node_modules下部分文件夹，导致报错。而hap update --force会重新复制hap-tools文件夹到node_modules中 129 | 130 | ## 安装debug工具 131 | 132 | ### 安装debug APP 133 | 134 | [Debug APP 下载](https://statres.quickapp.cn/quickapp/quickapp/201803/file/201803221213415527241.apk) 135 | 136 | 安装后截图如下： 137 | 138 | ![](https://doc.quickapp.cn/tutorial/getting-started/hello-world.1.png) 139 | 140 | 说明如下： 141 | 142 | - 扫码安装：配置HTTP服务器地址，下载rpk包，并唤起平台运行rpk包 143 | - 本地安装：选择手机文件系统中的rpk包，并唤起平台运行rpk包 144 | - 在线更新：重新发送HTTP请求，更新rpk包，并唤起平台运行rpk包 145 | - 开始调试：唤起平台运行rpk包，并启动远程调试工具 146 | 147 | 目前大部分手机系统还没有集成快应用的执行环境,所以还要安装运行环境APP，[运行环境APP下载](https://statres.quickapp.cn/quickapp/quickapp/201803/file/20180322121456491785.apk) 安装运行环境APP。然后再打开debug APP。 148 | 149 | ## 运行 rpk包 150 | 151 | 在调试器中唤起平台打开rpk包有多种途径，以下两者选其一即可，推荐第一种途径： 152 | 153 | - HTTP请求：开发者启动HTTP服务器，打开调试器，点击扫码安装配置HTTP服务器地址，下载rpk包，并唤起平台运行rpk包 154 | - 本地安装：开发者将rpk包拷贝到手机文件系统，打开调试器，点击本地安装选择rpk包，并唤起平台运行rpk包 155 | 156 | 1. 扫码安装 157 | 158 | 启动HTTP服务器 159 | 160 | 在终端中新建一个窗口，进入项目的根目录运行如下命令，启动本地服务器（默认端口为12306） 161 | 162 | ``` 163 | npm run server 164 | ``` 165 | 166 | 自定义端口（如：8080） 167 | 168 | ``` 169 | npm run server -- --port 8080 170 | ``` 171 | 在Debug APP上预览运行效果 172 | 173 | 配置HTTP服务器地址有两种方式，以下两者选其一即可： 174 | 175 | - 打开调试器 --> 点击"扫码安装"，扫描终端窗口中的二维码即可完成配置（若扫描不成功，可在浏览器中打开页面：http://localhost:port，扫描页面中的二维码） 176 | 177 | - 打开调试器 --> 点击右上角menu --> 设置，输入终端窗口中提示的HTTP服务器地址 178 | 179 | 配置完成后，若没有自动唤起平台运行rpk包，点击在线更新唤起平台运行rpk包，若提示安装失败，请检查执行npm run server的终端窗口是否正常运行 180 | 181 | 运行效果如下图： 182 | 183 | ![效果图](https://doc.quickapp.cn/tutorial/getting-started/hello-world.2.png) 184 | 185 | 2. 本地安装 186 | 187 | 复制rpk包到手机中 188 | 189 | 将/dist目录下编译产出的rpk包通过USB数据线或其他方式，复制到手机文件系统中 190 | 191 | 本地安装rpk包 192 | 193 | 打开调试器 --> 点击"本地安装"，选择手机文件系统中的rpk包，并自动唤起平台运行rpk包，查看效果 194 | 195 | ## 调试 196 | 197 | ### 日志输出 198 | 199 | 1. 修改日志等级 200 | 201 | 打开工程根目录下的src文件夹的manifest.json，找到config配置，将logLevel修改为最低级别debug，即：允许所有级别的日志输出 202 | 203 | 修改后/src/manifest.json中config配置代码如下： 204 | 205 | ``` 206 | { 207 | 　"config": { 208 | 　　"logLevel": "debug" 209 | } 210 | } 211 | ``` 212 | 213 | 2. 在js中输出日志 214 | 215 | 当js代码未按需求正确运行，输出日志能帮助开发者快速定位问题；与传统前端开发一致，使用console对象输出日志，如下： 216 | 217 | ``` 218 | console.debug('debug') 219 | console.log('log') 220 | console.info('info') 221 | console.warn('warn') 222 | console.error('error') 223 | ``` 224 | 225 | 3. 查看日志 226 | 227 | 开发者可以使用Android Studio的Android Monitor输出来查看日志。 228 | 229 | 先添加一段console.debug("hello quickapp") 230 | 231 | ![](https://gitee.com/lefutong/assets/raw/master/quickcn/add-log.png) 232 | 233 | 然后 234 | 235 | ``` 236 | npm run build 237 | ``` 238 | 239 | ``` 240 | npm run server 241 | ``` 242 | 终端出现如下： 243 | 244 | ![](https://gitee.com/lefutong/assets/raw/master/quickcn/run-server.png) 245 | 246 | 247 | 然后打开Android Monitor 248 | 249 | ![](https://gitee.com/lefutong/assets/raw/master/quickcn/Android-Monitor.png) 250 | 251 | 用Debug App 扫描二维码安装； 252 | 253 | 254 | 255 | ### 远程调试 256 | 257 | 如果你没有安装Android-Monitor，就可以通过远程调试调试快应用，用hap-toolkit的远程调试命令 、chrome devtools调试界面，来调试手机app端的页面 258 | 259 | - 开发者可以通过命令行终端或者调试服务器主页看到提供扫描的二维码 260 | - 开发者通过快应用调试器扫码安装按钮，扫码安装待调试的rpk文件 261 | - 开发者点击快应用调试器中的开始调试按钮，开始调试 262 | 263 | 用Debug App 扫描二维码安装后点击开始调试按钮： 264 | 265 | ![](https://gitee.com/lefutong/assets/raw/master/quickcn/debug.png) 266 | 267 | 如果安装了Chrome浏览器，debug程序会自动调起PC Chrome devtools： 268 | 269 | ![](https://gitee.com/lefutong/assets/raw/master/quickcn/debug2.png) 270 | 271 | 272 | 大家可以改一些代码自己跑起来看看效果 273 | 274 | ## 与小程序对比 275 | 276 | 通过打开Android开发者选项中的'显示布局界面边界'功能可以看出界面是否是Android原始控件： 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 对比发现，快应用将html,js,css最终编译成Android原始控件了，这样快应用的体验最好 286 | 287 | 288 | ## 总结 289 | 290 | 总结一下前面都学到了什么： 291 | 292 | - 搭建环境，安装Node，hap，VsCode，Debug App，运行环境APP 293 | - 创建第一个项目，初识开发框架，开发语言 294 | - 编译安装debug rpk包 295 | - 和小程序对比，快应用编译程序为Android原始控件，这样体验最好 296 | 297 | 298 | ![](https://mmbiz.qpic.cn/mmbiz_png/YTPmnRDrr6Nw7FK5AVM0XvHOiclRvYgU04Egq5e31psT2FicDLjSgafvdCLPFibsg70Ck6ndLkGiaauYZxUv3h4CGA/0?wx_fmt=png) -------------------------------------------------------------------------------- /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 "在这里输入图片标题") -------------------------------------------------------------------------------- /blog/20180328/assets/0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/4d70c64803a663cb2f54a16edfc748647e9024f2/blog/20180328/assets/0.png -------------------------------------------------------------------------------- /blog/20180328/assets/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/4d70c64803a663cb2f54a16edfc748647e9024f2/blog/20180328/assets/1.png -------------------------------------------------------------------------------- /blog/20180328/assets/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/4d70c64803a663cb2f54a16edfc748647e9024f2/blog/20180328/assets/2.png -------------------------------------------------------------------------------- /blog/20180328/assets/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/4d70c64803a663cb2f54a16edfc748647e9024f2/blog/20180328/assets/3.png -------------------------------------------------------------------------------- /blog/20180328/assets/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/4d70c64803a663cb2f54a16edfc748647e9024f2/blog/20180328/assets/4.png -------------------------------------------------------------------------------- /blog/20180328/assets/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yale8848/quickapp-wechat/4d70c64803a663cb2f54a16edfc748647e9024f2/blog/20180328/assets/5.png -------------------------------------------------------------------------------- /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,创建好`