UniApp踩坑记录2

回到主页

经过对uniapp三天的研究，大概了解了它的一些套路，解决了开发时比较重要的一些问题，在这篇文章里特别记录一下。
为什么标题有个2？因为第一篇是付佬前几天写的，那一篇文章里的内容本篇不会再提及。如果有人对如何创建ts项目之类的有疑问，可以先去付佬的文章看看。
本篇文章的主要内容是介绍如何用vscode流畅地开发uniapp，以及如何在uniapp中使用css库bulma、字体和符号库font awesome、Microsoft的实时通信库signal R、http请求库axios。

目录

如何使用vscode开发uniapp

vscode和HbuilderX对比

uniapp官方推荐的ide是HbuilderX，笔者以前是vsc的忠实用户，这次也去体验了一下HbuilderX。总的来言HbuilderX是一款不错的IDE，尽管插件生态还远远不如vsc。它的功能集成方面做的很出色，尤其是原生安卓应用的调试方面（虽然热更新有些小问题）。
然而笔者已经习惯了vsc的开发体验，而且是个重度tab癌患者（HbuilderX的tab作用和vsc不一样，不能用tab来快速代码补全，而且好像还改不了），所以我在刚接触uniapp的时候就尝试了用vsc进行开发，结果意外的好用。除了原生安卓应用调试，其它的开发体验可以做到和HbuilderX别无二致。
因此，我建议：如果你之前比较熟悉vsc，又不需要开发原生安卓应用，那么大可不必下载HbuilderX，您可以按照我下方给出的步骤，在vsc上直接进行uniapp的开发。

vscode环境配置

环境配置只有三步：

vscode调试

h5有手就行，直接npm run serve，这里就不多说了不会有人连这都不会吧？不会吧不会吧？💔
重点说一下小程序，这里以微信小程序为例，分四步：

  • 打开terminal
  • 输入npm run dev:mp-weixin，运行，记住输出的文件路径
  • 打开微信开发者工具，设置路径为上一步里的输出路径
  • 进行开发，每次保存文件后更改会被热更新到微信开发者工具的预览窗口中

uniapp ❤️ bulma

bulma是最近很火的一款纯css框架，但是它在uniapp中不能直接使用。因为其中的特别样式在微信小程序和原生应用中识别不出来。这些样式会直接导致编译错误。
经过我的研究，发现识别不出的样式主要是icon方面的样式（has-icon-left一类的），因此我人工去除了这些样式，在这之后uniapp里就可以正常使用bulma了。
修改后的bulma.css源文件下载链接。

uniapp ❤️ font-awesome

font-awesome这个比较麻烦，因为uniapp不认相对路径，只认绝对路径。而本地的字库文件编译时会自动转base64，而大于40kb的文件就无法自动转换。悲剧的是font-awesome所有源文件都大于40kb，所以为了解决这个问题，我们要对里边的链接进行更改，把font-awesome.css里的链接全部改为cdn上的链接。
修改后的font-awesome.css源文件下载链接。

uniapp ❤️ signalR

signalR不能直接用的原因存粹是微信提供的web调用api和浏览器不一样。因此把浏览器请求部分的代码替换掉就可以了。这件事已经有人帮我们做了，直接安装signalr-for-wx包即可

uniapp ❤️ axios

axios不能用的原因和signalR类似，也有人帮我们做过了，网上有对应的包。
当然，原版axios也可以通过很简单的修改让其可用。在main.ts中加入下方代码即可：

import axios, { AxiosRequestConfig } from 'axios';
axios.defaults.adapter = function(config) {
    config.baseURL = 'http://localhost:8010'
    return new Promise((resolve, reject) => {
        console.log(config)
        var settle = require('axios/lib/core/settle');
        var buildURL = require('axios/lib/helpers/buildURL');
        (uni as any).request({
            method: ((config as AxiosRequestConfig).method as any).toUpperCase(),
            url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
            header: config.headers,
            data: config.data,
            dataType: (config as any).dataType,
            responseType: config.responseType,
            sslVerify: ((config as any).sslVerify as any),
            complete: function complete(response:any) {
                response = {
                    data: response.data,
                    status: (response as any).statusCode,
                    errMsg: response.errMsg,
                    header: (response as any).header,
                    config: config
                };

                settle(resolve, reject, response);
            }
        })
    })
}

本文章使用limfx的vsocde插件快速发布