基础篇 2-微信小程序开发入门与技术选型 #

微信小程序开发入门与技术选型 #

微信小程序是以微信为运行环境的一种应用，其实质是 Hybrid 技术的应用，Hybrid App 即混合模式移动应用，因此与 H5 类似，但又比 H5 拥有很多原生的能力，例如调用位置信息和摄像头等。

小程序的开发方式与 H5 十分相似，用的也是 JavaScript、HTML、CSS 语言。

微信小程序开发入门 #

申请小程序账号 #

申请小程序账号需要一个未申请过公众号和小程序账号的邮箱，然后在小程序介绍页的底部点击 「前往注册」 按钮，前往注册页根据指引填写信息。

填完信息，点击「注册」进入邮箱激活页面（如下图），再去邮箱激活账号即可。

更详细的流程可以参考官方文档。

安装开发者工具 #

微信开发者工具可以帮助开发者简单和高效地开发和调试微信小程序，集成了公众号网页调试和小程序调试两种开发模式。它可以实时查看页面和功能效果，还能在开发者工具中进行 Debug。它使用 NW.js (previously known as node-webkit) 编写，在调试时和 Chrome 几乎无差别，很容易上手。

前往开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装。

打开微信开发者工具，用微信扫码登录开发者工具，确认后会进入选择「小程序项目」或「公众号网友项目」的界面，这里我们选择「小程序项目」，出现如下界面：

在这个页面，项目目录选择 hello 文件夹（此文件夹为笔者新建的空白文件夹），然后在 AppId 填入刚才申请好的账号里的 AppId (在小程序后台:设置 - 开发设置 - 开发者 ID - AppID )，项目名称 笔者填的是 hello。

点击「确定」后，出现一个示例项目的预览，点击顶部菜单「编译」就可以在微信开发者工具中预览你的第一个小程序。

代码构成 #

看一下我们生成的 hello 项目的目录：

├── pages                  页面目录
|   ├── index              首页
|   |   ├── index.js       首页js
|   |   ├── index.wxss     首页样式文件
|   |   └── index.wxml     首页模板文件
├── utils                  工具函数
|   ├── utils.js
├── app.js                 app入口文件
├── app.json               app配置文件
├── app.wxss               app样式文件
└── project.config.json    项目配置文件

如上面的目录，一个小程序必须要有一个 app.js 入口文件，app.json 配置文件。除此之外，还有一个叫 project.config.json 的工具配置文件，是方便你在不同的电脑上开发时，开发者工具能拥有相同的设置。

每个页面上，同样会有 page.json 、page.js 、 page.wxml 、 page.wxss 这四种文件。分别是页面配置，页面逻辑，页面模板和页面样式文件。除去页面配置文件 page.json， 后三者和我们 HTML 、 JavaScript 、 CSS 三剑客十分相像，只不过换了个后缀而已。

WXML 模板文件里面，提供了数据绑定、列表渲染、条件渲染、模板、事件、引用等功能，有点类似Vue的语法。

WXSS 样式文件和 CSS 别无大异，能支持绝大多数的 CSS 、 CSS3 的语法。除此之外，还支持样式引入，单位转换的功能，小程序在 WXSS 上做了一些扩充和修改，新增了 rpx 尺寸单位，不需要再人工地使用类似rem的适配方案来适配移动端的各种机型，给开发者提供了便利。

app.json #

这个文件是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 Tab 等。

// app.json
{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

所有的页面都需要在app.json的pages里面增加入口，这样才能让页面被加载。

index.js #

//page/index/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 () {
  // ...
  },
  getUserInfo: function(e) {
    // ...
  }
})

可以见到，页面中有一个 Page 包裹着一个对象，页面的 data、一些生命周期、一些方法，都挂载在该对象上。而小程序正是通过这样的方式进行初始化的。

index.wxml #

<!--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}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

在 WXML 模板中，渲染了一些在 index.js 里定义的页面变量，绑定了一个事件 bindtap="bindViewTap"，还有一些条件判断等等。

index.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;
}

我们可以看到 WXSS 里的内容和 CSS 没有什么差异，这个小程序的示例里没有使用 rpx 尺寸单位而是直接使用 px ，大概是小程序官方的疏忽吧。你在开发的时，记得使用小程序的新单位 rpx。

生命周期 #

小程序的生命周期分为页面的生命周期和整个应用的生命周期。

应用的生命周期主要有onLaunch、onShow、onHide

• onLaunch 是当小程序初始化完成时，会触发 onLaunch（全局只触发一次）；
• onShow 是当小程序启动，或从后台进入前台显示，会触发 onShow；
• onHide 是当小程序从前台进入后台，会触发 onHide；

页面的生命周期会比较多一些，有onLoad、onReady、onShow、onHide、onUnload

• onLoad 是监听页面加载的函数
• onReady 是监听页面初次渲染完成的函数
• onShow 是监听页面显示的函数
• onHide 是监听页面隐藏的函数
• onUnload 是监听页面卸载的函数

整体来说，原生的小程序开发与 Vue （指它的 template 指令风格） 的语法比较类似，但其实开发起来还是会有所差异。譬如莫名其妙的 Page 、没有明确的路径引用、挂载了一大堆东西的初始化对象等等，这些有点反直觉；加之小程序缺乏 CSS 的工业化抽象（PostCSS，Sass， Less），NPM 支持（这个小程序已经准备要支持了），ES6/ES7 语法糖，TypeScript 的强类型约束，Vue/React 的组件开发，Vuex/Redux 的状态管理，在已经进入 “工业化”的前端时代里，让广大开发者难以忍受，于是各种转换小程序的方案如雨后春笋般涌现：mpvue、 MINA、Wept、WePY、 mpvue- wxParse、ANU、 Taro，这些工具框架各具特色，拥有自己的支持者。

流行的小程序开发框架 #

目前比较流行的小程序开发框架主要有 WePY、mpvue、Taro，我们简单对比下。

• WePY 应该是比较早的小程序开发框架了，而且也是腾讯内部开源的一款框架。它主要解决了小程序开发较为松散，不能用 NPM 包，自定义组件开发不友好等问题。相比于原生的开发方式，已经是大大地增强了开发体验，提高了开发效率。
• mpvue 是美团点评技术团队开源的一款小程序开发框架，相较于 WePY，mpvue 则是完全用 Vue 的开发方式来开发小程序，开发体验较 WePY 相比有了进一步的提升。
• Taro 则是我们京东凹凸实验室团队开源的一款小程序开发框架，与 mpvue 相反，Taro 用的是 React 的开发方式来开发小程序，可以说又是另一个派别了。

具体看下面表格：

更具体的区别与对比要深入使用过才有发言权，在这里就不多说了，这里只是给大家一个大概的介绍，以便对当前小程序流行的开发方式有一定的了解。

技术选型 #

讲了那么多关于小程序的开发方式，我们应该如何选型？

首先，还是不太推荐小程序原生的开发方式。2018 年了，它还缺乏很多的现代前端开发所需的东西，例如 NPM 包，CSS 预编译，状态管理等，如果要开发大型项目，自然会需要做非常多的适配方法，简言之就是原生方式还是比较费时费力。不过据说新的版本会加入 NPM 包支持等新功能，在这里就小小期待一下吧。

WePY #

假如你需要开发中小型的小程序，同时也想体验原生小程序的诸多语法和特性，WePY 是你很好的选择。它保留了小程序诸多的语法特性，例如模板绑定、生命周期、API 调用等，同时在小程序原生开发的基础上，优化整合了现代前端开发利器，很好地提升了开发体验。而且由于开源的时间很早，网上也有了很多关于此框架 Bug 解决方法的文章，也不怕会遇到什么困难而影响后续开发。

缺点可能就是有一定的学习成本，需要适应。

mpvue #

假如你是 Vue 开发者，同时也不想做太多的折腾，继续沿用 Vue 的开发方式来开发小程序，那么用 mpvue 将会是你的最明智决定。除了有一些因为环境原因不能在小程序中使用的特性之外，几乎就和用 Vue 差不多，可以说真的是入门只需 5分钟。同时也支持一些第三方 UI 库，这给一些需要讲求速度的小程序开发者提供了便利。

Taro #

在上面描述 mpvue 的话语中，把 Vue 替换成 React ，就是对应 Taro 的描述了。作为一款新兴的框架（6月开源），第一款用 React 语法写小程序的框架，Taro 一直在不断的迭代和快速的成长，还给开发者提供了 Taro-UI 。对于 React 爱好者，Taro 将是你开发小程序的不二选择。

目前 Taro 1.0.0 的正式版已经发布，在稳定性和可用性上都有了很大的提高；除此之外，Taro 的多端转换功能也是其特色之一，可以将一套代码转换到小程序、H5 和 React Native 三端中使用，之后还有快应用等多端的支持计划。

Taro 支持主流的 React 开发方式，但由于实现原理，小程序限制等诸多原因导致它对一些较为特殊，不太常用的写法还不能 100% 支持，好在官网为此提供了最佳实践的文档。

小结 #

本章我们介绍了微信小程序开发入门，其中包括小程序账号的申请，微信开发者工具的简单使用以及新建了示例小程序；然后我们了解了小程序项目里都有哪些文件以及功能作用；最后我们对比了几个主流的开发框架。

总的来说，开发方式并没有什么优劣之分，适合自己的才是最好的。技术最终还是为业务服务，技术选型也是对症下药的过程，上面所说的几种框架各有优劣，哪种更适合团队，更能提高开发效率，自然就选择哪一种框架。