编程 Javascript

小程序组件传值和引入sass的方法(使用vant Weapp组件库)

Posted in Javascript onNovember 24, 2020

1.生命周期

1.onLoad()：页面加载时触发，一个页面只加载一次。
2.onShow()：页面显示切换的时候触发
3.onReady():页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
4.onHide():页面卸载时触发

2.小程序的框架：

小程序框架有两个层，一是视图层，一是逻辑层。

框架的视图层：
1.由 WXML 与 WXSS 编写，由组件来进行展示。
2.将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
3.WXML(WeiXin Markup language) 用于描述页面的结构。
4.WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
5.WXSS(WeiXin Style Sheet) 用于描述页面的样式。
6.组件(Component)是视图的基本组成单元。

逻辑层：
1、小程序开发框架的逻辑层由 JavaScript 编写。 2、逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
3、由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如 document，window 等。
4、开发者写的所有代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁。类似
ServiceWorker，所以逻辑层也称之为 App Service。

1.APP()：表示的是注册程序，必须在app.js中注册，且不能注册多个。接收的是object参数，其指定小程序的生命周期函数等。
2.Page()：表示的是注册一个页面，接收的是object参数，其指定页面的初始数据、生命周期函数、事件处理函数。
3.setData的使用：setData函用于将数据从逻辑层发送到视图层（异步），同时改变对应的this.data的值（同步）因此，直接修改this.data但是不调用this.setData（）不改变页面的状态，造成数据不一致。this.setData()会触发视图的更新。

3、什么是自定义组件？
小程序中常常会有一些通用的交互模块，比如“下拉选择列表”、“搜索框”、“日期选择器”等。这些界面交互模块可能会在多个页面中用到，逻辑也相对独立。然而，用传统的小程序开发方法来实现这样的模块是非常繁琐的。面对这个情况，小程序基础库提供了让开发者自己创建界面组件的特性，称之为“自定义组件”。通过这个特性，开发者就能够将这样的交互模块抽象成界面组件，使界面代码组织变得非常灵活。

3.2、使用场景

（1）多个页面用到同样的东西
（2）页面功能很多,很复杂,使用组件来拆分逻辑

3.3、自定义组件组成

（1）json文件用于于放置一些最基本的组件配置

（2）wxml 文件组件模版

（3）wxss 文件组件的样式（无法直接使用全局样式，需要通过@import导入）

（4）js 文件组件的 JS 代码，承载组件的主要逻辑

4、使用组件
（1）新建自定义组件文件

在根目录新建components文件夹，然后右键新建自定义组件目录，最后右键新建Component