[小程序开发] npm

一、自定义构建npm

1、在project.config.json文件中的 "miniprogramRoot"指定小程序源码目录。

复制代码
 "miniprogramRoot": "miniprogram/",

2、在project.config.json文件中的setting.packNpmManually为true,开启自定义node_modules和miniprogram_npm位置的构建npm方式。

3、在project.config.json文件中的setting.packNpmRelationList中,指定packageJsonPath和miniprogramNpmDistDir的位置。

复制代码
  "setting": {
        "packNpmManually": true,
        "packNpmRelationList": [
            {
                "packageJsonPath": "./package.json",
                "miniprogramNpmDistDir": "./miniprogram"
            }
        ]
}

二、vant weapp组件库

开源的UI组件库,基于微信小程序的自定义组件开发,可用来快速搭建小程序项目。

  • 图片组件
html 复制代码
<!-- 在使用van-image图片组件时,如果需要渲染本地的图片,不能使用../的形式,需要相对于小程序源码的目录来查找图片才可以 -->
<van-image width="100" height="100" src="/assert/goods/2019102006312133654.jpg!cc0.cn.jpg" />

使用时需将app.json中的"style":"v2"去除,不关闭将造成部分组件样式混乱。

三、组件样式覆盖

1、解除样式隔离:在页面中使用Vant Weapp组件时,可直接在页面的样式文件中覆盖样式。

html 复制代码
<van-button type="primary">主要按钮</van-button> 
css 复制代码
.van-button--primary{
 	font-size: 28rpx !important;
	background-color: lightskyblue !important;
 	border: 1px solid lightskyblue !important;
 }

2、使用外部样式类:需要注意的是普通样式类和外部样式类的优先级是未定义的,使用时需要添加!important保证外部样式类的优先级。

html 复制代码
 <van-button type="primary" custom-class="custom-class">主要按钮</van-button>
css 复制代码
.custom-class{
	font-size: 28rpx !important;
    background-color: lightskyblue !important;
 	border: 1px solid lightskyblue !important;
 }

3、使用CSS变量:在页面或全局对多个组件的样式做批量修改以进行主题样式的定制。

html 复制代码
<van-button type="primary" class="my-button" >主要按钮</van-button>
css 复制代码
.van-button--primary{
	font-size: 28rpx !important;
	background-color: var(--color) !important;
	border: 1px solid var(--color) !important;
}
.my-button{
	--color:rgb(55, 107, 139);
}
相关推荐
无限大63 分钟前
《计算机“十万个为什么”》之跨域
javascript
晓13136 分钟前
前端篇——番外篇 Bootstrap框架
前端·javascript·css·html
黑心的奥利奥8 分钟前
前端项目利用Gitlab CI/CD流水线自动化打包、部署云服务
前端·ci/cd·gitlab
墨菲安全12 分钟前
NPM组件 @ivy-shared-components/iconslibrary 等窃取主机敏感信息
前端·npm·node.js·npm组件投毒·主机敏感信息窃取·恶意npm包
盛夏绽放1 小时前
Excel导出实战:从入门到精通 - 构建专业级数据报表的完整指南
开发语言·javascript·excel·有问必答
Mintopia1 小时前
🌀曲面细分求交:在无限细节中捕捉交点的浪漫
前端·javascript·计算机图形学
Mintopia1 小时前
🧙‍♂️用 Three.js 判断一个点是否在圆内 —— 一次圆心和点的对话
前端·javascript·three.js
xkxnq1 小时前
微信小程序列表数据上拉加载,下拉刷新
微信小程序·小程序
可以给我一百万吗1 小时前
黑马Node.js全套入门教程,nodejs新教程含es6模块化+npm+express+webpack+promise等_ts对象笔记
npm·node.js·es6
The_era_achievs_hero1 小时前
微信小程序161~170
微信小程序·小程序·notepad++