1 Front end work
| product type |
Technology selection |
advantage |
Disadvantage |
| Official website |
Vue / React / … |
|
|
| Webapp |
Vue / React / … |
|
|
| Subscription account development |
Vue / React / wxjssdk … |
|
|
| Management system |
Vue / React / Front-end and back-end are not separated /… |
|
|
| Native App |
IOS / Android |
Good experience, smooth performance |
Slow development and high cost |
| Hybrid App |
IOS / Android + front end H5 (Vue / React / …) |
The balance of the front and back |
Need good cooperation |
| Cross-platform App |
uniapp / RN / flutter / taro /… |
Fast development and low cost |
Poor performance and experience |
| Desktop application |
Electron + Vue / React / … |
|
|
| Applets |
Native applet / uniapp / taro / wepy / mpvue /... |
|
|
| hardware equipment |
Is the page displayed on some electronic devices, etc. |
|
|
2 Explanation based on the content of the above table
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 environment construction and development paradigm
1 创建项目的俩种方式
1 可视化界面
2 通过 vue-cli 命令行
2 运行项目
1 浏览器
2 小程序模拟器
2 运行到手机或模拟器
3 如何安装插件 (第三方包)
1 工具 -> 插件安装
4
4 uniapp project file description
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 is packaged and launched
1 manifest.json 配置
2 发行 -> 云打包