1.创建项目

1. 安装 HBuilder 编辑器
2. 在编辑器中可视化创建uni-app项目
3. 设置HBuilder

1. 在 manifest.json 配置（如小程序AppId）
2. 在编辑器中 工具-设置-运行配置 中设置微信开发者工具的路径

4. 设置微信开发者工具

设置-安全 开启服务端口

5. 运行看效果(运行到微信开发者工具中)

在HBuilder中点击 运行-运行到小程序模拟器-微信开发者工具

2.创建主包页面和分包页面

1.主包页面创建

• 在pages文件上：右键-新建页面

2.分包页面创建

1. 创建分包目录：创建一个名字为subcontract的文件夹
2. 在subcontract上右键：新建页面-勾选在pages.json中注册和选择分包为subcontract

3.配置tabBar页面

4.定义全局配置常量（也可以通过环境变量.env的方式定义常量）

1. 请求配置常量

-configuration/request.js
// 请求基础路径
export const BASEURL = ''
// 请求头key
export const TONKE = 'A-TONKE'

2. 其他的按项目需要创建

5.安装请求工具@escook/request-miniprogram

1. 初始化包管理 npm init -y
2. 安装 npm install @escook/request-miniprogram
3. 配置@escook/request-miniprogram

• 配置@escook/request-miniprogram

-utils/request.js
import {
	$http
} from '@escook/request-miniprogram'
// 导入配置常量
import {BASEURL,TONKE} from '@/configuration/request.js'
// 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用
uni.$http = $http
// 配置请求根路径
$http.baseUrl = BASEURL
// 请求开始之前做一些事情
$http.beforeRequest = function(options) {
	// 请求头的值应该要在判断不为空的时候设置
	options.header[TONKE]=''
}
// 请求完成之后做一些事情
$http.afterRequest = function() {
	// do something...
}

• 在入口文件导入二次封装的@escook/request-miniprogram

-main.js
import App from './App'
import Vue from 'vue'
// 导入二次封装的请求工具
import '@/utils/request.js'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()

• 使用

export default {
    onLoad() {
         this.getSwiperdata()
    },
    methods: {
         async getSwiperdata() {
             const res = await uni.$http.get('/home/swiperdata')
             console.log(res)
	}
    }
}    

6.创建公共组件

1. 创建components文件夹
2. 右键-新建组件-输入组件名称、选择模板、勾选创建同名目录
3. 使用组件：以mySearch为例

<template>
	<view class="content">
		<!-- 使用组件：直接使用即可 -->
		<mySearch/>
	</view>
</template>

4. 注意

• 如果父组件和子组件里有类名一样的情况，就算样式使用 scoped还是会有样式污染问题