相关文章微信小程序开发（一）微信开发者工具以及小程序框架介绍

微信小程序开发（二）开发之日历打卡小程序发现页

微信小程序开发（四）入门之打卡功能开发

前言上篇介绍了日历打卡小程序发现页视图相关开发知识点。本篇文章将介绍小程序的网络请求，数据绑定等知识点以及打卡活动的创建功能。

网络请求小程序网路请求APIwx.request({url:'http://www.ho0229.cn',//接口地址data:{//请求参数x:'',y:''},header:{//请求头'content-type':'application/json'},success:function(res){//请求成功回调console.log(res.data)},fail:function(res){//请求失败回调console.log(res.data)}})网络请求封装utils包下，新建Post方法，将Post方法导出。//POST请求封装functionPost(requestUrl,requestHandler){this.requestPost('POST',requestUrl,requestHandler)}functionrequestPost(method,requestUrl,requestHandler){varuserIdwx.getStorageSync("userId");vartokenwx.getStorageSync("token");varparamsrequestHandler.params;wx.request({url:requestUrl,data:params,//post请求参数method:method,header:{"authorization":authorization,"Content-Type":"application/json"},success:function(res){requestHandler.success(res)},fail:function(res){requestHandler.fail(res);},})}module.exports{Get:Get,Post:Post,}1.

页面的js文件引入utils中导出的网络请求方法，以项目中为例，Get请求更加简单，只需要将参数拼接在requestUrl上即可

constappgetApp()//获取应用实例varutilsrequire('../../utils/util.js')//获取utils对象Page({onLoad:function(){vardataUrlapp.globalData.laiSignBaseUrl+"xxx/firstPage"varparamsnewObject();//创建object对象,添加请求参数params.uidwx.getStorageSync('userId');params.currentpagethis.data.currentpage;utils.Post(dataUrl,//用utils对象调用Post方法{params,//post请求的参数success:function(res){//返回成功if(res!nullres.data!nullres.data.success){//绑定数据操作}},fail:function(res){},})},})打卡创建国际惯例，上需求图，我将依据图上的开发点进行分享（截长图实在太占篇幅）。部分基础组件比如inputtextareapicker等使用组件的使用方法将不在这里介绍，大家可以看下开发文档即可。1.小程序选择并上传图片wx.chooseImage({count:1,//选择张数sizeType:['original','compressed'],//原图，压缩图片sourceType:['album','camera'],//相机或者拍照success:function(res){varpagesgetCurrentPages();//获取当前所有页面的实例varprevPagepages[pages.length-2];//获取到上个页面的page实例wx.uploadFile({url:app.globalData.laiSignBaseUrl+"xxx/upload/img/pic",filePath:res.tempFilePaths[0],//选取后图片地址这里返回的是腾讯服务器上的一个临时图片地址name:"file",success:function(res){vardataJSON.parse(res.data);//上传成功返回值,注意：这里不是图片的Url，需要解析if(data!nulldata.success){prevPage.setData({//上个页面的实例设置一个图片封面的值coverUrl:data.result[0]})}wx.navigateBack();//返回到上个页面},fail:function(res){//console.log(res)}})},})2.

2.活动图片实现

3.

wxml：

viewclass"erasable-layout"imageclass"image"src"{{item}}"bindtap"previewImage"mode"aspectFill"/imageimageclass"delete-icon"data-index"{{index}}"bindtap"deleteImage"src"../imgs/delete.png"/image/viewwxss:.erasable-layout{position:relative;margin-right:50rpx;width:100rpx;height:100rpx;}.image{width:100%;height:100%;}.delete-icon{width:25rpx;height:25rpx;position:absolute;left:87rpx;top:-5rpx;}3.rich-text实现在项目里有一个功能点是活动详情，以图文的形式呈现，也有可能是只显示图片或者只显示文字，两者都无情况暂时不考虑，图文内容就是创建打卡时填写的打卡详情（纯文字）和活动图片。这个功能开发我使用的是小程序提供的rich-text富文本来实现功能。首先来看下小程序提供的富文本组件。!--rich-text.wxml--rich-textnodes"{{nodes}}"bindtap"tap"/rich-text//rich-text.jsPage({data:{nodes:[{name:'div',attrs:{class:'div_class',style:'line-height:60px;color:red;'},children:[{type:'text',//还有node类型text:'HelloWorld!'}]}]},})元素节点：typenode属性说明类型必填name标签名String是attrs属性Object否children子节点列表Array否rich-text的使用方法很简单，其实唯一复杂的点是在children中，假设我们有一段文字和3张图片，那么我们node只需要这样显示即可。nodes:[{name:'div',attrs:{class:'div_class',style:'line-height:60px;color:red;'},children:[{type:'text',//还有node类型text:'HoCSDNRich-Text!'},{//图片1type:'node',name:'img',attrs:{class:'div_class',style:'display:block;magin:0auto;',src:'http://ho_csdn_node_image1.png',width：'100%'},},{//图片2type:'node',name:'img',attrs:{class:'div_class',style:'display:block;magin:0auto;',src:'http://ho_csdn_node_image2.png',width：'100%'},}}}]介绍到这里大家就明白了，其实就是在children数组里面添加一个个文本或者图片Object对象，如添加的图片示例，Object对象里面再添加一个名字为attrs的Object即可，部分代码如下，大家可以。wx.uploadFile({url:app.globalData.laiSignBaseUrl+"xxx/upload/img/pic",filePath:filePath,name:"file",success:function(res){varparamsOutnewObject();//children子ObectparamsOut.type"node";paramsOut.name"img";varparamsInnernewObject();//attrsparamsInner.style"display:block;margin:0auto;margin-top:8px;color:red;font-size:12px"//图片属性paramsInner.srcJSON.parse(res.data).result[0]+"";//图片urlparamsInner.width"100%";//图片宽度paramsOut.attrsparamsInner;tempNodesDatas.push(paramsOut);//Object添加到children数组中that.setData({nodesDatas:that.data.nodesDatas.concat(tempNodesDatas)}console.log("nodeDatas",that.data.nodesDatas)},fail:function(res){}})结尾本篇文章对小程序的网络请求进行了介绍，对其进行了封装。也介绍了rich-text富文本的使用方法。选择地点获取地址和经纬度将不再介绍，API相对简单。活动图片选择和网络请求封装Demo下载链接如下Demo地址：网络请求封装及活动图片功能