uniapp2-创建配置项目&导航&接口封装

本篇学习内容

1. 新建项目，配置pages.json 以及 创建默认tabbar；
2. 引入自定义导航组件
3. uni.request发起请求
4. 请求接口封装

一、新建项目配置pages.json以及tabbar

pages底下新建目录tabbar新建4个页面新建4个对应的.vue文件

1.配置page页面

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/tarBar/home/home",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path": "pages/tarBar/category/category",
			"style": {
				"navigationBarTitleText": "分类"
			}
		},
		{
			"path": "pages/tarBar/cart/cart",
			"style": {
				"navigationBarTitleText": "购物车"
			}
		},
		{
			"path": "pages/tarBar/user/user",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}
	],

2.配置tabbar

"tabBar": {
		"color": "#333",
		"selectedColor": "#f06c7a",
		"borderStyle": "black",
		"backgroundColor": "#fff",
		"list": [
			{
				"pagePath": "pages/tarBar/home/home",
				"iconPath": "static/img/tabBar/home.png",
				"selectedIconPath": "static/img/tabBar/home-on.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/tarBar/category/category",
				"iconPath": "static/img/tabBar/category.png",
				"selectedIconPath": "static/img/tabBar/category-on.png",
				"text": "分类"
			},
			{
				"pagePath": "pages/tarBar/cart/cart",
				"iconPath": "static/img/tabBar/cart.png",
				"selectedIconPath": "static/img/tabBar/cart-on.png",
				"text": "购物车"
			},
			{
				"pagePath": "pages/tarBar/user/user",
				"iconPath": "static/img/tabBar/user.png",
				"selectedIconPath": "static/img/tabBar/user-on.png",
				"text": "我的"
			}
		]
	}

3.修改全局样式 globalStyle

	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "lulu",
		"navigationBarBackgroundColor": "#fff",
		"backgroundColor": "#fff"
	},

4.在全局使用样式 App.vue

    <style>
	/*每个页面公共css */
	@import url("static/iconfont/iconfont.css");
	page {
		position: relative;
		background-color: #fff;
	}
    </style>

二、自定义顶部导航

1.给home写一个组件pageHeader.vue

<!-- 组件 pageHeader.vue -->
<template>
	<view>
		<view class="header">
			<!-- 定位城市 -->
			<view class="addr">
				bbbbbbbbb
				<view class="icon iconfont">&#xe650;</view> {{city}}
			</view>
			<!-- 搜索框 -->
			<view class="input-box">
				<input type="text" placeholder="some words..." placeholder-style="color:#c0c0c0" />
				<view class="icon iconfont">&#xe65c;</view>
			</view>

			<!-- 提示信息 -->
			<view class="icon-btn">
				<view class="icon iconfont">&#xe70a;</view>
			</view>
		</view>
		<!-- 占位 -->
		<view class="place"></view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				city: "北京"
			}
		}
	}
</script>

<!-- 父页面 home.vue -->
<template>
	<!-- 自定义顶部导航栏 -->
	<pageHeader />
</template>

<script>
	import pageHeader from './pageHeader.vue'
	export default {
		components: {
			pageHeader
		},
	}
</script>

三、uni.request发起请求

uni.request({
    url: interfaces.getMallData, //仅为示例，并非真实接口地址。
    success: (res) => {
        console.log(res.data);
        this.swiperList = res.data.swiperList;
        this.categoryList = res.data.categoryList;
        this.promotion = res.data.promotion;
    }
});

四、请求接口封装

1.interfaces.js 封装api

// 主路径
const domain = "https://uniapp-interface.herokuapp.com/";
const interfaces = {
	// 首页数据
	getMallData: domain + "api/profiles/mall_list"
}
module.exports = interfaces;

2.https.js 封装request请求

module.exports = (param) => {
	var url = param.url;
	var method = param.method;
	var header = param.header;
	var data = param.data || {};

	// 请求方式 get post
	if (method) {
		method = method.toUpperCase(); //小写转大写
		if (method == "POST") {
			header = {
				"content-type": "application/x-www-form-urlencoded" // 这个跟后端对上
			}
		}
	}
	// 发起请求 加载动画
	if (!param.hideLoading) {
		uni.showLoading({
			title: "加载中..."
		})
	}
	// 发起网络请求
	uni.request({
		url: url,
		method: method || "GET",
		header: header,
		data: data,
		success: res => {
			if (res.statusCode && res.statusCode != 200) { // api错误	
				uni.showModal({
					content: res.msg
				})
				return;
			}

			typeof param.success == "function" && param.success(res.data);
		},
		fail: (e) => {
			uni.showModal({
				content: e.meg
			})
			typeof param.fail == "function" && param.fail(e.data);
		},
		complete: () => {
			// console.log("网络请求complete");
			uni.hideLoading();
			typeof param.complete == "function" && param.complete(e.data);
			return;
		}
	})
}

3.main.js 里面引入文件，全局引用

import http from 'utils/https.js'
Vue.prototype.request = http

4.home.vue 里调用全局方法this.request

initData() {
    //uni.request({
        //url: interfaces.getMallData, //仅为示例，并非真实接口地址。
        //success: (res) => {
            //console.log(res.data);
            //this.swiperList = res.data.swiperList;
            //this.categoryList = res.data.categoryList;
            //this.promotion = res.data.promotion;
        //}
    // });
    this.request({
        url: interfaces.getMallData, //仅为示例，并非真实接口地址。
            success:(res) => {
            console.log(res,'是什么');
            this.swiperList = res.data.swiperList;
            this.categoryList = res.data.categoryList;
            this.promotion = res.data.promotion;
        }
    })
}