51 lines
2.1 KiB
Markdown
51 lines
2.1 KiB
Markdown
---
|
|
title: "「项目实战」校园微信小程序 02.前端技术"
|
|
categories: [ "前端技术","商业项目" ]
|
|
tags: [ ]
|
|
draft: false
|
|
slug: "yiyu-frontend"
|
|
date: "2021-04-27 16:36:00"
|
|
---
|
|
|
|
### 自白
|
|
首先，这系列鸽了挺久的，最近也确实学业的问题，因为最近要操办出国的签证手续、学费，各种事项，自己都很久没上博客了，在此以表歉意！
|
|
|
|
### 技术栈
|
|
首先就是技术栈选择，看我博客的人应该大多数都是比我强很多的大佬，**我的博客也只是作为学习经历的日志，并不能作为教程或是参考**，还请各位前辈指点。因为这一次的工期较紧，我们直接选择了uniapp作为小程序的前端框架开发。
|
|
|
|
### uni-app
|
|
![uniapp][1]
|
|
|
|
uniapp这个东西，说强也强，夸了这么多端，说拉胯也拉胯，包括IDE的bug奇多，UI框架bug等。
|
|
具体不多说了，百度都能找得到相关介绍。
|
|
|
|
uniapp最方便的就是用的 Vue 技术栈，mvvm 的思想在近几年的前端中很流行，前端三大框架 Vue / React / Augular。在App开发中，双向绑定数据流极大提升效率。
|
|
|
|
![Vue / React / Augular][2]
|
|
|
|
实际开发体验中，我和伙伴一直认为uniapp做小程序开发合适，App还是欠缺，尤其是原生交互，当然也可能是我们知识还是欠缺，想做App开发还是要会原生。
|
|
|
|
### uview-ui
|
|
[官网链接][3]
|
|
|
|
uniapp生态中，最著名的ui组件库就是uview了，一个在深圳的团队开发的，最初是一个人，现在成立了公司。
|
|
|
|
这个框架对于电商（地址编辑、个人信息、购物车）支持良好，还支持社交App的许多组件。
|
|
|
|
### 布局
|
|
|
|
**商业项目，关键信息都已打码**
|
|
|
|
![首页][4]
|
|
|
|
首页，主要用到的都是flex
|
|
|
|
![个人中心][5]
|
|
|
|
个人中心页面，直接用 uview 的列表，很方便。
|
|
|
|
[1]: https://cdn.taurusxin.com/old-cdn/typecho/2021/05/07/uniapp.png
|
|
[2]: https://cdn.taurusxin.com/old-cdn/typecho/2021/05/07/mvvm.png
|
|
[3]: https://www.uviewui.com/
|
|
[4]: https://cdn.taurusxin.com/old-cdn/typecho/2021/05/07/miniapp-main.jpg
|
|
[5]: https://cdn.taurusxin.com/old-cdn/typecho/2021/05/07/miniapp-me.jpg |