小程序学习知识点（杂）

最新推荐文章于 2024-05-04 03:36:21 发布

lxxxxxt

最新推荐文章于 2024-05-04 03:36:21 发布

阅读量231

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36281031/article/details/107521141

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

事件冒泡与事件捕获

事件流的发生顺序不同
事件冒泡：从最内层的元素开始发生，向上传播；下例中就是<p> -> <div> -> <body> -> <html> -> <document>
```
<div id="outer">
    <p id="inner">Click me!</p>
</div>
```
事件捕获相反，从最外层开始发生，知道最具体的元素。

注册页面

小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。Page 构造器适用于简单的页面。但对于复杂的页面，可以使用 Component 构造器来构造页面。Component 构造器的主要区别是：方法需要放在 methods: { } 里面。

生命周期函数：页面生命周期中各个阶段执行的方法，例如：

Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  }
})

列表渲染

wx:for，绑定一个数组，使用数组中各项数据重复渲染组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为item
```
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
```
wx:if="{{判断条件}}"，放在组件属性中，满足判断条件则显示。
```
<text class='to' wx:if="{{cardInfo.shuttleType !== 'material'}}">往</text>
```

前端单位

物理像素：显示的数据是以像素为单位的，一个像素只能显示一种颜色，但是根据显示颜色的总数不同，每个像素占的位数也不同。如果想显示黑白，那一位就可以存储了，但如果我显示16种颜色，就得4位来存储一个颜色，这样的一个存储单位就叫做物理像素（一个物理像素占的位数不固定）。

px、物理像素、rem、rpx的关系
px：像素，相对显示器屏幕分辨率而言。
em：相对长度单位，相对于当前对象内文本的字体尺寸，如果当前文本字体尺寸未设置，则相对于浏览器默认字体尺寸。会继承父元素字体大小。例如：浏览器默认字体高16px，则1em = 16px，12px = 0.75em。
rem：root em，相对单位，区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
rpx：相对屏幕宽度

组件库

ColorUI
ColorUI
Vant UI
Vant Weapp
小程序使用Npm引入【VANT】组件全程教学
1、管理员身份打开cmd，到项目根目录，npm init
2、npm i vant-weapp -S --production
3、开发者工具-工具-构建npm，生成miniprogram_npm
4、根据官方的git地址，下载压缩包。下载完成之后，将其中的dist文件夹放到miniprogram_npm文件夹下的vant-weapp文件夹里面。
5、在对应页面的json文件中引入：
```
"usingComponents": {
	"van-button": "/miniprogram_npm/vant-weapp/dist/button/index"
}
```

CSS属性

ling-height：行间距
display：

水平垂直居中：

display: flex;//必须有，不然没有效果
justify-content: center;
align-items: center;

plain:true, 窗体主体部分背景颜色透明

小程序有一些组件有默认属性，例如button，会使自定义css属性无效。可以在app.json中去掉style:v2，并且重写buttom{}

button{
  background-color:rgb(247, 247, 247); 
  border-radius: 10rpx;
  padding:5rpx;
  margin:0rpx;
  display: inline-block;
  line-height: 1;
  }

小程序生命周期

分为整个小程序的生命周期和页面的生命周期

小程序：冷启动（首次打开小程序或被微信销毁后再次打开，依次触发onLaunch——>onShow）、热启动（从后台切换到前台，直接onShow）。

App({
	//初始化完成时触发，全局只触发一次
	onLaunch: function(){ },

	//
	onShow: function(){ },

	//从前台进入后台时触发
	onHide: function(){ },

	//小程序发生脚本错误，或api调用失败时触发
	onEror: function(){ }
})

页面生命周期：

Page({
	//初始数据
	data:{},
	
	//监听页面加载,其参数是页面的query参数，一个页面只有一次
	onLoad: function(){ }

	//页面显示或从后台跳回小程序显示时触发，不能传递参数
	onShow:function(){ }
	
	//onShow之后，逻辑层向渲染层发送初始化数据，第一次渲染后通知逻辑层触发onReady()，一个页面一次
	onReady:function(){ }
	
	//页面隐藏未卸载：如 wx.navigateTo 或底部tab切换到其他页面，小程序切入后台等
	onHide:function(){ }
	
	//页面卸载:如wx.redirectTo或wx.navigateBack到其他页面时
	onUnload: function(){ }
})

在这里插入图片描述

View Thread渲染层；AppService逻辑层

渲染层、逻辑层交互：

渲染层的请求并不会直接到达逻辑层，而是先到系统层，系统层先操作处理一部分功能在将数据传递给逻辑层，反过来也一样。所以不能频繁的setdata，频繁的请求绑定交互，有可能造成系统的奔溃而使程序处于停滞状态。如果当前数据并不会在页面中进行显示，数据也不应该定义在data中，否则每次在进行数据绑定时，这些数据也会进行一次从数据层到逻辑层的传递，占用了系统层的资源。

小程序渲染层与逻辑层交互原理