• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

[小程序]-使用Weui-wxss入门-进行图片上传的例子

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

注意:由于微信小程序不支持dom操作,所以weui.js并不适用于小程序。不过WeUI也为小程序开发了另外的版本

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

由于在蔷内,从https://gitee.com/ekber/weui-wxss/repository/archive/master.zip下载的

1、将解压出的weui-wxss\dist\style下面的weui.wxss复制到小程序项目根目录下(云开发项目是复制到miniprogram下面)。

2、到此引入步骤还没结束,要在项目中使用,还需要在全局app.wxss中加入@import "weui.wxss",至此完成引入

从GitHub上下载的weui文件夹里除了我们要使用的weui.wxss文件,还有一个很重要的文件夹,那就是example文件,可以查看学习。

微信小程序weui网站 https://weui.io/ 上有小程序weui的样式展示。可以直接在chrome浏览器中用F12查看

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

开发工具会自动生成test目录及test.js test.wxml等4个文件

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

 

参考:

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

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

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

……


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
开发一款让我们慢慢变好的微信小程序发布时间:2022-07-18
下一篇:
小程序wx:for循环列表数量的限制发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap