选中uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验 uni-app。

(1). 微信开发者工具需要开启服务端口：小程序开发工具设置 -> 安全（目的是让HBuilder可以启动微信开发者工具）

(2). 如第一次使用，需配置微信开发者工具的安装路径。

点击工具栏运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的安装路径

(3). 自动启动失败，可用微信开发者工具手动打开项目（项目在unpackage/dist/dev/mp-weixin路径下）。

static目录 使用注意

三. App.vue/main.js/uni.scss详解

(详见官网： https://uniapp.dcloud.net.cn/collocation/main.html )

1.  main.js

main.js 是 uni-app 的入口文件，主要作用是初始化 vue 实例、定义全局组件、使用需要的插件如 vuex、定义全局变量、方法等。

注：全局变量主要通过 app.config.globalProperties 注册。

(1). 初始化vue3实例

import App from './App'
import { createSSRApp } from 'vue'
const app = createSSRApp(App)
export function createApp() {
	return {
(2). 定义全局变量
app.config.globalProperties.baseUrl = "xxxxxx";
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
let data = proxy.baseUrl;
特别注意：
   上述getCurrentInstance+proxy的写法，仅支持再vue页面的script标签中使用，不支持再单独的js中用。
(3). 定义全局方法 
A. 以全局对象的形式注册
   比如：myUtils.js 中有几个方法，采用默认的形式进行导出，如下：
// 默认导出
export default {
	ajaxAsync1,
	ajaxAsync2,
	ajaxAsync3,
   默认导入的时候，会用一个对象进行接收，比如对象名为 $myUtils，里面包括上述三个方法，然后直接把这个对象定义为全局对象即可。
import myUtils from './js/myUtils.js'
app.config.globalProperties.$myUtils = myUtils;
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
let data= await proxy.$myUtils.ajaxAsync1(xxxxxx);
B. 直接注册为全局方法
   myUtils.js中的方法以同上，myUtils2.js中的方法采用按需的方式导出，如下代码：
// 按需导出
export {
	ajaxAsync4,
	ajaxAsync5,
  分别将两个对象里的方法注册为全局方法
import myUtils from './js/myUtils.js'
//直接注册全局方法
for (let key in myUtils) {
	app.config.globalProperties[key] = myUtils[key];
import * as myUtils2 from './js/myUtils2.js'
//直接注册全局方法
for (let key in myUtils2) {
	app.config.globalProperties[key] = myUtils2[key];
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
let data= await proxy.ajaxAsync1(xxxxxx);
2. App.vue
App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素，也就是没有<template>。这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData。
(1).  应用生命周期
  注：应用生命周期仅可在App.vue中监听，在页面监听无效。
(2). 全局数据globalData
   这是一种简单的全局变量机制。这套机制在uni-app里也可以使用，并且全端通用（app、小程序、web）。
注册声明：
<script>
	export default {
		onLaunch: function() {},
		onShow: function() {},
		onHide: function() {},
		// 定义全局的数据
		globalData: {
			name: 'ypf',
			age: 18
</script>
<script setup>
	const { globalData } = getApp();
	console.log(globalData.name, globalData.age);
</script>
注：在单独的js文件中也可以直接使用。
(3). 全局样式
     在App.vue中，可以定义一些全局通用样式，例如需要加一个通用的背景色，首屏页面渲染的动画等都可以写在App.vue中。
     App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。
     在App.vue定义样式变量无效，样式变量需要到uni.scss中定义。
<style>
	/*********************************************全局样式 *********************************************/
	/* 说明：
      1. 此处写的样式为全局样式，所有页面都生效
      2. 该页面不能定义 scss 样式变量，定义全局变量请到uni.scss文件中
	3. 可以导入文件，比如：  // @import '@/static/css/base.scss';
	4. 通过调试工具能看到，页面的最外层都是 page标签，所以可以通过设置page的样式，给整个页面生效
    @import '@/static/css/base.scss';
	/* 通过page标签可以设置全局页面的样式 */
	page {
		background-color: #f8f8f8;
		font-family: 'Microsoft YaHei';
</style>
3.  uni.scss
uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。主要有以下几个作用：
(1). 定于全局样式，每个页面都生效
    效果同在 app.vue 页面定义样式相同，通常更倾向在app.vue页面写全局样式
(2). 定义全局样式变量
// 1.定义自定义的全局的样式变量 (可以将变量单独写到一个文件里，这里引入即可)
@import '@/static/css/base.scss';
$ypf-color: orange;
    需要添加 lang="scss"， HBuilderX 里面安装 scss 插件，运行的时候会自动安装该插件。
<style lang="scss">
// 默认就是局部样式   加scoped没有任何意义
.box {
	color: $ypf-color;
	border-radius: $radius;
</style>
(3). 重写uni-app内置的样式变量
   详见后面章节
(4). 重写uni-ui内置的样式变量
   详见后面章节
四. 各种引用(组件/js/css/静态资源)
(详见官网：https://uniapp.dcloud.net.cn/tutorial/page-component.html)
1. 组件
(1).  传统Vue2项目开发，引用组件需要导入 - 注册 - 使用三个步骤
<template>
		<!-- 3.使用组件 -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script>
	// 1. 导入组件
	import uniRate from '@/components/uni-rate/uni-rate.vue';
	export default {
		components: { uniRate } // 2. 注册组件
</script>
(2). Vue 3.x增加了script setup特性，将三步优化为两步，无需注册步骤，更为简洁
<template>
		<!-- 2.使用组件 -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script setup>
	// 1. 导入组件
	import uniRate from '@/components/uni-rate/uni-rate.vue';
</script>
(3). uni-app的easycom机制，将组件引用进一步优化，开发者只管使用，无需考虑导入和注册，更为高效
<template>
		<!-- 1.使用组件 -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script>
</script>
何为easycom机制？
  (详见官网：https://uniapp.dcloud.net.cn/collocation/pages.html#easycom)
  只要组件安装在项目根目录components或uni_modules的components目录下，并符合components/组件名称/组件名称.vue或uni_modules/插件ID/components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。
  组件名称文件夹和组件名称名字要相同。  比如：components/ypf-table/ypf-table.vue
  easycom机制是默认开启的，可以再page.json中配置关闭。
2. js
js文件或script标签内（包括 renderjs 等）引入js文件时，可以使用相对路径和绝对路径(@符号默认指向根目录)，形式如下
// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js';
// 相对路径
import add from '../../common/add.js';
3. css
  @import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径或绝对路径(@符号默认指向根目录)，用;表示语句结束。
<style lang="scss">
    @import '@/static/css/variable.css';
    @import '../../css/variable.css';
</style>
   也可以使用url的写法
/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');
4. 静态资源
(1). <template>模板内引入静态资源
template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径，形式如下
<template>
    <!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
    <image class="logo" src="/static/logo.png"></image>
    <image class="logo" src="@/static/logo.png"></image>
    <!-- 相对路径 -->
    <image class="logo" src="../../static/logo.png"></image>
    <!-- 变量模式 -->
    <image class="logo" :src="myImg" ></image>
</template>
<script>
	import myImg from '@/static/images/logo.png'
</script>
@开头的绝对路径以及相对路径会经过 base64 转换规则校验
引入的静态资源在非 h5 平台，均不转为 base64。
H5 平台，小于 4kb 的资源会被转换成 base64，其余不转。
(2). 背景图片
   绝对路径使用：~@ 、@、或者直接/ 开头都可以
/* 绝对路径 */
background-image: url("~@/static/cvy.png");
background-image: url("@/static/cvy.png");
background-image: url("/static/cvy.png");
/* 相对路径 */
background-image: url("../../static/cvy.png");
@开头的绝对路径以及相对路径会经过 base64 转换规则校验
不支持本地图片的平台，小于 40kb，一定会转 base64。（共四个平台 mp-weixin, mp-qq, mp-toutiao, app v2）
h5 平台，小于 4kb 会转 base64，超出 4kb 时不转。
其余平台不会转 base64
(3). 字体图标
（参考官网：https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#字体图标 ）
uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：
(1). 支持 base64 格式字体图标。
(2). 支持网络路径字体图标。
(3). 网络路径必须加协议头 https
(4). 小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件，需以 base64 方式方可使用。但是uni-app会进行自动转换，也就是说小程序也可以使用本地图标文件，但是需要注意以下几个规则：
  A. 为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；(换言之：字体图标大于40kb的本地文件，小程序中不能使用)
  B. 字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；
  C. 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
图标源码如下图：
iconfont.css 如下：
/* 导入字体图标 */
	@font-face {
	  font-family: "iconfont"; 
	  src: url('~@/static/custom-font/iconfont.ttf') format('truetype');
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	.icon-shouye:before {
	  content: "\e668";
	.icon-touxiang-kong:before {
	  content: "\e660";
在App.vue中全局引入图标样式
<style>
	/*每个页面公共css */
	@import '@/static/custom-font/iconfont.css';
</style>
<template>
	<view class="style-page">
		<view class="bg-view"></view>
		<text class="text iconfont icon-shouye"></text>
	</view>
</template>
作       者 : Yaopengfei(姚鹏飞)
博客地址 : http://www.cnblogs.com/yaopengfei/
声     明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。