uniapp开发小程序部分功能实现详解

一. 实现tabBar效果

1. 创建tabBar页面

        在 pages 下面创建，右键新建页面，这里创建的是 tanBar 对应的几个页面；记住这里要勾选"创建同名目录、在pages.json 中注册"两个选项，默认是选中的；（home、cate、cart、my）

2. 配置tabBar

在pages.json文件中,在pages平级新增tabBar的配置:

"tabBar": {
		"color": "#7A7E83",//字体颜色
		"selectedColor": "#2196F3",//选中时字体颜色
		"backgroundColor": "#F8F8F8",//底部背景颜色
		"fontSize": "12px",//字体大小
		"spacing": "5px",//字体到图标的距离
		"height": "55px",//底部高
		"list": [
			{
				"pagePath": "pages/home/home",
				"text": "首页",
				"iconPath": "static/tabBar/house-1.png",
				"selectedIconPath": "static/tabBar/house-2.png"
			},
			{
				"pagePath": "pages/cate/cate",
				"text": "分类",
				"iconPath": "static/tabBar/demand-1.png",
				"selectedIconPath": "static/tabBar/demand-2.png"
			},
			{
				"pagePath": "pages/cart/cart",
				"text": "购物车",
				"iconPath": "static/tabBar/preordered-1.png",
				"selectedIconPath": "static/tabBar/preordered-2.png"
			},
			{
				"pagePath": "pages/my/my",
				"text": "我的",
				"iconPath": "static/tabBar/mine-1.png",
				"selectedIconPath": "static/tabBar/mine-2.png"
			}
		]
	}

二. 配置网络请求

由于小程序不支持 axios ，并且原生的 wx.request() API 功能比较简单，且不支持拦截器等全局定制的功能；可以在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络请求或者自己封装请求也可以:

详细信息可以查看官网:

官网: https://www.npmjs.com/package/@escook/request-miniprogram

安装: 

npm install @escook/request-miniprogram

导入:

// 按需导入 $http 对象
import { $http } from '@escook/request-miniprogram'

// 将按需导入的 $http 挂载到 wx 顶级对象之上，方便全局调用
wx.$http = $http

// 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用
uni.$http = $http

使用:

支持的请求方法:

// 发起 GET 请求，data 是可选的参数对象
$http.get(url, data?)

// 发起 POST 请求，data 是可选的参数对象
$http.post(url, data?)

// 发起 PUT 请求，data 是可选的参数对象
$http.put(url, data?)

// 发起 DELETE 请求，data 是可选的参数对象
$http.delete(url, data?)

配置请求根路径:

$http.baseUrl = 'https://www.example.com'

请求拦截器:

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  // do somethimg...
}

例1: 展示loading效果(加载)

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  wx.showLoading({
    title: '数据加载中...',
  })
/*
    在uniapp中可以用
    uni.showLoading({
    title: '数据加载中...',
  })
*/
}

例2: 自定义header请求头

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  if (options.url.indexOf('/home/catitems') !== -1) {
    options.header = {
      'X-Test': 'AAA',
    }
  }
}

响应拦截器:

// 请求完成之后做一些事情
$http.afterRequest = function () {
  // do something...
}

例1: 隐藏loading效果

// 请求完成之后做一些事情
$http.afterRequest = function () {
  wx.hideLoading()
// uniapp中可以用uni.hideLoading()
}

实战:

在uniapp中可以使用uni.xxx来调用wx.xxx的api

//home
data() {
	return {
		swiperList:[]
	};
},
onLoad() {
	this.getSwiperList();
},
methods:{
	async getSwiperList(){
		let { data:res } = await uni.$http.get("接口地址")
		if(res.meta.status !== 200){
			return uni.showToast({
				title:"数据请求失败",
				duration:1500,
				icon:"none"
			})
		}
		this.swiperList = res.message;
	}
}

三. uniapp里面小程序分包

1. 创建分包目录

与pages同级创建pagesA目录

 2. 在pages.json文件中配置

在 pages 节点同级，声明 subpackages 节点用来配置分包结构:

 四. 搜索功能

1. 搜索组件

        (1) 自定义搜索组件: src目录下创建components 文件夹,右击选择新建组件;

        (2) 我们可以在父组件绑定一个自定义事件，然后子组件绑定 click 事件，在触发 click 的时候通过 $emit 来触发父组件绑定的自定义事件，这样就可以完成自定义组件的事件传递；

        (3) 吸顶：主要是利用 position:sticky ,把组件定位到页面的顶部

最后使用组件: 直接在页面使用就可以了,组件名就是自定义组件的文件名称

//自定义组件
<template>
	<view class="my-search-container" :style="{"background-color":bgColor}">
		<view class="my-search-box" :style="{"border-radius":radius}">
			<uni-icons type="search" size="18"></uni-icons>
			<text class="placeholder">搜索</text>
		</view>
	</view>
</template>
<script>
	export default {
		name:"my-search",
		props:{
			bgColor:{
				type:String,
				default:"#c00000"
			},
			radius:{
				type:String,
				default:"18px"
			}
		},
		methods:{
			//通过 $emit 来触发父组件上绑定的自定义事件
			searchEvent(){
				this.$emit("myclick")
			}
		}
	}
</script>
<style lang="scss">
.my-search-container{
	height: 50px;
	// background-color: #c00000;
	display:flex;
	align-items: center;
	padding: 0 10px;
	.my-search-box{
		height: 36px;
		background-color: #FFF;
		// border-radius: 18px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.placeholder{
			font-size: 15px;
			margin-left: 5px;
		}
	}
}
</style>

//父组件
<template>
	<view>
		<view class="suckTop">
			<my-search @myclick="goSearch" :radius=""0px"" :bgColor=""pink""></my-search>
		</view>
	</view>
</template>
<script>
	export default {
		methods:{
			goSearch(){
				uni.navigateTo({
					url:"/subpackage/search/search"
				})
			}
		}
	}
</script>
<style lang="scss">
.suckTop{
	position: sticky;
	top: 0;
	z-index: 999;
}
</style>

2. 搜索建议实现

<template>
	<view>
		<view class="suckTop">
			<uni-search-bar @input="input" :radius="18" :focus="true" cancelButton="none"></uni-search-bar>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				timer:null,
				kw:""
			}
		},
		methods: {
			//输入框事件
			input(e){
				clearTimeout(this.timer)
				this.timer = setTimeout(_=>{
					this.kw = e.value;
				},500)
			}，
		}
	}
</script>
<style lang="scss">
.suckTop{
	position: sticky;
	top: 0;
	z-index: 999;
	.uni-searchbar {
		background-color: #c00000
	}
}
</style>

使用 uni-app 提供的组件，添加 focus 让界面自动锁定输入框， input 事件添加节流，然后就可以在节流方法里面调用接口来获取并渲染搜索出来的结果；

3. 本地存储

//存
uni.setStorageSync("kw",JSON.stringify(this.kw));

//onLoad 声明周期中 取
let list = JSON.parse(uni.getStorageSync("kw") || "");

//删除
uni.setStorageSync("kw",[]);

4. 过滤器

跟data平级声明filters

filters:{
	toFixed(num){
		return Number(num).toFixed(2);
	}
}

使用的时候直接在页面上

<view>{{num | toFixed}}</view>

 五. 登录

在调用登录接口之前,我们需要先获取用户的基本信息以及code,作为参数

1. 获取用户基本信息

<button open-type="getUserInfo" @getuserinfo="getInfo">一键登录</button>
methods:{
	//自定义方法
	getInfo(e){
		console.log(e)
	}
}

这里直接使用 button 组件提供的 open-type 等于 getUserInfo ，并配合 @getuserinfo 事件绑定的方法中获取到用户信息；这里是固定写法；

2. 获取用户登录凭证code

这个可以直接调用uni.login({})api

uni.login({
						provider: "weixin", // 使用微信登录
						success: (loginRes) => {
							var wechatInfo = uni.getStorageSync("wechatInfo");
							let data = {
								code: loginRes.code,
								phone: this.tel,
								nickName: wechatInfo.nickName,
								avatarUrl: wechatInfo.avatarUrl,
								gender: wechatInfo.gender
							};
							http.POST("SysUser/Login", data).then((res) => {
								if (res.code == 200) {
									uni.setStorageSync("uinfo", res.userinfo);
									uni.setStorageSync("token", res.token);
									uni.setStorageSync("openid", res.openid);
									uni.switchTab({
										// url: "/pages/home",
									});
								} else {
								 uni.showToast({
										title: "系统繁忙，请联系管理员",
										icon: "none",
										duration: 1000,
									});
									return;
								}
							});
						},
					});