百万前端之uniapp开发微信小程序快速上手

uniapp，一端开发多端使用。

在使用uniapp开发之前必须要先掌握vue的语法，因为uniapp是基于vue的语法进行开发的。

下载好HBuilderX工具进行开发，事半功倍。

开发工具：HBuilderX、微信开发者工具（预览小程序）

开发环境：node.js 

1.创建项目

使用uni-ui多端兼容，开发更高效！

2.基础配置

(1)页面结构

跟vue项目文件相类似

（2）配置pages.js

{
    //页面都要在pages中注册
	"pages": [{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path": "pages/user/user",
			"style": {
				"navigationBarTitleText": "个人中心"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#dff0ef"
	},
	"uniIdRouter": {},
    //小程序底部的tabBar栏
	"tabBar": {
		"color": "black", // 未选中时的文字颜色
		"selectedColor": "#33a5e0", // 选中时的文字颜色
		"backgroundColor": "#ffffff", // tabBar背景色
		"borderStyle": "black", // tabBar上边框颜色
		"list": [{
				"pagePath": "pages/index/index", // 页面路径
				"text": "首页", // tab名称
				"iconPath": "static/index/index.png", // 未选中图标路径
				"selectedIconPath": "static/index/index.png" // 选中图标路径
			},
			{
				"pagePath": "pages/user/user", // 页面路径
				"text": "个人中心", // tab名称
				"iconPath": "static/index/user.png", // 未选中图标路径
				"selectedIconPath": "static/index/user.png" // 选中图标路径
			}
		]
	}
}

（3）配置manifest.json

这个appID去小程序官网注册就有了

（4）运行到微信开发者工具查看

（5）编写页面

（6）使用uni-ui

访问官方文档查看使用教程，因为是创建项目是就使用了uni-ui的模板，所以使用时无需再次导入。

组件使用的入门教程 | uni-app官网 (dcloud.net.cn)

现在你已经掌握了uni-app啦！多年以后你也会成为百万前端的！