小程序组件传值和引入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

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

(2)组件json文件配置

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

(3)组件wxml编写

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

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

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

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

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

效果

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

二、父子组件通信

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一定要在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的方法(使用vant Weapp组件库)

在app.js局部引入

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

到此这篇关于小程序组件传值和引入sass的方法(使用vant Weapp组件库)的文章就介绍到这了,更多相关小程序组件传值和引入sass内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
React简单介绍
May 24 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
JavaScript实现图片拖曳效果
Sep 08 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
9个JavaScript日常开发小技巧
Oct 06 Javascript
js实现抽奖功能
Nov 24 #Javascript
前端 javascript 实现文件下载的示例
Nov 24 #Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 #Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 #Javascript
原生js实现表格循环滚动
Nov 24 #Javascript
浅析VUE防抖与节流
Nov 24 #Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 #Vue.js
You might like
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
MVVM框架下实现分页功能示例
2018/06/14 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
教师现实表现材料
2014/02/14 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
出纳担保书范文
2014/04/02 职场文书
省文明单位申报材料
2014/05/08 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书