微信小程序开发（三）入门之创建打卡活动

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

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

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

前言

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

网络请求

小程序网路请求API

wx.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请求封装
function Post(requestUrl, requestHandler) {this.requestPost('POST', requestUrl, requestHandler)
}function requestPost(method, requestUrl, requestHandler) {var userId = wx.getStorageSync("userId");var token = wx.getStorageSync("token");var params = requestHandler.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,
}

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

const app = getApp()                          //获取应用实例
var utils = require('../../utils/util.js')    //获取utils对象
Page({onLoad: function () {var dataUrl = app.globalData.laiSignBaseUrl + "xxx/firstPage"var params = new Object();                //创建object对象,添加请求参数params.uid = wx.getStorageSync('userId');params.currentpage = this.data.currentpage;utils.Post(                               dataUrl,                                //用utils对象调用Post方法{params,                               // post请求的参数success: function (res) {             // 返回成功if (res != null && res.data != null && res.data.success) {//绑定数据操作}},fail: function (res) {},})},
})

打卡创建

国际惯例，上需求图，我将依据图上的开发点进行分享（截长图实在太占篇幅）。

部分基础组件比如<input> <textarea> <picker>等使用组件的使用方法将不在这里介绍，大家可以看下开发文档即可。

1. 小程序选择并上传图片


wx.chooseImage({count: 1,                                     //选择张数sizeType: ['original', 'compressed'],         // 原图，压缩图片sourceType: ['album', 'camera'],              //相机或者拍照success: function (res) {var pages = getCurrentPages();              //获取当前所有页面的实例var prevPage = pages[pages.length - 2];     //获取到上个页面的page实例wx.uploadFile({url: app.globalData.laiSignBaseUrl + "xxx/upload/img/pic",filePath: res.tempFilePaths[0],          //选取后图片地址  这里返回的是腾讯服务器上的一个临时图片地址name: "file",success: function (res) {var data =  JSON.parse(res.data);        //上传成功返回值,注意：这里不是图片的Url，需要解析if(data != null && data.success){prevPage.setData({                     //上个页面的实例设置一个图片封面的值coverUrl:data.result[0]})}wx.navigateBack();                      //返回到上个页面},fail: function (res) {// console.log(res)}})},})

2. 活动图片实现

wxml ：

<view class="erasable-layout"><image class="image" src="{{item}}" bindtap="previewImage" mode="aspectFill"></image><image class="delete-icon" data-index="{{index}}" bindtap="deleteImage" src="../imgs/delete.png"></image>
</view>

wxss :

.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-text nodes="{{nodes}}" bindtap="tap"></rich-text>

// rich-text.js
Page({data: {nodes: [{name: 'div',attrs: {class: 'div_class',style: 'line-height: 60px; color: red;'},children: [{type: 'text',         //还有node类型text: 'Hello World!'}]}]},
})

元素节点：type = node属性         说明          类型           必填
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: 'Ho CSDN Rich-Text!'},{                        //图片1type: 'node',name: 'img',    attrs: {class: 'div_class',style: 'display:block;magin:0 auto;',src: 'http://ho_csdn_node_image1.png',width：'100%'},},{                        //图片2type: 'node',name: 'img',    attrs: {class: 'div_class',style: 'display:block;magin:0 auto;',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) {var paramsOut = new Object();                                                          //children子ObectparamsOut.type = "node";paramsOut.name = "img";var paramsInner = new Object();                                                            //attrs paramsInner.style = "display:block;margin:0 auto;margin-top:8px;color:red;font-size:12px"  //图片属性paramsInner.src = JSON.parse(res.data).result[0] + "";                                     //图片urlparamsInner.width = "100%";                                                                //图片宽度paramsOut.attrs = paramsInner;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地址：网络请求封装及活动图片功能