后端程序员的 uni-app 教程

最新推荐文章于 2024-06-20 08:50:20 发布

FARO_Z

最新推荐文章于 2024-06-20 08:50:20 发布

阅读量1w

点赞数 10

分类专栏：前端文章标签：后端前端 vue.js

本文链接： https://blog.csdn.net/weixin_44062380/article/details/121178928

版权

本文是专为后端工程师准备的uni-app教程，介绍了如何从零开始学习uni-app，包括小程序入门、uni-app核心知识点、开发环境搭建、uni-ui使用、SASS基础，以及前后端如何打通。通过学习，后端程序员可以快速上手uni-app，实现多平台应用开发。

摘要由CSDN通过智能技术生成

文章目录

- 一、前言

一、前言

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

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

这里，我极力推荐 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