基础知识

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
，，，可以利便地调起微信提供的能力
，，，如获取用户信息
，，，外地存储
，，，支付功效等。。。

小程序目录结构

小程序包括一个形貌整体程序的 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 开发
，，，以是只能通过开发工具举行预览了。。。

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