微信小程序組件詳細安裝導入方法

參考地址：https://blog.csdn.net/qq_41614928/article/details/90256051

 

微信小程序組件詳細安裝導入方法:

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代碼.

寫好代碼后運行結果如下: