一、项目创建

基于uni-ui创建项目

1、tabbar的实现

在pages中创建三个页面

在pages.json中配置pages，配置主包中的页面

在pages.json中添加tabbar配置，指定选中状态和为选中状态的图片，以及点击tabbar对应的页面路径

2、封装全局请求的根路径

在main.js中封装一个全局的请求根路径，方便后期维护，此时发送接口请求只需要使用对应的接口地址即可

//在控制台安装该插件
npm install @escook/request-miniprogram

//在main.js中导入该插件
import { $http } from @escook/request-miniprogram

//挂载第三方http请求
//其他页面通过uni.$http发起网络请求
uni.$http = $http

//配置请求根路径
$http.baseUrl = "https://www.zxlsc.top/api"

3、封装一个全局消息提示

在main.js中封装全局消息提示 此时只需要调用uni.$showMsg()添加指定信息提示即可

//为uni挂载一个全局方法 封装消息提示方法
uni.$showMsg = function(title = "数据获取失败!",duration = 1500){
	uni.showToast({
		title,
		duration,
		icon:none		
	})
}

4、添加请求和响应拦截器

在main.js中添加拦截器

$http.beforeRequest = function(options){
	//请求拦截器 请求前添加加载效果
	uni.showLoading({
		title:数据加载中...
	})
}

$http.afterRequest = function(){
	//响应拦截器
	//关闭loading
	uni.hideLoading()
}

二、分包创建

防止主包内容数据过大导致超出2MB限制

现在项目下创建一个目录名称为subpackage，然后在pages.json中配置"subPackages"

"subPackages": [
    {
		//分包1配置
		"root": "subpackage",
		"pages": []
    },{
		//分包2配置
		"root": "subpackage2",
		"pages": []
    },
]

然后在项目中新建页面并生成同名目录

新建完成后它会自动在pages.json中生成配置的页面路径信息

三、页面跳转

1、tabbar的跳转

uni.switchTab({
	url:../cate/cate  //跳转到在pages.json中配置的路径
})

2、其他页面的跳转

uni.navigateTo({
     url: ../../subpackage/hot_article/hot_article
})

四、发送接口请求

使用封装好的http请求来进行数据获取

1、get请求

当在get中添加参数时，向后端发送的格式会自动加在url中

async getFloorList(){
		//数据结果解构
		const {data: res} = await uni.$http.get(/articles/day,this.pageParam)
		if(!res.success){
			//出错了
			return uni.$showMsg()
		}
		this.floorList = res.data
}

2、post请求

在post请求中添加参数会自动添加在请求体中，使用@RequestBody接收参数

const { data: res} = 
await uni.$http.post("/mini/add", this.formLog)
				if(res.success){
					uni.$showMsg("留言成功")
					//关闭弹出层
					this.$refs.inputDialog.close()
				}else{
					uni.$showMsg(res.msg)
				}

五、根据胶囊位置自定义导航栏

在app.vue中的onLaunch生命周期来获取胶囊的位置，onLaunch()生命周期是最早的

onLaunch: function() {
			let h2 = uni.getSystemInfoSync().statusBarHeight; //系统导航栏
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect() //胶囊体
			uni.setStorageSync("bar",h2)  //系统bar
			let h = menuButtonInfo.top  //胶囊top
			let h3 = menuButtonInfo.height //胶囊高度
            uni.setStorageSync("nang",h3)
			uni.setStorageSync("top",h)
		},

要使搜索框与胶囊体的位置平齐，只需要在胶囊高度加55

组件中最早的生命周期只能使用crreated(),页面的生命周期可以使用onLoad()

<view class="container" :style="{height: `${heig}px`}" @click="searchBoxHandler">
		<view class="box" :style="{height: `${heig2}px`,top: `${top}px`,lineHeight: `${heig2}px`}">
			<uni-icons type="search" size="18" style="margin-left: 8px;"></uni-icons>
			<view style="color: #333333;position: absolute;top: 0px;left: 33px;font-size: 27rpx;">搜索文章、标题...</view> 
		</view>
	</view>

test(){
				let h = uni.getStorageSync("top") //胶囊top
				let h2 = uni.getStorageSync("bar") //系统bar
				let h3 = uni.getStorageSync("nang") //胶囊高度
				this.heig = h2 + 50
				this.top = h
				this.heig2 = h3
			}

六、封装组件

在项目下新建components目录，在目录下新建页面

然后在manifest.json的源码视图中添加 "usingComponents" : true,

使用时只需要直接在需要的地方使用<my-search/>即可调用

七、在开发时Vector.js包过大解决

"optimization" : {
		"subPackages" : true
}

八、使用Towxml组件解析markdown文本

在项目下新建文件夹wxcomponents，再创建一个towxml，将下载的资源解压进去

在pages.json文件中在需要引入的页面添加组件

在对应的页面vue文件中创建一个解析markdown文本的方法

parseMarkdown(content) {
				const towxml = require(../../wxcomponents/towxml/index.js);
				let result = towxml(content,
					markdown, {
						// base: https://xxx.com, // 相对资源的base路径
						theme: light, // 主题，默认`light`
						events: { // 为元素绑定的事件方法
							tap: (e) => {

							}
						}
					});
				// 更新解析数据
				this.article = result
			}