写项目过程中遇到的问题

App 开发

1、拖动标签，保存位置

• 开发框架（库）以及IDE：
  IDE：HBuilder X （3.1.13.20210514 版本）
  框架：uniapp、uView （1.8.4 版本）、ColorUi（2.1.6 版本）

• 问题：
  uniapp 的 movable-view 可拖动视图容器 的 change 事件在拖动过程中是一直触发的（即使使用了防抖），如果在 change 事件中对位置进行存储，位置的 top 值会一直在递增（原因不明），导致即使停止了标签的拖动，标签依旧会竖直往下移动。
  

• 解决：
  只在 change 事件中只对位置信息进行记忆，通过另外的（点击/滑动）事件来对位置信息进行存储。

2、瀑布流数据注入展示（动态更新）【存在Bug！见 4】

• 开发框架（库）以及IDE：
  IDE：HBuilder X （3.1.13.20210514 版本）
  框架：uniapp、uView （1.8.4 版本）、ColorUi（2.1.6 版本）
• 问题：
  uView 的 Waterfall 瀑布流 模块，在使用过程中，无法很好地动态响应数据的变化来更新视图。
• 详细描述:
  需求：调取后端接口渲染页面后 → 点击爱心 →（调取后端接口） → （根据后端接口返回渲染页面）→ 爱心状态改变 && 爱心数变化
  
  难点：已经调取接口获取到了后端数据并替换了 data 中的字段，但页面始终无法及时对后端返回的数据来更新视图。
  解决：因为需求不是很复杂，就是 状态的改变 和 数字的 +1 和 -1，所以我们可以选择用 “假数据” 来 “欺骗用户”。uView 的 Waterfall 瀑布流 模块内部分了 leftList 和 rightList 两个模块，我们也要分 左侧和右侧 来迎合 uView。
  以左侧为例，右侧雷同：

1. 声明 leftIndex = [] 用来存储瀑布流左侧的各个爱心状态；
2. 声明 leftIndexNum: [] 用来存储瀑布流左侧的各个爱心数；
3. 页面展示时根据后端接口数据初始化 leftIndex 和 leftIndexNum
4. 根据 leftIndex 和 leftIndexNum 来渲染页面
5. 点击爱心 →（调取后端接口）
6. 使用 this.$set 方法来改变 leftIndex 和 leftIndexNum ，即可动态更新视图

参考代码：

 			// 更改收藏状态
            this.$set(that.leftIndex, index, !that.leftIndex[index]);
            // 更改收藏数量
            if (that.leftIndex[index] === true) {
              this.$set(that.leftIndexNum, index, that.leftIndexNum[index] + 1);
            } else {
              this.$set(that.leftIndexNum, index, that.leftIndexNum[index] - 1);
            }

3、瀑布流中点赞出错【存在Bug！见 4】

• 开发框架（库）以及IDE：
  IDE：HBuilder X （3.3.11.20220209 版本）
  框架：uniapp、uView （1.8.4 版本）、ColorUi（2.1.6 版本）

• 问题：
  uView 的 waterfall 瀑布流 在数据非常少的情况下，H5 点赞数量会出错。
  

• 原因：
  瀑布流的排序 一般情况下是 从上往下、从左往右。但是 uView 中如果左边封面图片很大，后两条数据的封面图片很小，那么瀑布流的排序就会出现 异常情况，如：
  这样的话，就会出现问题：后端返回的数据是 “一般情况” 的（左边 2 条，右边 1 条数据）；但是我本地的瀑布流数据是 “异常情况” 下的（左边 1 条数据，右边 2 条数据），初始化的时候点赞数没有被赋值到，渲染的时候就成了 NaN。

• 解决：
  前端获取完后端数据，初始化的时候，让点赞状态和点赞数的最大值+2，这样无论瀑布流的数据是从左往右还是从右往左，都会被赋值到，这样改变状态的时候就不会出现 NaN 了。
  

4、瀑布流数据动态注入展示

• 开发框架（库）以及IDE：
  IDE：HBuilder X （3.3.11.20220209 版本）
  框架：uniapp、uView （1.8.4 版本）、ColorUi（2.1.6 版本）
• 问题：
  uView 的 waterfall 瀑布流 正常情况下只展示数据，没有点赞、收藏等操作功能（如：图1），但是我的需求是在瀑布流中要可以点赞、收藏（如：图2）。但是调用 点赞、收藏 + 页面接口 来重新渲染页面，接口数据已经更新了，页面视图却不更新（点赞、收藏依旧是原来的状态）。
  以上很啰嗦，简而言之就是：瀑布流数据注入展示 出了问题。
  
• 分析：
  查看 u-waterfall 的源码可知，它的底层是把数据分成了两个队列，且会根据页面元素的高度来让元素均匀插入到两个队列中。如图：
  
  由此推断我的问题（瀑布流数据注入后页面不更新）可能是使用插槽这个环节出了问题…
  仔细阅读源码后发现了一个 API 文档上没有提及的 modify() 方法，这个方法可以 修改瀑布流中某条数据的某个属性，如图：
  
  一试，发现此方法正好能解决我的问题，使用代码如下：
  

5、tabsSwiper 全屏选项卡 无法下拉刷新

• 开发框架（库）以及IDE：
  IDE：HBuilder X （3.1.13.20210514 版本）
  框架：uniapp、uView （1.8.4 版本）、ColorUi（2.1.6 版本）
• 问题：
  uView 的 tabsSwiper 全屏选项卡 在 App 无法下拉刷新。
• 原因：
  uView 的 tabsSwiper 全屏选项卡 的底层是 uniapp 的 scroll-view，人家明确说了不支持下拉刷新：
  
• 解决：
  放弃 uView 的 tabsSwiper 全屏选项卡 吧，自己写一个 tabs，问题会迎刃而解，想怎么下拉刷新就怎么下拉刷新。

6、click 事件穿透和 500ms 延迟

bug：click 事件会在移动端有 300ms 的延迟和事件穿透问题。
click 延迟的原因：触控事件的顺序是 touchstart --> touchend --> click(延迟300ms)
解决方法：全局只使用 touch 事件。

H5 兼容 微信小程序 开发

1、uni.request 发请求时，Request Headers 中没有 Cookie，且每个请求的 Request Headers 中 Set-Cookie 的 SESSION 都不一致

• 开发框架（库）以及IDE：
  IDE：HBuilder X （3.2.9.20210927 版本）
  框架：uniapp、uView （1.8.4 版本）、ColorUi（2.1.6 版本）
• 问题：
  使用 uni.request 发请求时，每个请求的 Request Headers 中都没有 Cookie，且每个请求的 Request Headers 中 Set-Cookie 的 SESSION 都不一致。
  难点：以为需要后端配置 Access-Control-Allow-Headers: cookie 和 Access-Control-Allow-Credentials: true 来解决，却忽略了此问题出现的同时，H5 的跨域问题也没有解决，我当时使用 跨域谷歌 应付一下的，没有彻底解决跨域问题，其实问题的根本就是跨域。而我却想着怎么获取 cookie 存储携带到每个请求中。
  解决：前端跨域代理即可。关键代码如下：

没做代理前：

request.js 文件：

const BASE_URL = 'https://api.mygoes.com'

manifest.json 文件：

"h5": {
        "devServer": {
            "disableHostCheck" : true,
            "proxy": {
                "/api": {
                    "target": "https://api.mygoes.com",
                    "changeOrigin" : true,
                    "secure" : false,
                    "pathRewrite": {
                    	"^/api": ""
                    }	
                }
            }
        }
    }

做了代理后：

request.js 文件：

const BASE_URL = ''

manifest.json 文件：

"h5": {
        "devServer": {
            "disableHostCheck" : true,
            "proxy": {
                "/api": {
                    "target": "https://api.mygoes.com",
                    "changeOrigin" : true,
                    "secure" : false,
                }
            }
        }
    }

感谢 leader 的关怀，加油！

综合

1、vuex 动态渲染失效

期望：在父页面 A 中获取到数据存储到 vuex 后，在子页面 B 的 created 生命周期中获取 vuex 数据，渲染页面。
实际：B 中不会实时动态渲染数据。
解决：在父页面 A 中获取到数据，用 父传子 来传数据到子页面 B，在 B 中用 watch 侦听器 监听传过来的数据，渲染页面即可。