微信小程序-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."},

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

				"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."},

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

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

在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;}
}

在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.修改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;
}

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

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

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

2.修改app.json文件

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

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

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

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

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"}]},

三、定义公共的头部组件

在全局app.json中引入component

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

component组件 wxml内容

<!--components/xzs-header/xzs-header.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>

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%;}}
}

在页面中引用

<xzs-header></xzs-header>

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

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

<view class="banner"><!-- 255,255,255 is 白色 --><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>

// 轮播图
.banner{padding-top: 30rpx;swiper{height: 460rpx;swiper-item{image{width: 690rpx;height: 460rpx;border-radius: 30rpx;}}}
}

五、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=""/><!-- <image src="/static/images/snake{{index+1}}.png" mode=""/> --></view><view class="text">内容</view>    </navigator></scroll-view>
</view>

// 菜单导航
.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;}}
}

六、引入图片

公共的样式在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);
}

<view class="about"><view class="pubTitle"><view class="en">introduce</view><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>

// 公司介绍
.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;}}
}

app.json全局引用组件

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

百度搜索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": "./"}]}
}

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

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

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

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

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

小图标的大小14px

获得动态的年份

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

八、不使用插件使用scss

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

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

    "useCompilerPlugins":["sass"],

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