（上）小程序从0快速入门到实战项目打造个性简历，面试让你轻松脱颖而出吸引面试官眼球（附源码）

懒人码农
1,745 阅读7分钟

前言

分享之前我们先来认识一下小程序，官方定义的微信小程序是一种新的开放能力，开发者可以快速地开发一个小程序。更是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。那么我所理解的小程序又是什么，它有什么特点，将如何应用？

啥都别说，先上图直接线上体验看看效果，拿出手机扫一扫，小程序码如下：

在这里插入图片描述
如果感觉还不错的话，大大们是不是先赏个点赞鼓励一哈，感谢对原创作者的支持。下面请接着继续浏览，走起！！！

小程序的简介

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

在这里插入图片描述

小程序的特点

1. 速度快 无需下载安装，加载速度快于HTML5，微信登录，随时可用

2. 无需适配 一次开发，多端兼容，免除了对各种手机机型的适配

3. 社交分享 支持直接或App分享给微信好友和群聊

4. 出色体验 可达到近乎原生App的操作体验和流畅度，在离线状态也可使用

5. 用完即走，随手可得 通过扫码、长按、微信搜索、公众号、好友推荐等方式快速获取服务，用完即走

6. 低门槛 已有公众号的组织可快速注册、可快速生成门店小程序

在这里插入图片描述

小程序的产品优势

App 普通网页 小程序
开发成本 高 低 低
用户获取成本 高 低 低
用户体验 高 低 高
用户留存 高 低 高

小程序不是网页，也不是App，是一种全新的产品体验。

小程序的行业应用

  • 智慧零售 线上线下购物（场景赋能）、渠道会员品牌（营销赋能）、礼物社交销售（社交赋能）

  • 电商行业 电商平台、内容电商、品牌电商

  • 生活服务 出行、餐饮、旅游、共享

  • 政务民生 医疗、税务、邮政、公安

  • 高校服务 查询学校线上服务、小程序内领取、查看校园卡、通过小程序进出图书馆、食堂支付

  • 小游戏 挑一挑、星途、欢乐斗地主、欢乐麻将

小程序的技术发展

在这里插入图片描述

小程序的通信模型

首先，我们来简单了解下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型如下图所示。

在这里插入图片描述

小程序的程序语言

  • 渲染层：WXML模板 + WXSS样式（类似HTML+CSS）

  • 逻辑层：JavaScript脚本逻辑交互

  • 配置项：JSON是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

小程序的开发流程

在这里插入图片描述

1）注册个人账号（申请AppID）

开发小程序的第一步，需要拥有一个小程序 AppID，后续的所有开发流程会基于这个 AppID 来完成。小程序的注册非常简单，只需几个操作。打开微信公众号平台官网：mp.weixin.qq.com/点击立即注册按钮，在打开的页面中选择小程序后，填入相关的信息，就可以完成注册了。如下图：

在这里插入图片描述
注意：每个邮箱只能申请一个小程序

在这里插入图片描述

注册主体类型选择（个人）

在这里插入图片描述

2）完善小程序基本信息

注册成功后，进入小程序发布流程，点击编辑完善基本信息填写，如下图：

在这里插入图片描述
再点击 “开发”—“开发设置” 就可以看到小程序的 AppID，如下图：
在这里插入图片描述

3）下载安装微信开发者工具

工具下载地址：developers.weixin.qq.com/miniprogram…

根据自己的操作系统下载对应的安装包进行安装（推荐稳定版）。需要注意的是，小程序开发工具在 Windows上仅支持 Windows 7 及以上版，在 Mac 上支持 OS X 10.8 及以上版本。如下图：

在这里插入图片描述
根据工具提示点击下一步，完成安装，安装成功后，可以在桌面或者开始菜单中找到小程序开发工具的快捷方式，打开即可。

打开小程序开发工具，使用之前注册小程序所使用的微信扫码登录。选择小程序项目，如下图：

在这里插入图片描述

首先在操作系统创建一个目录，而后在开发者工具中点击新建项目，选择刚创建的目录，填入 AppID，然后点选 "不使用云服务"，点击新建，那么第一个小程序项目就创建成功了。如下图：

在这里插入图片描述

​ 点击“开发者工具”工具栏上的预览按钮，使用微信扫描生成的二维码，就可以看到这个小程序在手机端上的表现了，如下图：

在这里插入图片描述
以上工作一切准备就绪后，就可以随心所欲，尽情的自由发挥。学习方法的诀窍就是多敲代码，多练习，多看小程序官方文档。从一个个实战项目需求和问题出发，引出技术知识点。本项目是通过微信小程序开发打造呈现不一样的简历，让你轻松脱颖而出去吸引更多面试官的关注。先上一波效果图。

效果截图

封面图（启动页）

在这里插入图片描述

基本信息界面

在这里插入图片描述

工作经验界面

在这里插入图片描述

专业技能界面

在这里插入图片描述

技术博客界面

在这里插入图片描述

文章精选界面

在这里插入图片描述

文章详情界面

在这里插入图片描述

项目结构

│  app.js                  // 小程序逻辑    
│  app.json                // 小程序公共配置
│  app.wxss                // 小程序公共样式表
│  project.config.json     // 项目配置文件
│  sitemap.json            // 页面收录配置文件
├─images                   // 公共图片存放文件夹
├─pages                    // 注册页面文件夹
│  ├─about                 // 基本信息页面
│  │      about.js         // 页面逻辑
│  │      about.json       // 页面配置
│  │      about.wxml       // 页面结构
│  │      about.wxss       // 页面样式表
│  │      
│  ├─article               // 文章详情页面
│  │      article.js       // 页面逻辑
│  │      article.json     // 页面配置
│  │      article.wxml     // 页面结构
│  │      article.wxss     // 页面样式表
│  │      
│  ├─articles              // 文章精选页面
│  │      articles.js      // 页面逻辑
│  │      articles.json    // 页面配置
│  │      articles.wxml    // 页面结构
│  │      articles.wxss    // 页面样式表
│  │      
│  ├─blog                  // 技术博客页面
│  │      blog.js          // 页面逻辑
│  │      blog.json        // 页面配置
│  │      blog.wxml        // 页面结构
│  │      blog.wxss        // 页面样式表
│  │      
│  ├─index                 // 工作经验页面
│  │      index.js         // 页面逻辑
│  │      index.json       // 页面配置
│  │      index.wxml       // 页面结构  
│  │      index.wxss       // 页面样式表  
│  │      
│  ├─skill                 // 专业技能页面
│  │      skill.js         // 页面逻辑
│  │      skill.json       // 页面配置
│  │      skill.wxml       // 页面结构
│  │      skill.wxss       // 页面样式表
│  │      
│  └─welcome               // 启动页
│          welcome.js      // 页面逻辑 
│          welcome.json    // 页面配置
│          welcome.wxml    // 页面结构
│          welcome.wxss    // 页面样式表
│          
└─utils                    // 全局工具类文件夹
        icon.wxss          // 公共图标样式表 
        main.wxss          // 公共组件样式表
        util.js            // 全局JS工具类

技术栈

  • 小程序原生框架
  • 小程序原生组件
  • 小程序原生API
  • ColorUI组件库
  • 微信web开发者工具

功能模块

  • 启动页（CSS3动画）
  • 底部tabBar导航栏
  • 引用ColorUI组件库样式表
  • 弹出二维码图片
  • 直接拨打电话
  • 保存通讯录
  • 工作经验时间轴
  • 多彩进度条
  • 数字滚动
  • 复制链接
  • 页面路由跳转
  • 小程序跳转web-view

写在最后

由于时间关系，文章写的仓促，难免会有些问题或BUG出现，愿意接受批评和指正。此次实战项目分享内容分为上下两篇文章。下一篇会重点讲解教您手把手开发实战项目打造属于自己的个性简历。

免费快速获取源码方式：点赞+关注，公众号后台回复“源码”二字即可获取源码。

欢迎关注作者公众号：懒人码农

在这里插入图片描述

推荐相关优质文章阅读

avatar
文章
阅读
粉丝