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 发行 -> 云打包