后盾人

# 编辑器

向军大叔每晚八点在 抖音 (opens new window) 和 bilibli (opens new window) 直播

xj-small

下面对编辑器的使用做些说明，配置好武器上战场才更有信心。

# Hbuilder

微信小程序设置

image-20210814144852785

# VSCODE

使用 vscode 开发 uniapp 程序，相比官方的 HBuilder 来讲功能稍弱些。不过有些同学朋友喜欢使用 Vscode。

安装插件 uni-app-snippets (opens new window)

# 小程序

使用 uniapp 默认模板创建项目

image-20210813170048136

接着设置微信小程序 AppID

image-20210813170216335

# 刷新失败

如果修改后小程序模拟器不刷新，可以执行清除缓存

image-20210813235324491

也可以点击销毁小程序

image-20210813235910321

# App

mac 用户需要执行以下命令才可以调用 ios 模拟器

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/

# 阿里云

使用阿里云 OSS 静态资源时，可能会出现在 APP 或微信小程序等应用中不能访问静态资源，需要进行以下设置。

  • 手机 App 需要设置 HTTP Referer 为空
  • 微信小程序需要设置 Referer 为https://servicewechat.com/

image-20210814151245516

# 字体

下面对项目开发使用字体的方式进行介绍

# 淘宝字体

iconfont (opens new window) 提供了丰富的图标库，也允许个人上传分享图标，非常复合中文视觉体验。后盾人文档库 (opens new window) 已经介绍了详细使用方式。

下面我们介绍在 uniapp 中的使用方法

  1. 创建 css/iconfont.css 文件

  2. 按住 ctrl 键占击下面链接，将打开窗口的内容复制到 css/iconfont.css 文件中

    image-20210815193056012

  3. 在App.vue 中引入 css 文件

    <style lang="scss">
	/*每个页面公共css */
	@import "css/iconfont.css";
	...
</style>

  4. 下面就可以在页面中使用了

    <i class="iconfont icon-iconfontweixin"></i>

# fontawesome

  1. 首先下载文件 font-awesome.css (opens new window) 并保存为 css/font-awesome.css

  2. 批量搜索 url(' 替换为 url('https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/

  3. 在微信小程序中将 https://cdn.bootcdn.net 添加到 request合法域名

    image-20210815183801478

  4. 在 App.vue 中引入

    <style lang="scss">
	/*每个页面公共css */
	@import "css/font-awesome.css";
	...
</style>

用户登录 →