uni-app框架、项目的创建、目录结构、创建页面及创建底部tab、基础语法、组件传值、uni-app全局变量、静态文件引入、页面跳转、样式、环境判断、平台判断
一.uni-app 框架
1.框架介绍
概述
是一个使用vue语法去开发所有前端应用的前端开发框架
一套代码，发布为微信小程序，支付宝小程序，app（ios，android）h5等
vue语法：
数据绑定，列表渲染v-for，条件渲染，事件绑定
小程序语法：
组件 + api(uni.)
2.官方网址
https://dcloud.io/
https://uniapp.dcloud.io/ uni-app官方网址
二、项目创建
1.使用工具创建（推荐）
1.1下载工具
https://www.dcloud.io/hbuilderx.html
选择开发版即可
1.2创建项目流程
文件-新建-项目-选择uni-app产品-项目目录-项目名称-默认模板-不启用云开发-----选择新建-
1.3运行
1.h5
点击 运行到浏览器 -h5
2.微信小程序
1.点击工具--设置--运行配置----配置微信小程序的安装目录
2.微信开发者工具 --安全---服务端口 --打开
3.点击运行0--到微信小程序
到小程序 报错 原因 appid假的 换成真实的不报错
2、使用脚手架（cli了解）
步骤
npm install -g @vue/cli 安装脚手架
vue create -p dcloudio/uni-preset-vue my-project 创建项目
选择-默认模板
cd my-project
运行的平台
npm run dev:%PLATFORM%
npm run build:%PLATFORM%
h5 app等
3.cli与工具创建的区别（了解）
1.编译器
cli 创建的项目，编译器安装在项目下。并且不会跟随HBuilderX升级，自己手动升级
HBuilderX 编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。
2.开发工具
cli创建的项目，对于ts有比较有好的提示
HBuilderX，没有内置ts提示，需要自己安装，可以在项目下先执行 npm init，然后npm i @types/uni-app -D，来补充d.ts。
三.目录结构
1.app.vue 全局样式 全局js文件 跟文件
2.man.js 实例化vue 入口文件
3.manifest.json 项目的配置 设置app的图标
4.page.js 配置文件 窗口的表现 tabbar
5.uni.scss 定义了全局的常量
6.目录
pages 放置页面的总文件
index 页面的文件夹
index.vue 页面文件
list
static
放置静态资源的文件夹 图片
unpackage
放置编译后的项目
四.创建页面及创建底部tab
1.创建页面
选中pages文件夹
右键 新建页面
填写页面名称-----默认创建同名目录，默认在pages.json注册页面
2创建底部tab
page.json 支持注释
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}, {
"path": "pages/list/list",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}, {
"path": "pages/my/my",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
//创建tabbar
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/list/list",
"text": "列表"
}, {
"pagePath": "pages/my/my",
"text": "我的"
}
],
"color":"#333333",
"selectedColor":"#ff0000",
"backgroundColor":"#C0C0C0"
}
}
五.基础语法
数据绑定、属性绑定、事件绑定及传参接参、列表渲染、条件渲染
vue语法
案例代码
{
{msg}}
属性绑定
事件绑定
{
{item}}
看我显示没有
六.组件传值
1.父传子
语法参考
在父组件：自定义属性
在子组件：props接收值
代码案例：
父组件：my.vue
我是one组件
来自父亲的嘱托：{
{msg}}
八.静态文件引入
1.静态资源（图片，视频等） 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>
2.css文件
语法参考
./
/
@/
代码案例
/* @import url("/common/common.css"); */
/* @import url("@/common/common.css"); */
@import url("../../common/common.css");
3.js文件
语法参考
不支持/的引入方式 报错
@/
../
代码案例
// 不支持 /绝对路径引入js文件
// import global from "/utils/global.js"
// import global from "@/utils/global.js"
import global from "../../utils/global.js"
console.log(global);
九.页面跳转
1.跳转方式
语法参考
组件跳转
navigator open-type url
uni.navigateTo({
url:""
})
代码案例
2.传递参数
语法参考
在路径后边 ？传递参数
3.接收参数
语法参考
1.在目标页面 onLoad生命周期中 通过参数接收
2.在目标页面 某一个函数中 this.$mp.query
代码案例
onLoad(options){
console.log(options);
// this.$mp.query
console.log('第二种接收页面传的参数',this.$mp.query);
}
十、样式
语法参考
和小程序保持一致
rpx px
设计稿不是750px 工具-编辑器配置--px转rpx 进行换算
@import url('css文件路径')
建议使用flex布局
十一、环境判断
语法参考
线上环境 开发环境
process.env.NODE_ENV
代码案例
let url = null;
if(process.env.NODE_ENV === 'development'){
console.log('开发环境')
url = "http://localhost:3000"
}else{
console.log('生产环境')
url = "http://api.aslegou.top"
}
console.log(url);
十二、平台判断
(1)编译期判断（条件编译）
语法参考
运行的产品
微信小程序 app h5 支付宝小程序
处理兼容
在注释中 js css html json
button
(2)运行期判断
语法参考
uni.getSystemInfoSync().platform 获取运行平台
ios android other devtools
代码案例
switch(uni.getSystemInfoSync().platform){
case 'android':
console.log('运行Android上')
break;
case 'ios':
console.log('运行iOS上')
break;
default:
console.log('运行在开发者工具上')
break;
}