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

最新推荐文章于 2024-06-26 10:30:00 发布

刚开始奋斗的小桂圆儿

最新推荐文章于 2024-06-26 10:30:00 发布

阅读量681

点赞数

本文链接：https://blog.csdn.net/zgyer_/article/details/81349199

版权

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

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页面中不存在<page></page>标签，但是实际上在DOM树中是存在这一节点的

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

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

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

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

7.swiper组件语法（默认横向轮播）

<swiper>
<swiper-item></swiper-item>
<swiper-item></swiper-item>
<swiper-item></swiper-item>
</swiper>

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

8.绝对路径与相对路径

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

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

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

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

（2）控制标签元素的显示和隐藏例如 <image wx:if="{{true/false}}"></image>

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

<block wx:for="{{posts}}" wx:for-item="item">
......代码块........
<block>

12.跳转页面API

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

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

<navigator url="../index/index" open-type="switchTab"><button  type="primary" size="default">跳转</button></navigator>

关注