微信小程序云开发（推广展示商品小程序）

概述

通过微信小程序的云开发实现一个个人免费的商品展示推广程序

详细

微信云开发小商城

前期准备：appid,小程序开发工具

项目结构图：

页面效果：

页面布局:通过分割左右页面，封装单个页面样式搭建，其中single是封装的商品的单个组件

动画弹出框：

使用微信官方的 Animation API：

1）缓慢向上弹出商品购买框

  uptab() {
    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease',
      delay: 0
    })
    animation.translateY(0).step()
    this.setData({
      animationData: animation.export() //动画实例的export方法导出动画数据传递给组件的animation属性 
    })
  },

2）缓慢向下隐藏商品购买框

 dowmtab() {
    var animation = wx.createAnimation({
      duration: 700,
      timingFunction: 'ease',
      delay: 0
    })
    animation.translateY('100vh').step()
    this.setData({
      animationData: animation.export() //动画实例的export方法导出动画数据传递给组件的animation属性 
    })
  },

管理中心：

  登录会校验是否为用户本人，从而显示商品的操作流程，这里是通过检验用户的微信昵称来实现的。

商品发布页面

  
    
    +
  
 
  
    
      现价 
    
    
      原价 
    
  
  
    标签 
  
  
    
      红包
      VIP
      修图
      修图
    
  
  
        
  
  发表

发布流程部分逻辑，因小程序发布文本与图片均要检测，这里使用了云开发中的云函数来实现免费校验

 const fileID = []
    imgdatas.forEach(val => {
      console.log(val);
      let uppath = this.getimgpath(val)
      wx.cloud.uploadFile({
        cloudPath: uppath,
        filePath: val, // 文件路径
        success: res => {
          console.log(res);
          if (res.statusCode == 200) {
            fileID.push(res.fileID)
            if (imgdatas.length == fileID.length) {
              console.log('图片上传成功');
              thinginfo.imglist = fileID
              thinginfo.imgdatas = imgdatas
 
              // console.log(thinginfo);
              this.checkcont(thinginfo)
            }
          } else {
            wx.showToast({
              title: '上传图片失败',
            })
          }
        }
      })
    })

 wx.cloud.callFunction({
      name: "check",
      data: detail,
      success: res => {
        console.log(res);
        const _id = res.result._id;
        if (_id) {
          wx.hideLoading();
          wx.showToast({
            title: '发送成功',
            icon: "none"
          });
          wx.navigateBack({
            delta: 1
          })
        } else {
          wx.showToast({
            title: '发布失败！',
            icon: "none"
 
          });
        }
      },
      fail: err => {
        console.log(err);
      }
    })