第16课 微信小程序组件详细安装导入方法:

第16课 微信小程序组件详细安装导入方法:

1. npm init -y //初始化环境
2. npm install --save miniprogram-slide-view //安装组件(这里已此组件为例)
3. 详情→勾选使用npm模块
4. 工具→构建npm
5. 在需要使用组件的页面的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代码.

写好代码后运行结果如下:

这样就已经全部完成啦!

哪而不懂评论一下, 作者将在第一时间给你回复哦!