• 微信小程序-4

    一、使用scss编译wxss文件

    1.vscode安装easysass扩展
    vscode插件 - - - easysass - - - 安装

    2.微信小程序 导入vscode扩展
    开发者工具 - - - 视图 - - - 扩展 - - - 右侧三个点 - - - 导入已安装的vscode扩展

    3.编辑 打开编辑器扩展目录，找到easysass文件夹，打开package.json文件

    				"easysass.formats": {
					"type": "array",
					"default": [
						{
							"format": "expanded",
							"extension": ".css"
						},
						{
							"format": "compressed",
							"extension": ".min.css"
						}
					],
					"description": "Define format(s) for outputted css files. Use \"nested\", \"expanded\", \"compact\" or \"compressed\" as a format."
				},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    找到上面的代码，修改为下面的样子

    				"easysass.formats": {
					"type": "array",
					"default": [
						{
							"format": "expanded",
							"extension": ".wxss"
						}
					],
					"description": "Define format(s) for outputted css files. Use \"nested\", \"expanded\", \"compact\" or \"compressed\" as a format."
				},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    4.项目 - - - 重新打开此项目
    5.在该目录下新建scss文件

    <view class="out">
  <view class="box">
    <view class="inner">
      <text class="text">小程序名称text>
    view>
  view>
view>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在scss文件里编译，保存后会自动在wxss文件里生成相应的样式

    // scss文件 - - - 在scss文件中，//is注释
.out{
  background: pink;
  width: 500rpx;height: 500rpx;
  .box{
    width: 300rpx;height: 300rpx;
    background: red;
    .inner{
      width: 200rpx;height: 200rpx;
      background: purple;
    }
  }
  .row{
    width: 300rpx;height: 100rpx;
    background: orange;
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在wxss中生成的代码如下

    .out {
  background: pink;
  width: 500rpx;
  height: 500rpx;
}

.out .box {
  width: 300rpx;
  height: 300rpx;
  background: red;
}

.out .box .inner {
  width: 200rpx;
  height: 200rpx;
  background: purple;
}

.out .row {
  width: 300rpx;
  height: 100rpx;
  background: orange;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    二、页面初始化配置全局样式

    1.修改app.wxss代码

    /**app.wxss**/
view,text{
  box-sizing: border-box;
}
/* 全局配色 */
/* page是全局，定义全局变量 主题色 */
/* 双横线定义css变量 */
page{
  --themeColor:#bda066;
  --globalColor:#1a1b1c;
  --focusColor:#4c4d4e;
  --descColor:#7e8081;
  --greyColor:#8e8e8e;
  --subColor:#b1b2b3;
  --lightColor:#e4e4e4;
  --globalBgColor1:#e3e4e5;
  --globalBgColor2:#f6f7f8;
  --globalBgColor3:#ffffff;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    在页面中使用全局变量里的颜色

    <view class="box">首页view>

    • 1
    .box{
  // 使用var变量函数
  color: var(--themeColor);
}

    • 1
    • 2
    • 3
    • 4

    2.修改app.json文件

      "window":{
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "项目名称",
    "navigationBarTextStyle":"white"
  },

    • 1
    • 2
    • 3
    • 4
    • 5

    3.将app.js中的内容删除，输入App回车

    4.删除日志，并在app.json文件中新建页面

      "pages":[
    "pages/index/index",
    "pages/classify/classify",
    "pages/news/news"
  ],

    • 1
    • 2
    • 3
    • 4
    • 5

    5.设置导航tabbar

    color是文字的颜色

      "tabBar": {
    "color": "#4c4d4e",
    "selectedColor": "#1aad19",
    "list": [
      {
        "text":"首页",
        "pagePath":"pages/index/index",
        "iconPath": "/static/icon/home_1.png",
        "selectedIconPath": "/static/icon/home_2.png"
      },{
        "text": "分类",
        "pagePath": "pages/classify/classify",
        "iconPath": "/static/icon/classify.png",
        "selectedIconPath": "/static/icon/classify_1.png"
      },{
        "text": "新闻",
        "pagePath": "pages/news/news",
        "iconPath": "/static/icon/new.png",
        "selectedIconPath": "/static/icon/new_1.png"
      }
    ]
  },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    三、定义公共的头部组件

    在全局app.json中引入component

      "usingComponents": {
    "xzs-header":"components/xzs-header/xzs-header"
  }

    • 1
    • 2
    • 3

    component组件 wxml内容

    
<view class="header">
  <navigator url="/pages/index/index" class="logo">
    <image src="/static/images/snake.png" mode="heightFix" class="pic"/>
  navigator>

  <view class="search">
    <icon type="success" color="red"/>
  view>
view>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    scss文件内容

    .header{
  height: 120rpx;
  border: 1rpx solid var(--themeColor);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  .logo{
    height: 70rpx;
    .pic{
      height: 100%;
    }
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在页面中引用

    <xzs-header>xzs-header>

    • 1

    四、页面banner使用swiper的更多属性

    轮播图
    组件 - - - 视图容器 - - - swiper滑块视图容器

    <view class="banner">
  
  <swiper previous-margin="30rpx" circular="true" autoplay interval="3000" indicator-dots indicator-active-color="var(--themeColor)" indicator-color="rgba(255,255,255,0.3)">
    <swiper-item>
      <image src="/static/images/banner1.jpeg" mode=""/>
    swiper-item>
    <swiper-item>
      <image src="/static/images/banner2.jpeg" mode=""/>
    swiper-item>
    <swiper-item>
      <image src="/static/images/banner1.jpeg" mode=""/>
    swiper-item>
    <swiper-item>
      <image src="/static/images/banner2.jpeg" mode=""/>
    swiper-item>
  swiper>
view>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    // 轮播图
.banner{
  padding-top: 30rpx;
  swiper{
    height: 460rpx;
    swiper-item{
      image{
        width: 690rpx;
        height: 460rpx;
        border-radius: 30rpx;
      }
    }
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    五、scroll-view滑动组件在项目中的使用

    <view class="scrollNav">
  <scroll-view scroll-x>
    <navigator class="item" url="" wx:for="{{6}}" wx:key="index">
      <view class="pic">
        <image src="/static/images/snake.png" mode=""/>
        {index+1}}.png" mode=""/> -->
      view>
      <view class="text">内容view>    
    navigator>
  scroll-view>
view>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    // 菜单导航
.scrollNav{
  padding: 60rpx 30rpx;
  scroll-view{
    white-space: nowrap;
    .item{
      display: inline-block;
      padding: 0 20rpx;
      .pic{
        width: 120rpx;height: 120rpx;
        image{width: 100%;height: 100%;}
      }
      .text{
        text-align: center;
        font-size: 28rpx;
        color: var(--globalColor);
        padding-top: 10rpx;
      }
    }
    .item:first-child{padding-left: 0;}
    .item:last-child{padding-right: 0;}
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    六、引入图片

    公共的样式在app.wxss里写

    .pubTitle{text-align: center;}
.pubTitle .en{
  font-size: 80rpx;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--globalColor);
  opacity: 0.1;
}
.pubTitle .cn{
  font-size: 50rpx;
  font-weight: 900;
  transform: translateY(-60rpx);
  color: var(--globalColor);
}
.pubTitle .line{
  width: 100rpx;height: 5rpx;
  background: var(--globalColor);
  opacity: 0.3;
  /*  */
  display: inline-block;
  transform: translateY(-32rpx);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    <view class="about">
  <view class="pubTitle">
    <view class="en">introduceview>
    <view class="cn">简介view>
    <view class="line">view>
  view>
  <view class="content">
    <view class="row">文本内容view>
    <view class="row">文本内容view>
    <view class="row">文本内容view>
  view>
view>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    // 公司介绍
.about{
  padding: 50rpx 30rpx 50rpx;
  // 添加背景
  // 1.将图片转为base64，复制数据，但数据太多，一般不采用
  // 2.将图片上传到云空间，使用http链接
  background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F21%2F20200221004653_KRZVh.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1700202144&t=b2dac370497e4c7e429b6f44b08af557) no-repeat;
  background-size: cover;
  .content{
    .row{
      line-height: 1.6em;
      text-indent: 2em;
      font-size: 32rpx;
      padding: 20rpx 0;
      border-bottom: 1rpx dashed var(--themeColor);
    }
    .row:first-child{padding-top: 0;}
    .row:last-child{padding-bottom: 0;border-bottom: none;}
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    app.json全局引用组件

      "usingComponents": {
    "xzs-header":"/components/xzs-header/xzs-header",
    "xzs-news-item":"/components/xzs-news-item/xzs-news-item"
  }

    • 1
    • 2
    • 3
    • 4

    百度搜索css两行省略，可以直接使用

    七、UI组件库：Vant Weapp和Tdesign

    vant weapp

    cmd输入node -v回车，若是返回版本号，说明已安装node

    安装node，百度搜索nodejs，下载长期维护版

    1.在微信小程序的资源管理器中找一个空白地方，右键打开终端，输入代码npm i @vant/weapp -S --production，下载成功后会生成一个名为node_modules的文件夹

    2.在app.json中删除"style": "v2",

    3.修改 project.config.json

    {
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    4.菜单栏 - - - 工具 - - - 构建npm
    会自动创建一个名为miniprogram_npm的文件夹

    使用方法，在app.json或index.json中引入组件

    直接点击图标可以自动复制到剪贴板

    大小默认是px，也可使用rpx

    <van-icon name="fire-o" color="red" size="80rpx"/>

    • 1

    小图标的大小14px

    获得动态的年份

      data: {
    year:new Date().getFullYear(),
  },

    • 1
    • 2
    • 3

    八、不使用插件使用scss

    开发 - - - 工具 - - - 开发辅助 - - - 原生支持TypeScript

    在project.config.json的setting里添加下面代码

        "useCompilerPlugins":[
      "sass"
    ],

    • 1
    • 2
    • 3

    直接将wxss文件后缀改为scss，文件夹里有4个文件
    scss文件可以看到样式的变化

  • 相关阅读:
    CompletableFuture用法
    【过滤器设计模式详解】C/Java/JS/Go/Python/TS不同语言实现
    贪吃蛇游戏制作
    计算机网络学习总结
    基于bp神经网络的pid算法,神经网络pid控制器设计
    [附源码]计算机毕业设计JAVAjsp医药管理信息系统
    python毕业设计题目推荐汽车销售系统
    Field的使用
    【二分法】多种情况下的边界条件，区间选择汇总，小结
    GJB 5000B与GJB 5000A的区别
  • 原文地址：https://blog.csdn.net/weixin_64729620/article/details/133868227