总结学习微信小程序开发的一些知识点---001

开始学了一段时间的小程序,发现学的快忘的也快,现在决定把它记录下来,好了话不多说,言归正传。

 

1.弹性盒子模型

.container{
display:flex;//设置容器为弹性模型
flex-direction:column;//将其排列方向设为列排布
align-items:center; //使盒内元素居中
}

2.设置矩形块为圆角的方法

.container{
  border: 1px black solid;
  border-radius: 3px;
}

3.使容器内文字水平居中

text-align:center;

4.使容器内文字垂直居中(可设置行高与容器高度相同)

.container{
 height: 20rpx;
 line-height: 20rpx;
}

5.设置小程序的背景颜色(全屏)

wxml页面中不存在标签,但是实际上在DOM树中是存在这一节点的

点此查看 如图

这时我们对page进行设置样式

page{
height:100%;
background-color:#fff;
}

6.逻辑分辨率与物理分辨率的区别

pt 逻辑分辨率:和屏幕物理尺寸有关系
px 物理分辨率:和屏幕尺寸大小无关,1px为一个物理像素点  ps:小程序设计效果图时设计时以iphone6的物理像素750*1334为视觉稿进行设计
iphone6下1px=1rpx=0.5pt 

7.swiper组件语法(默认横向轮播)





如果想纵向滚动:需在组件中加上vertical=“true” 
ps:样式设置在swiper中

8.绝对路径与相对路径

绝对路径 以/开头
相对路径../表示向上走一级

9.this.setData(变量名x)等同于将 x 这一个变量复制到data里

10.数据绑定的扩展用法:

(1)例如控制组件属性时,vertical="{{false}}"这是false才能起作用,而属性为true时则不用

(2)控制标签元素的显示和隐藏例如

11.使用block标签对相同代码块进行复用 例如


......代码块........

12.跳转页面API

wx.navigateTo({url:"../posts/post"})父子页面  执行onHide函数
wx.redirectTo 跳转页面,初始页面被关闭 执行onUnload函数

13.bandtap和catchtap的区别
使用catch则会组织冒泡事件的发生,而band则不会。

14.跳转到tab页处理方法

 

你可能感兴趣的:(总结学习微信小程序开发的一些知识点---001)