[小程序]-使用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

……