小程序·云开发实战 - 校园约拍小程序

创意来源于生活，之所以开发这个校园约拍小程序，是因为在摄影选修课上常听老师抱怨外出写生老找不到模特，许多大学生都想拥有一套专属自己记忆的摄影作品，记录下不会磨灭的美好回忆，可如何找到让自己满意的摄影师是他们的难题。悦拍屋是一个校园摄影o2o的约拍平台，提供全方位的约拍服务，同时提供一个自我展示，学习交流，互动娱乐的平台。接下来我将结合项目的讲解给大家分享一些实用技术和对于云开发的一些经验，希望对正在学习小程序的你有帮助。

前言

在开发一个项目之前首先要进行技术选型从而降低产品开发的技术风险和提高开发效率，技术选型必须得紧紧围绕着业务场景来选择。

• 产品原型设计：墨刀
• UI组件库
  1.微信原生样式库WeUI,让用户使用感知更加统一
  2.注重视觉交互体验的ColorUI组件库，在感知统一的基础上视觉元素多样化
• 前端
  1.小程序原生语法以及API
  2.Promise实现异步调用
  3.ES6编写页面交互逻辑
• 后端
  1.云函数：无需自建服务器，在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码
  2.云数据库：无需自建数据库，一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库
  3.云存储：实现小程序前端直接上传/下载云端文件，在云开发控制台可视化管理
  4.云调用：由原生微信服务集成，基于云函数免鉴权使用小程序开放接口的能力，包括服务端调用、获取开放数据等能力
• 其他
  1.使用微信提供的云测试对未上线的小程序进行缺陷测试、性能数据分析、机型覆盖测试，确保小程序上线后正常运营
  2.使用基于云开发的AI视觉能力-身份证识别实现实名认证，智能鉴黄结合人工完成发布信息的审核
  3.开发工具:微信开发者工具、VScode
  4.部分图标使用自阿里巴巴矢量图标库

总体设计

功能结构图

大家可以通过此图了解整个项目的主要功能点

产品原型图

此处给出一张主页原型图示例，墨刀还是挺好用的

色彩设计图

悦拍屋的整体色调为浅蓝色，各位小伙伴在开发自己项目的时候可以根据色彩标准搭配来设计项目所采用的色彩，合适的色彩搭配可以给用户良好的视觉体验

功能模块详解

接下来我会对部分功能模块以图文结合的形式详细描述，将其中涉及的技术、知识分享给大家

约拍邀请

用户可在首页查看约拍需求，并点击查看需求详情，用户在了解需求后，若自己符合条件即可提交约拍信息，等待发布者的回复，可将此需求收藏方便查看

技术分享：自定义顶部导航栏

官方默认的导航栏只能对背景颜色进行更改，对于想要在导航栏添加一些比较酷炫的效果则需要通过自定义导航栏实现

实现原理：通过设置app.json中页面配置的navigationStyle(导航栏样式)配置项的值为custom,即可实现自定义导航

"window":{
    "navigationStyle":"custom"
}

本项目的部分页面自定义导航栏实现使用了ColorUI的导航栏组件，在完成上一步属性设置后再引入导航栏组件即可

"usingComponents":{
    "cu-custom":"/colorui/components/cu-custom"  //该路径替换为自己项目内ColorUI组件所在位置
}

主页自定义导航栏通过设置背景图片加上GIF波浪效果

  <view class='page__bd'>
    <view class="bg-img padding-tb-xl" style="background-image:url('http://wx4.sinaimg.cn/mw690/006UdlVNgy1g2v2t1ih8jj31hc0p0qej.jpg');background-size:cover;">
      <view class="cu-bar">
        <view class="content text-bold text-white">
          悦拍屋
        </view>
      </view>
    </view>
    <view class="shadow-blur">
      <image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100rpx;margin-top:-100rpx;"></image>
    </view>
  </view>

效果图

使用组件定义的导航栏

<cu-cus