微信小程序干货
1.获取text文本框输入的信息
wxml代码
<view class="weui-cells"> <view class="weui-cell weui-cell_input"> <view class="weui-cell__bd"> <input class="weui-input" bindinput="changepapertitle" maxlength="100" placeholder="请输入问卷标题(最多100个字)" value='{{papertitle}}' /> </view> </view> </view>
后端js
划重点：通过bindinput事件，在后端能够获取到输入值
2.获取同一个控件的多个属性
wxml代码
<input type='text' style='width:200px' bindinput="ratiotxtchange" data-qid='{{item.qid}}' id="{{dqdata.dqid}}" placeholder='其他'></input>
js代码
//单选其他选项输入 ratiotxtchange:function(e){ debugger; var id = e.currentTarget.id; //选项ID var qid = e.currentTarget.dataset.qid;//问题ID var value = e.detail.value; //单选框的值 this.data.radtxts[qid] =id+"|"+ value; this.data.tschecks["A"+qid] = id + "|" + value;//存入特殊选项的ID }
划重点：前端通过设置data-xx的信息，后端用
e.currentTarget.dataset.xx 获取其中的值，
此方法可以获取同一个控件的多个属性，对处理某些复杂点的逻辑，比较有用
3.微信小程序AJAX请求
wx.request({ url: posturl + "/Form/AddAnswerPaper", method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded' }, data: { "paperid": paperid, //问卷ID "openid": getApp().globalData.openid, //当前登录人 "rich": JSON.stringify(rich), "txts": JSON.stringify(txts), "redio": JSON.stringify(rads), "checks": JSON.stringify(checks), "img": JSON.stringify(imgs), "addresses": JSON.stringify(addresses), }, success: function (rdata) { if (rdata.data.result == true) { that.setData({ modalHidden: !that.data.modalHidden }) } else { wx.showToast({ title: "保存失败", icon: 'loading', duration: 3000 }) } } })
4.后端获取微信小程序openid
/// <summary> /// 获取微信用户OPENID /// </summary> /// <returns></returns> public string QueryOpenId() { seesionmodel m = new seesionmodel(); try { string code = Request["code"]; string Appid = ConfigurationSettings.AppSettings["Appid"]; string AppSecret = ConfigurationSettings.AppSettings["AppSecret"]; string html = string.Empty; string url = "https://api.weixin.qq.com/sns/jscode2session?appid=" + Appid + "&secret=" + AppSecret + "&js_code=" + code + "&grant_type=authorization_code"; HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(url); request.Method = "GET"; HttpWebResponse response = request.GetResponse() as HttpWebResponse; Stream ioStream = response.GetResponseStream(); StreamReader sr = new StreamReader(ioStream, Encoding.UTF8); html = sr.ReadToEnd(); sr.Close(); ioStream.Close(); response.Close(); m = JsonConvert.DeserializeObject<seesionmodel>(html); return m.openid; } catch (Exception ex) { logger.Debug(ex.Message); m.openid = "获取OpenID失败"; } return JsonConvert.SerializeObject(m); }
public class seesionmodel { public string session_key { get; set; } public string expires_in { get; set; } public string openid { get; set; } }
通过后端获取微信用户唯一的ID，一是提高安全性，二是可以避免授权弹框。
5.微信小程序弹出可输入的对话框
实例：点击红线，弹出可输入对话框，然后保存。
文本框部分代码： <view class="p"> <view bindtap='namechange' style='width:120px;margin:0 auto'> <input type='text' class='txtname' value='{{RealName2}}' disabled='disabled' placeholder='请输入您的姓名' /> </view> </view> 弹出框部分代码： <modal hidden="{{hiddenmodalput}}" title="请输入" confirm-text="提交" bindcancel="cancel" bindconfirm="confirm"> <input type='text' bindinput='nameinput' value='{{RealName}}' class='txtname' placeholder="请输入您的名字" auto-focus/> </modal>
var posturl = getApp().globalData.posturl; Page({ data: { IcreateNum: 0, IJoinNum: 0, nickName:"", hiddenmodalput:true, RealName:"", RealName2: "" }, onLoad: function(options) { var realname= wx.getStorageSync('RealName'); if(realname!=""){ this.setData({ RealName2: realname }) console.log("从缓存读取姓名"); }else{ var openid = getApp().globalData.openid; var that=this; console.log("从数据库读取姓名"); wx.request({ url: posturl + "/Form/QueryRealNameByOpenId", //自己的服务接口地址 method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded' }, data: { "OpenID": openid }, success: function (data) { that.setData({ RealName2: data.data, }); wx.setStorageSync('RealName', data.data); } }); } }, //单击名字 namechange:function(e){ console.log("444"); var RealName2 = this.data.RealName2; this.setData({ hiddenmodalput: false, RealName: RealName2 }) }, cancel:function(e){ this.setData({ hiddenmodalput: true }) }, //获取姓名 nameinput:function(e){ let name = e.detail.value; console.log(name); this.setData({ RealName: name }) }, //提交姓名 confirm:function(e){ var Name = this.data.RealName; var openid = getApp().globalData.openid; //唯一标识 var RealName = this.data.RealName; var that=this; wx.request({ url: posturl + "/Form/UpdateRealNameByOpenId", //自己的服务接口地址 method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded' }, data: { "RealName": RealName, "OpenID": openid }, success: function (data) { if (data.data.result == true) { that.setData({ hiddenmodalput:true, RealName2:RealName }); wx.setStorageSync('RealName', RealName); } else { wx.showModal({ title: '错误提示', content: '修改姓名失败', showCancel: false, success: function (res) { } }) } } }); }, onReady: function() { }, onShow: function() { // 页面显示 // 页面初始化 options为页面跳转所带来的参数 this.queryNumIcreate(); this.queryNumIJoin(); }, onHide: function() { // 页面隐藏 }, onUnload: function() { // 页面关闭 }, userNickNameclick:function(){ console.log("3333"); } })
6.微信小程序上传图片
wxml
<view class="uploader-text" bindtap="chooseImage2">添加图片</view>
js
chooseImage2: function (e) { var that = this; wx.chooseImage({ sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 count: 1, // 最多可以选择的图片张数 success: function (res) { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths; //启动上传等待中... wx.showToast({ title: '正在上传...', icon: 'loading', mask: true, duration: 10000 }) wx.uploadFile({ url: posturl + '/Form/uploadfilenew', filePath: tempFilePaths[0], name: 'uploadfile_ant', formData: { 'imgIndex': 0 }, header: { "Content-Type": "multipart/form-data" }, success: function (res) { tempFilePaths = []; var saveurl = posturl + JSON.parse(res.data).Url.replace("..", ""); tempFilePaths.push(saveurl); that.setData({ files2: [], }); // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 that.setData({ files2: that.data.files2.concat(tempFilePaths) }); wx.hideToast(); }, fail: function (res) { wx.hideToast(); wx.showModal({ title: '错误提示', content: '上传图片失败', showCancel: false, success: function (res) { } }) } }); } }) },
c#
/// <summary> /// 上传文件、图片 /// </summary> /// <returns></returns> public ContentResult UploadFileNew() { UploadFileDTO model = new UploadFileDTO(); try { HttpPostedFileBase file = Request.Files["uploadfile_ant"]; if (file != null) { //公司编号+上传日期文件主目录 model.Catalog = DateTime.Now.ToString("yyyyMMdd"); model.ImgIndex = Convert.ToInt32(Request.Form["imgIndex"]); //获取文件后缀 string extensionName = System.IO.Path.GetExtension(file.FileName); //文件名 model.FileName = System.Guid.NewGuid().ToString("N") + extensionName; //保存文件路径 string filePathName = Server.MapPath("~/images/") + model.Catalog; if (!System.IO.Directory.Exists(filePathName)) { System.IO.Directory.CreateDirectory(filePathName); } //相对路径 string relativeUrl = "../images"; file.SaveAs(System.IO.Path.Combine(filePathName, model.FileName)); //获取临时文件相对完整路径 model.Url = System.IO.Path.Combine(relativeUrl, model.Catalog, model.FileName).Replace("\\", "/"); } } catch (Exception ex) { logger.Error(ex.Message); } return Content(Newtonsoft.Json.JsonConvert.SerializeObject(model)); }
6.微信小程序点击图片预览
wxml
<image wx:if='{{DescribeImg!=""&&DescribeImg!=null}}' style='width:400rpx;height:400rpx' src='{{DescribeImg}}' bindtap='previewImg'></image>
js
//图片放大 previewImg: function (e) { var img = this.data.DescribeImg;//图片网址 var ary = new Array(); ary.push(img); wx.previewImage({ current: ary[0], //当前图片地址 urls: ary,//路径集合，必须是数组 success: function (res) { }, fail: function (res) { }, complete: function (res) { }, }) }
