基础知识

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 举行开发，，可通过微信小程序官网举行设置，，这里就不细说，，详细参考微信小程序官网文档说明。
。。

开发工具的最先页面：

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

• 在左侧的编辑选项卡下，，可以举行代码的编辑事情。
  。。
• 在调试选项卡下，，可以举行调试事情，，如断点调试、审查目今存储信息、模拟坐标等。
  。。
• 在项目选项卡下，，可以设置目今的程序运行选项，，如是切换基础库版本、天生小程序预览等。
  。。

建设页面

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

在上面的（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 开发，，以是只能通过开发工具举行预览了。
。。

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