[小程序]-使用Weui-wxss入門－進行圖片上傳的例子

注意：由於微信小程序不支持dom操作，所以weui.js並不適用於小程序。不過WeUI也為小程序開發了另外的版本

小程序版weui下載地址：https://github.com/Tencent/weui-wxss

由於在薔內，從https://gitee.com/ekber/weui-wxss/repository/archive/master.zip下載的

１、將解壓出的weui-wxss\dist\style下面的weui.wxss復制到小程序項目根目錄下（雲開發項目是復制到miniprogram下面）。

２、到此引入步驟還沒結束，要在項目中使用，還需要在全局app.wxss中加入@import "weui.wxss"，至此完成引入

從GitHub上下載的weui文件夾里除了我們要使用的weui.wxss文件，還有一個很重要的文件夾，那就是example文件，可以查看學習。

微信小程序weui網站 https://weui.io/ 上有小程序weui的樣式展示。可以直接在chrome瀏覽器中用Ｆ12查看

３、在小程序app.json的pages字段第一行增加："pages/test/test" ,

開發工具會自動生成test目錄及test.js test.wxml等４個文件

3.1　修改test.wxml如下：

<view class="page__bd">
       <view class="weui-cells">
           <view class="weui-cell">
               <view class="weui-cell__bd">
                   <view class="weui-uploader">
                       <view class="weui-uploader__hd">
                           <view class="weui-uploader__title">圖片上傳</view>
                           <view class="weui-uploader__info">{{images.length}}/9</view>
                       </view>
                       <view class="weui-uploader__bd">
                           <view class="weui-uploader__files" id="uploaderFiles">
                               <block wx:for="{{images}}" wx:key="*this">
                                   <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
                                       <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
                                   </view>
                               </block>
                           </view>
                           <view class="weui-uploader__input-box">
                               <view class="weui-uploader__input" bindtap="chooseImage"></view>
                           </view>
                       </view>
                   </view>
               </view>
           </view>
       </view>
   </view>
<button bindtap="uploadImg">確定上傳圖片</button>

3.2　test.js

Page({
 
  /**
   * 頁面的初始數據
   */
  data: {
    images: [],//臨時圖片地址
  },
 
  chooseImage: function () {
    var that = this;
    wx.chooseImage({
      count: 9, // 默認9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
      success: function (res) {
        console.log(res);
        var tempFilePaths = res.tempFilePaths
        that.setData({
          images: that.data.images.concat(tempFilePaths)
        })
    
      }
    })
  },
  previewImage: function (e) {
    wx.previewImage({
      current: e.currentTarget.id, // 當前顯示圖片的http鏈接
      urls: this.data.images // 需要預覽的圖片http鏈接列表
    })
  }
  
})

在開發工具中，Ctrl+S,可以查看效果了。

后續可根據參考[3]，用wx.cloud.uploadFile上傳。

后續還可參考這里：https://www.jianshu.com/p/ada94d3a3e86

 

參考：

[１]https://www.cnblogs.com/jing-zhe/p/11000971.html

[２]http://blog.fishnet.tech/2018/11/20/asda/

[３]https://blog.csdn.net/m0_45329584/article/details/101149476

……