使用HbuilderX，uni-app创建运行第一个微信小程序

通过uniapp开发小程序（叶子傻瓜式教程）

1.下载安装HBuilderX开发版下载地址

1.1下载完成后，解压，创建好快捷方式然后打开

2.创建项目运行

2.1新建项目

文件→新建→项目，选中uni-app，模板选默认模板，写好项目名，然后创建

2.2新建页面

在pages目录下新建文件夹（这里叫目录），然后在新目录里新建对应的vue文件（可以选简单模板，反正没啥东西）

2.3配置路径

在根目录下找到pages.json，这里配置路径和导航栏。图片要存放在static文件夹下，不然编译不出来

• pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "美团外卖"
			}
			
		},
		{
			"path": "pages/order/order",
			"style": {
				"navigationBarTitleText": "订单"
			}
		},
		{
			"path": "pages/my/my",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}
	],
	"globalStyle": {//顶部导航栏的配置
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "美团外卖",//标题
		"navigationBarBackgroundColor": "#FFFFFF",
		"backgroundColor": "#FFFFFF"//背景
	},
	"tabBar":{//底部导航栏的配置
		"color":"#999794",
		"selectedColor":"#33312e",//选中后的颜色
		"borderStyle":"white",
		"backgroundColor":"#fafafa",
		"list":[
			{
				"pagePath":"pages/index/index",
				"iconPath":"static/logo.png",//因为懒得找图片，全部用了默认的
				"selectedIconPath":"static/logo.png",
				"text":"首页"
			},{
				"pagePath":"pages/order/order",
				"iconPath":"static/logo.png",
				"selectedIconPath":"static/logo.png",
				"text":"订单"
			},{
				"pagePath":"pages/my/my",
				"iconPath":"static/logo.png",
				"selectedIconPath":"static/logo.png",
				"text":"我的"
			}
		]
	}
}

2.4然后就可以调试运行了

点击运行，运行到小程序模拟器，微信开发者工具下载地址，第一次运行要下载配置路径。

• PS：小程序模拟器下载完要先打开，扫码绑定，设置里，安全，端口打开，不然运行不起来