使用工具:

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) {
let upload_picture_list = this.data.upload_picture_list;
let index = e.currentTarget.dataset.index;
if (upload_picture_list[index].upload_percent == 100) {
//去服务器把对应的记录del
this.data.delIndex = index;
this.ajaxfunc(1);
}
upload_picture_list.splice(index, 1);
this.setData({
upload_picture_list: upload_picture_list
});
},
// 预览图片
previewImg(e) {
//获取当前图片的下标
let index = e.currentTarget.dataset.index;
//所有图片
let imgs = this.data.imgs;
wx.previewImage({
//当前显示图片
current: imgs[index],
//所有图片
urls: imgs
})
},

c#后端api接口

public IHttpActionResult uploadPicture(string problemAttach)
{
string mesg = problemAttach;
if (problemAttach==null||problemAttach==""||problemAttach=="undefined" || problemAttach == "null")
{
problemAttach = CommonHelper.GetGuid;
mesg = problemAttach;
}
Repository<MK_Base_AnnexesFile> re = new Repository<MK_Base_AnnexesFile>(); HttpFileCollection files = HttpContext.Current.Request.Files;
List<string> serversrc = new List<string>();
foreach (string key in files.AllKeys)
{
MK_Base_AnnexesFile fileAnnexesEntity = new MK_Base_AnnexesFile();
HttpPostedFile file = files[key];//file.ContentLength文件长度
string src = HttpContext.Current.Server.MapPath("~/imgcoll/") + file.FileName;
src=src.Replace("\\","/");
if (string.IsNullOrEmpty(file.FileName) == false)
{
file.SaveAs(src);
serversrc.Add("/imgcoll/"+file.FileName);
}
//str = str.Substring(0, str.LastIndexOf("/"));
fileAnnexesEntity.F_Id = file.FileName.Substring(, file.FileName.LastIndexOf("."));
fileAnnexesEntity.F_FileName = file.FileName;
fileAnnexesEntity.F_FilePath = src;
fileAnnexesEntity.F_FileSize = "未知";
fileAnnexesEntity.F_FileExtensions = file.FileName.Substring(file.FileName.LastIndexOf("."));
fileAnnexesEntity.F_FileType = file.FileName.Substring(file.FileName.LastIndexOf(".")+);
fileAnnexesEntity.F_CreateUserId = "微信端上传";
fileAnnexesEntity.F_CreateUserName = "微信端上传";
fileAnnexesEntity.F_FolderId = problemAttach;
re.Insert(fileAnnexesEntity); } return JsonData(true, serversrc[], mesg);
}

记一次微信小程序的开发的更多相关文章

  1. 小程序语音红包开发中 汉字转拼音的问题 微信小程序红包开发遇到的坑

    公司最近在开发微信小程序的红包功能,语音红包需要用到文字转拼音的功能. 之前介绍过怎么将中文的汉字转为拼音的,具体看下面这篇文章. 微信语音红包小程序开发如何提高精准度 红包小程序语音识别精准度 微信 ...

  2. 微信小程序如何开发制作

    微信小程序如何开发制作 微容SMO是一款微信小程序的免费在线制作工具,用户在微容平台上无需编辑代码,可通过拖拽式操作即可完成小程序的制作,真正意义上实现了小程序零代码免费制作! 消除技术门槛:无需代码 ...

  3. 【推荐】开源项目minapp-重新定义微信小程序的开发

    minapp 重新定义微信小程序的开发 官网:https://qiu8310.github.io/minapp/ 作者:Mora minapp 重新定义微信小程序的开发 使用 用 npm 安装命令行工 ...

  4. 微信小程序快速开发上手

    微信小程序快速开发上手 介绍: 从实战开发角度,完整系统地介绍了小程序的开发环境.小程序的结构.小程序的组件与小程序的API,并提供了多个开发实例帮助读者快速掌握小程序的开发技能,并能自己动手开发出小 ...

  5. 微信小程序wepy开发循环wx:for需要注意

    微信小程序wepy开发循环wx:for需要注意 item index值必须在wx:for之后使用 <view wx:for="{{tablist}}" class=" ...

  6. Mac上微信小程序官方开发工具卡死的问题

    Mac上微信小程序官方开发工具打开后卡死,无法操作,也关不掉,解决方案: 三步: 1.在应用中删除“微信web开发者工具” 2.删除一下几个配置和缓存文件: 1.-/Library/Applicati ...

  7. 技本功丨收藏!斜杠青年与你共探微信小程序云开发(下篇)

    2019年2月26日,人们为了一个杯子疯了一天. 星巴克猫爪杯,一场已经与猫无关了的“圣杯战争“.网上的倒卖价格,已炒至近千元! 求而不得,舍而不能,得而不惜.这是人最大的悲哀... 所以,请珍惜以下 ...

  8. 微信小程序-云开发(手记)

    微信小程序-云开发(手记) 1.创建data.json文件 注意以下几点要求: 入门示例: init方法的env:默认环境配置,传入字符串形式的环境 ID(理解为数据库)可以指定所有服务的默认环境(意 ...

  9. 微信小程序快速开发

    微信小程序快速开发 一.注册小程序账号,下载IDE 1.官网注册https://mp.weixin.qq.com/,并下载IDE. 2.官方文档一向都是最好的学习资料. 注意:1)注册账号之后会有一个 ...

随机推荐

  1. 分布式Redis的分布式锁 Redlock

    链接 Distributed locks with Redis 引言 之前自己在用redis来实现分布式锁的时候都是基于单个Redis实例,也就是说Redis本身是有单点故障的,Redis的官方文档介 ...

  2. React Native-ios环境的搭建

    要在mac系统上搭建RN环境: 一.安装Homebrew.它是一款Mac OS平台下的软件包管理工具. 详见Homebrew的安装这篇文章. 二.安装node和watchman,用Homebrew在命 ...

  3. Dubbo学习笔记-RPC扩展和本地Mock

    1.Dubbo介绍 Dubbo,一个是一款高性能Java RPC框架.私以为有中文官方文档,就不再重复介绍了 2.RPC扩展-本地存根stub RPC扩展功能:提前效验参数,缓存调用结果,日志记录等等 ...

  4. IT兄弟连 HTML5教程 CSS3属性特效 2D变换2

    3  scale() 方法 通过scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X轴)和高度(Y轴)参数.缩放scale()函数让元素根据中心原点对对象进行缩放.默认值是1,因此0.01 ...

  5. Java方法之重载

    Java方法之重载 本篇探究Java中的方法重载.那么,什么是重载呢?先上一串代码: package com.my.pac06; /** * @author Summerday * @date 201 ...

  6. 简单的权限管理php

    转发自https://www.cnblogs.com/shenzikun1314/p/6604867.html#4262295 首先,要明白的基础理论是用户,角色,权限之间的关系是一对多,还是多对多. ...

  7. SpringMVC框架之第三篇

    2.高级参数绑定(重点) 2.1.数组类型 数组类型的参数可以传递一批相同的数据到Controller的方法中. 2.1.1.需求 批量删除:在商品列表页面选中多个商品,然后删除. 2.1.2.需求分 ...

  8. sleuth和zipkin微服务里的链路跟踪

    分布式链路跟踪介绍 对于一个微服务系统,大多数来自外部的请求都会经过数个服务的互相调用,得到返回的结果,一旦结果回复较慢或者返回了不可用,我们就需要确定是哪个微服务出了问题.于是就有了分布式系统调用跟 ...

  9. The Library:2 Vulnhub Walkthrough

    主机层面扫描探测: ╰─ nmap -p1-65535 -sV -A 10.10.202.132 Starting Nmap 7.70 ( https://nmap.org ) at 2019-08- ...

  10. swift冒泡排序,swift快速排序,swift归并排序,swift插入排序,swift基数排序

    import UIKit /// 冒泡 /// ///时O(n2),空O(1) 稳定排序 func Mysort(arr:[Int]) -> [Int]{ var transArr = arr ...