uniapp的配置和使用

①安装环境和编辑器

注册小程序账号

微信开发者工具下载

uniapp 官网

HbuilderX 下载

首先先下载Hbuilder和微信开发者工具 （都是傻瓜式安装），然后注册小程序账号：

拿到appid：

②简单通过demo使用微信开发者工具和Hbuilder

打开Hbuilder创建一个项目：

简单配置一下：将第一步获得的appid输入在此

打开微信开发者工具进行配置：

 打开服务端口（不然项目无法通过微信开发者工具打开）：

 运行项目：

成功界面：

 在page右键新建页面，所需页面如图：

 

打开uniapp官网：

 

下载这两个组件：

 

创建默认样式：

global.css :

*{
	box-sizing: border-box;
}
page{
	background-color: #f5f5f5;
	color: #333;
}

在main.js引入：

import './static/css/global.css'

修改pages.json：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"//这里如果不写会采用项目名
			}
		},
		{
			"path" : "pages/category/category",
			"style" : 
			{
				"navigationBarTitleText" : "",
				"enablePullDownRefresh" : false
			}
		},
		{
			"path" : "pages/user/user",
			"style" : 
			{
				"navigationBarTitleText" : "",
				"enablePullDownRefresh" : false
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni-app",//项目名
		"navigationBarBackgroundColor": "#3cb371",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {},
	"condition" : { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式(list 的索引项)
		"list": [
			{
				"name": "", //模式名称
				"path": "", //启动页面，必选
				"query": "" //启动参数，在页面的onLoad函数里面得到
			}
		]
	},
	"tabBar": {//配置导航栏
		"selectedColor": "#FFD700",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/category/category",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png",
				"text": "分类"
			},
			{
				"pagePath": "pages/user/user",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png",
				"text": "我的"
			}
		]
	}
}

index.vue:

最终效果：