大前端 - 前端高级进阶

# 首页模块

# 首页tabBar

# 代码依赖分析

可以在基本信息中选择代码依赖分析

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

# 导入静态资源

  • 删除原static目录中的文件；
  • 下载课程的静态资源文件夹，并放置于static的images目录中。

# 布局与样式

完成效果：

创建tabBar的步骤：

  • 创建tabBar对应的页面；
  • 修改pages.json中的配置项：pages和tabBar

创建页面HBuilderx方式：

创建页面的VSCode插件方式：

image-20210428194346415

快速创建4个页面

image-20210428194614781

并调整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>

完成效果

image-20210526225831609

# 添加事件

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

image-20210714162901877

需求：我们前端里面写网络请求，习惯了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，目录位置与辅助函数一致

image-20210714164109331

平时开发的时候，一定要注意该选项有没有打开哦！！

# uniapp小程序请求封装

接口请求封装

  • 拦截器
  • 统一错误处理
  • 取消重复请求

TIP

uniapp中已经支持Promise + async/await，但是，对于request请求的错误的处理需要自己来处理。

← 小程序鉴权登录 →