├── README.md ├── components-canvas ├── app.js ├── app.json ├── app.wxss ├── pages │ └── canvas │ │ ├── canvas.js │ │ ├── canvas.json │ │ ├── canvas.wxml │ │ └── canvas.wxss └── project.config.json ├── components-content ├── app.js ├── app.json ├── app.wxss ├── pages │ ├── icon │ │ ├── index.js │ │ ├── index.wxml │ │ └── index.wxss │ ├── progress │ │ ├── index.js │ │ ├── index.wxml │ │ └── index.wxss │ ├── richtext │ │ ├── index.js │ │ └── index.wxml │ └── text │ │ ├── index.js │ │ └── index.wxml ├── project.config.json └── utils │ └── util.js ├── components-form ├── app.js ├── app.json ├── app.wxss ├── common │ └── lib │ │ └── weui.wxss ├── pages │ ├── button │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ ├── checkbox │ │ ├── checkbox.js │ │ ├── checkbox.json │ │ ├── checkbox.wxml │ │ └── checkbox.wxss │ ├── form │ │ ├── form.js │ │ ├── form.json │ │ ├── form.wxml │ │ └── form.wxss │ ├── input │ │ ├── input.js │ │ ├── input.json │ │ ├── input.wxml │ │ └── input.wxss │ ├── label │ │ ├── label.js │ │ ├── label.json │ │ ├── label.wxml │ │ └── label.wxss │ ├── picker-view │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ ├── picker │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ ├── radio │ │ ├── radio.js │ │ ├── radio.json │ │ ├── radio.wxml │ │ └── radio.wxss │ ├── slider │ │ ├── slider.js │ │ ├── slider.json │ │ └── slider.wxml │ ├── switch │ │ ├── switch.js │ │ ├── switch.json │ │ ├── switch.wxml │ │ └── switch.wxss │ └── textarea │ │ ├── textarea.js │ │ ├── textarea.json │ │ ├── textarea.wxml │ │ └── textarea.wxss └── project.config.json ├── components-map ├── app.js ├── app.json ├── app.wxss ├── image │ ├── green_tri.png │ ├── icon64_appwx_logo.png │ ├── icon_API.png │ ├── icon_API_HL.png │ ├── icon_component.png │ ├── icon_component_HL.png │ ├── icon_foot.png │ ├── location.png │ ├── minus.png │ ├── pause.png │ ├── play.png │ ├── plus.png │ ├── record.png │ ├── stop.png │ ├── trash.png │ ├── wechat.png │ └── wechatHL.png ├── pages │ └── map │ │ ├── map.js │ │ ├── map.json │ │ └── map.wxml └── project.config.json ├── components-media ├── app.js ├── app.json ├── app.wxss ├── common │ └── lib │ │ └── weui.wxss ├── pages │ ├── audio │ │ ├── audio.js │ │ ├── audio.json │ │ └── audio.wxml │ ├── camera │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ ├── image │ │ ├── image.js │ │ ├── image.json │ │ ├── image.wxml │ │ └── image.wxss │ └── video │ │ ├── video.js │ │ ├── video.json │ │ ├── video.wxml │ │ └── video.wxss ├── project.config.json └── resources │ ├── kind │ ├── canvas.png │ ├── content.png │ ├── form.png │ ├── logo.png │ ├── map.png │ ├── media.png │ ├── nav.png │ └── view.png │ └── pic │ ├── 1.jpg │ └── 2.jpg ├── components-navigator ├── app.js ├── app.json ├── app.wxss ├── pages │ ├── pageA │ │ ├── navigator.js │ │ ├── navigator.json │ │ ├── navigator.wxml │ │ └── navigator.wxss │ ├── pageB │ │ ├── navigate.js │ │ ├── navigate.json │ │ └── navigate.wxml │ ├── pageC │ │ ├── redirect.js │ │ ├── redirect.json │ │ └── redirect.wxml │ └── pageD │ │ ├── pageD.js │ │ ├── pageD.json │ │ └── pageD.wxml └── project.config.json └── components-view ├── app.js ├── app.json ├── app.wxss ├── common ├── common.wxss └── weui.wxss ├── pages ├── cover │ ├── images │ │ ├── pause.png │ │ └── play.png │ ├── index.js │ ├── index.wxml │ └── index.wxss ├── movable │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── scroll-view │ ├── scrollview.js │ ├── scrollview.json │ ├── scrollview.wxml │ └── scrollview.wxss ├── swiper │ ├── swiper.js │ ├── swiper.json │ ├── swiper.wxml │ └── swiper.wxss └── view │ ├── index.js │ ├── index.wxml │ └── index.wxss ├── project.config.json └── utils └── util.js /README.md: -------------------------------------------------------------------------------- 1 | ### 简介 2 | 3 | 该项目为《9小时搞定微信小程序开发》课程的组件章节示例源码，便于大家学习参考。 4 | 5 | ### 目录 6 | 7 | 本项目共有七个目录，每个目录为一个单独的项目根目录，大家可分别添加到**微信开发者工具**中，下面是每个目录对应的组件： 8 | 9 | ├── components-view 视图容器类组件 10 | ├── components-content 基础内容类组件 11 | ├── components-form 表单组件类组件 12 | ├── components-navigator 导航组件 13 | ├── components-media 媒体组件 14 | ├── components-map 地图组件 15 | └── components-canvas 画布组件 16 | 17 | 导入项目时需要**注意两点**： 18 | 19 | * 填入自己小程序对应的appid 20 | * 个别目录下有多个组件，可在微信开发者工具`编译`处切换不同的编译模式，来切换不同的组件学习 21 | -------------------------------------------------------------------------------- /components-canvas/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuperJolly/wxapp-tutorial-components/ee08f14c5e5ed987ff3fa24b86ec9ea6ab3d62ec/components-canvas/app.js -------------------------------------------------------------------------------- /components-canvas/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/canvas/canvas" 4 | ], 5 | "window": { 6 | "backgroundTextStyle": "light", 7 | "navigationBarBackgroundColor": "#fff", 8 | "navigationBarTitleText": "WeChat", 9 | "navigationBarTextStyle": "black" 10 | } 11 | } -------------------------------------------------------------------------------- /components-canvas/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | /* reset */ 3 | page { 4 | background-color: #F8F8F8; 5 | height: 100%; 6 | font-size: 32rpx; 7 | line-height: 1.6; 8 | } 9 | checkbox, radio{ 10 | margin-right: 10rpx; 11 | } 12 | button{ 13 | margin-top: 20rpx; 14 | margin-bottom: 20rpx; 15 | } 16 | form{ 17 | width: 100%; 18 | } 19 | 20 | /* lib */ 21 | .strong{ 22 | font-weight: bold; 23 | } 24 | .tc{ 25 | text-align: center; 26 | } 27 | 28 | /* page */ 29 | .container { 30 | display: flex; 31 | flex-direction: column; 32 | min-height: 100%; 33 | justify-content: space-between; 34 | font-size: 32rpx; 35 | font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; 36 | } 37 | .page-head{ 38 | padding: 60rpx 50rpx 80rpx; 39 | text-align: center; 40 | } 41 | .page-head-title{ 42 | display: inline-block; 43 | padding: 0 40rpx 20rpx 40rpx; 44 | font-size: 32rpx; 45 | color: #BEBEBE; 46 | } 47 | .page-head-line{ 48 | margin: 0 auto; 49 | width: 150rpx; 50 | height: 2rpx; 51 | background-color: #D8D8D8; 52 | } 53 | .page-head-desc{ 54 | padding-top: 20rpx; 55 | color: #9B9B9B; 56 | font-size: 32rpx; 57 | } 58 | 59 | .page-body { 60 | width: 100%; 61 | flex-grow: 1; 62 | overflow-x: hidden; 63 | } 64 | .page-body-wrapper { 65 | display: flex; 66 | flex-direction: column; 67 | align-items: center; 68 | width: 100%; 69 | } 70 | .page-body-wording { 71 | text-align: center; 72 | padding: 200rpx 100rpx; 73 | } 74 | .page-body-info { 75 | display: flex; 76 | flex-direction: column; 77 | align-items: center; 78 | background-color: #fff; 79 | width: 100%; 80 | padding: 50rpx 0 150rpx 0; 81 | } 82 | .page-body-title { 83 | margin-bottom: 100rpx; 84 | font-size: 32rpx; 85 | } 86 | .page-body-text { 87 | font-size: 30rpx; 88 | line-height: 26px; 89 | color: #ccc; 90 | } 91 | .page-body-text-small { 92 | font-size: 24rpx; 93 | color: #000; 94 | margin-bottom: 100rpx; 95 | } 96 | 97 | .page-foot{ 98 | margin: 100rpx 0 30rpx 0; 99 | text-align: center; 100 | color: #1aad19; 101 | font-size: 0; 102 | } 103 | .icon-foot{ 104 | width: 152rpx; 105 | height: 23rpx; 106 | } 107 | 108 | .page-section{ 109 | width: 100%; 110 | margin-bottom: 60rpx; 111 | } 112 | .page-section_center{ 113 | display: flex; 114 | flex-direction: column; 115 | align-items: center; 116 | } 117 | .page-section:last-child{ 118 | margin-bottom: 0; 119 | } 120 | .page-section-gap{ 121 | box-sizing: border-box; 122 | padding: 0 30rpx; 123 | } 124 | .page-section-spacing{ 125 | box-sizing: border-box; 126 | padding: 0 80rpx; 127 | } 128 | .page-section-title{ 129 | font-size: 28rpx; 130 | color: #999999; 131 | margin-bottom: 10rpx; 132 | padding-left: 30rpx; 133 | padding-right: 30rpx; 134 | } 135 | .page-section-gap .page-section-title{ 136 | padding-left: 0; 137 | padding-right: 0; 138 | } 139 | .page-section-ctn{ 140 | 141 | } 142 | 143 | /* widget */ 144 | .btn-area{ 145 | margin-top: 60rpx; 146 | box-sizing: border-box; 147 | width: 100%; 148 | padding: 0 30rpx; 149 | } 150 | 151 | .image-plus { 152 | width: 150rpx; 153 | height: 150rpx; 154 | border: 2rpx solid #D9D9D9; 155 | position: relative; 156 | } 157 | .image-plus-nb{ 158 | border: 0; 159 | } 160 | .image-plus-text{ 161 | color: #888888; 162 | font-size: 28rpx; 163 | } 164 | .image-plus-horizontal { 165 | position: absolute; 166 | top: 50%; 167 | left: 50%; 168 | background-color: #d9d9d9; 169 | width: 4rpx; 170 | height: 80rpx; 171 | transform: translate(-50%, -50%); 172 | } 173 | .image-plus-vertical { 174 | position: absolute; 175 | top: 50%; 176 | left: 50%; 177 | background-color: #d9d9d9; 178 | width: 80rpx; 179 | height: 4rpx; 180 | transform: translate(-50%, -50%); 181 | } 182 | 183 | .demo-text-1{ 184 | position: relative; 185 | align-items: center; 186 | justify-content: center; 187 | background-color: #1AAD19; 188 | color: #FFFFFF; 189 | font-size: 36rpx; 190 | } 191 | .demo-text-1:before{ 192 | content: 'A'; 193 | position: absolute; 194 | top: 50%; 195 | left: 50%; 196 | transform: translate(-50%, -50%); 197 | } 198 | .demo-text-2{ 199 | position: relative; 200 | align-items: center; 201 | justify-content: center; 202 | background-color: #2782D7; 203 | color: #FFFFFF; 204 | font-size: 36rpx; 205 | } 206 | .demo-text-2:before{ 207 | content: 'B'; 208 | position: absolute; 209 | top: 50%; 210 | left: 50%; 211 | transform: translate(-50%, -50%); 212 | } 213 | .demo-text-3{ 214 | position: relative; 215 | align-items: center; 216 | justify-content: center; 217 | background-color: #F1F1F1; 218 | color: #353535; 219 | font-size: 36rpx; 220 | } 221 | .demo-text-3:before{ 222 | content: 'C'; 223 | position: absolute; 224 | top: 50%; 225 | left: 50%; 226 | transform: translate(-50%, -50%); 227 | } 228 | 229 | .index-hd { 230 | padding: 80rpx; 231 | text-align: center; 232 | } 233 | .index-bd { 234 | padding: 0 30rpx 40rpx; 235 | } 236 | .index-ft { 237 | padding-bottom: 20rpx; 238 | text-align: center; 239 | } 240 | .index-logo { 241 | width: 86rpx; 242 | height: 86rpx; 243 | } 244 | .index-desc { 245 | margin-top: 20rpx; 246 | color: #888888; 247 | font-size: 28rpx; 248 | } 249 | 250 | 251 | .navigator-box { 252 | opacity: 0; 253 | position: relative; 254 | background-color: #FFFFFF; 255 | line-height: 1.41176471; 256 | font-size: 34rpx; 257 | 258 | transform: translateY(-50%); 259 | transition: .3s; 260 | } 261 | .navigator-box-show { 262 | opacity: 1; 263 | transform: translateY(0); 264 | } 265 | .navigator { 266 | padding: 20rpx 30rpx; 267 | position: relative; 268 | display: flex; 269 | align-items: center; 270 | } 271 | .navigator:before { 272 | content: " "; 273 | position: absolute; 274 | left: 30rpx; 275 | top: 0; 276 | right: 30rpx; 277 | height: 1px; 278 | border-top: 1rpx solid #D8D8D8; 279 | color: #D8D8D8; 280 | } 281 | .navigator:first-child:before { 282 | display: none; 283 | } 284 | .navigator-text { 285 | flex: 1; 286 | } 287 | .navigator-arrow { 288 | padding-right: 26rpx; 289 | position: relative; 290 | } 291 | .navigator-arrow:after { 292 | content: " "; 293 | display: inline-block; 294 | height: 18rpx; 295 | width: 18rpx; 296 | border-width: 2rpx 2rpx 0 0; 297 | border-color: #888888; 298 | border-style: solid; 299 | transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 300 | position: absolute; 301 | top: 50%; 302 | margin-top: -8rpx; 303 | right: 28rpx; 304 | } 305 | 306 | 307 | .kind-list-item { 308 | margin: 20rpx 0; 309 | background-color: #FFFFFF; 310 | border-radius: 4rpx; 311 | overflow: hidden; 312 | } 313 | .kind-list-item:first-child { 314 | margin-top: 0; 315 | } 316 | .kind-list-text{ 317 | flex: 1; 318 | } 319 | .kind-list-img { 320 | width: 60rpx; 321 | height: 60rpx; 322 | } 323 | .kind-list-item-hd { 324 | padding: 30rpx; 325 | display: flex; 326 | align-items: center; 327 | 328 | transition: opacity .3s; 329 | } 330 | .kind-list-item-hd-show { 331 | opacity: .2; 332 | } 333 | .kind-list-item-bd { 334 | height: 0; 335 | overflow: hidden; 336 | } 337 | .kind-list-item-bd-show { 338 | height: auto; 339 | } -------------------------------------------------------------------------------- /components-canvas/pages/canvas/canvas.js: -------------------------------------------------------------------------------- 1 | // canvas.js 2 | Page({ 3 | canvasIdErrorCallback: function (e) { 4 | console.error(e.detail.errMsg) 5 | }, 6 | onReady: function (e) { 7 | // 使用 wx.createContext 获取绘图上下文 context 8 | var context = wx.createCanvasContext('firstCanvas'); 9 | 10 | // 设置要绘制的图形边框颜色 11 | context.setStrokeStyle("#00ff00"); 12 | // 设置绘制图形的线条宽度 13 | context.setLineWidth(5); 14 | // 绘制一个宽高为200px的矩形 15 | context.rect(0, 0, 200, 200); 16 | // 勾勒画出边框 17 | context.stroke(); 18 | // 再重新设置即将要绘制的图形边框颜色 19 | context.setStrokeStyle("#ff0000"); 20 | // 同样，重新设置绘制图形的线条宽度 21 | context.setLineWidth(2); 22 | // 将路径移动到画布中的指定点(160, 100) 23 | context.moveTo(160, 100); 24 | // 在坐标为点(100, 100)处，顺时针画一个半径为60px的圆 25 | context.arc(100, 100, 60, 0, 2 * Math.PI, true); 26 | // 将路径移动到画布中的指定点(140, 100) 27 | context.moveTo(140, 100); 28 | // 在坐标为点(100, 100)处，顺时针画一个半径为40px的半圆 29 | context.arc(100, 100, 40, 0, Math.PI, false); 30 | // 将路径移动到画布中的指定点(85, 80) 31 | context.moveTo(85, 80); 32 | // 在坐标为点(80, 80)处，顺时针画一个半径为5px的圆 33 | context.arc(80, 80, 5, 0, 2 * Math.PI, true); 34 | // 将路径移动到画布中的指定点(125, 80) 35 | context.moveTo(125, 80); 36 | // 在坐标为点(120, 80)处，顺时针画一个半径为5px的圆 37 | context.arc(120, 80, 5, 0, 2 * Math.PI, true); 38 | // 勾勒出之前的图形路径 39 | context.stroke(); 40 | // 将前面所有绘制的动作描述画到canvas画布上 41 | context.draw(); 42 | } 43 | }) -------------------------------------------------------------------------------- /components-canvas/pages/canvas/canvas.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "canvas组件" 3 | } 4 | -------------------------------------------------------------------------------- /components-canvas/pages/canvas/canvas.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /components-canvas/pages/canvas/canvas.wxss: -------------------------------------------------------------------------------- 1 | .canvas { 2 | width: 305px; 3 | height: 305px; 4 | background-color: #fff; 5 | } 6 | -------------------------------------------------------------------------------- /components-canvas/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "setting": { 4 | "urlCheck": true, 5 | "es6": true, 6 | "postcss": true, 7 | "minified": true, 8 | "newFeature": true 9 | }, 10 | "compileType": "miniprogram", 11 | "libVersion": "1.9.91", 12 | "appid": "/* write your appid */", 13 | "projectname": "%E7%BB%84%E4%BB%B6-%E7%94%BB%E5%B8%83", 14 | "isGameTourist": false, 15 | "condition": { 16 | "search": { 17 | "current": -1, 18 | "list": [] 19 | }, 20 | "conversation": { 21 | "current": -1, 22 | "list": [] 23 | }, 24 | "game": { 25 | "currentL": -1, 26 | "list": [] 27 | }, 28 | "miniprogram": { 29 | "current": -1, 30 | "list": [] 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /components-content/app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | // 展示本地存储能力 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | 9 | // 登录 10 | wx.login({ 11 | success: res => { 12 | // 发送 res.code 到后台换取 openId, sessionKey, unionId 13 | } 14 | }) 15 | // 获取用户信息 16 | wx.getSetting({ 17 | success: res => { 18 | if (res.authSetting['scope.userInfo']) { 19 | // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 20 | wx.getUserInfo({ 21 | success: res => { 22 | // 可以将 res 发送给后台解码出 unionId 23 | this.globalData.userInfo = res.userInfo 24 | 25 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 26 | // 所以此处加入 callback 以防止这种情况 27 | if (this.userInfoReadyCallback) { 28 | this.userInfoReadyCallback(res) 29 | } 30 | } 31 | }) 32 | } 33 | } 34 | }) 35 | }, 36 | globalData: { 37 | userInfo: null 38 | } 39 | }) -------------------------------------------------------------------------------- /components-content/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/icon/index", 4 | "pages/text/index", 5 | "pages/richtext/index", 6 | "pages/progress/index" 7 | ], 8 | "window":{ 9 | "backgroundTextStyle":"light", 10 | "navigationBarBackgroundColor": "#fff", 11 | "navigationBarTitleText": "WeChat", 12 | "navigationBarTextStyle":"black" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /components-content/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: space-between; 8 | padding: 200rpx 0; 9 | box-sizing: border-box; 10 | } 11 | -------------------------------------------------------------------------------- /components-content/pages/icon/index.js: -------------------------------------------------------------------------------- 1 | // index.js 2 | Page({ 3 | 4 | }) 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /components-content/pages/icon/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 成功 7 | 用于表示操作顺利完成 8 | 9 | 10 | 11 | 12 | 13 | 提示 14 | 用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息 15 | 16 | 17 | 18 | 19 | 20 | 普通警告 21 | 用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果 22 | 23 | 24 | 25 | 26 | 27 | 强烈警告 28 | 用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可严重的挽回的后果的情况 29 | 30 | 31 | 32 | 33 | 34 | 等待 35 | 用于表示等待，告知用户结果需等待 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 多选控件图标_已选择 44 | 用于多选控件中，表示已选择该项目 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 多选控件图标_未选择 53 | 用于多选控件中，表示该项目可被选择，但还未选择 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 错误提示 62 | 用于在表单中表示出现错误 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 单选控件图标_已选择 71 | 用于单选控件中，表示已选择该项目 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 下载 80 | 用于表示可下载 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 提示 89 | 用于在表单中表示有信息提示 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 停止或关闭 98 | 用于在表单中，表示关闭或停止 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 搜索 107 | 用于搜索控件中，表示可搜索 108 | 109 | 110 | -------------------------------------------------------------------------------- /components-content/pages/icon/index.wxss: -------------------------------------------------------------------------------- 1 | .icon-box{ 2 | margin-bottom: 40rpx; 3 | padding: 0 75rpx; 4 | display: flex; 5 | align-items: center; 6 | width: 750rpx; 7 | } 8 | .icon-box-img{ 9 | margin-right: 46rpx; 10 | } 11 | .icon-box-ctn{ 12 | flex-shrink: 100; 13 | } 14 | .icon-box-title{ 15 | font-size: 34rpx; 16 | } 17 | .icon-box-desc{ 18 | margin-top: 12rpx; 19 | font-size: 26rpx; 20 | color: #888; 21 | } 22 | 23 | .icon-small-wrp{ 24 | margin-right: 46rpx; 25 | width: 93px; 26 | height: 93px; 27 | display: flex; 28 | align-items: center; 29 | justify-content: center; 30 | } -------------------------------------------------------------------------------- /components-content/pages/progress/index.js: -------------------------------------------------------------------------------- 1 | // index.js 2 | Page({ 3 | data: { 4 | percentValue: 0 5 | }, 6 | onLoad() { 7 | let timer; 8 | timer = () => { 9 | setTimeout(() => { 10 | const value = this.data.percentValue; 11 | this.setData({ 12 | percentValue: value < 100 ? value+10 : value 13 | }); 14 | timer() 15 | }, 2000); 16 | } 17 | timer(); 18 | } 19 | }) -------------------------------------------------------------------------------- /components-content/pages/progress/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /components-content/pages/progress/index.wxss: -------------------------------------------------------------------------------- 1 | /** index.wxss **/ 2 | .block { 3 | margin: 10px auto; 4 | } -------------------------------------------------------------------------------- /components-content/pages/richtext/index.js: -------------------------------------------------------------------------------- 1 | // index.js 2 | Page({ 3 | data: { 4 | nodes: [{ 5 | name: 'div', 6 | attrs: { 7 | class: 'div_class', 8 | style: 'line-height: 60px; color: red;' 9 | }, 10 | children: [{ 11 | type: 'text', 12 | text: 'Hello World!' 13 | }] 14 | }], 15 | nodes2: [{ 16 | name: 'h2', 17 | attrs: { 18 | style: 'color: green' 19 | }, 20 | children: [{ 21 | type: 'text', 22 | text: '你好 小程序' 23 | }] 24 | }] 25 | }, 26 | tap() { 27 | console.log('tap') 28 | }, 29 | touchstart() { 30 | console.log('touchstart') 31 | }, 32 | touchmove() { 33 | console.log('touchmove') 34 | }, 35 | touchcancel() { 36 | console.log('touchcancel') 37 | }, 38 | touchend() { 39 | console.log('touchend') 40 | }, 41 | longtap() { 42 | console.log('longtap') 43 | } 44 | }) -------------------------------------------------------------------------------- /components-content/pages/richtext/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /components-content/pages/text/index.js: -------------------------------------------------------------------------------- 1 | // index.js 2 | var initData = 'this is first line\nthis is second line'; 3 | var extraLine = []; 4 | Page({ 5 | data: { 6 | text: initData 7 | } 8 | }) -------------------------------------------------------------------------------- /components-content/pages/text/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{text}} 5 | 6 | -------------------------------------------------------------------------------- /components-content/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "setting": { 4 | "urlCheck": true, 5 | "es6": true, 6 | "postcss": true, 7 | "minified": true, 8 | "newFeature": true 9 | }, 10 | "compileType": "miniprogram", 11 | "libVersion": "1.9.91", 12 | "appid": "/* write your appid */", 13 | "projectname": "%E7%BB%84%E4%BB%B6-%E5%9F%BA%E7%A1%80%E5%86%85%E5%AE%B9", 14 | "isGameTourist": false, 15 | "condition": { 16 | "search": { 17 | "current": -1, 18 | "list": [] 19 | }, 20 | "conversation": { 21 | "current": -1, 22 | "list": [] 23 | }, 24 | "plugin": { 25 | "current": -1, 26 | "list": [] 27 | }, 28 | "game": { 29 | "currentL": -1, 30 | "list": [] 31 | }, 32 | "miniprogram": { 33 | "current": 2, 34 | "list": [ 35 | { 36 | "id": -1, 37 | "name": "text", 38 | "pathName": "pages/text/index", 39 | "query": "" 40 | }, 41 | { 42 | "id": -1, 43 | "name": "richtext", 44 | "pathName": "pages/richtext/index", 45 | "query": "" 46 | }, 47 | { 48 | "id": -1, 49 | "name": "progress", 50 | "pathName": "pages/progress/index", 51 | "query": "" 52 | } 53 | ] 54 | } 55 | } 56 | } -------------------------------------------------------------------------------- /components-content/utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : '0' + n 15 | } 16 | 17 | module.exports = { 18 | formatTime: formatTime 19 | } 20 | -------------------------------------------------------------------------------- /components-form/app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | // 展示本地存储能力 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | 9 | // 登录 10 | wx.login({ 11 | success: res => { 12 | // 发送 res.code 到后台换取 openId, sessionKey, unionId 13 | } 14 | }) 15 | // 获取用户信息 16 | wx.getSetting({ 17 | success: res => { 18 | if (res.authSetting['scope.userInfo']) { 19 | // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 20 | wx.getUserInfo({ 21 | success: res => { 22 | // 可以将 res 发送给后台解码出 unionId 23 | this.globalData.userInfo = res.userInfo 24 | 25 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 26 | // 所以此处加入 callback 以防止这种情况 27 | if (this.userInfoReadyCallback) { 28 | this.userInfoReadyCallback(res) 29 | } 30 | } 31 | }) 32 | } 33 | } 34 | }) 35 | }, 36 | globalData: { 37 | userInfo: null 38 | } 39 | }) -------------------------------------------------------------------------------- /components-form/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/button/index", 4 | "pages/picker/index", 5 | "pages/checkbox/checkbox", 6 | "pages/input/input", 7 | "pages/label/label", 8 | "pages/picker-view/index", 9 | "pages/form/form", 10 | "pages/radio/radio", 11 | "pages/slider/slider", 12 | "pages/switch/switch", 13 | "pages/textarea/textarea" 14 | ], 15 | "window":{ 16 | "backgroundTextStyle":"light", 17 | "navigationBarBackgroundColor": "#fff", 18 | "navigationBarTitleText": "WeChat", 19 | "navigationBarTextStyle":"black" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /components-form/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | /* reset */ 3 | page { 4 | background-color: #F8F8F8; 5 | height: 100%; 6 | font-size: 32rpx; 7 | line-height: 1.6; 8 | } 9 | checkbox, radio{ 10 | margin-right: 10rpx; 11 | } 12 | button{ 13 | margin-top: 20rpx; 14 | margin-bottom: 20rpx; 15 | } 16 | form{ 17 | width: 100%; 18 | } 19 | 20 | /* lib */ 21 | .strong{ 22 | font-weight: bold; 23 | } 24 | .tc{ 25 | text-align: center; 26 | } 27 | 28 | /* page */ 29 | .container { 30 | display: flex; 31 | flex-direction: column; 32 | min-height: 100%; 33 | justify-content: space-between; 34 | font-size: 32rpx; 35 | font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; 36 | } 37 | .page-head{ 38 | padding: 60rpx 50rpx 80rpx; 39 | text-align: center; 40 | } 41 | .page-head-title{ 42 | display: inline-block; 43 | padding: 0 40rpx 20rpx 40rpx; 44 | font-size: 32rpx; 45 | color: #BEBEBE; 46 | } 47 | .page-head-line{ 48 | margin: 0 auto; 49 | width: 150rpx; 50 | height: 2rpx; 51 | background-color: #D8D8D8; 52 | } 53 | .page-head-desc{ 54 | padding-top: 20rpx; 55 | color: #9B9B9B; 56 | font-size: 32rpx; 57 | } 58 | 59 | .page-body { 60 | width: 100%; 61 | flex-grow: 1; 62 | overflow-x: hidden; 63 | } 64 | .page-body-wrapper { 65 | display: flex; 66 | flex-direction: column; 67 | align-items: center; 68 | width: 100%; 69 | } 70 | .page-body-wording { 71 | text-align: center; 72 | padding: 200rpx 100rpx; 73 | } 74 | .page-body-info { 75 | display: flex; 76 | flex-direction: column; 77 | align-items: center; 78 | background-color: #fff; 79 | width: 100%; 80 | padding: 50rpx 0 150rpx 0; 81 | } 82 | .page-body-title { 83 | margin-bottom: 100rpx; 84 | font-size: 32rpx; 85 | } 86 | .page-body-text { 87 | font-size: 30rpx; 88 | line-height: 26px; 89 | color: #ccc; 90 | } 91 | .page-body-text-small { 92 | font-size: 24rpx; 93 | color: #000; 94 | margin-bottom: 100rpx; 95 | } 96 | 97 | .page-foot{ 98 | margin: 100rpx 0 30rpx 0; 99 | text-align: center; 100 | color: #1aad19; 101 | font-size: 0; 102 | } 103 | .icon-foot{ 104 | width: 152rpx; 105 | height: 23rpx; 106 | } 107 | 108 | .page-section{ 109 | width: 100%; 110 | margin-bottom: 60rpx; 111 | } 112 | .page-section_center{ 113 | display: flex; 114 | flex-direction: column; 115 | align-items: center; 116 | } 117 | .page-section:last-child{ 118 | margin-bottom: 0; 119 | } 120 | .page-section-gap{ 121 | box-sizing: border-box; 122 | padding: 0 30rpx; 123 | } 124 | .page-section-spacing{ 125 | box-sizing: border-box; 126 | padding: 0 80rpx; 127 | } 128 | .page-section-title{ 129 | font-size: 28rpx; 130 | color: #999999; 131 | margin-bottom: 10rpx; 132 | padding-left: 30rpx; 133 | padding-right: 30rpx; 134 | } 135 | .page-section-gap .page-section-title{ 136 | padding-left: 0; 137 | padding-right: 0; 138 | } 139 | .page-section-ctn{ 140 | 141 | } 142 | 143 | /* widget */ 144 | .btn-area{ 145 | margin-top: 60rpx; 146 | box-sizing: border-box; 147 | width: 100%; 148 | padding: 0 30rpx; 149 | } 150 | 151 | .image-plus { 152 | width: 150rpx; 153 | height: 150rpx; 154 | border: 2rpx solid #D9D9D9; 155 | position: relative; 156 | } 157 | .image-plus-nb{ 158 | border: 0; 159 | } 160 | .image-plus-text{ 161 | color: #888888; 162 | font-size: 28rpx; 163 | } 164 | .image-plus-horizontal { 165 | position: absolute; 166 | top: 50%; 167 | left: 50%; 168 | background-color: #d9d9d9; 169 | width: 4rpx; 170 | height: 80rpx; 171 | transform: translate(-50%, -50%); 172 | } 173 | .image-plus-vertical { 174 | position: absolute; 175 | top: 50%; 176 | left: 50%; 177 | background-color: #d9d9d9; 178 | width: 80rpx; 179 | height: 4rpx; 180 | transform: translate(-50%, -50%); 181 | } 182 | 183 | .demo-text-1{ 184 | position: relative; 185 | align-items: center; 186 | justify-content: center; 187 | background-color: #1AAD19; 188 | color: #FFFFFF; 189 | font-size: 36rpx; 190 | } 191 | .demo-text-1:before{ 192 | content: 'A'; 193 | position: absolute; 194 | top: 50%; 195 | left: 50%; 196 | transform: translate(-50%, -50%); 197 | } 198 | .demo-text-2{ 199 | position: relative; 200 | align-items: center; 201 | justify-content: center; 202 | background-color: #2782D7; 203 | color: #FFFFFF; 204 | font-size: 36rpx; 205 | } 206 | .demo-text-2:before{ 207 | content: 'B'; 208 | position: absolute; 209 | top: 50%; 210 | left: 50%; 211 | transform: translate(-50%, -50%); 212 | } 213 | .demo-text-3{ 214 | position: relative; 215 | align-items: center; 216 | justify-content: center; 217 | background-color: #F1F1F1; 218 | color: #353535; 219 | font-size: 36rpx; 220 | } 221 | .demo-text-3:before{ 222 | content: 'C'; 223 | position: absolute; 224 | top: 50%; 225 | left: 50%; 226 | transform: translate(-50%, -50%); 227 | } 228 | 229 | .index-hd { 230 | padding: 80rpx; 231 | text-align: center; 232 | } 233 | .index-bd { 234 | padding: 0 30rpx 40rpx; 235 | } 236 | .index-ft { 237 | padding-bottom: 20rpx; 238 | text-align: center; 239 | } 240 | .index-logo { 241 | width: 86rpx; 242 | height: 86rpx; 243 | } 244 | .index-desc { 245 | margin-top: 20rpx; 246 | color: #888888; 247 | font-size: 28rpx; 248 | } 249 | 250 | 251 | .navigator-box { 252 | opacity: 0; 253 | position: relative; 254 | background-color: #FFFFFF; 255 | line-height: 1.41176471; 256 | font-size: 34rpx; 257 | 258 | transform: translateY(-50%); 259 | transition: .3s; 260 | } 261 | .navigator-box-show { 262 | opacity: 1; 263 | transform: translateY(0); 264 | } 265 | .navigator { 266 | padding: 20rpx 30rpx; 267 | position: relative; 268 | display: flex; 269 | align-items: center; 270 | } 271 | .navigator:before { 272 | content: " "; 273 | position: absolute; 274 | left: 30rpx; 275 | top: 0; 276 | right: 30rpx; 277 | height: 1px; 278 | border-top: 1rpx solid #D8D8D8; 279 | color: #D8D8D8; 280 | } 281 | .navigator:first-child:before { 282 | display: none; 283 | } 284 | .navigator-text { 285 | flex: 1; 286 | } 287 | .navigator-arrow { 288 | padding-right: 26rpx; 289 | position: relative; 290 | } 291 | .navigator-arrow:after { 292 | content: " "; 293 | display: inline-block; 294 | height: 18rpx; 295 | width: 18rpx; 296 | border-width: 2rpx 2rpx 0 0; 297 | border-color: #888888; 298 | border-style: solid; 299 | transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 300 | position: absolute; 301 | top: 50%; 302 | margin-top: -8rpx; 303 | right: 28rpx; 304 | } 305 | 306 | 307 | .kind-list-item { 308 | margin: 20rpx 0; 309 | background-color: #FFFFFF; 310 | border-radius: 4rpx; 311 | overflow: hidden; 312 | } 313 | .kind-list-item:first-child { 314 | margin-top: 0; 315 | } 316 | .kind-list-text{ 317 | flex: 1; 318 | } 319 | .kind-list-img { 320 | width: 60rpx; 321 | height: 60rpx; 322 | } 323 | .kind-list-item-hd { 324 | padding: 30rpx; 325 | display: flex; 326 | align-items: center; 327 | 328 | transition: opacity .3s; 329 | } 330 | .kind-list-item-hd-show { 331 | opacity: .2; 332 | } 333 | .kind-list-item-bd { 334 | height: 0; 335 | overflow: hidden; 336 | } 337 | .kind-list-item-bd-show { 338 | height: auto; 339 | } -------------------------------------------------------------------------------- /components-form/common/lib/weui.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * weui.js v1.1.0 (https://github.com/weui/weui-wxss) 3 | * Copyright 2016, wechat ui team 4 | * MIT license 5 | */ 6 | page { 7 | line-height: 1.6; 8 | font-family: -apple-system-font, "Helvetica Neue", sans-serif; 9 | } 10 | icon { 11 | vertical-align: middle; 12 | } 13 | .weui-cells { 14 | position: relative; 15 | margin-top: 1.17647059em; 16 | background-color: #FFFFFF; 17 | line-height: 1.41176471; 18 | font-size: 17px; 19 | } 20 | .weui-cells:before { 21 | content: " "; 22 | position: absolute; 23 | left: 0; 24 | top: 0; 25 | right: 0; 26 | height: 1px; 27 | border-top: 1rpx solid #D9D9D9; 28 | color: #D9D9D9; 29 | } 30 | .weui-cells:after { 31 | content: " "; 32 | position: absolute; 33 | left: 0; 34 | bottom: 0; 35 | right: 0; 36 | height: 1px; 37 | border-bottom: 1rpx solid #D9D9D9; 38 | color: #D9D9D9; 39 | } 40 | .weui-cells__title { 41 | margin-top: .77em; 42 | margin-bottom: .3em; 43 | padding-left: 15px; 44 | padding-right: 15px; 45 | color: #999999; 46 | font-size: 14px; 47 | } 48 | .weui-cells_after-title { 49 | margin-top: 0; 50 | } 51 | .weui-cells__tips { 52 | margin-top: .3em; 53 | color: #999999; 54 | padding-left: 15px; 55 | padding-right: 15px; 56 | font-size: 14px; 57 | } 58 | .weui-cell { 59 | padding: 10px 15px; 60 | position: relative; 61 | display: -webkit-box; 62 | display: -webkit-flex; 63 | display: flex; 64 | -webkit-box-align: center; 65 | -webkit-align-items: center; 66 | align-items: center; 67 | } 68 | .weui-cell:before { 69 | content: " "; 70 | position: absolute; 71 | left: 0; 72 | top: 0; 73 | right: 0; 74 | height: 1px; 75 | border-top: 1rpx solid #D9D9D9; 76 | color: #D9D9D9; 77 | left: 15px; 78 | } 79 | .weui-cell:first-child:before { 80 | display: none; 81 | } 82 | .weui-cell_active { 83 | background-color: #ECECEC; 84 | } 85 | .weui-cell_primary { 86 | -webkit-box-align: start; 87 | -webkit-align-items: flex-start; 88 | align-items: flex-start; 89 | } 90 | .weui-cell__bd { 91 | -webkit-box-flex: 1; 92 | -webkit-flex: 1; 93 | flex: 1; 94 | } 95 | .weui-cell__ft { 96 | text-align: right; 97 | color: #999999; 98 | } 99 | .weui-cell_access { 100 | color: inherit; 101 | } 102 | .weui-cell__ft_in-access { 103 | padding-right: 13px; 104 | position: relative; 105 | } 106 | .weui-cell__ft_in-access:after { 107 | content: " "; 108 | display: inline-block; 109 | height: 6px; 110 | width: 6px; 111 | border-width: 2px 2px 0 0; 112 | border-color: #C8C8CD; 113 | border-style: solid; 114 | -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 115 | transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 116 | position: relative; 117 | top: -2px; 118 | position: absolute; 119 | top: 50%; 120 | margin-top: -4px; 121 | right: 2px; 122 | } 123 | .weui-cell_link { 124 | color: #586C94; 125 | font-size: 14px; 126 | } 127 | .weui-cell_link:active { 128 | background-color: #ECECEC; 129 | } 130 | .weui-cell_link:first-child:before { 131 | display: block; 132 | } 133 | .weui-icon-radio { 134 | margin-left: 3.2px; 135 | margin-right: 3.2px; 136 | } 137 | .weui-icon-checkbox_circle, 138 | .weui-icon-checkbox_success { 139 | margin-left: 4.6px; 140 | margin-right: 4.6px; 141 | } 142 | .weui-check__label:active { 143 | background-color: #ECECEC; 144 | } 145 | .weui-check { 146 | position: absolute; 147 | left: -9999px; 148 | } 149 | .weui-check__hd_in-checkbox { 150 | padding-right: 0.35em; 151 | } 152 | .weui-cell__ft_in-radio { 153 | padding-left: 0.35em; 154 | } 155 | .weui-cell_input { 156 | padding-top: 0; 157 | padding-bottom: 0; 158 | } 159 | .weui-label { 160 | width: 105px; 161 | word-wrap: break-word; 162 | word-break: break-all; 163 | } 164 | .weui-input { 165 | height: 2.58823529em; 166 | min-height: 2.58823529em; 167 | line-height: 2.58823529em; 168 | } 169 | .weui-toptips { 170 | position: fixed; 171 | -webkit-transform: translateZ(0); 172 | transform: translateZ(0); 173 | top: 0; 174 | left: 0; 175 | right: 0; 176 | padding: 5px; 177 | font-size: 14px; 178 | text-align: center; 179 | color: #FFFFFF; 180 | z-index: 5000; 181 | word-wrap: break-word; 182 | word-break: break-all; 183 | } 184 | .weui-toptips_warn { 185 | background-color: #E64340; 186 | } 187 | .weui-textarea { 188 | display: block; 189 | width: 100%; 190 | } 191 | .weui-textarea-counter { 192 | color: #B2B2B2; 193 | text-align: right; 194 | } 195 | .weui-textarea-counter_warn { 196 | color: #E64340; 197 | } 198 | .weui-cell_warn { 199 | color: #E64340; 200 | } 201 | .weui-form-preview { 202 | position: relative; 203 | background-color: #FFFFFF; 204 | } 205 | .weui-form-preview:before { 206 | content: " "; 207 | position: absolute; 208 | left: 0; 209 | top: 0; 210 | right: 0; 211 | height: 1px; 212 | border-top: 1rpx solid #D9D9D9; 213 | color: #D9D9D9; 214 | } 215 | .weui-form-preview:after { 216 | content: " "; 217 | position: absolute; 218 | left: 0; 219 | bottom: 0; 220 | right: 0; 221 | height: 1px; 222 | border-bottom: 1rpx solid #D9D9D9; 223 | color: #D9D9D9; 224 | } 225 | .weui-form-preview__value { 226 | font-size: 14px; 227 | } 228 | .weui-form-preview__value_in-hd { 229 | font-size: 26px; 230 | } 231 | .weui-form-preview__hd { 232 | position: relative; 233 | padding: 10px 15px; 234 | text-align: right; 235 | line-height: 2.5em; 236 | } 237 | .weui-form-preview__hd:after { 238 | content: " "; 239 | position: absolute; 240 | left: 0; 241 | bottom: 0; 242 | right: 0; 243 | height: 1px; 244 | border-bottom: 1rpx solid #D9D9D9; 245 | color: #D9D9D9; 246 | left: 15px; 247 | } 248 | .weui-form-preview__bd { 249 | padding: 10px 15px; 250 | font-size: .9em; 251 | text-align: right; 252 | color: #999999; 253 | line-height: 2; 254 | } 255 | .weui-form-preview__ft { 256 | position: relative; 257 | line-height: 50px; 258 | display: -webkit-box; 259 | display: -webkit-flex; 260 | display: flex; 261 | } 262 | .weui-form-preview__ft:after { 263 | content: " "; 264 | position: absolute; 265 | left: 0; 266 | top: 0; 267 | right: 0; 268 | height: 1px; 269 | border-top: 1rpx solid #D5D5D6; 270 | color: #D5D5D6; 271 | } 272 | .weui-form-preview__item { 273 | overflow: hidden; 274 | } 275 | .weui-form-preview__label { 276 | float: left; 277 | margin-right: 1em; 278 | min-width: 4em; 279 | color: #999999; 280 | text-align: justify; 281 | text-align-last: justify; 282 | } 283 | .weui-form-preview__value { 284 | display: block; 285 | overflow: hidden; 286 | word-break: normal; 287 | word-wrap: break-word; 288 | } 289 | .weui-form-preview__btn { 290 | position: relative; 291 | display: block; 292 | -webkit-box-flex: 1; 293 | -webkit-flex: 1; 294 | flex: 1; 295 | color: #3CC51F; 296 | text-align: center; 297 | } 298 | .weui-form-preview__btn:after { 299 | content: " "; 300 | position: absolute; 301 | left: 0; 302 | top: 0; 303 | width: 1px; 304 | bottom: 0; 305 | border-left: 1rpx solid #D5D5D6; 306 | color: #D5D5D6; 307 | } 308 | .weui-form-preview__btn:first-child:after { 309 | display: none; 310 | } 311 | .weui-form-preview__btn_active { 312 | background-color: #EEEEEE; 313 | } 314 | .weui-form-preview__btn_default { 315 | color: #999999; 316 | } 317 | .weui-form-preview__btn_primary { 318 | color: #0BB20C; 319 | } 320 | .weui-cell_select { 321 | padding: 0; 322 | } 323 | .weui-select { 324 | position: relative; 325 | padding-left: 15px; 326 | padding-right: 30px; 327 | height: 2.58823529em; 328 | min-height: 2.58823529em; 329 | line-height: 2.58823529em; 330 | border-right: 1rpx solid #D9D9D9; 331 | } 332 | .weui-select:before { 333 | content: " "; 334 | display: inline-block; 335 | height: 6px; 336 | width: 6px; 337 | border-width: 2px 2px 0 0; 338 | border-color: #C8C8CD; 339 | border-style: solid; 340 | -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 341 | transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 342 | position: relative; 343 | top: -2px; 344 | position: absolute; 345 | top: 50%; 346 | right: 15px; 347 | margin-top: -4px; 348 | } 349 | .weui-select_in-select-after { 350 | padding-left: 0; 351 | } 352 | .weui-cell__hd_in-select-after, 353 | .weui-cell__bd_in-select-before { 354 | padding-left: 15px; 355 | } 356 | .weui-cell_vcode { 357 | padding-right: 0; 358 | } 359 | .weui-vcode-img { 360 | margin-left: 5px; 361 | height: 2.58823529em; 362 | vertical-align: middle; 363 | } 364 | .weui-vcode-btn { 365 | display: inline-block; 366 | height: 2.58823529em; 367 | margin-left: 5px; 368 | padding: 0 0.6em 0 0.7em; 369 | border-left: 1px solid #E5E5E5; 370 | line-height: 2.58823529em; 371 | vertical-align: middle; 372 | font-size: 17px; 373 | color: #3CC51F; 374 | white-space: nowrap; 375 | } 376 | .weui-vcode-btn:active { 377 | color: #52a341; 378 | } 379 | .weui-cell_switch { 380 | padding-top: 6px; 381 | padding-bottom: 6px; 382 | } 383 | .weui-uploader__hd { 384 | display: -webkit-box; 385 | display: -webkit-flex; 386 | display: flex; 387 | padding-bottom: 10px; 388 | -webkit-box-align: center; 389 | -webkit-align-items: center; 390 | align-items: center; 391 | } 392 | .weui-uploader__title { 393 | -webkit-box-flex: 1; 394 | -webkit-flex: 1; 395 | flex: 1; 396 | } 397 | .weui-uploader__info { 398 | color: #B2B2B2; 399 | } 400 | .weui-uploader__bd { 401 | margin-bottom: -4px; 402 | margin-right: -9px; 403 | overflow: hidden; 404 | } 405 | .weui-uploader__file { 406 | float: left; 407 | margin-right: 9px; 408 | margin-bottom: 9px; 409 | } 410 | .weui-uploader__img { 411 | display: block; 412 | width: 79px; 413 | height: 79px; 414 | } 415 | .weui-uploader__file_status { 416 | position: relative; 417 | } 418 | .weui-uploader__file_status:before { 419 | content: " "; 420 | position: absolute; 421 | top: 0; 422 | right: 0; 423 | bottom: 0; 424 | left: 0; 425 | background-color: rgba(0, 0, 0, 0.5); 426 | } 427 | .weui-uploader__file-content { 428 | position: absolute; 429 | top: 50%; 430 | left: 50%; 431 | -webkit-transform: translate(-50%, -50%); 432 | transform: translate(-50%, -50%); 433 | color: #FFFFFF; 434 | } 435 | .weui-uploader__input-box { 436 | float: left; 437 | position: relative; 438 | margin-right: 9px; 439 | margin-bottom: 9px; 440 | width: 77px; 441 | height: 77px; 442 | border: 1px solid #D9D9D9; 443 | } 444 | .weui-uploader__input-box:before, 445 | .weui-uploader__input-box:after { 446 | content: " "; 447 | position: absolute; 448 | top: 50%; 449 | left: 50%; 450 | -webkit-transform: translate(-50%, -50%); 451 | transform: translate(-50%, -50%); 452 | background-color: #D9D9D9; 453 | } 454 | .weui-uploader__input-box:before { 455 | width: 2px; 456 | height: 39.5px; 457 | } 458 | .weui-uploader__input-box:after { 459 | width: 39.5px; 460 | height: 2px; 461 | } 462 | .weui-uploader__input-box:active { 463 | border-color: #999999; 464 | } 465 | .weui-uploader__input-box:active:before, 466 | .weui-uploader__input-box:active:after { 467 | background-color: #999999; 468 | } 469 | .weui-uploader__input { 470 | position: absolute; 471 | z-index: 1; 472 | top: 0; 473 | left: 0; 474 | width: 100%; 475 | height: 100%; 476 | opacity: 0; 477 | } 478 | .weui-article { 479 | padding: 20px 15px; 480 | font-size: 15px; 481 | } 482 | .weui-article__section { 483 | margin-bottom: 1.5em; 484 | } 485 | .weui-article__h1 { 486 | font-size: 18px; 487 | font-weight: 400; 488 | margin-bottom: .9em; 489 | } 490 | .weui-article__h2 { 491 | font-size: 16px; 492 | font-weight: 400; 493 | margin-bottom: .34em; 494 | } 495 | .weui-article__h3 { 496 | font-weight: 400; 497 | font-size: 15px; 498 | margin-bottom: .34em; 499 | } 500 | .weui-article__p { 501 | margin: 0 0 .8em; 502 | } 503 | .weui-msg { 504 | padding-top: 36px; 505 | text-align: center; 506 | } 507 | .weui-msg__link { 508 | display: inline; 509 | color: #586C94; 510 | } 511 | .weui-msg__icon-area { 512 | margin-bottom: 30px; 513 | } 514 | .weui-msg__text-area { 515 | margin-bottom: 25px; 516 | padding: 0 20px; 517 | } 518 | .weui-msg__title { 519 | margin-bottom: 5px; 520 | font-weight: 400; 521 | font-size: 20px; 522 | } 523 | .weui-msg__desc { 524 | font-size: 14px; 525 | color: #999999; 526 | } 527 | .weui-msg__opr-area { 528 | margin-bottom: 25px; 529 | } 530 | .weui-msg__extra-area { 531 | margin-bottom: 15px; 532 | font-size: 14px; 533 | color: #999999; 534 | } 535 | @media screen and (min-height: 438px) { 536 | .weui-msg__extra-area { 537 | position: fixed; 538 | left: 0; 539 | bottom: 0; 540 | width: 100%; 541 | text-align: center; 542 | } 543 | } 544 | .weui-flex { 545 | display: -webkit-box; 546 | display: -webkit-flex; 547 | display: flex; 548 | } 549 | .weui-flex__item { 550 | -webkit-box-flex: 1; 551 | -webkit-flex: 1; 552 | flex: 1; 553 | } 554 | .weui-btn { 555 | margin-top: 15px; 556 | } 557 | .weui-btn:first-child { 558 | margin-top: 0; 559 | } 560 | .weui-btn-area { 561 | margin: 1.17647059em 15px 0.3em; 562 | } 563 | .weui-agree { 564 | display: block; 565 | padding: .5em 15px; 566 | font-size: 13px; 567 | } 568 | .weui-agree__text { 569 | color: #999999; 570 | } 571 | .weui-agree__link { 572 | display: inline; 573 | color: #586C94; 574 | } 575 | .weui-agree__checkbox { 576 | position: absolute; 577 | left: -9999px; 578 | } 579 | .weui-agree__checkbox-icon { 580 | position: relative; 581 | top: 2px; 582 | display: inline-block; 583 | border: 1px solid #D1D1D1; 584 | background-color: #FFFFFF; 585 | border-radius: 3px; 586 | width: 11px; 587 | height: 11px; 588 | } 589 | .weui-agree__checkbox-icon-check { 590 | position: absolute; 591 | top: 1px; 592 | left: 1px; 593 | } 594 | .weui-footer { 595 | color: #999999; 596 | font-size: 14px; 597 | text-align: center; 598 | } 599 | .weui-footer_fixed-bottom { 600 | position: fixed; 601 | bottom: .52em; 602 | left: 0; 603 | right: 0; 604 | } 605 | .weui-footer__links { 606 | font-size: 0; 607 | } 608 | .weui-footer__link { 609 | display: inline-block; 610 | vertical-align: top; 611 | margin: 0 .62em; 612 | position: relative; 613 | font-size: 14px; 614 | color: #586C94; 615 | } 616 | .weui-footer__link:before { 617 | content: " "; 618 | position: absolute; 619 | left: 0; 620 | top: 0; 621 | width: 1px; 622 | bottom: 0; 623 | border-left: 1rpx solid #C7C7C7; 624 | color: #C7C7C7; 625 | left: -0.65em; 626 | top: .36em; 627 | bottom: .36em; 628 | } 629 | .weui-footer__link:first-child:before { 630 | display: none; 631 | } 632 | .weui-footer__text { 633 | padding: 0 .34em; 634 | font-size: 12px; 635 | } 636 | .weui-grids { 637 | border-top: 1rpx solid #D9D9D9; 638 | border-left: 1rpx solid #D9D9D9; 639 | overflow: hidden; 640 | } 641 | .weui-grid { 642 | position: relative; 643 | float: left; 644 | padding: 20px 10px; 645 | width: 33.33333333%; 646 | box-sizing: border-box; 647 | border-right: 1rpx solid #D9D9D9; 648 | border-bottom: 1rpx solid #D9D9D9; 649 | } 650 | .weui-grid_active { 651 | background-color: #ECECEC; 652 | } 653 | .weui-grid__icon { 654 | display: block; 655 | width: 28px; 656 | height: 28px; 657 | margin: 0 auto; 658 | } 659 | .weui-grid__label { 660 | margin-top: 5px; 661 | display: block; 662 | text-align: center; 663 | color: #000000; 664 | font-size: 14px; 665 | white-space: nowrap; 666 | text-overflow: ellipsis; 667 | overflow: hidden; 668 | } 669 | .weui-loading { 670 | margin: 0 5px; 671 | width: 20px; 672 | height: 20px; 673 | display: inline-block; 674 | vertical-align: middle; 675 | -webkit-animation: weuiLoading 1s steps(12, end) infinite; 676 | animation: weuiLoading 1s steps(12, end) infinite; 677 | background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat; 678 | background-size: 100%; 679 | } 680 | @-webkit-keyframes weuiLoading { 681 | 0% { 682 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 683 | transform: rotate3d(0, 0, 1, 0deg); 684 | } 685 | 100% { 686 | -webkit-transform: rotate3d(0, 0, 1, 360deg); 687 | transform: rotate3d(0, 0, 1, 360deg); 688 | } 689 | } 690 | @keyframes weuiLoading { 691 | 0% { 692 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 693 | transform: rotate3d(0, 0, 1, 0deg); 694 | } 695 | 100% { 696 | -webkit-transform: rotate3d(0, 0, 1, 360deg); 697 | transform: rotate3d(0, 0, 1, 360deg); 698 | } 699 | } 700 | .weui-badge { 701 | display: inline-block; 702 | padding: .15em .4em; 703 | min-width: 8px; 704 | border-radius: 18px; 705 | background-color: #F43530; 706 | color: #FFFFFF; 707 | line-height: 1.2; 708 | text-align: center; 709 | font-size: 12px; 710 | vertical-align: middle; 711 | } 712 | .weui-badge_dot { 713 | padding: .4em; 714 | min-width: 0; 715 | } 716 | .weui-loadmore { 717 | width: 65%; 718 | margin: 1.5em auto; 719 | line-height: 1.6em; 720 | font-size: 14px; 721 | text-align: center; 722 | } 723 | .weui-loadmore__tips { 724 | display: inline-block; 725 | vertical-align: middle; 726 | } 727 | .weui-loadmore_line { 728 | border-top: 1px solid #E5E5E5; 729 | margin-top: 2.4em; 730 | } 731 | .weui-loadmore__tips_in-line { 732 | position: relative; 733 | top: -0.9em; 734 | padding: 0 .55em; 735 | background-color: #FFFFFF; 736 | color: #999999; 737 | } 738 | .weui-loadmore__tips_in-dot { 739 | position: relative; 740 | padding: 0 .16em; 741 | width: 4px; 742 | height: 1.6em; 743 | } 744 | .weui-loadmore__tips_in-dot:before { 745 | content: " "; 746 | position: absolute; 747 | top: 50%; 748 | left: 50%; 749 | margin-top: -1px; 750 | margin-left: -2px; 751 | width: 4px; 752 | height: 4px; 753 | border-radius: 50%; 754 | background-color: #E5E5E5; 755 | } 756 | .weui-panel { 757 | background-color: #FFFFFF; 758 | margin-top: 10px; 759 | position: relative; 760 | overflow: hidden; 761 | } 762 | .weui-panel:first-child { 763 | margin-top: 0; 764 | } 765 | .weui-panel:before { 766 | content: " "; 767 | position: absolute; 768 | left: 0; 769 | top: 0; 770 | right: 0; 771 | height: 1px; 772 | border-top: 1rpx solid #E5E5E5; 773 | color: #E5E5E5; 774 | } 775 | .weui-panel:after { 776 | content: " "; 777 | position: absolute; 778 | left: 0; 779 | bottom: 0; 780 | right: 0; 781 | height: 1px; 782 | border-bottom: 1rpx solid #E5E5E5; 783 | color: #E5E5E5; 784 | } 785 | .weui-panel__hd { 786 | padding: 14px 15px 10px; 787 | color: #999999; 788 | font-size: 13px; 789 | position: relative; 790 | } 791 | .weui-panel__hd:after { 792 | content: " "; 793 | position: absolute; 794 | left: 0; 795 | bottom: 0; 796 | right: 0; 797 | height: 1px; 798 | border-bottom: 1rpx solid #E5E5E5; 799 | color: #E5E5E5; 800 | left: 15px; 801 | } 802 | .weui-media-box { 803 | padding: 15px; 804 | position: relative; 805 | } 806 | .weui-media-box:before { 807 | content: " "; 808 | position: absolute; 809 | left: 0; 810 | top: 0; 811 | right: 0; 812 | height: 1px; 813 | border-top: 1rpx solid #E5E5E5; 814 | color: #E5E5E5; 815 | left: 15px; 816 | } 817 | .weui-media-box:first-child:before { 818 | display: none; 819 | } 820 | .weui-media-box__title { 821 | font-weight: 400; 822 | font-size: 17px; 823 | width: auto; 824 | overflow: hidden; 825 | text-overflow: ellipsis; 826 | white-space: nowrap; 827 | word-wrap: normal; 828 | word-wrap: break-word; 829 | word-break: break-all; 830 | } 831 | .weui-media-box__desc { 832 | color: #999999; 833 | font-size: 13px; 834 | line-height: 1.2; 835 | overflow: hidden; 836 | text-overflow: ellipsis; 837 | display: -webkit-box; 838 | -webkit-box-orient: vertical; 839 | -webkit-line-clamp: 2; 840 | } 841 | .weui-media-box__info { 842 | margin-top: 15px; 843 | padding-bottom: 5px; 844 | font-size: 13px; 845 | color: #CECECE; 846 | line-height: 1em; 847 | list-style: none; 848 | overflow: hidden; 849 | } 850 | .weui-media-box__info__meta { 851 | float: left; 852 | padding-right: 1em; 853 | } 854 | .weui-media-box__info__meta_extra { 855 | padding-left: 1em; 856 | border-left: 1px solid #CECECE; 857 | } 858 | .weui-media-box__title_in-text { 859 | margin-bottom: 8px; 860 | } 861 | .weui-media-box_appmsg { 862 | display: -webkit-box; 863 | display: -webkit-flex; 864 | display: flex; 865 | -webkit-box-align: center; 866 | -webkit-align-items: center; 867 | align-items: center; 868 | } 869 | .weui-media-box__thumb { 870 | width: 100%; 871 | height: 100%; 872 | vertical-align: top; 873 | } 874 | .weui-media-box__hd_in-appmsg { 875 | margin-right: .8em; 876 | width: 60px; 877 | height: 60px; 878 | line-height: 60px; 879 | text-align: center; 880 | } 881 | .weui-media-box__bd_in-appmsg { 882 | -webkit-box-flex: 1; 883 | -webkit-flex: 1; 884 | flex: 1; 885 | min-width: 0; 886 | } 887 | .weui-media-box_small-appmsg { 888 | padding: 0; 889 | } 890 | .weui-cells_in-small-appmsg { 891 | margin-top: 0; 892 | } 893 | .weui-cells_in-small-appmsg:before { 894 | display: none; 895 | } 896 | .weui-progress { 897 | display: -webkit-box; 898 | display: -webkit-flex; 899 | display: flex; 900 | -webkit-box-align: center; 901 | -webkit-align-items: center; 902 | align-items: center; 903 | } 904 | .weui-progress__bar { 905 | -webkit-box-flex: 1; 906 | -webkit-flex: 1; 907 | flex: 1; 908 | } 909 | .weui-progress__opr { 910 | margin-left: 15px; 911 | font-size: 0; 912 | } 913 | .weui-navbar { 914 | display: -webkit-box; 915 | display: -webkit-flex; 916 | display: flex; 917 | position: absolute; 918 | z-index: 500; 919 | top: 0; 920 | width: 100%; 921 | border-bottom: 1rpx solid #CCCCCC; 922 | } 923 | .weui-navbar__item { 924 | position: relative; 925 | display: block; 926 | -webkit-box-flex: 1; 927 | -webkit-flex: 1; 928 | flex: 1; 929 | padding: 13px 0; 930 | text-align: center; 931 | font-size: 0; 932 | } 933 | .weui-navbar__item.weui-bar__item_on { 934 | color: #1AAD19; 935 | } 936 | .weui-navbar__slider { 937 | position: absolute; 938 | content: " "; 939 | left: 0; 940 | bottom: 0; 941 | width: 6em; 942 | height: 3px; 943 | background-color: #1AAD19; 944 | -webkit-transition: -webkit-transform .3s; 945 | transition: -webkit-transform .3s; 946 | transition: transform .3s; 947 | transition: transform .3s, -webkit-transform .3s; 948 | } 949 | .weui-navbar__title { 950 | display: inline-block; 951 | font-size: 15px; 952 | max-width: 8em; 953 | width: auto; 954 | overflow: hidden; 955 | text-overflow: ellipsis; 956 | white-space: nowrap; 957 | word-wrap: normal; 958 | } 959 | .weui-tab { 960 | position: relative; 961 | height: 100%; 962 | } 963 | .weui-tab__panel { 964 | box-sizing: border-box; 965 | height: 100%; 966 | padding-top: 50px; 967 | overflow: auto; 968 | -webkit-overflow-scrolling: touch; 969 | } 970 | .weui-search-bar { 971 | position: relative; 972 | padding: 8px 10px; 973 | display: -webkit-box; 974 | display: -webkit-flex; 975 | display: flex; 976 | box-sizing: border-box; 977 | background-color: #EFEFF4; 978 | border-top: 1rpx solid #D7D6DC; 979 | border-bottom: 1rpx solid #D7D6DC; 980 | } 981 | .weui-icon-search { 982 | margin-right: 8px; 983 | font-size: inherit; 984 | } 985 | .weui-icon-search_in-box { 986 | position: absolute; 987 | left: 10px; 988 | top: 7px; 989 | } 990 | .weui-search-bar__text { 991 | display: inline-block; 992 | font-size: 14px; 993 | vertical-align: middle; 994 | } 995 | .weui-search-bar__form { 996 | position: relative; 997 | -webkit-box-flex: 1; 998 | -webkit-flex: auto; 999 | flex: auto; 1000 | border-radius: 5px; 1001 | background: #FFFFFF; 1002 | border: 1rpx solid #E6E6EA; 1003 | } 1004 | .weui-search-bar__box { 1005 | position: relative; 1006 | padding-left: 30px; 1007 | padding-right: 30px; 1008 | width: 100%; 1009 | box-sizing: border-box; 1010 | z-index: 1; 1011 | } 1012 | .weui-search-bar__input { 1013 | height: 28px; 1014 | line-height: 28px; 1015 | font-size: 14px; 1016 | } 1017 | .weui-icon-clear { 1018 | position: absolute; 1019 | top: 0; 1020 | right: 0; 1021 | padding: 7px 8px; 1022 | font-size: 0; 1023 | } 1024 | .weui-search-bar__label { 1025 | position: absolute; 1026 | top: 0; 1027 | right: 0; 1028 | bottom: 0; 1029 | left: 0; 1030 | z-index: 2; 1031 | border-radius: 3px; 1032 | text-align: center; 1033 | color: #9B9B9B; 1034 | background: #FFFFFF; 1035 | line-height: 28px; 1036 | } 1037 | .weui-search-bar__cancel-btn { 1038 | margin-left: 10px; 1039 | line-height: 28px; 1040 | color: #09BB07; 1041 | white-space: nowrap; 1042 | } 1043 | -------------------------------------------------------------------------------- /components-form/pages/button/index.js: -------------------------------------------------------------------------------- 1 | // index.js 2 | var types = ['default', 'primary', 'warn'] 3 | var pageObject = { 4 | data: { 5 | defaultSize: 'default', 6 | primarySize: 'default', 7 | warnSize: 'default', 8 | disabled: false, 9 | plain: false, 10 | loading: false 11 | }, 12 | setDisabled: function (e) { 13 | this.setData({ 14 | disabled: !this.data.disabled 15 | }) 16 | }, 17 | setPlain: function (e) { 18 | this.setData({ 19 | plain: !this.data.plain 20 | }) 21 | }, 22 | setLoading: function (e) { 23 | this.setData({ 24 | loading: !this.data.loading 25 | }) 26 | }, 27 | getPhoneNumber: function(info) { 28 | console.log(info) 29 | }, 30 | getInfo(e) { 31 | console.log(e) 32 | }, 33 | getContactInfo(e) { 34 | console.log(e) 35 | } 36 | } 37 | 38 | for (var i = 0; i < types.length; ++i) { 39 | (function (type) { 40 | pageObject[type] = function (e) { 41 | var key = type + 'Size' 42 | var changedData = {} 43 | changedData[key] = 44 | this.data[key] === 'default' ? 'mini' : 'default' 45 | this.setData(changedData) 46 | } 47 | })(types[i]) 48 | } 49 | 50 | Page(pageObject) 51 | 52 | 53 | -------------------------------------------------------------------------------- /components-form/pages/button/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "button组件" 3 | } -------------------------------------------------------------------------------- /components-form/pages/button/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 12 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /components-form/pages/button/index.wxss: -------------------------------------------------------------------------------- 1 | /** index.wxss **/ 2 | /** 修改button默认的点击态样式类**/ 3 | .button-hover { 4 | background-color: red; 5 | } 6 | /** 添加自定义button点击态样式类**/ 7 | .other-button-hover { 8 | background-color: blue; 9 | } -------------------------------------------------------------------------------- /components-form/pages/checkbox/checkbox.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | items: [ 4 | {value: 'USA', name: '美国'}, 5 | {value: 'CHN', name: '中国', checked: 'true'}, 6 | {value: 'BRA', name: '巴西'}, 7 | {value: 'JPN', name: '日本'}, 8 | {value: 'ENG', name: '英国'}, 9 | {value: 'FRA', name: '法国'} 10 | ] 11 | }, 12 | checkboxChange: function(e) { 13 | console.log('checkbox发生change事件，携带value值为：', e) 14 | 15 | var items = this.data.items, values = e.detail.value; 16 | for (var i = 0, lenI = items.length; i < lenI; ++i) { 17 | items[i].checked = false; 18 | 19 | for (var j = 0, lenJ = values.length; j < lenJ; ++j) { 20 | if(items[i].value == values[j]){ 21 | items[i].checked = true; 22 | break 23 | } 24 | } 25 | } 26 | 27 | this.setData({ 28 | items: items 29 | }) 30 | } 31 | }) 32 | -------------------------------------------------------------------------------- /components-form/pages/checkbox/checkbox.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "checkbox组件" 3 | } 4 | -------------------------------------------------------------------------------- /components-form/pages/checkbox/checkbox.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /components-form/pages/checkbox/checkbox.wxss: -------------------------------------------------------------------------------- 1 | @import "../../common/lib/weui.wxss"; 2 | 3 | .checkbox{ 4 | margin-right: 20rpx; 5 | } 6 | -------------------------------------------------------------------------------- /components-form/pages/form/form.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | pickerHidden: true, 4 | chosen: '' 5 | }, 6 | pickerConfirm: function (e) { 7 | this.setData({ 8 | pickerHidden: true 9 | }) 10 | this.setData({ 11 | chosen: e.detail.value 12 | }) 13 | }, 14 | pickerCancel: function (e) { 15 | this.setData({ 16 | pickerHidden: true 17 | }) 18 | }, 19 | pickerShow: function (e) { 20 | this.setData({ 21 | pickerHidden: false 22 | }) 23 | }, 24 | formSubmit: function (e) { 25 | console.log('form发生了submit事件，携带数据为：', e.detail.value) 26 | }, 27 | formReset: function (e) { 28 | console.log('form发生了reset事件，携带数据为：', e.detail.value) 29 | this.setData({ 30 | chosen: '' 31 | }) 32 | } 33 | }) 34 | -------------------------------------------------------------------------------- /components-form/pages/form/form.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "form组件" 3 | } 4 | -------------------------------------------------------------------------------- /components-form/pages/form/form.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | switch 6 | 7 | 8 | 9 | 10 | radio 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | checkbox 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | slider 27 | 28 | 29 | 30 | 31 | input 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 | 47 | 48 | -------------------------------------------------------------------------------- /components-form/pages/form/form.wxss: -------------------------------------------------------------------------------- 1 | @import "../../common/lib/weui.wxss"; 2 | 3 | label { 4 | display: inline-block; 5 | min-width: 270rpx; 6 | margin-right: 20rpx; 7 | } 8 | form{ 9 | width: 100%; 10 | } 11 | .picker-text { 12 | margin-left: 20rpx; 13 | position: relative; 14 | } 15 | -------------------------------------------------------------------------------- /components-form/pages/input/input.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | focus: false, 4 | inputValue: '' 5 | }, 6 | bindKeyInput: function (e) { 7 | this.setData({ 8 | inputValue: e.detail.value 9 | }) 10 | }, 11 | bindReplaceInput: function (e) { 12 | var value = e.detail.value 13 | var pos = e.detail.cursor 14 | var left 15 | if (pos !== -1) { 16 | // 光标在中间 17 | left = e.detail.value.slice(0, pos) 18 | // 计算光标的位置 19 | pos = left.replace(/11/g, '2').length 20 | } 21 | 22 | // 直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置 23 | return { 24 | value: value.replace(/11/g, '2'), 25 | cursor: pos 26 | } 27 | 28 | // 或者直接返回字符串,光标在最后边 29 | // return value.replace(/11/g,'2'), 30 | }, 31 | bindHideKeyboard: function (e) { 32 | if (e.detail.value === '123') { 33 | // 收起键盘 34 | wx.hideKeyboard() 35 | } 36 | } 37 | }) 38 | -------------------------------------------------------------------------------- /components-form/pages/input/input.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "input组件" 3 | } 4 | -------------------------------------------------------------------------------- /components-form/pages/input/input.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 可以自动聚焦的input 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 控制最大输入长度的input 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 实时获取输入值：{{inputValue}} 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 控制输入的input 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 控制键盘的input 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 控制占位符颜色的input 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /components-form/pages/input/input.wxss: -------------------------------------------------------------------------------- 1 | @import "../../common/lib/weui.wxss"; 2 | 3 | .page-section{ 4 | margin-bottom: 20rpx; 5 | } -------------------------------------------------------------------------------- /components-form/pages/label/label.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | checkboxItems: [ 4 | {name: 'USA', value: '美国'}, 5 | {name: 'CHN', value: '中国', checked: 'true'} 6 | ], 7 | radioItems: [ 8 | {name: 'USA', value: '美国'}, 9 | {name: 'CHN', value: '中国', checked: 'true'} 10 | ], 11 | hidden: false 12 | }, 13 | checkboxChange: function (e) { 14 | var checked = e.detail.value 15 | var changed = {} 16 | for (var i = 0; i < this.data.checkboxItems.length; i++) { 17 | if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) { 18 | changed['checkboxItems[' + i + '].checked'] = true 19 | } else { 20 | changed['checkboxItems[' + i + '].checked'] = false 21 | } 22 | } 23 | this.setData(changed) 24 | }, 25 | radioChange: function (e) { 26 | var checked = e.detail.value 27 | var changed = {} 28 | for (var i = 0; i < this.data.radioItems.length; i ++) { 29 | if (checked.indexOf(this.data.radioItems[i].name) !== -1) { 30 | changed['radioItems[' + i + '].checked'] = true 31 | } else { 32 | changed['radioItems[' + i + '].checked'] = false 33 | } 34 | } 35 | this.setData(changed) 36 | }, 37 | tapEvent: function (e) { 38 | console.log('按钮被点击') 39 | } 40 | }) 41 | -------------------------------------------------------------------------------- /components-form/pages/label/label.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "label组件" 3 | } 4 | -------------------------------------------------------------------------------- /components-form/pages/label/label.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 表单组件在label内 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | label用for标识表单组件 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | label内有多个时选中第一个 27 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /components-form/pages/label/label.wxss: -------------------------------------------------------------------------------- 1 | .label-1, .label-2{ 2 | margin: 30rpx 0; 3 | } 4 | .label-3-text{ 5 | color: #576B95; 6 | font-size: 28rpx; 7 | } 8 | .checkbox-3{ 9 | display: block; 10 | margin: 30rpx 0; 11 | } -------------------------------------------------------------------------------- /components-form/pages/picker-view/index.js: -------------------------------------------------------------------------------- 1 | const date = new Date() 2 | const years = [] 3 | const months = [] 4 | const days = [] 5 | 6 | for (let i = 1990; i <= date.getFullYear(); i++) { 7 | years.push(i) 8 | } 9 | 10 | for (let i = 1; i <= 12; i++) { 11 | months.push(i) 12 | } 13 | 14 | for (let i = 1; i <= 31; i++) { 15 | days.push(i) 16 | } 17 | 18 | Page({ 19 | data: { 20 | years: years, 21 | year: date.getFullYear(), 22 | months: months, 23 | month: 2, 24 | days: days, 25 | day: 2, 26 | year: date.getFullYear(), 27 | value: [0, 1, 1], 28 | }, 29 | bindChange: function (e) { 30 | const val = e.detail.value 31 | this.setData({ 32 | year: this.data.years[val[0]], 33 | month: this.data.months[val[1]], 34 | day: this.data.days[val[2]] 35 | }) 36 | } 37 | }) -------------------------------------------------------------------------------- /components-form/pages/picker-view/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "picker-view组件" 3 | } -------------------------------------------------------------------------------- /components-form/pages/picker-view/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | {{year}}年{{month}}月{{day}}日 3 | 4 | 5 | {{item}}年 6 | 7 | 8 | {{item}}月 9 | 10 | 11 | {{item}}日 12 | 13 | 14 | -------------------------------------------------------------------------------- /components-form/pages/picker-view/index.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SuperJolly/wxapp-tutorial-components/ee08f14c5e5ed987ff3fa24b86ec9ea6ab3d62ec/components-form/pages/picker-view/index.wxss -------------------------------------------------------------------------------- /components-form/pages/picker/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | array: ['美国', '中国', '巴西', '日本'], 4 | objectArray: [ 5 | { 6 | id: 0, 7 | name: '美国' 8 | }, 9 | { 10 | id: 1, 11 | name: '中国' 12 | }, 13 | { 14 | id: 2, 15 | name: '巴西' 16 | }, 17 | { 18 | id: 3, 19 | name: '日本' 20 | } 21 | ], 22 | index: 0, 23 | multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']], 24 | objectMultiArray: [ 25 | [ 26 | { 27 | id: 0, 28 | name: '无脊柱动物' 29 | }, 30 | { 31 | id: 1, 32 | name: '脊柱动物' 33 | } 34 | ], [ 35 | { 36 | id: 0, 37 | name: '扁性动物' 38 | }, 39 | { 40 | id: 1, 41 | name: '线形动物' 42 | }, 43 | { 44 | id: 2, 45 | name: '环节动物' 46 | }, 47 | { 48 | id: 3, 49 | name: '软体动物' 50 | }, 51 | { 52 | id: 3, 53 | name: '节肢动物' 54 | } 55 | ], [ 56 | { 57 | id: 0, 58 | name: '猪肉绦虫' 59 | }, 60 | { 61 | id: 1, 62 | name: '吸血虫' 63 | } 64 | ] 65 | ], 66 | multiIndex: [0, 0, 0], 67 | date: '2016-09-01', 68 | time: '12:01', 69 | region: ['广东省', '广州市', '海珠区'], 70 | customItem: '全部' 71 | }, 72 | bindPickerChange: function (e) { 73 | console.log('picker发送选择改变，携带值为', e.detail.value) 74 | this.setData({ 75 | index: e.detail.value 76 | }) 77 | }, 78 | bindMultiPickerChange: function (e) { 79 | console.log('picker发送选择改变，携带值为', e.detail.value) 80 | this.setData({ 81 | multiIndex: e.detail.value 82 | }) 83 | }, 84 | bindMultiPickerColumnChange: function (e) { 85 | console.log('修改的列为', e.detail.column, '，值为', e.detail.value); 86 | var data = { 87 | multiArray: this.data.multiArray, 88 | multiIndex: this.data.multiIndex 89 | }; 90 | data.multiIndex[e.detail.column] = e.detail.value; 91 | switch (e.detail.column) { 92 | case 0: 93 | switch (data.multiIndex[0]) { 94 | case 0: 95 | data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物']; 96 | data.multiArray[2] = ['猪肉绦虫', '吸血虫']; 97 | break; 98 | case 1: 99 | data.multiArray[1] = ['鱼', '两栖动物', '爬行动物']; 100 | data.multiArray[2] = ['鲫鱼', '带鱼']; 101 | break; 102 | } 103 | data.multiIndex[1] = 0; 104 | data.multiIndex[2] = 0; 105 | break; 106 | case 1: 107 | switch (data.multiIndex[0]) { 108 | case 0: 109 | switch (data.multiIndex[1]) { 110 | case 0: 111 | data.multiArray[2] = ['猪肉绦虫', '吸血虫']; 112 | break; 113 | case 1: 114 | data.multiArray[2] = ['蛔虫']; 115 | break; 116 | case 2: 117 | data.multiArray[2] = ['蚂蚁', '蚂蟥']; 118 | break; 119 | case 3: 120 | data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓']; 121 | break; 122 | case 4: 123 | data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物']; 124 | break; 125 | } 126 | break; 127 | case 1: 128 | switch (data.multiIndex[1]) { 129 | case 0: 130 | data.multiArray[2] = ['鲫鱼', '带鱼']; 131 | break; 132 | case 1: 133 | data.multiArray[2] = ['青蛙', '娃娃鱼']; 134 | break; 135 | case 2: 136 | data.multiArray[2] = ['蜥蜴', '龟', '壁虎']; 137 | break; 138 | } 139 | break; 140 | } 141 | data.multiIndex[2] = 0; 142 | console.log(data.multiIndex); 143 | break; 144 | } 145 | this.setData(data); 146 | }, 147 | bindDateChange: function (e) { 148 | console.log('picker发送选择改变，携带值为', e.detail.value) 149 | this.setData({ 150 | date: e.detail.value 151 | }) 152 | }, 153 | bindTimeChange: function (e) { 154 | console.log('picker发送选择改变，携带值为', e.detail.value) 155 | this.setData({ 156 | time: e.detail.value 157 | }) 158 | }, 159 | bindRegionChange: function (e) { 160 | console.log('picker发送选择改变，携带值为', e.detail.value) 161 | this.setData({ 162 | region: e.detail.value 163 | }) 164 | } 165 | }) -------------------------------------------------------------------------------- /components-form/pages/picker/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "picker组件" 3 | } -------------------------------------------------------------------------------- /components-form/pages/picker/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 普通选择器 3 | 4 | 5 | 当前选择：{{array[index]}} 6 | 7 | 8 | 9 | 10 | 多列选择器 11 | 13 | 14 | 当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}} 15 | 16 | 17 | 18 | 19 | 时间选择器 20 | 21 | 22 | 当前选择: {{time}} 23 | 24 | 25 | 26 | 27 | 28 | 日期选择器 29 | 30 | 31 | 当前选择: {{date}} 32 | 33 | 34 | 35 | 36 | 省市区选择器 37 | 38 | 39 | 当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}} 40 | 41 | 42 | -------------------------------------------------------------------------------- /components-form/pages/picker/index.wxss: -------------------------------------------------------------------------------- 1 | @import "../../common/lib/weui.wxss"; 2 | 3 | 4 | .picker{ 5 | padding: 19rpx 26rpx; 6 | background-color: #FFFFFF; 7 | border: 1px solid cornflowerblue; 8 | } 9 | -------------------------------------------------------------------------------- /components-form/pages/radio/radio.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | items: [ 4 | {value: 'USA', name: '美国'}, 5 | {value: 'CHN', name: '中国', checked: 'true'}, 6 | {value: 'BRA', name: '巴西'}, 7 | {value: 'JPN', name: '日本'}, 8 | {value: 'ENG', name: '英国'}, 9 | {value: 'FRA', name: '法国'}, 10 | ] 11 | }, 12 | radioChange: function(e) { 13 | console.log('radio发生change事件，携带value值为：', e.detail.value) 14 | 15 | var items = this.data.items; 16 | for (var i = 0, len = items.length; i < len; ++i) { 17 | items[i].checked = items[i].value == e.detail.value 18 | } 19 | 20 | this.setData({ 21 | items: items 22 | }); 23 | } 24 | }) 25 | -------------------------------------------------------------------------------- /components-form/pages/radio/radio.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "radio组件" 3 | } 4 | -------------------------------------------------------------------------------- /components-form/pages/radio/radio.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 默认样式 5 | 8 | 11 | 12 | 13 | 14 | 15 | 推荐展示样式 16 | 17 | 18 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /components-form/pages/radio/radio.wxss: -------------------------------------------------------------------------------- 1 | @import "../../common/lib/weui.wxss"; 2 | 3 | .radio { 4 | margin-right: 20rpx; 5 | } 6 | -------------------------------------------------------------------------------- /components-form/pages/slider/slider.js: -------------------------------------------------------------------------------- 1 | var pageData = {} 2 | for (var i = 1; i < 5; ++i) { 3 | (function (index) { 4 | pageData['slider' + index + 'change'] = function(e) { 5 | console.log('slider' + index + '发生change事件，携带值为', e.detail.value) 6 | } 7 | })(i) 8 | } 9 | Page(pageData) 10 | -------------------------------------------------------------------------------- /components-form/pages/slider/slider.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "slider组件" 3 | } 4 | -------------------------------------------------------------------------------- /components-form/pages/slider/slider.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 设置step 5 | 6 | 7 | 8 | 9 | 10 | 11 | 显示当前value 12 | 13 | 14 | 15 | 16 | 17 | 18 | 设置最小/最大值 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /components-form/pages/switch/switch.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | switchChange: function (e){ 3 | console.log('switch1 发生 change 事件，携带值为', e.detail.value) 4 | } 5 | }) 6 | -------------------------------------------------------------------------------- /components-form/pages/switch/switch.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "switch组件" 3 | } 4 | -------------------------------------------------------------------------------- /components-form/pages/switch/switch.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /components-form/pages/switch/switch.wxss: -------------------------------------------------------------------------------- 1 | @import "../../common/lib/weui.wxss"; -------------------------------------------------------------------------------- /components-form/pages/textarea/textarea.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | focus: false 4 | }, 5 | bindTextAreaBlur: function(e) { 6 | console.log(e.detail.value) 7 | } 8 | }) 9 | -------------------------------------------------------------------------------- /components-form/pages/textarea/textarea.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "textarea组件" 3 | } 4 | -------------------------------------------------------------------------------- /components-form/pages/textarea/textarea.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |