黑马优购学习笔记

1. uni-app 简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、 H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

详细的 uni-app 官方文档，请翻阅 https://uniapp.dcloud.net.cn/

 2. 目录结构

3. 配置网络请求：

由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。

官方文档：https://www.npmjs.com/package/@escook/request-miniprogram

最终，在项目的 main.js 入口文件中，通过如下的方式进行配置：

import { $http } from '@escook/request-miniprogram'
uni.$http = $http
$http.baseUrl = 'https://api-hmugo-web.itheima.net'   配置请求根路径
$http.beforeRequest = function (options) {
uni.showLoading({
title: '数据加载中...',          请求开始之前做一些事情
})
}
$http.afterRequest = function () {
uni.hideLoading()           请求完成之后做一些事情
}

4. 优化分类页面

(1) 左右导航栏一个滚动条问题解决

例如：
<view class="big">
	<scroll-view scroll-y="true" class="left">
	</scroll-view>
	<scroll-view scroll-y="true" class="right">
	</scroll-view>
</view>

page {
    // 设置page的高为100%,也就是窗口能看到的高度
    height: 100%;
}
.big {
    // scroll-view使用最重要的就是要给父容器设置高度
    // 如果不设置高度，就会出现两屏一起滚动，
    // 他们其实是使用了屏幕视图的滚动条了，而不是我们定义的scroll-view组件的滚动条
    height: 100%;
    display: flex;
    .left {...}
    .right {...}
}

(2)切换一级分类后重置滚动条的位置

1. 在 data 中定义 滚动条距离顶部的距离 ：
data() {
return {
scrollTop: 0  // 滚动条距离顶部的距离
}
}

2. 动态为右侧的 <scroll-view> 组件绑定 scroll-top 属性的值：
<!-- 右侧的滚动视图区域 -->
<scroll-view :scroll-top="scrollTop"></scroll-view>

3. 切换一级分类时，动态设置 scrollTop 的值：
activeChanged(i) {  // 选中项改变的事件处理函数
this.scrollTop = this.scrollTop === 0 ? 1 : 0
// 让 scrollTop 的值在 0 与 1 之间切换,因为如果直接赋值为0,他的值没有变就不会改变滚动条距离
}

5.  将搜索历史记录持久化存储到本地

  uni.setStorageSync('kw', JSON.stringify(this.historyList))
  调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地
  historyList:JSON.parse(uni.getStorageSync("kw"))||[]
  调用uni.getStorageSync("kw")获取本地存储数据

6. 渲染详情页面html标签结构

在页面结构中，使用 rich-text 组件，将带有 HTML 标签的内容，渲染为小程序的页面结构：

<rich-text :nodes="xxx.xxx"></rich-text>

7. 解决详情页面html标签结构渲染的图片底部空白间隙的问题： 

res.message.goods_introduce = res.message.goods_introduce.replace(/<img
/g, '<img style="display:block;" ')
使用字符串的 replace() 方法，为 img 标签添加行内的 style 样式，从而解决图片底部
空白间隙的问题
或replaceAll()方法
res.message.goods_introduce = res.message.goods_introduce.replaceAll("<img",
'<img style="display:block;" ')

8. 解决 .webp 格式图片在 ios 设备上无法正常显示的问题：

使用字符串的 replace() 方法，将 webp 的后缀名替换为 jpg 的后缀名
res.message.goods_introduce = res.message.goods_introduce.replace(/<img
/g, '<img style="display:block;" ').replace(/webp/g, 'jpg')

9. 解决商品价格闪烁的问题

1. 导致问题的原因：在商品详情数据请求回来之前，data 中 goods_info 的值为 {} ，因此初次渲染页面时，会导致商品价格、商品名称等闪烁的问题。

2. 解决方案：判断 goods_info.goods_name 属性的值是否存在，从而使用 v-if 指令控制页面 的显示与隐藏：

<template>
<view v-if="goods_info.goods_name">
<!-- 省略其它代码 -->
</view>
</template>

10. 渲染商品详情页面导航区域的 UI 结构

基于 uni-ui 提供的 GoodsNav 组件来实现商品导航区域的效果

11. 动态为 tabBar 页面设置数字徽标

需求描述：从商品详情页面导航到购物车页面之后，需要为tabBar中的购物车动态设置数字徽 标。

注意：除了要在 cart.vue 页面中设置购物车的数字徽标，还需要在其它 3 个 tabBar 页面中，为购 物车设置数字徽标。

此时可以使用 Vue 提供的 mixins 特性，提高代码的可维护性。

1. 在项目根目录中新建 mixins 文件夹，并在 mixins 文件夹之下新建 tabbar-badge.js 文
件，用来把设置 tabBar 徽标的代码封装为一个 mixin 文件：
import { mapGetters } from 'vuex'
export default {   //导出一个 mixin 对象
computed: {
   ...mapGetters('cart', ['total']),
},
onShow() {      //在页面刚展示的时候，设置数字徽标
  uni.setTabBarBadge({  //调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
     index: 2,
     text: this.total + '',  //注意：text 的值必须是字符串，不能是数字
  })        
},
}

2. 修改 home.vue,cate.vue,cart.vue,my.vue //这4个tabBar页面的源代码，分别导
入 @/mixins/tabbar-badge.js 模块并进行使用：
import badgeMix from '@/mixins/tabbar-badge.js'   //导入自己封装的 mixin 模块
export default {   //将badgeMix混入到当前的页面中进行使用
mixins: [badgeMix],
}
注意:这四个页面都要引入，不然vuex中数据更新后退回没有引入的页面tarbar数据不会更新

注意：这里不能用全局混入，因为进入没有tabBar的页面会报错

uni-number-box

带加减按钮的数字输入框。 

滑动删除的 UI 效果

组件名：uni-swipe-action

12.  实现选择收货地址的功能

调用小程序提供的uni.chooseAddress()  实现选择收货地址的功能：

返回一个promise，利用async await返回一个对象，这个对象就是收货地址的信息

注意:1. 需要先开通相关的接口权限

        2. 并在app.json中配置"requiredPrivateInfos": [ "chooseAddress"]才能使用

 官方：全局配置 | 微信开放文档

如果是在uniapp写的，拿打开 manifest.json 文件

在mp-weixin里添加

13. 点击登录按钮获取微信用户的基本信息

uni.getUserProfile({
           desc: "获取信息"       使用此方法可返回用户信息(例如头像，姓名等)
})

uni.login()    使用此方法可返回一个code

利用这两个方法返回的结果调用获取token的接口
注意：获取token的接口坏了，这里要自己写死一个token

14. 登陆成功后跳转到登陆之前的页面

在点击结算时或者其他需要先登录才能使用的功能时，如果当时未登录那就跳转到登陆页面，跳转时把跳转的方式和当前跳转前的页面路径保存到vuex或者内存中，在点击登陆后先判断有没有存的值，如果有就跳转到存到vuex或内存中的路径没有就不跳转

 15. 微信支付的流程

1. 创建订单

请求创建订单的 API 接口：把(订单金额、收货地址、订单中包含的商品信息)发送到服务器

服务器响应的结果：订单编号

2. 订单预支付

请求订单预支付的 API 接口：把（订单编号）发送到服务器

服务器响应的结果：订单预支付的参数对象 ，里面包含了订单支付相关的必要参数

3. 发起微信支付

调用 uni.requestPayment() 这个 API，发起微信支付；把步骤 2 得到的 “订单预支付对 象” 作为参数传递给 uni.requestPayment() 方法

监听 uni.requestPayment() 这个 API 的 success ， fail ， complete 回调函数

注意：个人无法实现微信支付功能