从input组件说起
编译模板
\n
{{placeholder}}
内置组件样式
wx-input {
height: 1.4rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-overflow: clip;
overflow: hidden;
white-space: nowrap;
font-family: UICTFontTextStyleBody;
min-height: 1.4rem;
}
wx-input input {
min-height: 1.4rem;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
border: none;
height: inherit;
width: inherit;
font-size: inherit;
font-weight: inherit;
font-family: UICTFontTextStyleBody;
color: inherit;
background: inherit;
display: inherit;
padding: 0;
margin: 0;
outline: none;
vertical-align: middle;
text-align: inherit;
overflow: inherit;
white-space: inherit;
text-overflow: inherit;
-webkit-tap-highlight-color: transparent;
}
wx-input[disabled] p {
color: grey;
}
wx-input div {
min-height: 1.4rem;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-overflow: inherit;
border: none;
height: inherit;
width: inherit;
font-size: inherit;
font-weight: inherit;
font-family: UICTFontTextStyleBody;
color: inherit;
background: inherit;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0;
margin: 0;
outline: none;
text-align: inherit;
-webkit-tap-highlight-color: transparent;
}
wx-input div[type=password] p {
color: black;
}
wx-input div p {
height: inherit;
min-height: 1.4rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-overflow: inherit;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
}
可直接重用的loading
编译模板
内置组件样式
.wx-loading {
position: fixed;
z-index: 2000000000;
width: 7.6em;
min-height: 7.6em;
top: 180px;
left: 50%;
margin-left: -3.8em;
background: rgba(40, 40, 40, 0.75);
text-align: center;
border-radius: 5px;
color: #FFFFFF;
font-size: 16px;
line-height: normal;
}
.wx-loading-icon {
margin: 30px 0 10px;
width: 38px;
height: 38px;
vertical-align: baseline;
display: inline-block;
-webkit-animation: weuiLoading 1s steps(12, end) infinite;
animation: weuiLoading 1s steps(12, end) infinite;
background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat;
background-size: 100%;
}
.wx-loading-content {
margin: 0 0 15px;
}
.wx-loading-mask {
position: fixed;
z-index: 1000;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
@-webkit-keyframes weuiLoading {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 360deg);
}
}
@keyframes weuiLoading {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 360deg);
}
}
以上代码中l通用loading样式class可以直接拿来己用，不用再为加载loading发愁了
image组件对象在内部会被编译为div标签，组件中的src属性中的图片url会被设置为该图片的背景图片，进而通过背景图片的backgroundSize属性以及backgroundPosition来控制图片的显示模式
对于srcoll组件来说，wx提供了如下模板
以及如下内置样式
wx-scroll-view {
display: block;
width: 100%;
}
.wx-scroll-view {
position: relative;
-webkit-overflow-scrolling: touch;
height: 100%;
}
此处需要注意的是，当纵向滚动时scroll-view需给定高度，否则scroll-view无法做scrolltoupper以及scrolltolower的事件绑定
数据超过最大长度
关于下拉上拉刷新问题：
上拉可以利用scroll-view提供scrolltolower异步加载新数据
小程序在window的配置里提供了enablePullDownRefresh的属性与方法
onPullDownRefresh: function () {
console.log('onPullDownRefresh', new Date())
}
进行绑定
根据目前调试结果，关于page内绑定的数据长度应该有一定限制，刷新列表时应同时利用scrolltoupper以及scrolltolower事件
关于Canvas需要注意一些东西
var context = wx.createContext()
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
context.stroke()
context.setStrokeStyle("#ff0000")
context.setLineWidth(2)
context.moveTo(160, 100)
context.arc(100, 100, 60, 0, 2 * Math.PI, true)
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
context.stroke()
//调用wx.drawCanvas，通过canvasId指定在哪张画布上绘制，通过actions指定绘制行为
wx.drawCanvas({
canvasId: 'firstCanvas',
actions: context.getActions() //获取绘图动作数组
})
小程序提供的这一画布上下文，实际上并不是一个上下文对象，仅仅是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。
Canvas API文字measuredText
在获取不到真实Canvas上下文的情况下，无法预先执行类似measuredText这样的预计算文字的方法，同时，wx也未提供类似API