[Applet] campus-based micro-channel cloud development platform about to shoot "one instant."

Yishunyuepai

Foreword

Investigation found

• Most college students use microblogging / circle of friends about to shoot
• About to shoot one of the main source of income for part-time photographer
• Less the same type of product
• Most of the same type of location ambiguity App
• Lack of proper authentication threshold photographer
• Adult Content walking a fine line

some problems

• Product Positioning: less precedent
• Main directions: circle of friends or free fish? Social class shopping tool or platform?
• Mode of operation: the case of online and offline are many and complex
• User groups: students or only allow commercial studio intervention
• About Shot mode: self-discovery or intelligent recommendation
• Operations and security: Reference drops / Uber and other networks about the platform

Some re-creation (idealized)

• Triple threshold: real-name authentication, school certification, review the level of photography
• Social modules: thumbs up, focus, private letters, forwarding
• Micro-transaction module: online and pay the deposit, wire consultations among themselves
• Information Development: support for uploading your portfolio
• User Search: the introduction of style labels, tags city
• Imitation of watercress: You can create group / publishing online and offline activities

Project Flow

Reference Documents

• The main program Reference: Tencent cloud combat tutorial & micro letter applet official documents
• UI Style Library Reference: WeUI document & Ali Baba icon library

development tools

• Prototyping: knives and Mexico
• Templates: Github
• UI Style Library: WeUI
• UI Style Library: ColorUI
• Icon Library: Ali icon library
• Development tools: micro-channel Developer Tools
• API documentation: official documents small program
• Tutorial: Github / B station / CSDN

UI design

Backstage management

• Without any optimization
  
  

Core technology (cited cases)

Cloud function: Log Capture

const cloud = require('wx-server-sdk')
// 初始化 cloud
cloud.init()
const db = cloud.database()
/**
 * 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端
 * 
 * event 参数包含小程序端调用传入的 data
 * 
 */
exports.main = async(event, context) => {
  let openId = event.userInfo.openId
  const result = await db.collection("userList").where({
    openId: openId
  }).get();
  if (result.data.length > 0) {
    return await db.collection("userList").doc(result.data._id).update({
      data: {
        avatarUrl: event.avatarUrl,
        nickName: event.nickName,
        gender: event.gender
      }
    })
  } else {
    return await db.collection("userList").add({
      data: {
        avatarUrl: event.avatarUrl,
        nickName: event.nickName,
        gender: event.gender,
        openId: openId,
        isAuth: false,
        createTime: new Date()
      }
    })
  }
}

CSS3: Animated Search

• This technique borrowed from the cloud development CloudBase Great God blog
• Thinking: placing two labels view mode frame

 <view id='preloader'>              //外围的圆形框定义
    <view id='loader'></view>       //内部的线条定义
</view>

#preloader {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid #97b2ff;
}
#loader {         //中间线条定义
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #97b2ff;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
#loader:before {          //通过伪类元素定义外围线条
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #97b2ff;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}
#loader:after {       //通过伪类元素定义最内部线条
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #97b2ff;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

Underlying code (cited cases)

• userCenter.js (personal Center page)

// pages/userCenter/userCenter.js
const app = getApp();
var that;
const db = wx.cloud.database();
Page({
  data: {
    isShow: false,
    // 显示加载更多 loading
    hothidden: true,
    userInfo: {},
    // loading
    hidden: true,
    iconList: [{
      icon: 'camerafill',
      color: 'purple',
      badge: 0,
      name: '我的约拍',
      url: '/pages/userCenter/myLaunch/myLaunch'
    }, {
      icon: 'home',
      color: 'blue',
      badge: 0,
      name: '个人主页',
      url: '/pages/userCenter/personal/personal'
    }, {
      icon: 'writefill',
      color: 'yellow',
      badge: 0,
      name: '编辑资料',
      url: '/pages/userCenter/editDetail/editDetail'
    }, {
      icon: 'share',
      color: 'olive',
      badge: 0,
      name: '分享名片',
        url: '/pages/userCenter/shareCard/shareCard'
    }, {
      icon: 'likefill',
      color: 'red',
      badge: 0,
      name: '我的收藏',
      url: '/pages/userCenter/collect/collect'
    }, {
      icon: 'edit',
      color: 'blue',
      badge: 0,
      name: '建议反馈',
      url: '/pages/userCenter/advice/advice'
    }],
    gridCol: 3,
    skin: false
  },
  //......
  })

• userCenter.wxss (personal Center page)

/* pages/userCenter/userCenter.wxss */
 .page__bd{
   padding-bottom: 0;
 }
.weui-media-box__thumb{
 border: 1px solid beige;
  border-radius: 50%;
}
.page {
  /* height: 100Vh;
  width: 100vw; */
}

.page.show {
  overflow: hidden;
}

.switch-sex::after {
  content: "\e716";
}

.switch-sex::before {
  content: "\e7a9";
}

.switch-music::after {
  content: "\e66a";
}

.switch-music::before {
  content: "\e6db";
}

Real machine demo (part screenshot)

• Core functions: the release of information about shooting, viewing, matching, etc.
  
• Social basic functions
  
• Personal Management Center
  

Project Summary

• This project is a small program to practice hand entry purposes, the code section for reference purposes only;
• General idea has been formed, but many features still not perfect, due to the late development more difficult (yourselves too), now in beta stage on hold;
• Hopefully this article will give students started going to the pit of some help! If you want to give the campus counterparts about to shoot a little platform of new ideas but could not be better!