uni-app微信小程序项目实战总结

猿客栈Start   个人博客微信小程序

项目展示： 微信扫码直接访问

目录

一、项目创建

1、tabbar的实现

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

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

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

二、分包创建

三、页面跳转

1、tabbar的跳转

2、其他页面的跳转

四、发送接口请求

1、get请求

2、post请求

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

六、封装组件

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

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

---

一、项目创建

基于uni-ui创建项目

1、tabbar的实现

在pages中创建三个页面

 

 

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

 

"pages": [{
		"path": "pages/home/home",
		"navigationStyle": "custom",
		"style": {
			"navigationBarTitleText": "首页",
			"navigationStyle": "custom", //自定义导航栏
			"enablePullDownRefresh": true
		}
	}, {
		"path": "pages/cate/cate",

		"style": {
			"navigationBarTitleText": "分类",
			"navigationStyle": "custom",  //自定义导航栏
			"enablePullDownRefresh": true,
			"onReachBottomDistance": 150 //距离底部150像素刷新
		}

	}, {
		"path": "pages/my/my",

		"style": {
			"navigationBarTitleText": "关于作者",
			"navigationStyle": "custom",  //自定义导航栏
			"enablePullDownRefresh": true
		}

	}],

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

"tabBar": {
		"selectedColor": "#89b7ff",
		"list": [{
				"pagePath": "pages/home/home",
				"text": "首页",
				// 未选中的状态
				"iconPath": "./static/tabbar/home.png",
				"selectedIconPath": "./static/tabbar/home-active.png"
			},
			{
				"pagePath": "pages/cate/cate",
				"text": "分类",
				// 未选中的状态
				"iconPath": "./static/tabbar/cate.png",
				"selectedIconPath": "./static/tabbar/cate-active.png"
			},
			{
				"pagePath": "pages/my/my",
				"text": "作者",
				// 未选中的状态
				"iconPath": "./static/tabbar/my.png",
				"selectedIconPath": "./static/tabbar/my-active.png"
			}
		]
	},

 

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()

		
			
			搜索文章、标题... 
		
	

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,

 

使用时只需要直接在需要的地方使用即可调用

七、在开发时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
			}