一. 实现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文章来源：https://www.toymoban.com/news/detail-445577.html
这个可以直接调用uni.login({})api文章来源地址https://www.toymoban.com/news/detail-445577.html
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;
}
});
},
});到了这里，关于uniapp开发小程序部分功能实现详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
