uni-app实战之路-准备开始

文章目录

• 写在前面
• 什么是uni-app
• 下载hx
• 下载微信开发工具
• 申请小程序
• 记住appid
• 配置appid
• 运行
• 基本操作
• 配置tabBar
• 引用阿里图标
• 做一个简单的效果出来
• appid的作用
• 配置服务器域名

写在前面

之前关于vue的帖子就先暂时放一放，今天开始我的博客会更新一些关于uniapp的文章，都是一些基本的使用，我也是一边学一边写，为什么写这个呢？现在是一个微时代，现在的百度小程序，支付宝小程序，微信小程序，字节跳动的等等都是一些微应用，这些东西有什么好处呢？首先他避免了大量的我们下载的过程，轻量级，功能不多但是足够，处在这样一个快速发展的时代，谁都希望轻快，方便，那么其实微应用也可以说是一个趋势，但是对于我们开发人员来说的话，是不公平的，因为我们每一个都要学，太麻烦了，所以我们才很有必要学习这个uniapp。

什么是uni-app

是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。说人话就是我们可以写一套代码，跑在不同的端且不会出现兼容的问题

下载hx

hbuildx

下载微信开发工具

微信开发者工具

申请小程序

注册一个小程序

记住appid

• 新建一个uniapp项目

• 打开HX配置微信开发工具的位置

windows下的直接一样的找到对应的exe启动文件就可以了

配置appid

运行

基本操作

配置tabBar

我们打开uniapp官网,点击框架，找到package.json的目录，打开以后找到tabBar，打开以后我们看一下怎么配置的。

我们直接复制进去：

引用阿里图标

有人说了，这个太丑了，我们见过很多的小程序，最下面都是一些图标什么的，很漂亮，这里我们简单的说一下怎么引用，为什么不引用静态的，而是在线的，首先小程序的优势就是小，如果我们引用了大量的静态文件，那么导致的结果就是我们打包结束以后其实是很麻烦的，包文件过大，性能自然的就下来了，所以这里我们一般是直接引用在线的阿里图标 打开阿里图标官网： 搜索到一个我们需要的，添加到项目中：

• 选择一个喜欢的加到项目中

添加到项目

• 下载到本地

• 找到css文件，放到我们的小程序项目中

• 将ttf文件转为base64
• 找到ttf文件

• 进行转换
• 将base64复制到css文件中：

/**base64不可以换行，否则出错**/
@font-face {
  font-family: 'iconfont';  /* project id 745971 */
	src: url(data:font/truetype;charset=utf-8;base64,"转换的结果") format('truetype');
}

• 在app.vue中引入进来：

• 页面中引用：

做一个简单的效果出来

appid的作用

这里有一个很有意思的东西，我们的appid就是识别这个小程序到底是属于哪一个微信的，就是如果我们的appid被人发现了，是不是别人就可以直接该我们的内容或者替换掉我们的小程序， 原本我以为是可以的，直到我又重新试了一个appid：

说明他会校验这个登录的信息，所以我们可以不用担心这个问题。

配置服务器域名

这里可以看到，小程序的基本要求就是所有的请求必须是https的。

写到这基本上可以进行小程序开发了，前期的准备工作做的差不多了，也做了一个简单的例子，后面会更新一些开发中遇到的问题和解决的方案，感兴趣的可以一起交流。