参考地址：https://blog.csdn.net/qq_41614928/article/details/90256051
微信小程序组件详细安装导入方法:
- npm init -y //初始化环境
- npm install --save miniprogram-slide-view //安装组件(这里已此组件为例)
- 详情→勾选使用npm模块
- 工具→构建npm
- 在需要使用组件的页面的json文件内引入组件
1.首先我们初始化环境并安装组件:
组件地址: https://github.com/wechat-miniprogram/slide-view
组件详情:
在微信开发者工具→左击鼠标→点击磁盘打开→在当前项目目录进入cmd命令行
npm init -y
npm install --save miniprogram-slide-view
2.构建npm 就是将下载的组件识别到项目文件内:
详情→勾选使用npm模块
工具→构建npm
成功后项目内就会出现对于的组件文件了
3.我们开始使用组件:
以下是我的使用方式:
index.json文件代码如下:
在json代码内我们进行组件的导入
{
"usingComponents": {
//引入组件的名称: 需要引入的组件文件夹名称 (这里面不能写注释)
"slide-view": "miniprogram-slide-view"
}
}
index.wxml文件代码如下:
wxml主要是使用组件标签来实现组件的效果, 详情需看组件文档说明
<!--index.wxml--> <view>index.wxml</view> <view class=\'slide\'> <slide-view width="750" height="110" slide-width="500"> <view slot="left" class="l"> <image src="/pages/image/file_transfer.jpg" class="img"></image> <view class=\'text\'> <view class=\'title\'>文件传输助手</view> <view class=\'time\'>7:00 PM</view> </view> </view> <view slot="right" class="r"> <view class=\'read\'>标为已读</view> <view class=\'delete\'>删除</view> </view> </slide-view> </view>
index.wxss文件代码如下:
wxss就和css一样起到修饰作用
.slide{
/* border-top:1px solid #ccc; */
border-bottom:1px solid #DEDEDE;
}
.l {
background-color: white;
height: 110rpx;
width: 750rpx;
display: flex;
flex-direction: row;
}
.r {
height: 110rpx;
display: flex;
direction: row;
text-align: center;
vertical-align: middle;
line-height: 110rpx;
}
.read {
background-color: #ccc;
color: #fff;
width: 350rpx;
}
.delete {
background-color: red;
color: #fff;
width: 150rpx;
}
.img {
width: 90rpx;
height: 90rpx;
border-radius:10rpx;
margin: 10rpx 15rpx;
}
.text {
display: flex;
flex-direction: row;
}
.title {
margin-top: 15rpx;
font-size: 33rpx;
}
.time {
margin-top: 15rpx;
color: #ccc;
font-size: 25rpx;
margin-left: 330rpx;
}
这里暂时用不到js代码.
写好代码后运行结果如下:
请发表评论