基于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 布局进行开发
基于UniApp社区论坛多端开发实战的更多相关文章
- 基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理
在做一些常规应用的时候,我们往往需要确定条件的内容,以便在后台进行区分的进行精确查询,在移动端,由于受限于屏幕界面的情况,一般会对多个指定的条件进行模糊的搜索,而这个搜索的处理,也是和前者强类型的条件 ...
- 基于HBuilderX+UniApp+ColorUi+UniCloud 优宝库 开发实战(一)
1. 优宝库介绍 优宝库是基于阿里妈妈.淘宝联盟 淘宝商品Api,前端使用HBuilderX + UniApp + ColorUi,后端采用UniClound 精选淘宝商品进行推荐的App程序.下 ...
- 微信小程序/校园社区论坛/微信云开发/云函数
一.框架来源 1.非常非常感谢B站up主"梦千的曾哥哥"的开源框架. 没有他就没有这个小程序.如果有想做的同学,可以直接移步他的视频那里开始学习.我水平不够,就不教具体怎么配置环境 ...
- 基于php的snmp管理端开发
一.系统环境: 操作系统:CentOS 5.4 内核:Linux_2.6 编译环境:gcc 4.1.2 代码版本:php-5.2.8.tar ...
- 【书籍连载】《STM32 HAL 库开发实战指南—基于F7》-第一章
从今天起,每天开始连载一章<STM32 HAL 库开发实战指南—基于F7>.欢迎各位阅读.点评.学习. 第1章 如何使用本书 1.1 本书的参考资料 本书参考资料为:<STM32 ...
- 基于DDD的微服务设计和开发实战
你是否还在为微服务应该拆多小而争论不休?到底如何才能设计出收放自如的微服务?怎样才能保证业务领域模型与代码模型的一致性?或许本文能帮你找到答案. 本文是基于 DDD 的微服务设计和开发实战篇,通过借鉴 ...
- 基于uniapp自定义Navbar+Tabbar组件「兼容H5+小程序+App端Nvue」
uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富 ...
- 基于uni-app全端弹框组件uaPopup「兼容h5+小程序+app端|nvue」
uniapp兼容多端自定义模态弹框组件UAPopup ua-popup 一款轻量级的uniapp自定义弹窗组件.汇集了android.ios和微信弹窗效果(msg消息.alert提示框.dialog对 ...
- rtvue-lowcode:一款基于uniapp框架和uview组件库的开源低代码开发平台
rtvue-lowcode低代码开发平台 rtvue-lowcode一款基于uniapp框架和uview组件库的低代码开发平台,项目提供可视化拖拽编辑器,采用MIT开源协议,适用于app.小程序等项目 ...
随机推荐
- Arch Linux 安装简明流程
Arch Linux 安装简明流程 这是一篇为 GPT/EFI 引导 的电脑安装 Arch Linux(双系统)的中文简明流程,尽可能省略了可以省略的流程与文字以使得篇幅尽量短小,基本上基于 Arch ...
- python学习-Day37
目录 今日内容详细 GIL全局解释器锁 GIL与普通互斥锁区别 GIL对程序的影响 验证多线程作用 两个大前提 关于CPU的个数 关于任务的类型 死锁现象 避免死锁的解决: 添加超时释放锁 信号量 自 ...
- Ubuntu 16.4安装1050ti显卡驱动问题及解决
不得不说,ubuntu上安装nvidia驱动坑是真的多!!! 本来在之前已经安装好了,从 显卡驱动到cuda再到cudnn去不没问题,就已一次推送而来的显卡驱动更新,把我的环境全部弄坏,为了吸取教训, ...
- HMS Core地理围栏能力助你实现指定范围人群的精准消息推送
精准推送是移动端产品留存阶段的主要运营手段,精准推送常常会与用户画像紧密结合,针对用户的喜好.画像,采用不同策略,但基于用户所属区域推送消息却很难实现.目前市面上大多数第三方消息推送服务商,在系统未深 ...
- linux下运行crm
linux下运行crm 1.从windows把crm代码拷贝到linux服务器上 2.学习virtualenvwrapper工具升级版 1.安装 pip3 install virtualenvwrap ...
- 821. Shortest Distance to a Character - LeetCode
Question 821. Shortest Distance to a Character Solution 思路:遍历字符串S,遇到与字符C相等就分别向左/右计算其他字符与该字符的距离,如果其他字 ...
- linux篇-图解cacti监控安装
1登录 admin admin 2点击devices localhost 3进入配置保存 4保存 http服务要启动哦 5一步步做 6graph tree 7执行/usr/bin/php /var/w ...
- javaweb开发案例
1.实验3 (1)当运行Servlet时,碰到"空指针异常"错误怎么处理? 答:应提示用户操作有误,或设置对象值为空字符串或一个默认值,或是不执行某操作,直接跳转到其他处理中. ( ...
- Es图形化软件使用之ElasticSearch-head、Kibana,Elasticsearch之-倒排索引操作、映射管理、文档增删改查
今日内容概要 ElasticSearch之-ElasticSearch-head ElasticSearch之-安装Kibana Elasticsearch之-倒排索引 Elasticsearch之- ...
- DOM获取元素、修改元素
## DOM获取元素.修改元素### 1.DOM#### ①什么是DOM?作用? > DOM是文档对象模型 > 作用:操作网页内容,可以开发网页内容特效和实现用户交互.#### ②DOM对 ...