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

文章目录

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

写在前面

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

什么是uni-app

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

下载hx

hbuildx

下载微信开发工具

微信开发者工具

申请小程序

注册一个小程序

记住appid

在这里插入图片描述

• 新建一个uniapp项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hIRlBUKa-1584591716178)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p137)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pgjl4Kb2-1584591716179)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p138)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Z71R0U3-1584591716181)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p139)]

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

配置appid

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kCV63n23-1584591716183)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p140)]

运行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TyKFBCMu-1584591716185)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p141)]

基本操作

配置tabBar

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T56Uycny-1584591716186)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p142)]

我们直接复制进去：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HT6zwtFK-1584591716192)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p143)]

引用阿里图标

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

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

在这里插入图片描述

添加到项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bIQGB1EB-1584591716196)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p146)]

• 下载到本地

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wUgJgLDM-1584591716197)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p148)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-me6fFggN-1584591716197)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p149)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c8aI4mOP-1584591716198)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p150)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1MRzzaeC-1584591716199)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p152)]

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

• 在app.vue中引入进来：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AkW35GQx-1584591716200)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p153)]

• 页面中引用：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U5nkSlka-1584591716200)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p154)]

做一个简单的效果出来

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L6JlfMfb-1584591716201)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p155)]

appid的作用

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

在这里插入图片描述

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

配置服务器域名

在这里插入图片描述

在这里插入图片描述

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

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