微信小程序注册and下载微信开发者工具
操作台
1调试器 Wxml接触元素
wxml
以下详情见微信开发者文档
开发-组件
1轮播图
swiper class banners
swiper-item
2滚轴展示
scroll-view enable-flex声明就是true scroll-x
语法:类似vue
css
page{
height 未定义 100%
}
权重
.class
.navItem .iconfont
.navItem text
大框
display flex弹性盒子
flex-direction column 竖直排列
align- item cengter 水平居中
justify-content center 竖直居中
padding:
子容器view
width
height
line-hight 80rpx 行高
text-align center 水平居中
font-size 28rpx
border 1rpx solid #333边框线黑实
border - radius:10rpx 圆角
padding: 10rpx 20rpx 内边距 上下 左右
margin-right
图
width
height
border-radius 50%圆角
margin rpx 边距
background rgb(240,19,19)
color
文字
font-size 32rpx 大小
font-weight bold 加粗
line-height
margin 边距
border 1rpx solid #333边框线黑实
border - radius:10rpx 圆角
padding: 10rpx 20rpx 内边距 上下 左右
padding-botton: 20rpx
单行文本超出换行三件套
white-space:nowrap
overflow:hidden
text-overflow:ellipsis
内联元素加display:26rpx;
多行文本溢出
overflow:hidden
text-overflow:ellipsis
display: -webkit-box 采用该盒模型
-webkit-box-orient: vertical 设置模式
-webkit-line-clamp : 2 设置行数
js
延时 setTimeout(()=>
{
},2000)
this.setData({
msg: ‘ ‘
})
catchtap:不向父传递
bindtap:传递
src
bindgetuserinfo=‘handleGetUserInfo’
open-type=”getUserInofo”.
条件渲染
wx.if=’userInfo’
wx.elif
api:
在onload获取用户信息以后不用
wx.getUserInfo({
success:(res)=>{
console.log(res);
this.setData({
userInfo:res.userInofo
})
},
fail:(err)=>{
console.log(err);
}
})
更新:新的api:getUserProfile
用户未授权 用button open-type=‘getUserInfo’
用户已授权 用 wx.getUserInfo
userInfo.
头像图avatarUrl
名字nickName
数据在appdata可找
app.json
page
style
sitemapLocation
window
navgator…color
tabBar
color
selectedcolor
list
pagepath
text
iconpath
selectedIconPath
前端资源
阿里iconfont图标库(因为不是wxss,所以复制一份源码,复制到/static/iconfont/iconfont.wxss)
unicode
font class √
symbol
使用即class=”iconfont icon-iconsearch”
