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

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

(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的方法(使用vant Weapp组件库)的文章就介绍到这了,更多相关小程序组件传值和引入sass内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序自定义组件封装及父子间组件传值的方法

    首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名 官网地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 例如,我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml <view hidden="{{response.length < 1}}"> <view class

  • 微信小程序自定义组件传值 页面和组件相互传数据操作示例

    本文实例讲述了微信小程序自定义组件传值 页面和组件相互传数据操作.分享给大家供大家参考,具体如下: 要想在组件中调到页面中的方法,并且想要组件中传数据到页面去,emmmm,可以酱紫: 用组件事件 triggerEvent! 首先,在页面中定义组件 ,json文件中记得加上: { "usingComponents": { "user-btn": "/pages/component/userInfo/userInfo" } }, 然后,index.w

  • 微信小程序使用Vant Weapp组件库的方法步骤

    地址:https://youzan.github.io/vant/#/zh-CN/intro 一.引入Vant组件库 1.首先运行 npm init 就会生成 package.json 2.运行 npm i vant-weapp -S --production 3.安装成功后 点击 工具 => 构建npm 之后点击 详情 => 使用构建npm 渲染 二.使用组件库 首先在json文件中引入组件 "van-button": "vant-weapp/button&qu

  • Mpvue中使用Vant Weapp组件库的方法步骤

    一.介绍 mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑. 此教程是在dov-yih一同协助下完成.经过测试,Vant Weapp下所有组件都能够在mpvue中使用 mpvue-vant Github地址 二.使用方法 目前vant已经支持了npm的方式,但是由于node_modules目录下的代码是不会被编进dist目录下的,所以暂时只能用git方式使用. 克隆

  • 详解如何在微信小程序中愉快地使用sass

    前言 在微信小程序中,css是用wxss来表示,但写法基本一致.需要注意的是wxss扩展了两个特性,分别是: 尺寸单位 样式导入 具体可参考wxss,此处不做过多赘述. 为了方便打包sass,我们使用gulp来处理我们的scss文件,将其转换为wxss. 目录结构 在开发中,我们一般会有一个src源代码目录,一个dist目录用来输出我们打包的代码.而本次讲解用到的目录结构如下: build目录用来配置我们的打包参数,目前里面只有一个config.js文件 dist目录为打包输出的目录,也是小程序

  • 微信小程序购物车、父子组件传值及calc的注意事项总结

    前言 在做微信小程序时,觉得小组里对购物车的实现不是很完美,就自己尝试的写了下,然后用到了父子组件传值,父子组件传值的话,和vue框架上是非常相似的,以及calc这个css函数,calc有个注意点,自己不怎么用,一时间有差点忘了,这里记录下 下面话不多说了,来一起看看详细的介绍吧 1.效果图 2.子组件实现 要实现图中删除的效果,使用组件的形式更好做点,我当时本想直接在pages里实现,不过结果就是,滑动时,所有的商品都显示了删除按钮,除非用数组将每个商品要移动的距离存储起来,不过这样的话就很麻

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

    1.生命周期 1.onLoad():页面加载时触发,一个页面只加载一次. 2.onShow():页面显示切换的时候触发 3.onReady():页面初次渲染完成时触发.一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互 4.onHide():页面卸载时触发 2.小程序的框架: 小程序框架有两个层,一是视图层,一是逻辑层. 框架的视图层: 1.由 WXML 与 WXSS 编写,由组件来进行展示. 2.将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层. 3.WXML(WeiXi

  • 微信小程序接入vant Weapp组件的详细步骤

    刚创建的项目的文件结构 首先在你项目的根目录下打开终端,输入npm init 对项目初始化 这时会生成pachage.json文件. 继续在终端运行以下命令 我这里用这个: npm i vant-weapp -S --production 运行完如图所示: 安装成功后 回到小程序开发工具 点击 工具 => 构建npm 运行完截图: 完成后在编辑器右边的详情把红框内的打勾上 使用组件 在你想使用组件库的的json文件内引入组件.比如你想在fundIncome页面内使用button组件. 效果: 上

  • 微信小程序 页面传值详解

    微信小程序 页面传值详解 一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如 这里将good_id=16 参数传入detail页面, 然后detail页面的 onload方法内接受. 如果需要传多个参数, 用 & 链接即可 如果要传 数组, 字典等复杂类型, 要先用 JSON.stringify() 转成字符串传递. 注 : 如果转化的字符串中 有"?"这个符号, 则只会传递"?"以前的字符串, 这个问题我猜想可能

  • 微信小程序页面传值实例分析

    微信小程序页面传值实例分析 最近组里开发小程序,遇到了一个前端亘古不变的话题:页面传值 刚开始使用路径传参解决,但是众所周知: 各浏览器HTTP Get请求URL最大长度并不相同,几类常用浏览器最大长度及超过最大长度后提交情况如下: IE6.0 :url最大长度2083个字符,超过最大长度后无法提交. IE7.0 :url最大长度2083个字符,超过最大长度后仍然能提交,但是只能传过去2083个字符. firefox 3.0.3 :url最大长度7764个字符,超过最大长度后无法提交. Oper

  • 微信小程序实现自定义modal弹窗封装的方法

    前言 小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图 点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局.操作完点击取消或确定关闭 modal. 如何使用 将下面的 modal.wxml .modal.wxss .modal.js .modal.json 四个文件复制到对应位置即可. 封装完之后调用起来也很简单,看看调用的代码吧 <modal show="{{showMo

  • 微信小程序利用co处理异步流程的方法教程

    本文主要介绍的是关于微信小程序利用co处理异步流程的方法教程,分享出来供大家参考学习,需要的朋友们下面来看看详细的介绍: co co是一个基于ES6 Generator特性实现的[异步流程同步化]写法的工具库. co需要使用Promise特性,所以,我们先来创建一个使用Promise来处理的异步方法: function myAsyncFunc() { return new Promise(function (resolve, reject) { setTimeout(function () {

  • 微信小程序实现滑动切换自定义页码的方法分析

    本文实例讲述了微信小程序实现滑动切换自定义页码的方法.分享给大家供大家参考,具体如下: 效果如下: 这里三个图片使用了swiper组件进行轮播,下方的页码数字1.2.3会随着图片的切换变动位置 在微信小程序中我们是无法操作dom的,那么 var div = document.getElementById('id'); div.setAttribute("class", "className"); 这种方式实现. 然后我们可以考虑使用hidden或者wx:if的方式,

  • 微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

    本文实例讲述了微信小程序获取用户信息的两种方法wx.getUserInfo与open-data.分享给大家供大家参考,具体如下: 在此之前,小程序获取微信的头像,昵称之类的用户信息,我用的都是wx.getUserInfo,例如: onLoad: function (options) { var that = this; //获取用户信息 wx.getUserInfo({ success: function (res) { console.log(res); that.data.userInfo

  • 详解微信小程序的不同函数调用的几种方法

    一.调取参数 直接调取当前js中的方法, 调取参数that.bindViewTap(); 二.跳转页面 navigateTo: function () { wx.navigateTo({ url: '../page4/page4' }); }, 全局变量使用方法 a.js var app = getApp() Page({ data: { hex1: [], })} //设置全局变量 if (hex1 != null) { app.globalData.hex1 = hex1; } b.js 接

  • 在小程序中推送模板消息的实现方法

    前段时间剁手了 PS4,在浏览商店时,发现官方商店真的不好用,主要是网络原因,次要是页面设计.所以就想自己做一个游戏查询的小程序,可以关注某个游戏,然后在这个游戏打折的时候发送通知给用户.最后发现有个很大的问题是:小程序没法直接给用户推送消息(当时还不知道模板消息),服务号才能.然后就用邮箱实现了通知功能,但是邮箱的局限实在是太大了(各大免费邮箱每天的发件数都很小,自己搭建的邮件服务器虽然没有发件限制,但是大概率会被放到垃圾箱). 然后某天在微信小程序的管理后台发现了模板消息这个东西,查了会资料

随机推荐