基于UniApp社区论坛多端开发实战

什么是移动端WebApp

移动端WebApp： 泛指手持设备移动端的web

特点：

- 类App 应用，运行环境是浏览器
- 可以包一层壳，成为App
- 常见的混合应用： ionic， Cordova， appcan, uni-app
- 原生应用： ReactNative, fluter
- 桌面应用： Electron

Mint UI

基于UniApp社区论坛多端开发实战

知识学习

GitHub - dcloudio/uni-app: uni-app 是使用 Vue 语法开发小程序、H5、App的统一框架

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

uniapp 相关配置

工程目录结构

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)。
├─wxcomponents          存放小程序组件的目录，详见
├─nativeplugins         App原生插件 详见
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量 

开发规范约定
页面文件向导Vue单文件（SFC）规范
组件标签靠近小程序规范，详见 uni-app组件规范
互连能力（JS API）靠近微信小程序规范。但需要将替换wx.ini, 详见uni-app接口规范，
数据能力绑定以及事件处理Vue.js规范。同时补充了App和页面的生命周期
为兼容多端运行，建议使用flex 布局进行开发
资源路径说明
使用绝对路径代替相对路径 使用@ 指向项目根目录下的static 目录

生命周期

页面文件向导Vue单文件（SFC）规范

组件标签靠近小程序规范，详见 uni-app组件规范

互连能力（JS API）靠近微信小程序规范。但需要将替换wx.ini, 详见uni-app接口规范，

数据能力绑定以及事件处理Vue.js规范。同时补充了App和页面的生命周期

为兼容多端运行，建议使用flex 布局进行开发