uni-app⼊门及练⼿项⽬
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的公司的介绍
2.1uni-app
概念
uni-app 是⼀个使⽤ 开发所有前端应⽤的框架，开发者编写⼀套代码，可发布到iOS、Android、Web（响应式）、以及各种⼩程序（/⽀付宝/百度/头条/QQ/钉钉/淘宝）、快应⽤等多个平台。
DCloud公司拥有600万开发者⽤户，⼏⼗万应⽤案例、12亿⼿机端⽉活⽤户，数千款uni-app插件、70+/qq。阿⾥⼩程序⼯具官⽅内置uni-app（），腾讯课堂官⽅为uni-app录制培训课程（），开发者可以放⼼选择。
uni-app在⼿，做啥都不愁。即使不跨端，uni-app也是更好的⼩程序开发框架（）、更好的App跨平台框架、更⽅便的H5开发框架。
不管领导安排什么样的项⽬，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。
功能框架
3uni-app的由来
4快速上⼿
4.1使⽤hbuilderX可视化⼯具创建
1 下载hbuilderX
2 解压
将解压后的⽬录复制粘贴(不要是C盘，不要是中⽂⽬录)
3 新建项⽬
4 开发项⽬
5 调试运⾏项⽬
运⾏在h5端
⾏在⼩程序端
第⼀次告诉hbuilderX开发者⼯具安装到哪⾥去了
报错
原因：开发者⼯具没有ba端⼝打开
解决：打开开发者⼯具----设置—安全设置—打开端⼝
如果不能⾃动打开开发者⼯具，只能⼿动导⼊项⽬
运⾏在百度⼩程序端
运⾏在⽀付宝⼩程序端
selectediconpath什么意思
运⾏在app上的表现
1 真机调试
2安装⼀个模拟器（雷电模拟器）
将真机或者模拟器调成开发者模式—设置—关于⼿机----版本号—连续点击5次|3次6 上线项⽬
4.2使⽤命令⾏创建⼀个uni-app项⽬(了解)
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
开发规范
页⾯⽂件遵循
组件标签靠近⼩程序规范，详见
接⼝能⼒（JS API）靠近⼩程序规范，但需将前缀 wx 替换为 uni，详见数据绑定及事件处理同 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"src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo"src="../../static/logo.png"></image>
tips
⽀付宝⼩程序组件内 image 标签不可使⽤相对路径
引⼊js⽂件
// 绝对路径，@指向项⽬根⽬录，在cli项⽬中@指向src⽬录
import add from'@/common/add.js'
// 相对路径
import add from'../../common/add.js'
tips
js⽂件不⽀持使⽤/开头的⽅式引⼊
引⼊css⽂件
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');
总结:
以后关于路径的引⼊我们都使⽤@绝对路径
uni-app的配置
uni-app配置⽂件只有⼀个，是pages.json，在这⾥可以配置全局配置，也可以配置页⾯的
{
"pages":[ //pages数组中第⼀项表⽰应⽤启动页，参考：uniapp.dcloud.io/collocation/pages
{
"path":"pages/index/index",
"style":{
"navigationBarTitleText":"⾸页",
"navigationBarBackgroundColor":"#2C405A",
"mp-weixin":{
"navigationBarBackgroundColor":"#565788"
}
}
}
,{
"path":"pages/cart/cart",
"style":{
"navigationBarTitleText":"购物车"
}
}
,{
"path":"pages/my/my",
"style":{
"navigationBarTitleText":"我的"
}
}
]
,
"globalStyle":{
"navigationBarTextStyle":"black",
"navigationBarTitleText":"⼩u商城",
"navigationBarBackgroundColor":"#ff0000",
"backgroundColor":"#F8F8F8",
"h5":{
"navigationBarBackgroundColor":"#00ff00"
},
"mp-weixin":{
"navigationBarBackgroundColor":"#0000ff"
}
},
"tabBar":{
"color":"#7A7E83",
"selectedColor":"#ff0000",
"borderStyle":"black",
"backgroundColor":"#fffff",
"list":[{
"pagePath":"pages/index/index",
"iconPath":"static/tabs/index.png",
"selectedIconPath":"static/tabs/indexFull.png",
"text":"⾸页"
}, {
"pagePath":"pages/cart/cart",
"iconPath":"static/tabs/cart.png",
"selectedIconPath":"static/tabs/cartFull.png",
"text":"购物车"
},{
"pagePath":"pages/my/my",
"iconPath":"static/tabs/my.png",
"selectedIconPath":"static/tabs/myFull.png",
"text":"我的"
}]
}
}
⽣命周期
⽀持的是⼩程序风格的⽣命周期，也⽀持vue的⽣命周期，推荐使⽤使⽤⼩程序风格的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。