一、准备工作

uni-app文档

HBuilderX，H是HTML的首字母，Builder是构造者，X是HBuilder的下一代版本。我们也简称HX。 HX是轻如编辑器、强如IDE的合体版本。

HBuilderX下载

1.新建项目

在HBuilderX中点击文件新建项目

可选择项目类型，vue版本选择，是否启用uni-cloud等

2.配置浏览器

想要预览效果点击运行
运行到浏览器可打开浏览器进行预览
运行到浏览器需要先配置浏览器，没有配置直接点击是无效的
将浏览器文件所在地址目录配置路径

运行到内置浏览器可直接在HBuilderX中进行预览（点击后会让你下一个插件）
配置浏览器
运行到小程序模拟器
和运行到浏览器一样需要配置路径

配置小程序模拟器

3.兼容

部分语法标签在web端适用，在小程序端被转译成其他不适用，所以开发时需要考虑兼容问题

4.新建页面

新建page页面
新建页面
创建同名目录会自动创建出和文件夹一样名字的vue文件

二、上手

1.pages.json文件的页面配置与全局配置

点击查看更多

该文件下pages数组中第一项为首页项

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
	    {
            "path" : "pages/list/list",
			"style": {//当前页面，优先级高
				"navigationBarTitleText": "新闻列表",//当前页面导航栏标题
				"navigationBarBackgroundColor": "#1AA034",//当前页面导航栏背景颜色
				"navigationBarTextStyle": "white"//当前页面导航栏字体样式
			}
        }
        ,{
            "path" : "pages/about/about",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "关于我们",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {//全局页面，优先级低
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni系列课程",
		"navigationBarBackgroundColor": "#DD5347",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {},
	"tabBar": {//选项卡
		"color":"#333",
		"selectedColor": "#015FF9",
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "static/images/home.png",
				"selectedIconPath": "static/images/home_light.png"
			},
			{
				"text": "列表",
				"pagePath": "pages/list/list",
				"iconPath": "static/images/search.png",
				"selectedIconPath": "static/images/search_light.png"
			},
			{
				"text": "我们",
				"pagePath": "pages/about/about",
				"iconPath": "static/images/my.png",
				"selectedIconPath": "static/images/my_light.png"
			}
		]
	}
}

2.rpx尺寸单位

点击查看更多

rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。

3.内置组件

更多组件、属性、平台差异点击查看
uView：多平台快速开发的UI框架

icon 图标
text 文本组件。用于包裹文本内容
view 视图容器。它类似于传统html中的div，用于包裹各种元素内容
scroll-view 可滚动视图区域。用于区域滚动。需注意在webview渲染的页面中，区域滚动的性能不及页面滚动
swiper 滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图。注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间
image 图片
video 视频播放组件
camera 页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机
button 按钮
input 单行输入框
navigator 页面跳转

4.vue写法

这里和vue写法相同，之前笔记中学习过，可前往uniapp文档查看vue写法或者vue官方文档查看

模板

<template>
	<view>
		<view class="box">当前标题：{{title}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"微信小程序"
			};
		}
	}
</script>

<style lang="scss">

</style>