微信小程序商城开发：界面设计实战
点击查看第二章
点击查看第三章

黄菊华　编著
第1章

小程序起步

工欲善其事，必先利其器。本章主要讲解微信小程序开发需要的一些基本知识，为后面的小程序开发做好准备。本章主要内容有：开发准备工作，写出第一个微信小程序，小程序的代码构成和能力，如何准备并发布小程序等。

1.1　开发准备

在开发微信小程序前，大家有必要了解一下需要做的准备工作。

1.接入流程
大致接入流程如下：
1）注册。在微信公众平台注册小程序，完成注册后可以同步进行信息完善和开发。
2）小程序信息完善。填写小程序基本信息，包括名称、头像、介绍及服务范围等。
3）开发小程序。完成小程序开发者绑定和开发信息配置后，开发者可下载开发者工具，参考开发文档进行小程序的开发和调试。
4）提交审核和发布。完成小程序开发后，提交代码至微信团队审核，审核通过后即可发布（公测期间不能发布）。
2.申请账号
注册地址为https://mp.weixin.qq.com/wxopen/waregister?action=step1
根据指引填写信息并提交相应的资料，之后便拥有了自己的小程序帐号。页面打开效果如图1-1所示。

图1-1　注册页面

在这个小程序管理平台，你可以管理你的小程序权限，查看数据报表，发布小程序等。
3.获取微信小程序AppID
登录网址：https://mp.weixin.qq.com。我们可以在菜单“设置”→“开发设置”中看到小程序的AppID，如图1-2所示。
小程序的AppID相当于小程序平台的一个身份证，后续你会在很多地方要用到AppID （注意，这里要区别于服务号和订阅号的AppID）。有了小程序帐号之后，我们需要一个工具来开发小程序。
4.安装开发工具
根据自己的操作系统下载对应的安装包来安装开发工具，操作系统如下：

• Windows 64位
• Windows 32位
• Mac OS

图1-2　小程序的AppID

准备好你的手机和微信小程序的AppID，打开小程序开发者工具，通过微信扫码登录开发者工具，准备开发你的第一个小程序吧！
为了帮助开发者简单高效地开发和调试微信小程序，微信官方在原有的公众号网页调试工具的基础上，推出了全新的微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式：

• 使用公众号网页调试，开发者可以完成微信网页授权和微信JS-SDK。
• 使用小程序调试，开发者可以完成小程序的API和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

安装后的微信开发者工具如图1-3所示。
Windows仅支持Windows 7及以上版本。

图1-3　微信开发者工具

1.2　第一个微信小程序

新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请的小程序的AppID，给你的项目起一个好听的名字，最后，勾选“建立普通快速启动模板”（注意，你要选择一个空的目录才会有这个选项），点击“确定”，就得到了你的第一个微信小程序了。点击顶部菜单预览就可以在微信开发者工具中预览你的第一个小程序，效果如图1-4所示。
点击工具上的“编译”按钮，可以在工具的左侧模拟器界面看到这个小程序的表现，也可以点击“预览”按钮，通过微信的“扫一扫”在手机上体验你的第一个小程序，效果如图1-5所示。
通过以上步骤，你已经成功创建了第一个微信小程序，并且在微信客户端上体验到它流畅的表现。

1.3　代码构成

在上一节中，我们通过开发者工具快速创建了一个“建立普通快速启动模板”项目。你可以留意到这个项目里生成了以下不同类型的文件：

图1-4　第一个微信小程序预览

• 带.json后缀的是JSON配置文件。
• 带.wxml后缀的是WXML模板文件。
• 带.wxss后缀的是WXSS样式文件。
• 带.js后缀的是JavaScript脚本逻辑文件。

接下来我们分别阐述这4类文件的作用。

1.3.1　JSON配置

我们可以看到，在项目的根目录下有一个app.json和project.config.json文件，此外在pages/logs目录下还有一个logs.json文件，我们依次说明它们的用途。

1. app.json（小程序配置）
app.json是当前小程序的全局配置，包括小程序的所有页面路径、界面表现、网络超时时间、底部tab等。项目里面的app.json配置内容如下：

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

其中，各配置项的含义如下。

• pages字段：用于描述当前小程序的所有页面路径，目的是让微信客户端知道当前的小程序页面定义在哪个目录下。
• window字段：定义小程序所有页面的顶部背景颜色、文字颜色等。

2. project.config.json（项目配置）
在使用一个工具的时候，开发者通常会根据各自喜好做一些个性化配置，例如界面颜色、编译配置等，如果换了另外一台电脑重新安装工具的时候，还要重新配置。
考虑到这点，小程序开发者工具会在每个项目的根目录下生成一个project.config.json，这样，开发者在工具上做的任何配置都会写入这个文件。当重新安装工具或者更换电脑工作时，你只要载入同一个项目的代码包，开发者工具就会自动帮你恢复到以前开发项目时的个性化配置，包括编辑器的颜色、代码上传时自动压缩等一系列选项。
3. page.json（页面配置）
这里的page指的某个具体的小程序页面，比如a.json、b.json，page代表的a或者b。每个小程序都有一个对应的文件名，后缀为.json的配置文件。比如你的小程序文件名是huang，那么对应肯定有一个huang.json的配置文件。比如logs.json 用于表示 pages/logs小程序页面相关的配置。
如果你的小程序的风格是蓝色调，那么可以在app.json里声明顶部颜色是蓝色。实际情况可能不是这样，可能小程序里每个页面都用不同的颜色来区分不同功能模块，因此小程序开发者工具提供了page.json，让开发者可以独立定义每个页面的一些属性，例如设置顶部颜色、是否允许下拉刷新等。

1.3.2　WXML模板

从事过网页编程的人都知道，网页编程采用的工具是HTML+CSS+JavaScript这样的组合，其中，HTML用来描述当前页面的结构，CSS用来描述页面的样子，JavaScript通常用来处理这个页面和用户的交互逻辑。
同样，在小程序开发中也有类似的组合，其中WXML充当HTML的角色。打开pages/ index/index.wxml，你会看到WXML文件，.wxml文件代码示例如下：

<view class="container">
  <view class="userinfo">
    <button wx:if="{
  {!hasUserInfo && canIUse}}">获取头像昵称</button>
    <block wx:else>
      <image 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由标签、属性等构成。但是它们也有很多不一样的地方，下面我们一一阐述。
1.标签名字稍有不同
写HTML的时候，经常会用到的标签是div、p、span。开发者在写一个页面的时候可以根据这些基础标签组合出不一样的组件，例如日历、弹窗等。既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高开发效率呢？
从上面的例子可以看到，小程序的WXML用的标签是view、button、text等，这些标签是小程序给开发者包装好的基本能力，另外还提供了地图、视频、音频等组件。
2.多了一些类似于wx:if的属性以及{ { }}的表达式
在网页的一般开发流程中，我们通常会通过JavaScript操作DOM（对应HTML的描述产生的树），以引起界面的一些变化来响应用户的行为。例如，用户点击某个按钮时，JavaScript会把一些状态记录到JavaScript变量里，同时通过DOM API操控DOM的属性或者行为，进而引起界面的一些变化。当项目越来越大的时候，代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了MVVM开发模式（例如React、Vue等），提倡把渲染和逻辑分离。简单来说，就是不要再让JavaScript直接操控DOM，JavaScript只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系。
小程序的框架也是利用了这个思路。例如，把一个Hello World的字符串显示在界面上。
.wxml文件代码示例如下：

<text>{
  {msg}}</text>

.js文件代码示例如下：

this.setData({
    msg: "Hello World" })

通过{ { }}语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定尚不能完整地描述状态和界面的关系，还需要if/else、for等控制能力，在小程序里，这些控制能力都用wx:开头的属性来表示。

1.3.3　WXSS样式

WXSS具有CSS大部分的特性，小程序对WXSS还做了一些扩充和修改。例如，新增了尺寸单位。在写CSS样式时，开发者需要根据手机屏幕所具有的不同宽度和设备像素比，采用一些技巧来换算像素单位。WXSS在底层支持新的尺寸单位rpx，开发者可以免去换算的烦恼，只要交给小程序底层进行换算即可。由于换算采用的是浮点数运算，所以运算结果会和预期结果稍有偏差。
小程序提供了全局样式和局部样式。和前面app.json、page.json的概念类似，app.wxss可作为全局样式，作用于当前小程序的所有页面，page.wxss为局部样式，仅对当前页面生效。
此外，WXSS仅支持部分CSS选择器。

1.3.4　.js脚本交互逻辑

一个服务只有界面展示是不够的，还需要和用户进行交互，如响应用户的点击，获取用户的位置等。在小程序里面，我们可以通过编写.js脚本文件来处理用户的操作。.wxml文件代码示例如下：

<view>{
  { msg }}</view>
<button bindtap="clickMe">点击我</button>

点击button按钮的时候，我们希望把界面上msg显示成“Hello World”，于是我们在button上声明一个属性bindtap，在.js文件里面声明了clickMe方法来响应这次点击操作。.js文件代码示例如下：

Page({
   
  clickMe: function() {
   
    this.setData({
    msg: "Hello World" })
  }
})

响应用户的操作就是这么简单。
此外，还能在.js脚本中调用小程序提供的丰富的API，利用这些API可以很方便地调用微信提供的能力，例如获取用户信息、本地存储、微信支付等。在前边1.2节“第一个微信小程序”例子中，在pages/index/index.js就调用了wx.getUserInfo获取微信用户的头像和昵称，最后通过setData把获取到的信息显示到界面上。
通过本节，你了解了小程序涉及的文件类型以及对应的角色，在下一节中，我们介绍小程序提供的能力。

1.4　小程序的能力

1.启动
微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
接下来，通过app.json的pages字段可以知道当前小程序的所有页面路径，代码示例如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

这个配置说明在“第一个微信小程序”项目中定义了两个页面，分别位于pages/index/index和pages/logs/logs。写在pages字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。于是微信客户端把首页的代码装载进来，通过小程序底层的一些机制可以渲染出这个首页。
小程序启动之后，会执行在app.js定义的App实例的onLaunch回调，代码示例如下：

App({
  onLaunch: function () {
    //小程序启动之后触发
  }
})

整个小程序只有一个App实例，由全部页面共享。接下来，我们简单看看小程序的一个页面是怎么写的。
2.页面
可以观察到pages/logs/logs下包括了4种文件，微信客户端会先根据logs.json配置生成一个界面，顶部的颜色和文字都可以在这个JSON文件里面定义好。接下来，客户端会装载这个页面的WXML结构和WXSS样式。最后，客户端会装载logs.js，你可以看到logs.js的大体内容，代码示例如下：

Page({
  data: {    //参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    //页面渲染后执行
  }
})

Page是一个页面构造器，这个构造器生成了一个页面。在生成页面的时候，小程序框架会把data数据和index.wxml一起渲染出最终的结构，于是就得到了你看到的小程序的样子。
在渲染完界面之后，页面实例就会收到一个onLoad回调，可以在这个回调处理你的逻辑。
3.组件
小程序为开发者提供了丰富的基础组件，开发者可以像搭积木一样组合各种组件，将其拼合成自己的小程序。
与HTML的div、p等标签一样，在小程序里，你只需要在WXML中写上对应的组件标签名字，就可以把该组件显示在界面上。例如，你需要在界面上显示地图，只需要如下编写代码即可：

<map></map>

使用组件的时候，可以通过属性将值传递给组件，让组件展现不同的状态。例如，我们希望地图一开始时中心的经纬度是广州，那么需要声明地图的longitude（中心经度）和latitude（中心纬度）两个属性，代码示例如下：

<map longitude="广州经度" latitude="广州纬度"></map>

组件的内部行为也会通过事件让开发者可以感知。例如，用户点击了地图上的某个标记，你可以在.js脚本中编写markertap函数来处理，代码示例如下：

<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>

当然你也可以通过style或者class来控制组件的外层样式，以便适应你的界面宽度和高度等。
4. API
为了让开发者可以很方便地调用微信提供的能力，例如获取用户信息、微信支付等，小程序为开发者提供了很多API。
获取用户的地理位置，代码示例如下：

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude     //纬度
    var longitude = res.longitude    //经度
  }
})

调用微信扫一扫能力，代码示例如下：

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

需要注意的是，多数API的回调都是异步的，你需要处理好代码逻辑的异步问题。
当你开发一个小程序之后，就需要发布你的小程序。下节将介绍发布前需要做的准备工作。

1.5　小程序发布准备

如果你只是一个人开发小程序，可以暂时先跳过这部分，如果是一个团队开发小程序，需要先了解一些概念。
1.用户身份
如果是一个团队开发小程序，那么团队成员的身份管理是很有必要的。管理员可在小程序管理后台统一管理项目成员（包括开发者、体验者及其他成员），设置项目成员的权限。管理入口位于“小程序管理后台→用户身份→成员管理”，如图1-6所示。

图1-6　用户身份管理

对不同的用户可以设置不同的使用权限，如下所示。
开发者权限：可使用小程序开发者工具及开发版小程序进行开发。

• 体验者权限：可使用体验版小程序。
• 登录：可登录小程序管理后台，无须管理员确认。
• 数据分析：使用小程序数据分析功能查看小程序数据。
• 开发管理：小程序提交审核、发布、回退。
• 开发设置：设置小程序服务器域名、消息推送及扫描普通链接二维码打开小程序。
• 暂停服务设置：暂停小程序线上服务。

2.预览
使用开发者工具可以预览小程序，帮助开发者检查小程序在移动客户端上的真实表现。点击开发者工具顶部操作栏的“预览”按钮，开发者工具会自动打包当前项目，并上传小程序代码至微信的服务器，成功之后会在界面上显示一个二维码。使用当前小程序开发者的微信扫码即可看到小程序在手机客户端上的真实表现。
3.上传代码
同预览不同，上传代码是用于提交体验或者审核的。点击开发者工具顶部操作栏的“上传”按钮，填写版本号以及项目备注。需要注意的是，这里“版本号”以及项目“备注”是为了方便管理员检查版本，开发者可以根据自己的实际要求来填写这两个字段。
上传成功之后，登录“小程序管理后台→开发管理→开发版本”，就可以找到刚提交上传的版本了。可以将这个版本设置为“体验版”或者“提交审核”。
4.小程序的版本
小程序的版本有如下几种。

• 开发版本：使用开发者工具，可将代码上传到开发版本中。开发版本只保留每人最新的一份上传代码。点击“提交审核”，可将代码提交审核。开发版本可删除，不影响线上版本和审核版本中的代码。可以使用小程序开发者助手方便快捷地预览和体验线上版本、体验版本以及开发版本。
• 审核中版本：只能有一份代码处于审核中。审核结果通过后可以发布到线上，也可直接重新提交审核，覆盖原审核版本。
• 线上版本：线上所有用户使用的代码版本，该版本代码在新版本代码发布后被覆盖更新。

1.6　小程序上线

小程序上线需要两步：提交审核，发布。
1.提交审核
为了保证小程序的质量并符合相关的规范，小程序需要经过审核才可发布。在开发者工具中上传小程序代码之后，登录“小程序管理后台”，点击“开发管理→开发版本”，找到提交上传的版本。
在开发版本的列表中点击“提交审核”。按照页面提示填写相关的信息，即可以将小程序提交审核。
开发者要在严格测试版本之后，提交审核；多次审核不通过，可能会影响后续的审核时间。
2.发布
审核通过之后，管理员的微信中会收到小程序通过审核的通知，此时登录“小程序管理后台”，在“开发管理→审核版本”中可以看到通过审核的版本。点击“发布”，即可发布小程序。