uniapp 作为目前我前端的主要技术栈之一，也用了挺长时间的了，一直想着随手记录一些开发中常见的问题及其相关解决方案，但一直没有着手，后续会不断的往这篇文章中更新新的内容。

ps：写这个也不是说真的是为了给谁看，当教程什么的，主要是记录一下，方便以后开发过程中自己忘了的时候自己 copy，所以整篇文章内容会很杂，包括各方面的内容，主要是我懒得分成一篇一篇的发。

参考文档：

vue.js 2.x 文档

微信开发文档

>>> 基础

uniapp 项目创建，编译发行

官方参考文档

1、通过官方编辑器 HbuilderX 创建

这个没啥好说的，下载官方编辑器，直接新建项目，选择创建基础项目即可。

HbuilderX 官网

2、通过 vue-cli 方式创建

// 正式版
vue create -p dcloudio/uni-preset-vue 项目名

// vue3+view+js
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

//vue3+vite+ts
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

3、编译发行

略，内容太多，参考官网文档即可

>>> 常用的组件/组件库

组件库：

1、uni-ui（官方UI组件库），官方文档

2、uview-ui（目前我在 uniapp 中常用的 UI 组件库），uview-ui 1.x 文档

组件：

>>> 常见问题及解决办法

针对跨平台全端开发，不同平台差异性的解决方案

官方提供了一个叫条件编译的注释标记，可以区分不同客户端，从而实现对不同客户端的差异性处理

条件编译-官方文档

H5

配置路径别名

uniapp 是基于 vue 开发的二开框架，继承了 vue 的绝大部分特性，关于路径别名部分的设置同样是在 vue.config.js 下配置

ps：如果项目根目录下没有 vue.config.js，手动创建一个即可

pps：微信小程序不支持路径别名的方式访问文件

const path = require('path');
const resolve = (dir) => path.join(__dirname, dir);

module.exports = {
  filenameHashing: false, // 文件名是否加上 hash 值
  configureWebpack: {
    resolve: {
      // 配置路径别名，路径别名只可在 H5 中使用
      alias: {
        '~components': resolve('components'),
        '~js': resolve('js'),
        '~pages': resolve('pages'),
        '~sdk': resolve('sdk'),
        '~static': resolve('static'),
        '~service': resolve('service'),
      }
    },
  }
}

本地调试跨域问题的解决方式

很多时候都需要在本地调试云端接口，但是会报跨域问题，此时可通过配置 vue.config.js，设置本地代理访问的方式解决跨域的问题

module.exports = {
  devServer: {
    proxy: {
      '/proxyApi': {
        target: '', // 后台业务api
        ws: true, // network 传输协议
        changOrigin: true, // 是否允许跨域
        pathRewrite: {
          '^/proxyApi': '' // 请求的时候使用这个 api 就可以
        }
      }
    }
  }
}

微信内置浏览器缓存严重问题的解决方案

开发微信h5网页的时候，最让人烦躁的便是微信自带浏览器的严重缓存，有时候手动刷新好几次都没办法拉取到最新的数据。可通过配置 vue.config.js 编译方式，勉强解决一下这个问题，但有时候还是需要手动刷新，但基本上不会出现刷新好几次内容还是不变的情况

ps：只能变相的简单解决此问题，真的要解决此问题还是需要后端，运维配合，合理设置服务器资源的过期时间

/*
配置 h5 的 js 以时间戳作为版本号，以求解决 h5 的缓存问题
由于这种方式的打包，会导致编译生成微信小程序（只验证了微信小程序）无法正常使用，所以这里采取了 uniapp 提供的条件编译，有关条件编译的知识可查看官方文档
*/

// #ifdef H5
let filePath = 'static/js/';
let timeStamp = new Date().getTime();
module.exports = {
  // ... webpack 相关配置
  filenameHashing: false, // 文件名是否加上 hash 值
  configureWebpack: {
    resolve: {
      // 配置路径别名，路径别名只可在 H5 中使用
      alias: {
        '~components': resolve('components'),
        '~js': resolve('js'),
        '~pages': resolve('pages'),
        '~sdk': resolve('sdk'),
        '~static': resolve('static'),
        '~service': resolve('service'),
      }
    },
    output: {
      // 输出重构  打包编译后的"文件目录/文件名称" 【模块名称.时间戳】
      filename: `${filePath}[name].${timeStamp}.js`,
      chunkFilename: `${filePath}[name].${timeStamp}.js`
    },
  }
}
// #endif

小程序

ps：如不特殊说明，下文中的小程序统一指代微信小程序

request 不支持自动保持 cookie 的解决办法

小程序原生的 request 网络请求接口并不支持传统的 cookie，但有时候我们现有的后端接口确于依赖 cookie （比如服务器用户登录态）（小程序请求，后端无法读取 session 也是因为这个原因，session 是依赖于 cookie 而存储的）

1、发起一次默认请求，将服务器端返回的 cookie 标识保存到本地，每次发起请求都在 header 里带上该标识

2、weapp-cookie 开源解决方案，GitHub开源地址。

// 安装
npm install weapp-cookie --save

// main.js 中引入
import 'weapp-cookie'

// 更多方法参考 GitHub 文档

>>> 一些小技巧

组件的 easycom 引入

uniapp 如果是通过 HbuilderX 创建项目，官方提供了一个叫 eacycom 的组件引入方式，与传统 vue 组件引入不同的地方在于，统一以组件名/组件名.vue放在components目录下的组件，页面中使用时不需要再手动引入，可直接使用，并且在 HbuilderX 中还会有代码提示。如果是三方插件库，也可以通过配置page.json中的 eacycom 属性，实现组件的自动引入与代码提示。

// 自动 easycom，components 目录结构
components
  /test
    test.vue
    
// 其他文件夹配置 eacycom
// 以配置 uview-ui 为例，uview-ui 为相对于项目根目录的组件库文件夹，此时需在 page.json 中配置如下信息
"easycom": {
  /* 以 easycom 模式引入u view-ui */
  "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},

uniapp 开发记录