微信小程序开发入门与实践

基础知识

MINA 框架

为方便微信小程序开发，微信为小程序提供了 MINA 框架，这套框架集成了大量的原生组件以及 API。通过这套框架，我们可以方便快捷的完成相关的小程序开发工作。

MINA 框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，因此我们主要聚焦于数据与逻辑上。

响应的数据绑定

框架的核心是一个响应的数据绑定系统。
整个系统分为两块：视图层（View）和逻辑层（App Service），
通过框架，可以让数据与视图保持同步变得很简单。当我们修改数据的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。
通过下面的例子来看：

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="onChangeName"> Click me! </button>

// This is our App Service.
// Register a Page.
Page({
  data: 'Baixing',
  onChangeName: function(e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  }
})

以上通过框架将逻辑层数据中的 name 与视图层的 name 进行了绑定，所以在页面打开的时候会显示 "Hello Baixing!"，
当点击按钮的时候，视图层会发送 onChangeName 的事件给逻辑层，逻辑层找到对应的事件处理函数。逻辑层执行了 setData() 的操作，将 name 从 Baixing 变为 MINA，因为该数据和视图层已经绑定了，从而视图层会自动改变为 "Hello MINA!" 。

页面管理

框架管理小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册进框架中，其他的一切复杂的操作都交由框架处理。

基础组件

框架提供了一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，我们通过组合基础组件，就可以很方便的创建出强大的微信小程序。详情参考微信小程序组件文档。

丰富的 API

MINA 框架提供丰富的微信原生 API，可以方便地调起微信提供的能力，如获取用户信息，本地存储，支付功能等。如果想了解更多，请参考微信小程序 API 文档。

小程序目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录下：

一个小程序页面由四个文件组成，分别是：

注意：以上的四个文件必须具有相同的路径和文件名。

小程序的运行机制

注意小程序是没有重启的概念的，主要的运行机制如下：

• 当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后 (温馨官方文档 5 分钟) 会被微信主动销毁。
• 被置顶的小程序不会被微信主动销毁。
• 当收到系统内存警告也会进行小程序的销毁。

开发实践

讲了很多原理性的东西，如果没有实际实践的话，也只是一纸空谈。下面将以一个记账小程序作为开发实践，这个小程序用以记录每日花费以及具体花费说明。

在开始前，请下载小程序开发工具。

创建项目

这里因为没有申请 AppID，所以选择了无 AppID 开发模式。如果有要使用 AppID 进行开发，可通过微信小程序官网进行配置，这里就不细说，具体参考微信小程序官网文档说明。

开发工具的开始页面：

如上，我们填写好项目名称，选择项目目录后，点击添加项目，就进入所创建项目的开发界面，如下:

• 在左侧的编辑选项卡下，可以进行代码的编辑工作。
• 在调试选项卡下，可以进行调试工作，如断点调试、查看当前存储信息、模拟坐标等。
• 在项目选项卡下，可以配置当前的程序运行选项，如是切换基础库版本、生成小程序预览等。

创建页面

我们的程序主要有两个页面，一个是展示所有记账记录的首页页面，一个是添加记账的页面。在开发工具编辑选项卡下，点击添加新建，输入要创建的文件就可以了。完成后具体的目录如下：

在上面的（Pages）目录中，每个不同的页面目录下存在 4 种不同的文件格式。在基础知识部分，有讲解过不同格式具体的作用，这里不再赘述。接下来就进入实际的编码工作吧。

编写代码

1. 首页的具体功能包括：

• 统计花费总额
• 展示每次记录的概要信息

页面主要逻辑代码如下：

import {
  loadAllRecord,
  deleteRecordById 
} from '../../services/tallyService.js'
var app = getApp()

Page({
  data: {
    userInfo: {},
    list: [],
    totalMoney: 0
  },
  ...
  // 加载已存的每日花费记录，且统计总共花费的金额。
  fetchData() {
    wx.showLoading({
      title: '加载数据中...',
    })

    var self = this
    loadAllRecords((list) => {
      var totalMoney = 0
      list.forEach((item) => {
        totalMoney += Number(item.money)
      }) 
      self.setData({list, totalMoney})

      self.customerData.isFirstShow = false
      setTimeout(() => {
        wx.hideLoading()
      }, 1000)
    })
  }
  ...
})

页面结构代码如下：

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <view class="info-view">
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      <text class="money-text">总花费：{{totalMoney}}元</text>
    </view>
  </view>
  <view class="list-view">
    <block wx:for="{{list}}" wx:key="*this">
      <view class="tally-cell">
        <text class="detail-text">{{item.detail}}</text>
        <text class="money-text">{{item.money}}元</text>
        <text class="time-text">{{item.time}}</text>
      </view>
    </block>
  </view>
  <navigator class="add-button" url="../record/record" open-type="navigate">记一笔</navigator>
</view>

2. 记录页面主要功能：

• 用于记录具体的花费金额以及花费详情

页面主要逻辑代码如下：

import {addNewRecord} from '../../services/tallyService.js'
var app = getApp()

Page({
  ...
  onSaveRecord() {
    let record = {
      money: this.customerData.money, 
      detail: this.customerData.detail
    }
    addNewRecord(record, (res)=>{
      console.log(res)
      wx.navigateBack({})
    })
  }
})

页面结构代码如下：

<!--record.wxml-->
<view class="container record-view">
  <view class="money-view">
    金额：
    <input placeholder="请输入要记录的花费金额..." 
      bindblur="onMoneyBlured" 
      maxlength="10" 
      placeholder-style="font-size: 14px;"
      confirm-type="done" 
      type="digit" 
      auto-focus
      value="{{money}}"
      bindinput="onMoneyChanged"/>
  </view>
  <view class="detail-view">
    花费记录：
    <textarea class="detail-textarea"
      placeholder-style="font-size: 14px;"
      placeholder="请输入具体的花费详细吧..."
      maxlength="160"
      cursor-spacing="10"
      bindinput="onDetailChanged"/>
  </view>
  <button class="save-button" 
    catchtap="onSaveRecord" 
    formType="submit" 
    disabled="{{ !canSave }}">
    保存
  </button>
</view>

3. 记录 Dao 类

主要逻辑代码如下：

var records = []
import {formatTime} from '../utils/util.js'

function addNewRecord({money, detail}, callback) {
  let id = records.length
  let time = formatTime(new Date())
  let record = {id, money, detail, time}
  records.push(record)

  if (typeof callback === 'function') {
    callback(true)
  }
}

function loadAllRecord(callback) {
  if (typeof callback === 'function') {
    callback(records)
  }
}

module.exports = {
  addNewRecord,
  loadAllRecord
}

预览

如果是通过填写 AppID 进行开发，在开发工具的项目选项卡下，点击预览即可生成当前小程序二维码。然后使用具有开发者或体验者权限的微信帐号扫一扫二维码，即可真机操作小程序。具体设置如下图所示：

我这里因为是通过无 AppID 开发，所以只能通过开发工具进行预览了。

最终的程序运行页面如下：

本文完整代码下载：github.com/wanghongli1…

尾注

当前小程序开发的热度已然越演越烈，各种小程序层出不穷。希望本文能给正打算开发微信小程序或者对微信小程序开发感兴趣的小伙伴们带来一些帮助，感谢阅读。