[lwptoc min=”2″ hierarchical=”1″]
uni-app的基本使用
环境搭建
安装编辑器HbuilderX【下载地址】
安装微信开发者工具【下载地址】
- 点击HbuilderX菜单栏文件>项目>新建
- 选择uni-app,填写项目名称，项目创建的目录
运行项目
在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app
在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机
注意：
-
如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功
- 微信开发者工具在设置中安全设置，服务端口开启
目录文件介绍
文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
unpackage 就是打包目录，在这里有各个平台的打包文件
pages 所有的页面存放目录
static 静态资源目录，例如图片等
components 组件存放目录
为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：
-
页面文件遵循 Vue 单文件组件 (SFC) 规范
-
组件标签靠近小程序规范，详见uni-app 组件规范
-
接口能力（JS API）靠近微信小程序规范，但需将前缀
wx替换为uni，详见uni-app接口规范 -
数据绑定及事件处理同
Vue.js规范，同时补充了App及页面的生命周期 - 为兼容多端运行，建议使用flex布局进行开发
通过
新建界面
<template>
<view>
<h1>我是message页面</h1>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
pages.json 来配置页面
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "你好我是uniApp"
}
}, {
"path": "pages/message/message",
"style": {
"navigationBarTitleText": "用户留言"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white", //导航栏标题颜色
"navigationBarTitleText": "你好我是uniApp",
"navigationBarBackgroundColor": "#c3d08b", //导航栏背景颜色
"backgroundColor": "red",
"enablePullDownRefresh": true
},
"tabBar": {
"list": [
{
"text":"首页",
"pagePath":"pages/index/index",
"iconPath":"static/imgs/tab/yqh.png",
"selectedIconPath":"static/imgs/tab/yqh-active.png"
},
{
"text":"留言",
"pagePath":"pages/message/message",
"iconPath":"static/imgs/tab/message.png",
"selectedIconPath":"static/imgs/tab/message-active.png"
}
]
}
}
相关文章
