使用工具:
1.微信Web开发者工具
2.Visual Studio 2019
前端采用color UI,后端采用c# .net
过程中的几个重点点记录
1.color UI使用
下载colorUI以后
将icon.wxss、colorui.wxss拷贝至项目根目录
在app.wxss中导入文件
@import "icon.wxss";
@import "colorui.wxss";
2.图片上传功能
wxml前端代码
<view class="cu-form-group"> <view class="picture_list"> <view wx:for="{{upload_picture_list}}" class="picture_item" wx:key="{{index}}"> <image wx:if="{{item.upload_percent < 100}}" src="{{item.path}}" mode="aspectFill"></image> <image wx:if="{{item.upload_percent == 100}}" src="{{item.path_server}}" mode="aspectFill"></image> <view class="upload_progress" wx:if="{{item.upload_percent < 100}}" data-index="{{index}}" bindtap="previewImg">{{item.upload_percent}}%</view> <text class='del' bindtap='deleteImg' data-src='{{image}}' style='display:{{isDel}}' data-index="{{index}}">×</text> </view> <view class='picture_item'> <view class="add-image" bindtap='uploadpic'> <text>+</text> </view> </view> </view> </view> <view class="cu-form-group"> <button bindtap='uploadimage' class='yes-upload'>上传图片</button> </view>
js代码
//选择图片方法 uploadpic: function (e) { let that = this //获取上下文 let upload_picture_list = that.data.upload_picture_list //选择图片 wx.chooseImage({ count: 8, // 默认9,这里显示一次选择相册的图片数量 sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 let tempFiles = res.tempFiles //把选择的图片 添加到集合里 //console.log(tempFiles); for (let i in tempFiles) { tempFiles[i]['upload_percent'] = 0 tempFiles[i]['path_server'] = '' upload_picture_list.push(tempFiles[i]) } //显示 that.setData({ upload_picture_list: upload_picture_list, }); } }) }, //点击上传图片 uploadimage() { let page = this let upload_picture_list = page.data.upload_picture_list //循环把图片上传到服务器 并显示进度 for (let j in upload_picture_list) { if (upload_picture_list[j]['upload_percent'] == 0) { //console.log("进入上传if"); //上传图片后端地址 //upload_file_server('https://www.x..fds.af..a.fd.sa', page, upload_picture_list, j) //console.log(this.data.problemAttach); wx.uploadFile({ url: this.data.domain+'api/FirstAPI/uploadPicture?problemAttach=' + this.data.problemAttach, //上传的接口地址 filePath: upload_picture_list[j].path, name: 'file', formData: { problemAttach: this.data.problemAttach, }, success: function (res) { console.log(res); upload_picture_list[j]['upload_percent'] = 100 upload_picture_list[j]['path_server'] = '接口地址' + JSON.parse(res.data).data; page.setData({ upload_picture_list: upload_picture_list, problemAttach: JSON.parse(res.data).msg }); } }) } } let imgs = wx.setStorageSync('imgs', upload_picture_list); }, // 点击删除图片 deleteImg(e) { le