vscode里less生成css 以及小程序组件

最新推荐文章于 2024-12-08 10:20:47 发布

原创最新推荐文章于 2024-12-08 10:20:47 发布 · 673 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

微信小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在VSCode中利用LESS插件自动编译LESS为CSS，并详细阐述了小程序组件的创建过程，包括组件注册、声明引入、页面使用、自定义方法定义以及组件间的参数传递。

vscode中小程序把less编译成css
第一步:
在vscode中下载less插件
在这里插入图片描述
第二步，配置settings.json文件（文件 - 首选项 - 设置 - 搜索设置settings.json）

加入如下代码：

"less.compile": {
        "outExt": ".wxss"

    }

如下:
在这里插入图片描述
这时候如果在less文件中写代码,保存后会自动生成一个.WXSS的文件:

4-1-3:注册组件

在组件的js⽂件中，需要使⽤Component()来注册组件，并提供组件的属性定义、内部数据和⾃定义⽅法

tab.js

Component({ 
    properties: {    
     // 这里定义了innerText属性，属性值可以在组件使用时指定    innerText: {     
     // 期望要的数据是 string类型      type: String,
         value: 'default value',  
    } 
}, 
   data: {  
      // 这里是一些组件内部数据    
   someData: {}
}, 
    methods: {    
        // 这里是一个自定义方法   
        customMethod: function(){} 
    }
})

4-2.声明引入自定义组件

⾸先要在⻚⾯的json⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径

index.wxml

{ // 引用声明 
"usingComponents": { 
// 要使用的组件的名称    // 组件的路径    
"my-header":"/components/myHeader/myHeader"
	}
}

4-3.⻚⾯中使⽤⾃定义组件

<view>  
    <!-- 以下是对一个自定义组件的引用 --> 
    <my-header inner-text="Some text">  
        <view>用来替代slot的</view> 
    </my-header>
</view>

4-4.定义段与⽰例⽅法

Component构造器可⽤于定义组件，调⽤Component构造器时可以指定组件的属性、数据、⽅法等。
在这里插入图片描述

案例:

代码:

<!-- tabs.wxml -->
<view class='tabs'>
  <view class='tabs_title'>
    <view
      wx:for="{{tabs}}"
      wx:key="id"
      class="title_item  {{item.isActive?'active':''}}"
      bindtap='handelItemTap'
      data-index='{{index}}'
      >
        {{item.name}}
      </view>
  </view>
  <view class='tabs_content'>内容</view>
</view>

// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {


  },


  /**
   * 组件的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:'首页',
        isActive:true
      },
      {
        id:1,
        name:'原创',
        isActive:false
      },
      {
        id:2,
        name:'分类',
        isActive:false
      },
      {
        id:3,
        name:'关于',
        isActive:false
      },
    ]
  },


  /**
   * 组件的方法列表
   */
  // 页面.js 文件中 存放事件回调函数  存放在data同级下
  // 组件.js 文件中 存放事件回调函数的时候 必须放在methods中
  methods: {
    handelItemTap(e){
      // 1.绑定点击事件 需要在methods中绑定
      //2.获取被点击的索引
      //3.获取原数组
      //4.对数组循环
        // 1.给每一个循环性 选中属性 改为 false  
        //2.给当前的索引的 项 添加激活选中

       //2.获取索引
        const {index}=e.currentTarget.dataset;
      //3.获取data中的数组
      let {tabs}=this.data;
      //最严谨写法
      // let tabs=JSON.parse(ISON.stringify(this.data.tabs))
      //4.循环数组
      tabs.forEach((v,i)=>{
        i===index?v.isActive=true:v.isActive=false
      })
      this.setData({
        tabs
      })
    }
  }
})

效果:
在这里插入图片描述

4-5 自定义组件传参

1.⽗组件通过属性的⽅式给⼦组件传递参数;

2.⼦组件通过事件的⽅式向⽗组件传递参数;

1.父组件给子组件传参

代码:

<!-- 父组件 demo.js   -->
//定义变量值
Page({
	 data: {
    tabs:[
      {
        id:0,
        name:'首页',
        isActive:true
      },
      {
        id:1,
        name:'原创',
        isActive:false
      },
      {
        id:2,
        name:'分类',
        isActive:false
      },
      {
        id:3,
        name:'关于',
        isActive:false
      },
    ]
  },
})
<!-- 父组件 demo.wxml -->
<tabs tabs='tabs'></tabs

// components/Tabs/Tabs.js
Component({
    // 里面存放的是从子组件中接收的数据
     properties: {
    //要接收数据的名称
    tabs:{
      //type 要接收的数据类型
      type:Array ,
      //value 默认值
      value:[]
    }


  },
})

<!-- tabs.wxml -->
<view class='tabs'>
  <view class='tabs_title'>
    <!-- <view class='title_item active'>要闻</view>
    <view class='title_item'>推荐</view>
    <view class='title_item'>原创</view>
    <view class='title_item'>热点</view> -->
    <view
      wx:for="{{tabs}}"
      wx:key="id"
      class="title_item  {{item.isActive?'active':''}}"
      bindtap='handelItemTap'
      data-index='{{index}}'
      >
        {{item.name}}
      </view>
  </view>
  <view class='tabs_content'>内容</view>
</view>

2.父组件给子组件传参

// components/Tabs/Tabs.js   子组件
// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  // 里面存放的是丛子组件中接收的数据
  properties: {
    //要接受数据的名称
    // aaa:{
    //   //type 要接收的数据类型
    //   type:String ,
    //   //value 默认值
    //   value:''
    // }
    tabs:{
      type:Array,
      value:[]
    }


  },


  /**
   * 组件的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:'首页',
        isActive:true
      },
      {
        id:1,
        name:'原创',
        isActive:false
      },
      {
        id:2,
        name:'分类',
        isActive:false
      },
      {
        id:3,
        name:'关于',
        isActive:false
      },
    ]
  },


  /**
   * 组件的方法列表
   */
  // 页面.js 文件中 存放事件回调函数  存放在data同级下
  // 组件.js 文件中 存放事件回调函数的时候 必须放在methods中
  methods: {
    handelItemTap(e){
      // 1.绑定点击事件 需要在methods中绑定
      //2.获取被点击的索引
      //3.获取原数组
      //4.对数组循环
        // 1.给每一个循环性 选中属性 改为 false  
        //2.给当前的索引的 项 添加激活选中

       //2.获取索引
        const {index}=e.currentTarget.dataset;
        //触发父组件中的自定义事件 同时传递数据给 父组件
        this.triggerEvent('itemChange',{index})
      //3.获取data中的数组
      let {tabs}=this.data;
      //最严谨写法
      // let tabs=JSON.parse(ISON.stringify(this.data.tabs))
      //4.循环数组
      tabs.forEach((v,i)=>{
        i===index?v.isActive=true:v.isActive=false
      })
      this.setData({
        tabs
      })

    }
  }
})

// pages/demo17/demo17.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:'首页',
        isActive:true
      },
      {
        id:1,
        name:'原创',
        isActive:false
      },
      {
        id:2,
        name:'分类',
        isActive:false
      },
      {
        id:3,
        name:'关于',
        isActive:false
      },
    ]
  },
//自定义事件 用来接收子组件传递的参数
  handelItemChange(e){
    //接收传递过来的参数
    const {index}=e.detail;
    console.log(index)

<!-- demo.wx.ml -->
<tabs tabs='{{tabs}}' binditemChange='handelItemChange'></tabs>

总结:

我写了vscode里写小程序less自动生成css文件;
还写了小程序如何创建组件,定义组件,以及使用组件;