微信小程序注册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”


Comment
avatar
baixie-g
欢迎,阅读,点评
跟我走
Announcement
g的blog正在建设欢迎您
Recent Post
关于周更
关于周更
梦开始地方
梦开始地方
Info
Article :
4
Total Count :
2.1k
UV :
PV :
Last Push :