本篇文章给大家分享的是有关小程序开发中如何引入sass,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
创新互联是一家专注于成都网站设计、网站建设与策划设计,东湖网站建设哪家好?创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:东湖等地区。东湖做网站价格咨询:189820811081.生命周期
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
(2)组件json文件配置
(3)组件wxml编写
(4)导入自定义组件
(4.1)在父组件json文件的usingComponents中导入组件
(4.2)在父组件wxml文件中以组件名作为标签使用组件
效果
二、父子组件通信
1、父传子
(1)在父组件中的子组件标签添加属性,给子组件传递数据
(2)子组件在js中通过properties接收,可以指定接收数据类型
2、子传父
(1)在父组件的子组件标签自定义事件,传给子组件
(2)子组件用this.triggerEvent(‘父组件自定义事件', ‘要传递的参数'),触发父组件传过来的自定义事件
三、在微信小程序中使用less/sass
微信小程序中的样式文件wxss等同于css,并不支持less或sass语法。所以需要把整个项目拖到(visual Studio Code)中
1.安装
2.下载安装了Easy Sass 后,首先需要修改一下vscode的配置文件setting.json,增加的配置如下:
3创建一个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中:
在app.js局部引入
以上就是小程序开发中如何引入sass,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
网页标题:小程序开发中如何引入sass-创新互联
标题网址:http://lswzjz.com/article/jjgod.html