给小白的前端开发入门讲解

日暮里的猫
252 阅读4分钟

前端开发与小程序入门

什么是前端开发, 什么是小程序, 如何开发小程序 ?

1. 前言

1.1 软件安装

  1. 小程序文档 - 开始 | 微信开放文档 (qq.com)
  2. Vue2.x文档 - v2.cn.vuejs.org/v2/guide
  3. Uniapp文档 - uni-app官网 (dcloud.net.cn)
  4. VSCode安装 - Visual Studio Code - Code Editing. Redefined
  5. 微信开发者工具安装 - 微信开发者工具（稳定版 Stable Build）

我们要善于应用搜索引擎解决安装过程中遇到的各种问题

1.2 职位架构

CEO： CEO一般是创始人，这个人设立了一个商业目标，然后自己出资或融资去招募一帮志同道合的人，通过管理的艺术让大家一起为这个目标奋斗。

产品经理： 从0到1阶段，根据公司的愿景制定产品战略、设计产品功能、推动产品研发上线。从1到100阶段，平衡公司、运营、用户多方的需求，完成产品的迭代改进，帮助公司实现战略目标。

image.png UI设计师：根据产品需求和草图，设计师们通过他们的艺术知识和制图工具，将草图变成精美和交互合理的效果图，最终输出素材给技术人员。

技术部门： 产品构思好后，谁来实现呢？这就到技术部门了，他们把产品需求分析拆解后，通过技术手段让想法变成用户可用的软件，当然这背后技术人员需要付出大量的精力，通过一行行代码逐渐地实现。

  • 前端
  • 后端
  • 运维
  • 测试

运营部门：产品上线后，运营变得至关重要，运营人员需要针对产品的特性，采用不同的运营手段，让产品上线后有人来用、有内容可看、产生分享或互动。当然运营的作用不止于此，如果说老师要管理好学生的方方面面，运营就需要管好用户的方方面面。

2. 前端开发之路

Part1 && Part2, 无论未来想要从事什么岗位我推荐大家最好都学习一下

  1. 三件套

  2. 基础部分

    • 数据结构(10%)/计算机网络(15%-20%)/计组+操作系统(5%)
    • HTTP协议
      • http, https区别与联系
      • 当我们输入一个网址之后发生了什么?
      • 各种状态码
    • git的使用, 学会使用gitee/github存储自己的项目并不断优化, 学习大厂的git工作流
    • axios: 和后端交互中常用, 用来获取数据
    • node.js: 会使用npm/cnpm/pnpm, 会安装npm包, 理解npm i -S和npm i -D的区别

  3. 框架

  4. 小程序

    • 微信原生小程序 - 梦开始的地方
    • uniapp小程序 - 基于vue
    • taro小程序 - 基于react

  5. 进阶

    • Web安全 - 防止你的网站被hacker攻击, 例如JS注入/DDOS攻击等
    • WebGL, canvas - 实现3D效果
    • Webpack
    • Vite
    • TypeScript
    • Web3.0 - 是一种产业方向, 前后端都有, 未来的趋势
    • ...

3. 小程序

3.1 小程序诞生与演进

小程序作为流应用于2015年由DCloud公司推出

2016年, 各大厂商跟进, 制定了各自的标准, 进而产生了支付宝小程序/微信小程序/字节跳动小程序等等各种各样的小程序, 给开发者造成了极大的不便

基于这种情况, uni-app出现了, 它的用处就是使用一套代码多端运行, 极大的提高了我们的开发效率; 同时开放了uniCloud云函数, 使得我们可以基于Serverless+MongoDB快速上线后端服务

分类:

  • 微信原生小程序(wecqu, 321cqu)
  • uniapp小程序(重大生态圈/川大生态圈)

3.2 小程序开发

  1. 目录结构
    • pages
    • static - 静态资源, 存放图片/图标等
    • utils - 工具类js文件, 例如时间格式化
    • app.js - 入口js文件
    • app.json - 一种数据格式, 对页面进行配置
    • app.wxss - 全局css样式, 作用于pages下所有的页面文件
    • .eslintrc.js - 代码书写的一种规范
    • README.md - 项目的说明文档
  2. 数据交互
  3. 微信小程序官方组件 - 视图容器 | 微信开放文档 (qq.com)
  4. 外部组件库 - 少写甚至无需写CSS
    • colorUI
    • graceUI
    • uView

3.3 uniapp开发

前置知识: vue框架的基本使用

项目结构

  • uniCloud: 项目的后端代码, 主要是验证权限和操作数据库
    • cloudfunctions: 云函数
      • common: 默认云函数
      • ...
  • .hbuilderx: 编辑器配置
  • pages: 页面
    • index
    • setting
  • static: 静态资源文件夹, 存放图片/图标等静态资源
  • uni_modules: uniapp的插件目录, 里面是它的第三方库
  • unpackage: uniapp把vue代码转换成小程序代码的产物
  • APP.vue: 小程序的起始入口, 和微信小程序的app.js一样
  • index.html: 写h5网页的
  • main.js: 主js文件
  • manifest.json: 项目配置
  • pages.json: 页面配置
  • uni.scss: css样式的一种
avatar
文章
阅读
粉丝