认识心得与具体实现

张芮萍：

1. 认识与心得

首先是html的学习，学习了它的各种标签的概念和使用方式，比如表格标签是用于构建表格，让数据显示的更为规整，把繁杂的数据表现得很有条理，再比如表单标签，为了跟用户进行交互，收集用户的资料，还有常用的语义标签、段落和换行标签等等。通过这个的学习，学到了如何绘制一个静态页面的框架。

接着是css的学习，html完成了一个页面的框架，那么css就是它的美容师，进行一个网页的美化和布局，让html更漂亮，让页面布局更为简单。学习了css的选择器，相当于html标签的编号，通过这个编号我们可以对相应的标签进行布局美化，有标签选择器、类选择器、id选择器和通配符选择器，学习了它们各自的用法。然后是各种属性的学习，字体属性来调节字体的样式，文本属性的学习来调节文本的外观，等等。然后是css盒子模型的学习，这个主要是用来布局页面的。然后是浮动等等。

最后是js基础知识的学习，这是一种运行在客户端的编程语言，实现人机交互效果，学习了js基础语法核心知识，有变量分支、循环语句、对象等等，和其他的编程语言核心内涵非常相似，就是语法会有不同和其他的一些差别。

1. 具体实现

完成首页页面设计

叶光美：

1. 认识与心得

1.1 uni-app是什么？

uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app也是更好的小程序开发框架、更好的App跨平台框架、更方便的H5开发框架。

1.2 uni-app的优点

（1）开发者和案例更多：HBuilder装机量500万台，开发者社区月活百万，70多个QQ微信群承载10万人。案例众多，uni统计月活100亿， 性能更高（见） 更丰富的周边生态，千款插件 提供比小程序原生开发更好的开发体验，更高的工程化效率 跨端抹平度更完善，且各端特色发挥更灵活，可真正实现一套代码多端覆盖，无需各端多头维护升级。

（2）官方认可：阿里小程序官方工具内置uni-app，腾讯课堂官方自制uni-app培训视频。

（3）开发成本、门槛低

不管你是公司也好，个人也好，如果你想开发多终端兼容的移动端，那uniapp就很适合你。

1.3心得体会

    不管学习多高深的框架，要想学习学得好、学得深，就要去看官网文档。通过这一段时间的学习，我发现官网文档更新的内容还是挺多多的。更新得越频繁，说明框架越有活力，也就更值得我去探索、应用。mui和uni-app都是DCloud出品，我就在想mui能直接平滑过渡到uni-app不?官方给出的答案是否定的。如果已有5+或muiApp、wap2app、原生App，是无法迁移到uni-app的。所以学习官方文档，可以让我们得到有效的学习。云函数也是运行在服务器上的，只不过和我们传统开发语言相比。微信官方为我们提供的方便的一键部署。也就是说我们只需要把心思花在业务逻辑代码的编写上即可。无需关心写好如何部署，无需关心安全问题，无需关心鉴权问题。

1. 具体实现

完成购物车页面设计

刘天雨：

1. 认识与心得

了解到uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。

以前我也写过一些前端的项目，比较熟悉html，但是没有用过uni-app，我通过一些文档和视频进行了学习。

结构：里面有script和style节点。这个叫vue单文件组件规范sfc
外部文件引用方式：js要require进来，变成了对象，在hello uni-app的common目录有一个工具类util.js

在这个util.js里，要把之前的function封装为对象的方法

css外部文件导入：

<style>

@import "./common/uni.css";

.uni-hello-text{

color:#7A7E83;

}

</style>

另外，vue支持组件导入，可以更方便的封装一个包括界面、js、样式的库。

组件/标签

uni-app参考小程序规范，提供了一批内置组件。

下为html标签和uni-app内置组件的映射表：

1. div 改成 view
2. span、font 改成 text
3. a 改成 navigator
4. img 改成 image
5. input仅仅是输入框。 原html规范中input不仅是输入框，还有radio、checkbox、时间、日期、文件选择功能。在uni-app和小程序规范中，input仅仅是输入框。其他功能uni-app有单独的组件或API：radio组件  、checkbox组件 、时间选择 、日期选择  、图片选择 、视频选择 、多媒体文件选择(含图片视频) 、通用文件选择。
6. form、utton、label、textarea、canvas、video这些还在。
7. select 改成 picker
8. iframe 改成 web-view
9. ul、li都用view替代。做列表一般使用uList组件
10. audio 不再推荐使用，改成api方式，背景音频api文档其实老的HTML标签也可以在uni-app里使用，uni-app编译器会在编译时把老标签转为新标签，比如把div编译成view。但不推荐这种用法，调试H5端时容易混乱。

新增了一批手机端常用的新组件：

1. scroll-view 可区域滚动视图容器
2. swiper 可滑动区域视图容器
3. icon 图标
4. rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）
5. progress 进度条
6. slider 滑块指示器
7. switch 开关选择器
8. camera 相机
9. live-player 直播
10. map 地图
11. cover-view 可覆盖原生组件的视图容器
12. cover-view需要多强调几句，uni-app的非h5端的video、map、canvas、textarea是原生组件，层级高于其他组件。如需覆盖原生组件，则需要使用cover-view组件。详见层级介绍

使用微信云开发

1. 在app.js里面进行云开发的环境配置
2. 查询表中所有数据
3. 通过关键字进行模糊查询
4. 新增数据
5. 根据id删除数据
6. 根据id修改数据

最后，要学好uni-app我还要再仔细认真读uni-app文档，学习Vue和小程序。

2.具体实现

完成个人中心页面设计

于凌云：

1. 认识与心得

后端云函数优势：
云端运行：无需采购、部署、运维传统硬件，节约人力及成本
高效开发：每个函数单独运行、部署，上传代码后即可自动部署，提升了独立开发和迭代的速度
弹性伸缩：根据请求量实现毫秒级实时弹性伸缩，函数未执行不产生任何费用，不需为空闲资源付费
缺点：
无法应对架构特别复杂的情况，不是所有的业务都适合上云的，业务需要细粒度的拆解来决定哪些服务需要上云，这对软件的架构是个挑战，可能需要一个侵入式的改造。
不适合应用长时间运行
依赖很多第三方服务

1. 具体实现

数据库建表，并完成设计首页页面相关的接口

周笑宇：

1. 认识与心得
2. 后端使用云函数来实现。云函数提供了一种直接在云上运行，无状态的、短暂的、由事件触发的代码的能力。云函数在Web及移动端服务中，可以整合API网关和Serverles服务构建Web及移动后端，帮助开发者构建可弹性扩展、高可用的移动或 Web后端应用服务
3. ServerLess，即无服务器架构，也叫轻服务，它包含两个部分，如下：
4. 函数即服务（FaaS: Function as a Service）
5. 函数即服务提供的是计算能力。原有的计算能力，无论是容器也好，虚拟机也好都承载在一定的操作系统之上，函数即服务把计算能力进行了进一步抽象。
7. 后端及服务（BaaS: Backend as a Service）
8. 后端即服务，比如对象存储，数据库应用，缓存服务，我们也可以称之为Serverless，因为这些服务也能够在云上提供开通即服务，开通即使用的能力。在使用这些产品时同样不需要关注它的服务器是什么样的，它的服务器部署在哪里，而是服务开通就可以使用了，后面的运维工作都交给了云，所以不用感知它的最底层服务器。
9. 云函数，就是FaaS模式的具体实现。同样，对象存储、数据库应用、缓存服务等，是BaaS模式的具体实现。对于轻服务，BaaS和FaaS缺一不可。
11. 我们使用LeanCloud作为数据库
12. LeanCloud是一个可以用来存储数据的平台(相当于的后端服务器)，它可以作为手机APP存储数据，获取数据的平台。
13. 我们使用LeanCloud作为数据库，步骤如下：
14. 1.在LeanCloud注册并添加应用的步骤： 进入leanCloud官方网站——注册（校验邮箱）——创建应用
15. 2.安装SKD
    在页面的右上角处点击 帮助——快速入门
16. 选择开发语言或平台——选择 LeanCloud 应用后根据下文的文档根据实际情况安装SKD即可
17. 可以选择CDN方式，直接在HTML中通过 script 标签引入SDK
18. 3.验证SKD是否安装成功
19. 4.初始化SKD
    在JS中加入如下代码初始化SKD
20. 5.验证是可以访问 LeanCloud 服务器及添加测试代码
21. 添加了测试代码后，打开LeanCloud如果看到，Class多了一个项目，项目里内容是Hello World!，即表示测试成功
23. JavaScript思路
24. 思路：将AVUser 对象封装成 model 对象——通过 controller 操作 model 保存数据、获取数据（ 批量获取数据库中的内容并添加到页面中——监听submit事件——保存并提交输入的内容到数据库中——添加功能使新增加的内容自动添加到页面（不用刷新整个页面），同时清除输入框中的内容）
25. 从数据库中获取对象可在LeanCloud中可以参考API文档
26. 使用云函数的好处：
27. 简单易用：自动并快速扩缩容；
28. 稳定可靠：高可用部署、与其他计算服务结合使服务更健壮；
29. 高效开发：加速开发，简化运维；
30. 节省成本：不需为空闲资源付费；
31. 简化管理：可视化管理、简化安全配置
32. 使用云函数的缺陷：
33. 需要对业务进行很细粒度的拆分，难以进行或成本太高；
34. 不适合长时间运行应用；
35. 对第三方服务依赖过高。

2.具体实现

完成设计购物车页面和个人中心页面相关的接口