招财喵项目实践

引言

在系统分析与设计课程中，我们小组开发了微信小程序【招财喵】。此前，我们五个人都没有微信小程序的开发经验，完全是根据官方文档来摸索。经过一个学期的努力，我们都积累了一定经验，在此分享一下我是如何入门微信小程序开发的。

准备工作

微信公众平台

在开发微信小程序的过程中，我们需要经常使用微信公众平台，建议收藏微信公众平台。

微信开发者工具

微信小程序需要在微信开发者工具（IDE）上进行开发，必须下载微信开发者工具。

第一个小程序

小程序账号

首先，需要在微信公众平台注册一个小程序账号。切记每个邮箱只能申请一个小程序，相当于给小程序绑定了邮箱。由于招财喵是团队项目，因此我们专门申请了一个邮箱，用于小程序开发。（推荐163网易邮箱，注册方便）

成员管理

登录小程序账号，左侧菜单和上方导航栏有很多功能，可以慢慢熟悉。作为一个初学者，我们可以不用管大部分的功能，先将小组成员添加进来。进入左侧菜单的【管理】-【成员管理】页面，可以看到有三种成员，分别是管理员、项目成员和体验成员。组长将自己添加为管理员，然后将组员添加为项目成员，开放所有权限，因为只有获得开发者权限的项目成员才能使用开发者工具开发这个小程序。而体验成员只能使用体验版小程序，暂时不用添加，在后面再作介绍。

AppID

进入左侧菜单的【设置】页面，可以看到小程序的AppID，用于小程序的身份识别，在后续开发中会用到。

Hello World

打开微信开发者工具，新建小程序如下。需要填写的信息包括项目名称、本地存储目录以及刚刚提到的AppID，还需要选择开发模式和后端服务。开发模式选择【小程序】，后端服务选择【小程序 · 云开发】。其中选择云开发是为了使我们的开发更简便，因为云开发可以提供数据库、存储和云函数等云端支持，无需搭建服务器。

由于新建的项目已经搭建好了微信小程序的框架，因此我们直接点击顶部菜单【编译】，在左侧预览Hello World小程序。注意每次保存代码都会重新编译，可以即时预览小程序。

也可以点击顶部菜单【预览】，扫描二维码在手机上预览Hello World小程序。注意预览的二维码有失效时间，因此不适用于demo展示，一般仅用作开发调试。

Hello World小程序显示如下。

代码结构

文件目录

预览完Hello World小程序之后，我们来看看需要在哪些文件中编写代码。首先文件目录如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Hello World
    │  app.js
    │  app.json
    │  app.wxss
    │  project.config.json
    │  sitemap.json
    │  
    ├─pages
    │  ├─index
    │  │      index.js
    │  │      index.json
    │  │      index.wxml
    │  │      index.wxss
    │  │      
    │  └─logs
    │          logs.js
    │          logs.json
    │          logs.wxml
    │          logs.wxss
    │          
    └─utils
            util.js

其中app.json是全局配置文件，app.wxss是全局样式文件，util.js是全局工具文件。在pages文件夹中，每一个文件夹表示一个页面，每个页面包括.json, .wxml, .wxss, .js共4个文件，分别表示页面的配置、结构、样式、逻辑。

app.json

app.json是全局配置文件，实际上就是以JSON数据格式的形式描述配置。其中pages字段描述小程序的所有页面路径，第一个路径指向的页面即小程序的首页，当小程序跳转页面失败时，可以检查一下pages有没有包含页面对应的路径，而window字段描述小程序的页面样式，最简单的就是通过navigationBarBackgroundColor字段调整页面的颜色。

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

app.wxss

app.wxss是全局样式文件，在这里定义的样式类会应用到所有页面。

1
2
3
4
5
6
7
8
9
10
/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

util.js

util.js是全局工具文件，在这里定义常用函数并在页面中引用。定义常用函数并导出如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function getTime() {
  var date = new Date()

  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()

  return [year, month, day, hour, minute, second].join("-")
}

module.exports = {
  getTime: getTime
}

在页面中加载utils.js并使用如下

1
2
var util = require('../../utils.js')
var currTime = util.getTime()

.json

.json是页面的配置文件，与app.json的区别在于页面的.json文件只描述该页面的配置，常用的字段有navigationBarTitleText，用于描述页面的标题。

1
2
3
4
{
  "navigationBarTitleText": "",
  "usingComponents": {}
}

.wxml

.wxml是页面的结构文件，对应传统Web应用的.html文件，语法也与.html文件类似。增加的特性包括

  • 常用标签为view、button、text而不是div、p、span
  • 增加了wx:if、wx:for等属性
1
2
3
4
5
6
<!--index.wxml-->
<view class="container">
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

.wxss

.wxss是页面的样式文件，对应传统Web应用的.css文件，语法也与.wxss文件类似。增加的特性包括

  • 新增了尺寸单位rpx，可以适配不同的手机屏幕
  • 提供了全局样式和局部样式
1
2
3
4
/**index.wxss**/
.usermotto {
  margin-top: 200px;
}

.js

.js是页面的逻辑交互文件，对应传统Web应用的.js文件，语法也与.js文件类似。需要注意的是，与.wxml进行绑定的数据都要在data中声明，并且更新时必须使用setData函数。

1
2
3
4
5
6
7
8
9
10
11
//index.js
Page({
  data: {
    motto: 'Hello World'
  }
})

// update
this.setData({
  motto: ''
})

发布小程序

体验版本

当我们完成微信小程序的开发时，可以上传源代码，让更多的用户来使用。首先点击顶部菜单【上传】将开发版本上传到微信公众平台

然后在微信公众平台进入左侧菜单的【管理】-【版本管理】页面，发布体验版小程序

开发版和体验版的区别在于，开发版仅供开发者使用，而体验版还可以为体验成员提供服务。我们可以将其他人添加为体验成员，扫描二维码即可使用体验版小程序。

线上版本

如果想将小程序发布上线，还需要提交审核，同样在【版本管理】页面进行相应的操作。因为招财喵涉及到问答业务，需要申请企业主体小程序，所以最终没有通过审核，个人认为要通过小程序的审核还是比较难的。

结语

由于我主要参与前端的开发，所以对云开发服务端不太熟悉，不过作为一篇入门教程，按照上述步骤已经可以避免踩到很多坑了。如果有更多需求，可以参考微信官方文档，遇到问题可以在社区中提问。总的来说，对于有一定编程基础的程序员，微信小程序的开发并不难，我在这次项目实践中只是初步使用了微信小程序，希望在以后可以继续深入学习。

参考资料

微信官方文档 · 小程序