uni-app的第一个程序

一官网http://uniapp.dcloud.io/二环境搭建1HBuilder：前端开发工具2微信开发者工具：微信小程序运行环境下载地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html三入门项目新建项目四运行方式1在google浏览器运行运行位置运行效果2在微信开发者工具中运行运行位置运行效果3运

chengqiuming

957人浏览 · 2020-09-01 21:26:04

chengqiuming · 2020-09-01 21:26:04 发布

一官网

1 入口

http://uniapp.dcloud.io/

2 相关文档

介绍： http://uniapp.dcloud.io/README
框架：http://uniapp.dcloud.io/collocation/pages?id=pages
组件： http://uniapp.dcloud.io/component/README
API： http://uniapp.dcloud.io/api/README

二环境搭建

1 HBuilder：前端开发工具

2 微信开发者工具：微信小程序运行环境

下载地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

三入门项目

新建项目

四运行方式

1 在google浏览器运行

运行位置

运行效果

2 在微信开发者工具中运行

运行位置

运行效果

3 运行在手机中

运行位置

运行效果

五项目结构介绍

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）规范。
组件标签靠近小程序规范。
接口能力（JS API）靠近微信小程序规范，但需将前缀wx替换为uni。
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期。
为兼容多端运行，建议使用 flex 布局进行开发。

七修改全局样式

1 修改pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index"
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "绿帽子",
		"navigationBarBackgroundColor": "#7FFF00",
		"backgroundColor": "#7CCD7C",
		"enablePullDownRefresh": true,
		"backgroundTextStyle":"light"
	}
}