# 首页模块
# 首页tabBar
# 代码依赖分析
可以在基本信息中选择代码依赖分析

查看本地代码与分包大小:

# 导入静态资源
- 删除原
static
目录中的文件; - 下载课程的静态资源文件夹,并放置于
static
的images
目录中。
# 布局与样式
完成效果:

创建tabBar的步骤:
- 创建tabBar对应的页面;
- 修改pages.json中的配置项:
pages
和tabBar
创建页面HBuilderx方式:

创建页面的VSCode插件方式:
快速创建4个页面
并调整pages.json
:
{
"pages": [
{
"path": "pages/home/home"
},
{
"path": "pages/msg/msg"
},
{
"path": "pages/hot/hot"
},
{
"path": "pages/center/center"
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"app-plus": {
"background": "#efeff4"
}
}
}
新建tabBar属性:
"tabBar": {
"color": "#999",
"backgroundColor": "#fafafa",
"selectedColor": "#02D199",
"borderStyle": "white",
"list": [
{
"text": "首页",
"pagePath": "pages/home/home",
"iconPath": "static/images/tab_home_no.png",
"selectedIconPath": "static/images/tab_home_yes.png"
},
{
"text": "消息",
"pagePath": "pages/msg/msg",
"iconPath": "static/images/tab_news_no.png",
"selectedIconPath": "static/images/tab_news_yes.png"
},
{
"text": "热门",
"pagePath": "pages/hot/hot",
"iconPath": "static/images/tab_popular_no.png",
"selectedIconPath": "static/images/tab_popular_yes.png"
},
{
"text": "我的",
"pagePath": "pages/center/center",
"iconPath": "static/images/tab_my_no.png",
"selectedIconPath": "static/images/tab_my_yes.png"
}
],
"position": "bottom"
}
配置package.json中的eslint修复命令:
"lint": "eslint --ext vue --ext js pages --fix"
底部的阴影:
<view class="bottom-line"></view>
<style lang="scss">
.bottom-line {
position: fixed;
bottom: -5px;
left: 0;
width: 100vw;
height: 5px;
background: transparent;
box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.05);
}
</style>
# 导入uView UI
准备工作
// 安装sass依赖
npm i node-sass sass-loader@10 -D
// 安装uView
npm install uview-ui
在main.js
中引入:
import uView from 'uview-ui'
Vue.use(uView)
在项目根目录的uni.scss
中引入样式文件:
/* uni.scss */
@import 'uview-ui/theme.scss';
调整App.vue
的样式
<style lang="scss">
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
配置pages.json
:
// ....
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}
# 首页Tabs
# 布局与样式
home.vue
添加tabs
<u-tabs ref="uTabs" :is-scroll="true" active-color="#02D199" height="88" gutter="50"></u-tabs>
添加tabs数据
<u-tabs ref="uTabs" :list="tabs" :name="'value'" :current="current" :is-scroll="true" active-color="#02D199" height="88" gutter="50"></u-tabs>
<script>
export default {
data: () => ({
tabs: [
{
key: '',
value: '首页'
},
{
key: 'ask',
value: '提问'
},
{
key: 'share',
value: '分享'
},
{
key: 'discuss',
value: '讨论'
},
{
key: 'advise',
value: '建议'
},
{
key: 'advise',
value: '公告'
},
{
key: 'advise',
value: '动态'
}
],
// 因为内部的滑动机制限制,请将tabs组件和swiper组件的current用不同变量赋值
current: 0, // tabs组件的current值,表示当前活动的tab选项
swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的
})
}
</script>
完成效果
# 添加事件
tabs添加切换事件tabsChange
<u-tabs ref="uTabs" :list="tabs" :name="'value'" :current="current" @change="tabsChange" :is-scroll="true" active-color="#02D199" height="88" gutter="50"></u-tabs>
<script>
export default {
...
methods: {
// tabs通知swiper切换
tabsChange (index) {
this.current = index
}
}
}
</script>
# 接口封装
问题:小程序原生提供了request请求,但是是callback的使用方式,并不支持Promise,见链接 (opens new window)。
需求:我们前端里面写网络请求,习惯了Axios + async/await的书写风格,那在小程序中怎么去实现接口请求的封装呢?
拆分需求:
- Promise化 -> async/await支持
- 接口请求封装
- 拦截器
- 统一错误处理
- 取消重复请求
- ..
# 小程序API Promise化
扩展微信小程序api支持promise
首先,本地小程序npm初始化
npm init -y
// 安装依赖包
npm install --save miniprogram-api-promise
在小程序入口(app.js)调用一次promisifyAll,只需要调用一次。
import { promisifyAll, promisify } from 'miniprogram-api-promise';
const wxp = {}
// promisify all wx's api
promisifyAll(wx, wxp)
console.log(wxp.getSystemInfoSync())
wxp.getSystemInfo().then(console.log)
wxp.showModal().then(wxp.openSetting())
// compatible usage
wxp.getSystemInfo({success(res) {console.log(res)}})
// promisify single api
promisify(wx.getSystemInfo)().then(console.log)
建议的写法:
import { promisifyAll, promisify } from 'miniprogram-api-promise';
const wx.p = {}
promisifyAll(wx, wx.p)
// 全局使用wx.p
wx.p.getSystemInfo().then(console.log)
async/await支持的方法比较简单:开户将 JS 代码编译成 ES5
即可:链接 (opens new window)
在工具 1.05.2106091 版本之后,原有的
ES6 转 ES5
和增强编译
选项统一合并为将 JS 代码编译成 ES5
,此功能和原有的增强编译
逻辑一致。如需了解旧版本的文档,请点此查看 (opens new window)。
支持async/await语法,按需注入regeneratorRuntime
,目录位置与辅助函数一致
平时开发的时候,一定要注意该选项有没有打开哦!!
# uniapp小程序请求封装
接口请求封装
- 拦截器
- 统一错误处理
- 取消重复请求
TIP
uniapp中已经支持Promise + async/await,但是,对于request请求的错误的处理需要自己来处理。