uni app基础搭建

前端开发 2年前 (2021) bestcyt
733 0 0

[lwptoc min=”2″ hierarchical=”1″]

uni-app的基本使用

环境搭建

安装编辑器HbuilderX【下载地址
安装微信开发者工具【下载地址

HbuilderX编辑器初始化项目

  • 点击HbuilderX菜单栏文件>项目>新建
  • 选择uni-app,填写项目名称,项目创建的目录

uni app基础搭建
 

运行项目

在菜单栏中点击运行,运行到浏览器,选择浏览器即可运行

在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app
在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机
注意:

  • 如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功

  • 微信开发者工具在设置中安全设置,服务端口开启

目录文件介绍

pages.json 文件用来对 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布局进行开发

全局配置和页面配置

通过globalStyle进行全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档

新建界面

<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"
			}
		]
	}
}

 
 

版权声明:bestcyt 发表于 2021年4月10日 pm4:40。
转载请注明:uni app基础搭建 | 爱前端导航

相关文章

联系站长