前言
学习参考地址
小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/index.html
css学习参考：http://www.runoob.com/cssref/css3-pr-align-items.html
第三方服务《极点日历》：https://github.com/czcaiwj/calendar
*.js
| 名称 | 使用次数 | 描述 |
|---|---|---|
| Page | 12 | 在页面中声明生命周期或方法， 注意data为保存的值 |
| data | 12 | 页面的初始数据 |
| onLoad | 12 | 首次加载会调用的方法 |
| globalData | 1 | 获取全局保存的信息 |
| console.log console.info | 59 | 不拼接内容时， 会直接打印该对象 |
| JSON.parse | 2 | 将json字符串解析成对象 |
| JSON.stringify | 1 | 将对象解析成json， 然后再生成对象， 可得到新的对象 |
| wx.login | 2 | 微信登录操作， 可获取到code 再利用code可获得到openid |
| wx.request | 18 | 网络请求 |
| wx.setStorageSync | 7 | 设置本地缓存信息 |
| wx.getStorageSync | 45 | 同步获取本地保存的数据 |
| wx.setNavigationBarTitle | 2 | 设置本页面的标题文字 |
| wx.navigateTo | 7 | 跳转到某页面 |
| wx.showToast | 17 | title icon 显示提示信息， 可设置延迟 |
| wx.showModal | 4 | 确认对话框 |
| wx.setClipboardData | 2 | 拷贝数据到内存 |
| wx.getClipboardData | 2 | 拷贝数据到内存的返回结果 |
*.json
| 名称 | 使用次数 | 描述 |
|---|---|---|
| usingComponents | 1 | 第三方日历效果 引入声明 |
| pages | 1 | 页面的声明 |
| plugins | 1 | 第三方插件配置声明 |
| window | 1 | 全局的配置声明 如标题、 背景等 |
| tabBar | 1 | 首页底部 tag栏配置 |
*.wxml
| 名称 | 使用次数 | 描述 |
|---|---|---|
| view | 168 | 基础布局 |
| text | 23 | 文本布局 |
| open - data | 2 | 用于展示微信开放的数据。 例： 可不经过授权， 直接获取微信头像 |
| block | 4 | 一次性判断多个组件标签， 可以使用一个 < block / > 标签 |
| form | 1 | 表单， 将组件内的用户输入的 switc input checkbox slider radio picke 标签的提交。 |
| picker | 5 | 列表选择器 |
| image | 2 | 设置图片 |
| button | 11 | 按钮 |
| input | 8 | 输入框 |
| radio - group | 1 | 单选按钮组 |
| radio | 2 | 单选按钮 |
| label | 1 | 将控件放在该标签下， 当点击时， 就会触发对应的控件。 |
| calendar | 1 | 第三方的日历类 |
| scroll - view | 1 | 可滚动视图区域。 |
*.wxss
| 名称 | 使用次数 | 描述 |
|---|---|---|
| align-items | 19 | align-items: center; align-items: flex-start; |
| animation | 1 | animation: weuiLoading 1s steps(12, end) infinite; |
| background | 66 | background: #fff; background: rgb(92, 139, 240); |
| background-color | 30 | background-color: #fff; background-color: rgba(0, 0, 0, 0.5); background-color: white; |
| background-repeat | 2 | background-repeat: no-repeat; |
| background-size | 3 | background-size: 100% 100%; background-size: 100%; |
| border | 8 | border: 2rpx solid #ddd; border:1px solid rgb(146, 143, 143); |
| border-bottom | 20 | border-bottom: 1px solid #ccc; border-bottom: 1px solid #d0d0d0; |
| border-color | 4 | border-color: #999; border-color: #c8c8cd; |
| border-left | 5 | border-left: 1px solid #cecece; |
| border-radius | 13 | border-radius: 4rpx; border-radius: 50%; border-radius: 5px; |
| border-right | 4 | border-right: 1px solid #dedede; border-right: 1rpx solid #d9d9d9; |
| border-style | 3 | border-style: solid; |
| border-top | 11 | border-top: 1px solid #dedede; |
| border-width | 3 | border-width: 2px 2px 0 0; |
| bottom | 12 | bottom: 0.52em; bottom: 0; |
| box-sizing | 19 | box-sizing: border-box; |
| color | 90 | color: #ffffff; color: inherit; color: red; |
| content | 20 | content: XXXX XXXX; content: 'A'; |
| display | 78 | display: block; display: flex; display: inline; display: inline-block; display: none; display: -webkit-box; display: -webkit-flex; |
| flex | 12 | flex: 1; flex: auto; |
| flex-direction | 11 | flex-direction: column; flex-direction: row; |
| flex-grow | 1 | flex-grow: 1; |
| flex-wrap | 1 | flex-wrap:nowrap; |
| float | 7 | float: left; |
| font-family | 2 | font-family: -apple-system-font, XXXXHelvetica NeueXXXX, sans-serif; font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif; |
| font-size | 84 | font-size: 0.9em; font-size: 0; font-size: 12pt; font-size: 12px; font-size: 22rpx; font-size: 80%; font-size: inherit; font-size: large; |
| font-weight | 11 | font-weight: 600; font-weight: bold; |
| height | 80 | height: 1.6em; height: 100%; height: 10px; height: 128rpx; height:100%; |
| justify-content | 9 | justify-content: center; justify-content: row; justify-content: space-around; justify-content: space-between; |
| left | 30 | left: -0.65em; left: 0; left: 10px; left: 50%; |
| line-height | 34 | line-height: 1.6; line-height: 1.6em; line-height: 15px; line-height: 28rpx; |
| list-style | 1 | list-style: none; |
| margin | 17 | margin: 0 0.62em; margin: 0 30rpx; margin: 0 5px; margin: 0 auto; margin: 1.17647059em 15px 0.3em; margin: 1.5em auto; margin: 100rpx 0 30rpx 0; margin: 10rpx; margin: -180rpx 105rpx; margin: 20rpx auto 50rpx; margin:18rpx 0 0 28%; |
| margin-bottom | 25 | margin-bottom: 0.9em; margin-bottom: 0; margin-bottom: 100rpx; margin-bottom: -4px; |
| margin-left | 13 | margin-left: 15px; margin-left: -2px; margin-left: 3.2px; |
| margin-right | 12 | margin-right: 0.8em; margin-right: 10px; margin-right: 10rpx; margin-right: -9px; |
| margin-top | 28 | margin-top: 0; margin-top: 1.17647059em; margin-top: 10px; margin-top: 10rpx; |
| max-width | 2 | max-width: 8em; max-width:20%; |
| min-height | 3 | min-height: 100%; min-height: 2.58823529em; |
| min-width | 4 | min-width: 0; min-width: 4em; min-width: 8px; |
| opacity | 2 | opacity: 0.5; opacity: 0; |
| overflow | 19 | overflow: auto; overflow: hidden; |
| overflow-x | 1 | overflow-x: hidden; |
| padding | 46 | padding: 0 0.55em; padding: 0 0.6em 0 0.7em; padding: 0 20px; padding: 0 40rpx 20rpx 40rpx; padding: 0 80rpx; padding: 0.15em 0.4em; padding: 0.5em 15px; padding: 0; padding:80rpx 30rpx 0; |
| padding-bottom | 10 | padding-bottom: 0; padding-bottom: 10px; padding-bottom: 12rpx; |
| padding-left | 21 | padding-left: 0.35em; padding-left: 0; padding-left: 15px; |
| padding-right | 12 | padding-right: 0.35em; padding-right: 0; padding-right: 13px; |
| padding-top | 14 | padding-top: 50px; padding-top: 50rpx; |
| position | 85 | position: absolute; position: fixed; position: relative; |
| right | 28 | right: 0; right: 15px; |
| text-align | 37 | text-align: center; text-align: justify; text-align: left; text-align: right; |
| text-align-last | 1 | text-align-last: justify; |
| text-overflow | 4 | text-overflow: ellipsis; |
| top | 30 | top: 0.36em; top: -0.9em; top: 0; top: 18px; top: 50%; |
| transform | 15 | transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); transform: rotate3d(0, 0, 1, 0deg); |
| transition | 3 | transition: transform 0.3s, -webkit-transform 0.3s; transition: transform 0.3s; transition: -webkit-transform 0.3s; |
| vertical-align | 9 | vertical-align: middle; vertical-align: top; |
| white-space | 6 | white-space: nowrap; |
| width | 84 | width: 40%; width: 4px; width: 4rpx; width: auto; |
| word-break | 4 | word-break: break-all; word-break: normal; word-wrap: break-word; |
| z-index | 10 | z-index: 99; z-index: 9999; |
page{/*系统页标签*/
height:100%;
width:100%;
}
.rl_coupon_platform {
/**RelativeLayout相对布局*/
width: 690rpx;
height: 224rpx;
margin-bottom: 20rpx;
position: relative; /**相对定位，子元素的absolute才能生效*/
left: 0rpx; /*相对于自己往右偏离0*/
top: 0rpx; /*相对于自己往下偏离0*/
background: #f00;
}
.ll_index_content {
/*LinearLayout for view*/
width: 100%; /*layout_width 宽度*/
height: 100%; /*layout_height 高度*/
display: flex;
flex-direction: column; /*orientation 排版 column:垂直 row:水平*/
align-items: center; /*gravity 位置*/
background-color: #f2f2f2; /*background 背景 */
padding: 0rpx; /*padding 内边距 */
margin: 0rpx; /*layout_margin 外边距*/
justify-content: space-between;/*两端对齐，一般用于子布局有左边和右边两种排版*/
}
.iv_index_head {
/*ImageView for image mode="widthFix" 属性参考：https://developers.weixin.qq.com/miniprogram/dev/component/image.html*/
width: 100%; /*layout_width 宽度*/
height: 100%; /*layout_height 高度*/
margin: 0rpx; /*layout_margin 外边距*/
border-radius: 25rpx;/*圆形头像*/
}
.tv_index_submit {
/*TextView for text*/
width: 100%; /*layout_width 宽度*/
height: 100%; /*layout_height 高度*/
font-size: 28rpx; /*textSize 文字大小*/
color: #e64340; /*textColor 文字颜色*/
background: linear-gradient(to right, #ff1919, #ff6533); /*background 背景 */
border-radius: 3px; /*shape 圆角*/
padding: 0rpx; /*padding 内边距 */
margin: 0rpx; /*layout_margin 外边距*/
font-weight: bold; /*取值(100-900)：mormal：正常大小相当于400。bold :粗体，相当于700。bolder， lighter。*/
border-style: solid; /*设置边框类型*/
border-width: 1px; /*设置边框粗细*/
border-color: #ff1919; /*设置边框颜色。*/
display: flex;
align-items: center;/**水平居中*/
justify-content: center;/**垂直居中*/
}