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

写在前面

之前关于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的。

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

何处锦绣不灰堆 CSDN认证博客专家 vue nodejs git
人系于妻子舍宅,甚于牢狱。牢狱有散释之期,妻子无远离之念。情爱于色,岂惮驱驰。虽有虎口之患,心存甘伏。投泥自溺,故曰凡夫。透得此门,出尘罗汉。
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值