admin管理员组文章数量:1586175
1多端的介绍
- pc:web,桌面应用
- 移动端:移动端–web app(android,ios) — 小程序(微信小程序,百度小程序,支付宝小程序,头条小程序,qq小程序,360小程序,华为小程序)
1.1原生app
- 使用原生的技术开发的手机端app Android系统(java android) ios–app(object-C),京东,腾讯视屏,支付宝
- 优点:
- 功能比h5较多,
- 运行速度快,
- 用户体验好
- 缺点:
- 需要下载,占存储容量
- 开发成本比较高。
1.2混合app
- 使用原生的app技术和H5技术进行一定比例混合开发的app,混合比例不限,
- 优点:
- 功能比较多,速度比原生app运行速度慢,用户体验比较好。开发成本不高
- 缺点:
- 需要下载,占存储容量
- 混合技术不是特别成熟,
- react-native,filler
1.3多端
- pc:web,桌面应用
- 移动端:移动端–web app(android,ios) — 小程序(微信小程序,百度小程序,支付宝小程序,头条小程序,qq小程序,360小程序,华为小程序)
2dcloud的公司的介绍
https://www.dcloud.io/
2.1uni-app
概念
uni-app
是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。DCloud
公司拥有600万开发者用户,几十万应用案例、12亿手机端月活用户,数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app(详见),腾讯课堂官方为uni-app录制培训课程(详见),开发者可以放心选择。uni-app
在手,做啥都不愁。即使不跨端,uni-app
也是更好的小程序开发框架(详见)、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。
选择原因
功能框架
3uni-app的由来
https://uniapp.dcloud.io/history
4快速上手
4.1使用hbuilderX可视化工具创建
https://www.dcloud.io/hbuilderx.html
1 下载hbuilderX
2 解压
- 将解压后的目录复制粘贴(不要是C盘,不要是中文目录)
3 新建项目
4 开发项目
5 调试运行项目
运行在h5端
行在微信小程序端
- 第一次告诉hbuilderX微信开发者工具安装到哪里去了
- 报错
- 原因:微信开发者工具没有ba端口打开
- 解决:打开微信开发者工具----设置—安全设置—打开端口
- 如果不能自动打开微信开发者工具,只能手动导入项目
运行在百度小程序端
运行在支付宝小程序端
运行在app上的表现
- 1 真机调试
- 2安装一个模拟器(雷电模拟器)
- 将真机或者模拟器调成开发者模式—设置—关于手机----版本号—连续点击5次|3次
6 上线项目
4.2使用命令行创建一个uni-app项目(了解)
1 创建项目
vue create -p dcloudio/uni-preset-vue my-project
2 编写代码
3调试代码
- npm run dev:平台
4 发布代码
- npm run build:平台
4.3命令行创建vs图形化的创建方式
- 图形创建的项目没有编译环境,使用的都是hbuilerX的编译环境
5框架简介
uni-app
使用vue的语法+小程序的标签和API
开发规范
- 页面文件遵循 Vue 单文件组件 (SFC) 规范
- 组件标签靠近小程序规范,详见uni-app 组件规范
- 接口能力(JS API)靠近微信小程序规范,但需将前缀
wx
替换为uni
,详见uni-app接口规范 - 数据绑定及事件处理同
Vue.js
规范,同时补充了App及页面的生命周期 - 为兼容多端运行,建议使用flex布局进行开发
目录结构
- 文件:
- app.vue:对标app.js+app.wxss
- main.js :入口文件
- mainfest.json:项目配置文件
- pages.json:对标app.json和页面.json一个结合
- uni.scss:全局的scss,css样式的值
- 目录
- pages:uni-app的页面,一个页面是一个目录,目录下是个单文件**.vue
- static:放置的是静态资源,图片,视屏,音频
- common:放置公共的css文件
- utils:放置公共的js文件
- components:放置公共的组件的
- platforms:个平台专用的页面
- h5
- mp-weixin
tips:
- 编译到任意平台时,
static
目录下的文件均会被打包进去,非static
目录下的文件(vue、js、css 等)被引用到才会被包含进去。 static
目录下的js
文件不会被编译,如果里面有es6
的代码,不经过转换直接运行,在手机设备上会报错。css
、less/scss
等资源同样不要放在static
目录下,建议这些公用的资源放在common
目录下。
资源路径的说明
引入静态资源(图片视屏)
<!-- 绝对路径,/static指根目录下的static目录,在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo"
版权声明:本文标题:uni-app入门及练手项目 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1727977393a1140803.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论