后端程序员的 uni-app 教程

文章目录

一、前言
二、课前准备
三、小程序入门
- 1、目录讲解
- 2、生命周期
- 3、微信小程序特性
- - 1）数据绑定
  - 2）条件判断
  - 3）列表渲染
四、uni-app 核心知识点总览
- 1、条件编译
- 2、接口能力
- 3、知识点小结
五、开发环境搭建
六、uni-ui
七、uni 模板
八、SASS
- 1、基础使用
- 2、统一变量
- 3、同级表示
九、FLEX 布局
十、前后端打通
十一、小结

一、前言

作为一个后端工程师，不会一点前端其实是很吃亏的，因为你写的项目无法对外展示

那么，前端技术框架那么多，作为后端的我们该怎么选呢？

这里，我极力推荐 uni-app 。uni-app 基于 vue.js ，上手方便，并且写一套代码，可以在多个平台上运行（甚至可以打包成手机程序）

有人会说，uni-app 效率不行，但是我们这些后端管他什么前端效率前端优化呢，我们只要效果出来就行了，优化大头还是后端

接下来，我就和各位一起，走进 uni-app 的世界

二、课前准备

Html css js 三剑客基础要有

最好学过一点 vue

了解小程序的开发

三、小程序入门

虽然 uni-app 可以打包多平台，但是我们的主力开发对象还是小程序

而且 uni-app 的开发方式和小程序很像

所以，了解一点小程序的知识很有必要

1、目录讲解

新建后的小程序目录长这样的

其中 pages 中每个文件代表一个页面

我们打开主页 index：

里面除了三剑客，还有一个 .json 文件，那是这个页面的配置文件

而外层的这些，是全局的配置、样式文件：

2、生命周期

在测试前，我们新建一个页面 detail

（注意，要新建名为 detail 的文件夹，然后再在里面新建 page）

打开 .js 文件，就可以看到我们的生命周期函数了:

// pages/detail/detail.js
Page({/*** 页面的初始数据* 这个在我们后面讲数据绑定的时候会用到的*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载* 一般是在跳转到其他页面的时候触发*/onUnload: function () {},// 下面三个生命周期函数我们之后再看/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

生命周期函数上都标明了相应的注释

我这里就不再多做解释了

3、微信小程序特性

有三个部分，是我们必学的

学了这三个部分，小程序开发我们基本就可以上手了

1）数据绑定

类似于 vue 的 mvvm 模式

我们在 detail 页面中的 .js 文件中的 data 属性中，添加变量及其值

然后在 wxml 中，使用双花括号进行访问：

可以看到，咱们的 name 显示在 detail 页面上了：

2）条件判断

条件判断使用 wx:if 标签

对应的变量为 false ，则不显示

对应变量为 true ，则显示

3）列表渲染

列表渲染，就是将数组中的元素，一列表的形式展示到页面上

使用 wx:for进行遍历

data 中我们定义一个数组：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gfb3g85n-1636180728676)(…/…/…/…/…/…/Library/Application%20Support/typora-user-images/image-20211104145627875.png)]

页面上，我们使用 wx-for:

上面这三个知识点，学过 vue 的同学应该会比较亲切

讲上面这三个知识点，是为了让各位学到后面不会一脸懵

四、uni-app 核心知识点总览

1、条件编译

条件编译，代表被条件编译包裹的代码块，只会在某个平台出现或者不出现

2、接口能力

Uni-app 接口能力（js-api）接近小程序

3、知识点小结

五、开发环境搭建

这里建议使用 DCloud 公司自己的 HBuilderX 进行开发

下载 app 开发版即可

下载好后，新建 uni-app 项目即可：

六、uni-ui

Uni-app 的核心是组件开发

意思是说要我们自定义组件进行开发

但是咱们这些搞后端的，哪有心思整这些呢…有没有一套前端框架，可以供我们使用呢？

像 element-ui antd 这些就别想了，因为这些都是 vue 原生组件，小程序上跑不了的

经过我的筛选，发现还是 uni 自家的 ui 最好用，web 小程序什么的都适配了

通过下面这个网址：

uni-ui 导入

我们就可以直接在 HBuilderX中，导入前端组件

七、uni 模板

uni 团队和插件市场，有丰富多彩的模板插件，如果我们连自己写都懒得写了，可以在创建时，直接使用模板

下面是 DCloud 开放的新闻类模板：

适配啥的，别人已经帮我们做好了，我们只要在这个基础上，用 uni-ui 进行修改即可

看看插件市场，真的什么都有，甚至还有一个管理平台的

有需求的，只要在这个前端平台上做二开就 OK 了

八、SASS

有很多项目中都是用到 SASS 的，那想进行二开的话，就必须要知道 SASS 是啥

SASS 可以让我们的样式，跟随组件的父子关系，一父子关系排布

1、基础使用

我们先将样式声明为 scss：

然后去下载 scss 编译插件（不然会报错）：

可以看到，这个 demo 中的组件是有层级关系的：

其中每个层级，都有对应的 class 样式

使用 sass 的话，样式代码也可以有层级关系了：

2、统一变量

有些部分的数值，可能是一样的，如果要修改，那每个地方都要修改，十分麻烦

使用统一变量，就可以解决这一问题

定义变量：

使用变量：

3、同级表示

假设我们有个组件，有两个样式

那用 sass 该怎么表示呢？

下面这个写法虽然也行，但是这就不是 sass 想要表示的方法了：

我们应该用下面这种方式：

九、FLEX 布局

绝大部分 uni-app 都是使用 flex 布局的

那么如果我们想进行自定义布局，FLEX 布局就一定要学习一下

这篇文档对 flex 布局的讲解比较详细：

flex 布局讲解

十、前后端打通

很多教程都是走 uni-cloud 的

但是身为后端程序员的我们，怎么可能不走自己的后端呢？

这就需要一个成熟的前后端沟通插件，类似于 JQuery 或 axios

DCloud 官方给我们提供了一个方便的方法 uni.request

具体使用方法可以参考官方文档：

uni-request 官方文档

十一、小结

这篇教程，我改变了往常事无巨细的写法

而是将许多文档进行整合

一是为了防止重复造轮子，二是因为如果我只是单纯对其他文档的内容进行概述，难免会有遗漏的部分

作为后端程序员，学习以上前端知识，足以帮助我们写出能看的前端了，这样，我们的项目也有办法向其他人展示了