目录
uni-app的基本使用
环境搭建
安装编辑器HbuilderX 下载地址
HbuilderX是通用的前端开发工具,但为uni-app
做了特别强化。
安装微信开发者工具 下载地址
利用HbuilderX初始化项目
-
点击HbuilderX菜单栏文件>项目>新建
-
选择uni-app,填写项目名称,项目创建的目录
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PFF6iflb-1622777419761)(F:/Typoraimage/image-20210604080604279.png)]
运行项目
运行到浏览器
-
点击菜单栏运行>运行到浏览器>Chrome
-
效果
运行到微信小程序
-
点击菜单栏运行>运行到小程序模拟器>微信开发者工具
-
第一次需要配置路径,找到微信小程序的路径
注意:
可能会提示微信开发者工具的服务端口未开启,需要手动开启。
开启方式
-
打开微信开发者工具>菜单栏设置>安全设置
-
关闭微信开发者工具,重新运行HbuilderX,这时候就打开了微信开发者工具
运行到真机
-
手机和电脑通过数据线连接
-
点击菜单栏运行>运行到手机或模拟器>下载真机运行插件>下一步
页面结构
├── pages # 页面文件夹
│ │── index # index文件夹
│ │ │── index.vue # index页面
├── static # 静态资源
│ │── logo.png # 图片,视频或字体图标
├── unpackage # 存放打包输出的文件
├── App.vue # 项目根组件
├── main.js # 项目入口文件
├── manifest.json # 应用的配置文件
├── pages.json # 页面存放目录,全局外观
├── uni.scss # 整体控制应用的风格
介绍项目目录和文件作用
pages.json
文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等。
manifest.json
文件是应用的配置文件,用于指定应用的名称、图标、权限等。
App.vue
是我们的根组件,所有页面都是在 App.vue
下进行切换的,是页面入口文件,可以调用应用的声明周期函数。
main.js
是我们的项目入口文件,主要作用是初始化 vue
实例并使用需要的插件。
uni.scss
文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格,uni.scss
文件里预置了一批scss变量预置。
unpackage
就是打包目录,在这里有各个平台的打包文件。
pages
所有的页面存放目录
static
静态资源目录,例如图片等。
components
组件存放目录。
页面开发规范
- 页面文件遵循 Vue 单文件组件 (SFC) 规范;
- 组件标签靠近小程序规范;
- 接口能力 (JS API) 靠近微信小程序规范,但需要将前缀
wx
替换为uni
; - 数据绑定及事件处理同
Vue.js
规范,同时不充了 App 及页面的声明周期 - 为兼容多端运行,建议使用 flex 布局进行开发。
全局配置和页面配置
通过globalStyle进行全局配置
用于设置应用的状态栏,导航条、标题、窗口背景色等。详细文档
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
navigationBarBackgroundColor | HexColor | #F7F7F7 | 导航栏背景颜色(同状态栏背景色) |
navigationBarTextStyle | String | white | 导航栏标题颜色及状态栏前景颜色,仅支持 black/white |
navigationBarTitleText | String | 导航栏标题文字内容 | |
backgroundColor | HexColor | #ffffff | 下拉显示出来的窗口的背景色 |
backgroundTextStyle | String | dark | 下拉 loading 的样式,仅支持 dark / light |
enablePullDownRefresh | Boolean | false | 是否开启下拉刷新,详见页面生命周期。 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期 |
创建新的message页面
右键pages文件>创建页面---------直接生成页面结构
-
会在pages文件夹下生成刚才命名的文件名
-
这种创建方法,会在pages.json文件中自动引入新创建的文件,默认是排在pages文件下面,不会直接显示新创建的页面样式。
最终效果
配置h5特定样式
配置编译到 H5 平台时的特定样式 详细信息
属性 | 类型 | 描述 |
---|---|---|
titleNView | Object | 导航栏 |
pullToRefresh | Object | 下拉刷新 |
修改下拉样式
pages.json
页面
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages