小程序 delete_微信小程序开发日记创建打卡活动

最新推荐文章于 2023-05-31 17:37:30 发布

weixin_39599046

最新推荐文章于 2023-05-31 17:37:30 发布

阅读量165

点赞数

文章标签：小程序 delete 小程序 params 小程序delete请求

没想到吧，我今天又更新了～

创建了个技术交流群，欢迎各位前去交流，有什么问题也可以在群里问我

QQ群号：1124318961

前言

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

网络请求

小程序网路请求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方法导出。(代码框可左右滑动)

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) {         },      })  },})

‍

打卡创建国际惯例，上需求图，我将依据图上的开发点进行分享(截长图实在太占篇幅)。

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

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 ：(代码框可左右滑动)

class=    class=    class=

‍

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 nodes="{{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: 'Hello World!'      }]    }]  },})

元素节点：type = node属性        说明        类型         必填   name        标签名      String       是        attrs       属性        Object       否            children    子节点列表   Array        否

的使用方法很简单，其实唯一复杂的点是在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!'         },         {                        //图片1            type: 'node',            name: 'img',                attrs: {                class: 'div_class',                style: 'display:block;magin:0 auto;',                src: 'http://ho_csdn_node_image1.png',                width：'100%'          },       },             {                        //图片2        type: '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子Obect    paramsOut.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] + "";                                     //图片url    paramsInner.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) {     }})

结尾本篇文章对小程序的网络请求进行了介绍，对其进行了封装。也介绍了富文本的使用方法。选择地点获取地址和经纬度将不再介绍，API相对简单。连更真累～

交流群QQ群号：1124318961