#小程序云开发挑战赛#-浙里淘志愿-卡普中将🦁
发布于 4 年前 作者 kangping 1865 次浏览 来自 分享

云开发 浙里淘志愿🦁

背景&场景应用

  • 目标用户：浙江高考考生
  • 浙里淘志愿以浙江新高考为例，帮助考生解决填报志愿过程中遇到的问题。
  • 解决指导浙江高考考生如何填报志愿问题：去哪读，读什么专业两大核心问题。
  • 提供浙江高考考生志愿填报日常科普资讯及交流。
  • 提供考生周边文具商品购买

简介

  • 浙里淘志愿是一套完全基于 微信原生云开发 实现的高质量小程序。
  • UI：遵循简洁、易用、美观的设计规范。
  • 前端：采用MV模式分层，封装通用性js工具(以分页工具paging.js为例)；组件化开发(采用开源组件库LinUI)，极速提升开发效率。
  • 后端：采用云函数进行数据处理转发，微信私有协议天然鉴权，开发者只需编写业务逻辑代码。
  • 数据库：云开发自带的 JSON 文档型数据库。
  • 文件存储：在云开发控制台可视化管理。

功能介绍

核心功能

  • 淘志愿：以考生基本信息(分数、位次、选考科目)为基准线，根据2017-2020年各专业数据为参考因素（结合其他影响因子），推荐相应的志愿给考生。
  • 淘院校：以考生基本信息(分数)为基准线，根据2017-2020年各院校概况录取数据，推荐相应的院校给考生。
  • 生成志愿分析报告：以考生在淘志愿功能里收藏的志愿为基础，生成对应的报告。
  • 模拟官方投档：以考生在淘志愿功能里收藏的志愿为基础，模拟官方投档志愿业务逻辑，并生成Excel文件供考生下载。

辅助功能（开源）

  • 高考日常科普资讯及交流区(社区交流资质问题，暂时只能是资讯展现形式)
  • 高考文具商品周边(店铺)

后期开源

  • 在核心功能里涉及到的Echart图表展示、Excel下载等应用相关辅助功能，后期可以考虑以demo应用的形式开源；
  • 🦁🦁🦁点个赞吧，考虑11月中下旬开始更新 🦁🦁🦁

产品体验

产品架构

代码结构

  • 代码结构图：前端整体采用MV模式进行开发，实现实体业务逻辑与页面操作逻辑分离：M指Model，V指View。其中V采用组件化开发。
  • 入口文件app.js：初始化自己的云开发资源
//app.js
App({
 onLaunch: async function () {
   
   if (!wx.cloud) {
     console.error('请使用 2.2.3 或以上的基础库以使用云能力')
   } else {
     wx.cloud.init({
       // env 参数说明
       env: '',
       traceUser: true,
     })
   }
 
 }
})
  • app.json：组件引入全部放在全局json中。
  • app.wxss： 全局样式。
  • dist：通用型基础组件库。采用开源组件库LinUI，高效，顺便给他们打个广告。https://doc.mini.talelin.com/
  • components：以dist组件库为基础，重新组装的组件库，专门用于本项目。
  • imgs：小型图片如icon存放；大型图片采用文件存储。
  • models：存放所有对象，用来调用云函数、处理相关实体数据操作的业务逻辑。
  • pages：存放所有页面。采取业务逻辑与操作逻辑分离，每个页面的js文件只用来处理操作页面逻辑。当需要操作实体数据时，引用Models中的实体,再实例化即可使用。

代码详解示例（paging封装复用）

特点：



1.   前端页面组件化，实现样式复用
2.   前端js的业务逻辑分离： 用户页面操作业务逻辑 + 功能数据处理业务逻辑
3.   体验入口在"我的"----“周边”

以商品列表为例，分页加载，封装工具 paging.js ，后续所有的涉及到分页的操作都可复用该工具类。

totalSpu.wxml：商品列表页，引用组件 l-water-flow ，s-spu-preview。具体页面需要调整，修改s-spu-preview 组件即可。

组件具体如何使用，请直接参考开源文档，广告一波一波：<a href="https://doc.mini.talelin.com/" rel="noopener" target="_blank">https://doc.mini.talelin.com/</a>

<view class="container">
    <view class="spu-bottom">
    <l-water-flow generic:l-water-flow-item="s-spu-preview"></l-water-flow>
    </view>
</view>
  • totalSpu.js：页面逻辑处理，只负责处理页面上的用户操作业务逻辑，可以看到整个页面的js文件里非常简洁，大大增强代码的可阅读性。
// 引入Model
import {SpuPaging} from "../../../models/SpuPaging";

Page({
    data: {
    },
    onLoad: async function (options) {
        this.initBottomSpuList()
    },

     //刚进页面加载数据
    async initBottomSpuList() {
        const paging = SpuPaging.getLatestPaging()
        this.data.spuPaging = paging
        const data = await paging.getMoreData()
        if (!data) {
            return
        }
        wx.lin.renderWaterFlow(data.items)
    },

  //触底加载数据
    onReachBottom: async function () {
        const data = await this.data.spuPaging.getMoreData()
        if (!data) {
            return
        }
        wx.lin.renderWaterFlow(data.items)
        if (!data.moreData) {
            this.setData({
                loadingType: 'end'
            })
        }
    },

})
  • models —>SpuPaging.js：spu数据业务处理。Paging是可复用的工具类，内容过多，详见源码下载。

//引入通用分页工具
import {Paging} from "../utils/paging";

class SpuPaging{
    static getLatestPaging() {
        return new Paging('getSpuList',5)
    }
}
//导出
export {
    SpuPaging
}
  • getSpuList：云函数查询数据库

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: '填写自己的资源'
})

const db = cloud.database()
const _ = db.command

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  let Response ={}

  const start = event.start
  const count = event.count
  let resSpuList = await db.collection('spu')
  .skip(start)
  .limit(count)
  .get()
  
  let items = resSpuList.data

  let resSpuCount = await db.collection('spu').count()
  let total_page = parseInt(resSpuCount.total/count)  + 1
  let page = parseInt(start/count)  + 1

  Response.total = resSpuCount.total
  Response.count = count 
  Response.items = items
  Response.page = page
  Response.total_page = total_page
  return Response
  
}

后期产品迭代（预计11月下旬开始迭代）

  • 官方需求：因官方云开发CMS 内容管理系统，无法将创建的文章内容直接转换成WXML内容，需要开发者自己引入Towxml插件来将markdown文版转换为WXML内容进行展示。处在观望中，望官方在CMS内容管理系统里集成好Towxml插件。（若开发者自身集成Towxml，将耗400k空间及需要踩坑）
  • 微信支付接入：商户号无法关联小程序，提示无法接入，请求支援，云函数已经写好了，详情见。
  • 引入NLP，分析业务语料，以用户收藏的志愿为基础，拓展志愿分析报告，实现更高级的志愿分析报告。处在观望中，望官方在CMS内容管理系统里有NLP扩展能力，无需再自己先去搭建后端，再训练语料，最后接入小程序。

部署教程

  • 1小时部署商城+CMS内容管理系统。
  • 部署有问题的可以直接留言。
  • 下载源码
	https://gitee.com/tesst/kapu-opencloud.git
  • 打开微信开发者工具，完成云开发配置
    1.导入项目—>选择下载的项目—>填写自己的appid，进入project.config.json填写自己的appid
    2.左上角位置按步骤开通云开发资源---->记住环境名称---->等待5-10分钟
    3.开通并安装云开发CMS内容管理系统：参考官方文档 https://cloud.tencent.com/document/product/1220/47065
    4.进入app.js，env: ‘XXXX’, XXX=上一步的环境名称
  • 部署云函数：在云函数里填写 云资源 env: ‘XXXX’
  • 右键：所有云函数上传并部署：云安装依赖
  • 重新编译，即可开始使用
  • 登录云开发CMS后台，创建对应内容（具体字段，参考源文件中的资源文件excel），小程序端即可同步。
回到顶部