轻松上手微信小程序

占裕峰

资深工程师

曾参与多项共享体小程序开发！

这不是一个BUG,这只是一个未列出来的特性！

-------老占

我们SE的同学们每天忙的是不可开交，找人成了一个难点，明明知道要找谁，可偌大的办公区，这么多工位，想要准确的找到自己想要找的人非常不容易。尤其是对于找不到北的同学，估计跑出汗水跑出泪水才能找到，真可谓只在此山中，云深不知处。

为了解决这个痛点，我们SE决定发动软件的力量，用最快速的方式，做出能够快速知道要找的人在哪的产品。这就是我们的“e知处”小程序。

微信小程序是基于微信的轻量级app，因其简单快速、开发成本低、用户流量巨大等特点而被知，就我们知处小程序来说，功能相对简单，交互也不复杂，用户只需要通过扫瞄知处的小程序码即可打开，而且小程序码中还能够携带数据，让我们能够直接获取到扫码用户当前的位置。

小程序应用极其轻量，从扫码到下载完成进入应用只需短短几毫秒，用户可能毫无感知，相比传统应用需要到应用市场下载安装等繁杂的流程来说，体验极佳。对于开发者来说，小程序因为基于微信做了二次封装，无论Android手机还是iOS设备，都能够一套代码运行；并且小程序中不同尺寸分辨率的适配上也有一套相当简单实用的标准，也免去了大量的app适配工作量，真是程序员的福音。

其实小程序的优点还有很多，能够一经发布就持续高热，是有一定道理的。说了这么多，就让我们一起来看看我们的知处小程序，是如何一步步开发出来的吧。

首先来看看知处app的框架图，便于理解小程序整体的概况

可以看到，功能非常简单，欢迎页、首页地图、姓名查询、详细信息、目标导航。而小程序本身的框架，任何功能都会包含一套组合拳微信小程序中实现地图导航，xx.js中编写主体业务代码；xx.json中yyy、xx.wxml中编写布局代码、xx.wxss中是对布局代码中控件进行样式设置。做过Web的同学一定会觉得相当眼熟，这不就是网页开发同一个套路吗？没错，编码模式大同小异，语法都基本一致。只是相较活了一段时间的H5应用通过纯网页形式展现，小程序实际上底层渲染出来的是原生的控件，所以交互体验上几乎和原生app一致，这是H5应用所不能比拟的。

了解了整体概况，是时候开始搭建环境啦！让我们一起看看到底小程序开发为什么如此简单快速，受人欢迎吧。

首先我们打开微信小程序的主页，找到开发者支持，打开开发者工具即可根据自己的需求下载安装微信开发者工具软件

打开软件，微信扫码即可登录。后续的开发都需要开发者的微信进行授权

接下来我们新建一个项目，选择一个工作目录，自己可以给项目取个响亮的名字。如果还没有在微信注册过小程序，这里就先选择使用测试号吧，工具会自动帮我们申请生成一个临时的测试id，非常方便。

新建好工程，开发工具会非常友好的帮你生成demo工程。让我们一起看看这简洁朴素的开发环境，主要分为6个部分：

1.可以控制模拟器、编辑器、调试器窗口是否展示的开关区；

2.简单实用的功能区，常用的功能包括编译、预览、真机调试等。

编译功能可以手动对代码进行编译，实际上每次代码保存也会自动完成编译动作；

预览功能能够生成小程序的预览二维码，自己开发的demo，可以通过个人微信扫码进行真机的功能预览；

真机调试功能和预览功能类似，不仅能够在真机上看到效果，并且自带调试信息数据，方便进行调试验证和定位问题。

3.模拟器展示区，可以根据实际需求选择对应的机型，及时在开发阶段就能够对app的适配性有一个直观的掌控。模拟器能够在编译运行后立刻展示效果，虽然不及Android Studio那么强大，但将将有余。

4.项目文件结构微信小程序中实现地图导航，可以很直观的看到整个工程的文件结构.

5.编辑器，这里就是真正每个文件的代码展示了。

6.调试区，功能也非常多，当然最常用的还是console控制台，能够及时查看错误信息，定位问题

再伟大的机器，也是由一颗颗零件拼起来的。微信小程序的最基础的demo程序，是我们一切的基础，了解完这些基本概念了，让我们一起来看看我们又是如何具体实现功能的吧。首先看看知处小程序的文件结构：

虽然功能有5个，但我们设计的页面只有2个。欢迎页面相对简单，只有两张图+一个按钮，在cover目录下实现。对应的布局代码如下：

可以看到我们定义了三张图片，用的是image标签，每个标签我们都认为是一个控件，其中src就是图片的资源。养成良好的习惯，图片都被统一放在了img目录中。这些在工程中的图片，是会被和代码一同打包进小程序的，所以为了不让小程序变成大程序，在UI上可要花些功夫，减轻分量。另外，几乎每个控件都有class属性，这是给这个控件分个类，当然也可以用id属性来给控件取名字，目的都是在开发控件样式的时候，能找到对应的“人”。

我们结合样式文件来看，对几个图片都设置了相对固定的大小，居中排版，图片之间有一定的间距。这里不得不再次佩服微信小程序的适配能力，rpx是微信小程序自己的单位，无论你设备的实际尺寸是多少，微信小程序都会帮你按宽度750rpx来折算，这样就能实现屏幕的自适应，在哪都不失真。最后展现出来的效果如图：

在欢迎页面中，有一个立即进入的按钮控件，控件的点按事件，就是通过bindtap来绑定js代码文件中的方法。当然控件会有很多不同的丰富的事件动作，有兴趣的同学可以慢慢了解，目前比较常用的就是点按。此处点按立即进入，将会调用cover.js中的enter方法，一起看看具体实现吧。

果然找到了enter方法！那enter到底做了什么事情呢？看起来是非常简单的跳转到了首页，但又好像并不简单。

原来页面是有自己的生命周期的，在不同的阶段会回调不同的方法，他们的名字基本上都用on开头，和Android是如此的相似。

同样我们先说常用的，就是在页面加载完后，将会回调onLoad方法，这里有一件很重要的事情要做，就是区分用户到底是扫码进入的小程序，还是其他途径打开。在事先生成好的小程序码中，我们已经预设了一个id值，是用于区分不同实体小程序码摆放的位置的，而实际上这个位置就是用户当前的位置。在代码中，我们将这个id从options中拿到，并赋值给我们的变量position_id。如果需要在代码中全局使用，变量是需要在data中先声明完成。

如此一来，就弄明白了，原来小程序启动时就会拿到当前扫码用户的位置信息，然后在用户点按立即进入按钮时，跳转到首页，同时将位置id带给首页。首页将会通过这个id，到后台查询出当前具体的位置坐标，并将起点的图标绘制到地图上。而跳转的功能，就是通过微信小程序的api接口，redirectTo来实现的，更多的api接口可以到微信小程序开发者文档中查阅，统一调用标准就是通过wx（微信）对象调用。

进入首页之后的功能相对就比较复杂一些了，在一个页面中，需要实现地图绘制，两层图层的切换，姓名列表的展示，当然少不了还有网络请求，还有调用系统的拨号功能等等。但实际上万变不离其宗，开发小程序的基本思路还是一样的，相信有了环境搭建+基础入门的学习之后，每个人都能顺利上手，在项目中一展身手。

编码完成，不同于原生app需要复杂的打包、签名、发布等一系列流程，在小程序开发工具中，找到上传功能，就能够将代码工程自动打包，上传至微信小程序管理后台，之后在管理后台中即可提交审核并发布。

另外，开发工具还自带git版本管理工具，如果是多人协同开发，不需要脱离工具在搭建一套版本管理工具，省时省力高效。

说了这么多优点，你还在犹豫什么呢，感觉拿起手中的电话订购吧！呸！赶紧拿起手中的键盘敲起来吧！！

最后如果你还不知道知处小程序，请扫码关注，记得加入我的小程序哦。