3 - 前端技术选型

1 前端工作

产品类型	技术选型	优点	缺点
官网	Vue / React / …
Webapp	Vue / React / …
订阅号开发	Vue / React / wxjssdk …
管理系统	Vue / React / 前后端不分离 / …
原生App	IOS / Android	体验好, 性能流畅	开发慢, 成本高
混合App	IOS / Android + 前端 H5 (Vue / React / …)	前后俩者的平衡	需要很好的配合
跨平台App	uniapp / RN / flutter / taro /…	开发快, 成本低	性能和体验较差
桌面应用	Electron + Vue / React / …
小程序	原生小程序 / uniapp / taro / wepy / mpvue /…
硬件设备	就是一些电子设备上显示的页面等

2 基于上面表格内容的解释

1 Webapp: 是手机端的网页, 也叫 -> M 站 / H5 

2 小程序: 微信小程序的需求比较多

3 wxjssdk: 订阅号运行在微信生态里面, 可使用微信提供的一套 API功能 (支付, 打电话, 定位等)

4 混合 App: 前端写页面, 嵌套到原生 App里面 (本质还是原生 App + H5技术)

5 webview: 这个组件可以解析 H5页面的, IOS / 安卓, 的混合开发的技术要点

6 跨平台 App: 只用前端技术做一套程序, 可以打包为 IOS 或 Android 的 App  (H5技术)

7 原生App 缺点: 成本高, 开发时间长

8 跨平台 App 缺点: 性能, 体验较差, 开发快, 成本低

3 uniapp 环境搭建与开发范式

1 创建项目的俩种方式
  1 可视化界面
  2 通过 vue-cli 命令行

2 运行项目
  1 浏览器
  2 小程序模拟器
  2 运行到手机或模拟器

3 如何安装插件 (第三方包)
  1 工具 -> 插件安装

4 

4 uniapp 项目文件说明

components: 已经写好的组件库
wxcomponents: 微信提供写好的组件库
pages: 页面组件
store: 共享数据
static: 静态资源目录
platforms: 用于区分不同平台的, 放置差异性的东西
hyrid: 代表混合开发, 用于方式混合开发的 html文件
common: 类似于我们设置的, utils 文件, 公共的工具或方法

App.vue: 根组件
main.js: 入口文件
manifest.json: 可以配置一些信息, 不可以删掉的
pages.json: 该项目中是没有路由的, 页面跳转都是通过这个文件配置出来的
uni.scss: 样式
template.h5.html: 相当于Vue中唯一的那个 html

5 uniapp 打包上线

1 manifest.json 配置

2 发行 -> 云打包