您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

小程序样式处理和自定义组件以及生命周期

小程序样式处理

WXSS是一套样式语言,用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
与 CSS 相比,WXSS 扩展的特性有:尺寸单位,样式导入

尺寸单位:rpx,可以根据屏幕宽度进行自适应,建议开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准

.tabs-item{
  height: 70rpx;
}

样式导入:使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

/* 引入样式 */
/* 语法:@import '样式名称'; */
@import './common.wxss';

内嵌样式
框架组件上支持使用 style、class 属性来控制组件的样式。
style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。

<view style="color:{{color}};" /> 

class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。

 <view class="normal_view" /> 

选择器
目前支持的选择器有:
在这里插入图片描述
全局样式与局样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
全局
在这里插入图片描述
局部
在这里插入图片描述

微信小程序自定义组件以及使用

定义自定义组件
1.以新建一个demo组件为例,首先在根目录下创建一个components文件夹,然后创建一个demo文件夹,分别创建demo.json,demo.wxml,demo.wxss,demo.js四个文件
在这里插入图片描述
2.在 json 文件中进行自定义组件声明(将 component 字段设为 true 可将这一组文件设为自定义组件)
在这里插入图片描述
3.还要在 wxml 文件中编写组件模板,在 wxss 文件中加入组件样式,它们的写法与页面的写法类似。
在这里插入图片描述 在这里插入图片描述
4.在demo.js 文件中,需要使用 Component() 来注册组件,并提供组件的属性定义、内部数据和自定义方法。 组件的属性值和内部数据将被用于组件 wxml 的渲染,其中,属性值是可由组件外部传入的。
在这里插入图片描述
使用自定义组件
5.使用已注册的自定义组件前,首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径:在这里插入图片描述
在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。
在这里插入图片描述
组件之间的相互通信

  1. 父组件通过属性的方式给子组件传递参数
    定义值接收父传递的参数
    在这里插入图片描述
    父传递数据
    在这里插入图片描述在这里插入图片描述
  2. 子组件通过事件的方式向父组件传递参数
    父组件定义自定义函数
    在这里插入图片描述
    子组件通过this.triggerEvent(“自定义函数名称”,“值”)
    在这里插入图片描述
    兄弟之间通信:子传父 在 父传子 利用父组件为中间介

小程序生命周期

分为应用生命周期和页面生命周期,关于小程序前后台的定义和小程序的运行机制
应用生命周期
定义在app.js里面
在这里插入图片描述

App({

  /**
   * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
   */
  onLaunch: function () {
    // throw new Error('出一个错误')
    console.log('触发应用声明周期 onLaunch');
  },

  /**
   * 当小程序启动,或从后台进入前台显示,会触发 onShow
   */
  onShow: function (options) {
    console.log('触发应用声明周期 onShow',options);
  },

  /**
   * 当小程序从前台进入后台,会触发 onHide
   */
  onHide: function () {
    console.log('触发应用声明周期 onHide');
  },

  /**
   * 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    console.log('触发应用声明周期 onError',msg);
  },
  // 当进入的页面不存在时触发
  onPageNotFound:function(msg){
    console.log('触发应用声明周期 onPageNotFound',msg);
  }
})

页面生命周期
定义在pages 里面的 .js文件
在这里插入图片描述
流程图
在这里插入图片描述

Page({
  /**
   * 页面的初始数据
   */
  data: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // options 为页面路径之后的参数
    console.log("页面生命周期触发 onLoad",options);
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("页面生命周期触发 onReady");
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("页面生命周期触发 onShow");
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("页面生命周期触发 onHide");
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("页面生命周期触发 onUnload");
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("页面生命周期触发 onPullDownRefrech");
    // 数据处理完 停止下拉刷新
    wx.stopPullDownRefresh()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("页面生命周期触发 onReachBottom");
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log("页面生命周期触发 onShareAppMessage");
  }
})

更多的详情介绍可以参考官方文档
https://developers.weixin.qq.com/miniprogram/dev/framework/


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进