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

相关文章

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

微信小程序开发(二)开发之日历打卡小程序发现页

微信小程序开发(四)入门之打卡功能开发


前言

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


网络请求

  • 小程序网路请求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!'
         },
         {                        //图片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) {

    }
})

结尾

本篇文章对小程序的网络请求进行了介绍,对其进行了封装。也介绍了<rich-text>富文本的使用方法。选择地点获取地址和经纬度将不再介绍,API相对简单。活动图片选择和网络请求封装Demo下载链接如下

Demo地址:网络请求封装及活动图片功能


©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页