作经历（案例一）

工作时间：2017-03 - 至今

公司名称：【七分简历】人才咨询有限公司 | 所在部门： | 所在岗位：前端开发工程师

工作描述：

赢额外我是一家专注中小企业快消品培训、营销、微营销、电商的网站。该网站主要分首页、营销力介绍、咨询、培训、年会、猎头、公司新闻、客户留言、加入我们模块组成。

1、根据设计图与UI及相关人员沟通，了解项目需求

2、负责首页、赢销力介绍、公司新闻和客户留言模块的网页制作。

3、解决在各主浏览器的兼容性，并利用jQuery和CSS3技术实现页面上的动画效果。

4、通过JavaScript面向对象思想封装一个Tap栏切换组件，完成各页面中的Tap栏切换效果。

5、公司新闻模块中数据通过利用Ajax进行数据交互的处理和渲染，使用jQuery第三方框架实现分页效果。

6、在公司新闻模块中使用artTemplate模板引擎向页面中渲染数据，提高开发效率。

7、与后端人员配合完成接口的调用。

工作经历（案例二）

工作时间：2016-07 - 至今

公司名称：【七分简历】网络技术有限公司 | 所在部门： | 所在岗位：web前端开发工程师

工作描述：

在公司主要负责静态页面的制作，及合接口实现前后台之间的数据交互

所做项目：

1、快评外卖（前台）

2、艺学就慧新春文常竞赛（前台）

3、艺学就慧（后台，包括：题库、测评、用户、班级模块）

4、微感在线测评小程序

5、超红星主播大赛（前后台）

6、智慧工程安全施工三级预警平台（前后台）

项目主要的技术：

Vue.js、Jquery、JavaScript、WXML、HTML、CSS

简述在项目中职责：

（1）、明确需求，根据设计图，对照需求整理各页面、各功能之间的逻辑关系。整理完成后，再浏览所有的设计图，寻找出公共的通用的部分，作为统一样式提炼出来，使用HTML、CSS对页面进行整体布局设计，并使用jQuery、JavaScript做一些交互动效，实现静态页面的制作。

（2）、根据后台API接口文档，利用jQuery、Vue.js，调接口实现各页面数据渲染及前后台数据交互，在此过程中根据情况，对公共一致的功能，进行提炼封装。

（3）、项目开发完成后进行整体测试，确保项目满足需求

工作经历（案例三）

工作时间：2015-12 - 2017-01

公司名称：【七分简历】信息技术有限公司 | 所在部门： | 所在岗位：WEB前端开发

工作描述：

（1）负责公司医疗项目前端开发、优化以及动态效果实现；

（2）根据设计效果图，进行页面切片及制作；

（3）优化代码并负责项目页面在不同浏览器下的兼容性调试和修改；

（4）对现有项目页面进行规范性优化，改善用户体验，以及各项性能的调优等。

（5）仿京东商城:首页,登录页,注册页,购物车。

工作经历（案例四）

工作时间：2016-07 - 2017-07

公司名称：【七分简历】网络科技有限公司 | 所在部门： | 所在岗位：前端开发工程师

工作描述：

1. 与设计师和产品经理紧密合作，快速的把设计稿转化成web静态页面；

2. 利用jQuery完成前端交互，利用Ajax异步请求完成前后台数据交互；

3. 对程序进行代码的优化、BUG修复、浏览器兼容性调优；

4. 利用前沿技术，将最新的技术运用到产品中,同时确保在不同平台、设备、浏览器上均拥有良好的兼容性和优质的用户体验。

发一个小程序并不难。我的门槛太低了本质上是开发另一个前端平台，如主页、手机软件，但它是在WeChat定义的框架内完成的，有一些WeChat特有的功能，例如获取和登录用户的基本信息；与麦克风群共享等。WeChat提供了非常详细的文档，在网络上也可以使用很多组件，整体上比Web网页和手机软件的开发简单，大大降低了知道技术的人有想法、想要尝试的难度。

为了开发小程序，首先需要了解微信中的小程序如何工作，生命周期是怎样的，以及页面的加载和路由等。试试看

有两种开发模式：简单型和多样型。

简单型开发

像字面的意思一样，在比较简单、直接的开发方式中，没有复杂功能。

每一个小程序的页面，都由 4 个文件协同以完成功能：

.像wxml文件，html一样，该文件主要用于构建页面的结构，包括哪些组件，如何相互关联？例如，包含按钮。

像.wxss文件，css那样，这个文件是为了记述页面表示的模式，决定了wxml内的组件和构造是如何表示的。例如，按钮是什么颜色，.js文件和Web页面开发的js有用，点击按钮会发生什么等，用于处理事件的.json文件，几个窗口小部件特有的内容的表示，例如定义了各页面的名称。除此之外，app.js和app.json处理整个窗口小部件的一些配置和事件。

简单型开发是有问题的，每次开发一个页面时，都要创建这四个文件，在这几个文件之间切换更改是很麻烦的。例如，要修改一个按钮，首先去wxml调整页面的结构位置，去wxss调整颜色，然后修正js后点击会发生什么。1个网页还可以，但是网页多的话，文件超多，很麻烦，所以豪华式有用的地方。

多样型开发

weepy是微信开发的一个小型程序开发框架，它很大程度上解决了简单性的问题，并具有其他一些优点：

Wepy参考Vue，所以在开发模型中基本上与Vue相同。每个页面都需要一个定义。wpy文件、Vue的第1页、html、css、js均在此文件中，简化了开发。开发后，Wepy使用wpy文件自动生成每页的朴素的4页。面。Wepy便于开发应用程序。

对于一个基于Vue或React的朋友，基本上可以无缝地工作。开发效率也比朴素的快得多。

在学习的过程中，用Wepy模仿他人的实现，简单地实现了一个服装的商城fashion-mall，配备了可以在本地运行的测试后端。有兴趣的朋友可以参考Github。小应用程序大幅度地削减了应用程序的开发和维护的成本，将想法的试行错误控制在最小限度。

Kcamp官网：http://www.ikcamp.com

访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。

包含：文章、视频、源代码

第一章：小程序初级入门教程

工具安装

在上一节第 8 步所展示的页面中，可以点击 开发者工具 直接进入到下载页面，也可以直接访问 官网下载地址。然后根据自己的设备选择相应的下载

安装过程不再复述，一路默认。

下载开发工具

§ 小程序工具起手

此教程选择的工具为 mac 平台版本，没差

1. 打开安装好的 微信web开发者工具 ，需要用 管理员 或 开发者 的微信账号扫码登录。管理员账号 是上一节第 6 步中注册 appID 时，绑定的微信账号。开发者账号可在上一节第 8 步中的 添加开发者 中设置

https://open.weixin.qq.com/connect/confirm?uuid=081r6FgN2rYhalnT (二维码自动识别)

２. 登录成功后，选择 本地小程序项目，然后 添加项目

3. 如果没有注册 appID，也可以开发小程序项目，但部分功能会受限，比如在手机上预览。在这里，我们已经有了 appID

4. 添加成功后，我们的项目会在 微信web开发者工具 中自动打开并启动，可以在此工具中对代码进行修改、调试、断点、预览，文件有修改的话，项目会实时更新。

目录说明

项目生成后，会看到如下结构的目录文件：

├─ pages/
│ ├─ index/
│ ├─ index.js
│ ├─ index.wxml
│ ├─ index.wxss
│ ├─ logs/
│ ├─ logs.js
│ ├─ logs.json
│ ├─ logs.wxml
│ ├─ logs.wxss
├── utils/ 
│ ├─ util.js
├── app.js // 必备文件 
├── app.json // 必备文件
├── app.wxss

先看下最外层的三个文件：app.js 、 app.json 、 app.wxss

1. app.js

   小程序的主入口文件，类似于我们在模块加载器时代（requirejs/seajs）常常会码一个 main.js 来作为程序的启动入口。如果你有接触过 node - express 技术栈，理解起来会更贴切。注意：<span style="color:red">文件名不可更改</span>

我们可以在 app.js 里面对小程序在不同生命周期段进行处理，设置小程序里面的 全局变量（比如只请求一次公用的数据，让所有的页面都能用）。 微信平台 app.js 说明文档

2. app.json

小程序的全局配置文件，比如设置小程序有哪几个页面组成（目前是 index和 logs）、窗口表现（背景色等）、设置网络超时时间、设置导航条样式等背景色。注意：<span style="color:red">该文件不可添加任何注释内容</span>

微信平台 app.json 配置文档

3. app.wxss

小程序的全局样式文件，在小程序中，所有的样式文件不再是 .css 后缀，全都需要以 .wxss 作为后缀。与传统的 css 样式相比，wxss 支持 @import样式导入和像素单位自适应。

独立页面中的局部样式，请书写在相对的页面文件夹中，后面会有说明。 微信平台 app.wxss 样式说明文档

小程序的页面文件

app.json 文件中配置了当前小程序的两个页面 pages/index/index 和 pages/logs/logs，可以看到，其实就是 文件的路径+文件名 组成。如果增加一个页面，需要在参数 pages 中把页面的地址配置进去。

细心的同学可能已经发现一个现象，每个页面文件夹，与里面的文件，名字都一样一样滴。是的，一般情况下，一个完整的页面需要 js 、wxss(css)、wxml(html)组成。

比如 index 页面，如果需要对 index 页面进行一些独立的配置，需要像 logs 一样，增加 index.json 文件来保存配置信息。

来看下 wxml 文件与 html 文件的区别

<!--index.wxml--><view class="container">
 <view class="userinfo">
 <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
 <block wx:else>
 <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
 <text class="userinfo-nickname">{{userInfo.nickName}}</text>
 </block>
 </view>
 <view class="usermotto">
 <text class="user-motto">{{motto}}</text>
 </view></view>

传统的 html 文件由各种各样的标签组成，而在 wxml 中，可用的标签元素并不多，可以看到这里涉及到了 view、image、text标签。

• view 相当于 div，你可以这么去理解。

• image 相当于 img，这个应该都懂了。

• text 很明显，用来标注文本的标签，既然是 文本，肯定是 行级元素 了。

还有一些内置好的组件标签，自带样式和特性，详见 官方文档

页面样式表 index.wxss

作用域只在当前页面生效，它可以覆盖 app.wxss 里面的样式规则。可以看到，与平时我们用的样式文件基本没差：

/**index.wxss**/.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;}.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 50%;}.userinfo-nickname {
 color: #aaa;}.usermotto {
 margin-top: 200px;}

页面脚本文件 index.js

跟 app.js 一样，包含了一个页面的生命周期，声明并处理数据，响应页面交互事件等。

//index.js//获取应用实例const app = getApp()Page({
 data: {
 motto: 'Hello World',
 userInfo: {},
 hasUserInfo: false,
 canIUse: wx.canIUse('button.open-type.getUserInfo')
 },
 //事件处理函数
 bindViewTap: function() {
 wx.navigateTo({
 url: '../logs/logs'
 })
 },
 onLoad: function () {
 if (app.globalData.userInfo) {
 this.setData({
 userInfo: app.globalData.userInfo,
 hasUserInfo: true
 })
 } else if (this.data.canIUse){
 // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
 // 所以此处加入 callback 以防止这种情况
 app.userInfoReadyCallback = res => {
 this.setData({
 userInfo: res.userInfo,
 hasUserInfo: true
 })
 }
 } else {
 // 在没有 open-type=getUserInfo 版本的兼容处理
 wx.getUserInfo({
 success: res => {
 app.globalData.userInfo = res.userInfo
 this.setData({
 userInfo: res.userInfo,
 hasUserInfo: true
 })
 }
 })
 }
 },
 getUserInfo: function(e) {
 console.log(e)
 app.globalData.userInfo = e.detail.userInfo
 this.setData({
 userInfo: e.detail.userInfo,
 hasUserInfo: true
 })
 }})

下期更新内容：小程序初级入门教程－小试牛刀+发布流程

iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。