百万前端之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啦!多年以后你也会成为百万前端的!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值