小程序开发中如何引入sass
创始人
2024-11-20 14:22:01
0次

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

小程序开发中如何引入sass

(2)组件json文件配置

小程序开发中如何引入sass

(3)组件wxml编写

小程序开发中如何引入sass

(4)导入自定义组件
(4.1)在父组件json文件的usingComponents中导入组件

小程序开发中如何引入sass

(4.2)在父组件wxml文件中以组件名作为标签使用组件

小程序开发中如何引入sass

效果

小程序开发中如何引入sass

二、父子组件通信

1、父传子
(1)在父组件中的子组件标签添加属性,给子组件传递数据

小程序开发中如何引入sass
小程序开发中如何引入sass
小程序开发中如何引入sass

(2)子组件在js中通过properties接收,可以指定接收数据类型

小程序开发中如何引入sass

2、子传父
(1)在父组件的子组件标签自定义事件,传给子组件

小程序开发中如何引入sass

(2)子组件用this.triggerEvent(‘父组件自定义事件', ‘要传递的参数'),触发父组件传过来的自定义事件

小程序开发中如何引入sass
小程序开发中如何引入sass

三、在微信小程序中使用less/sass

微信小程序中的样式文件wxss等同于css,并不支持less或sass语法。所以需要把整个项目拖到(visual Studio Code)中
1.安装

小程序开发中如何引入sass

2.下载安装了Easy Sass 后,首先需要修改一下vscode的配置文件setting.json,增加的配置如下:

小程序开发中如何引入sass

3创建一个sass可以进行编译了

小程序开发中如何引入sass

一定要在visual Studio Code中编译,不可以在小程序中进行编译

使用vant Weapp组件库 下载npm init -y下载npm i通过 npm 安装npm i @vant/weapp -S --production修改 app.json将 app.json 中的 “style”: “v2” 去除修改 project.config.json,放入setting中:

小程序开发中如何引入sass

在app.js局部引入

小程序开发中如何引入sass
小程序开发中如何引入sass
小程序开发中如何引入sass

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...