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

时间 2020-07-11

标签程序快速入门实战项目打造个性简历面试让你轻松脱颖而出吸引眼球源码栏目快乐工作繁體版

原文原文链接

前言

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

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

若是感受还不错的话，大大们是否是先赏个点赞鼓励一哈，感谢对原创做者的支持。下面请接着继续浏览，走起！！！

小程序的简介

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

小程序的特色

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

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

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

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

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

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出现，愿意接受批评和指正。这次实战项目分享内容分为上下两篇文章。下一篇会重点讲解教您手把手开发实战项目打造属于本身的个性简历。

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

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

推荐相关优质文章阅读