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

基础知识
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.www.zhaoweb.cn
// Register a Page.
Page({
data: ‘Baixing‘,
onChangeName: function(e) {
// sent data change to view
this.setData({
name: ‘MINA‘zhaoweb.cn
})
}
})
以上通过框架将逻辑层数据中的 name 与视图层的 name 进行了绑定,所以在页面打开的时候会显示 "Hello Baixing!",
当点击按钮的时候,视图层会发送 onChangeName 的事件给逻辑层,逻辑层找到对应的事件处理函数。逻辑层执行了 setData() 的操作,将 name 从 Baixing 变为 MINA,因为该数据和视图层已经绑定了,从而视图层会自动改变为 "Hello MINA!" 。

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

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

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

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

文件 作用
app.js 小程序启动入口文件
app.json 小程序公共设置,如注册路由信息
app.wxss 小程序公共样式表
一个小程序页面由四个文件组成,分别是:

文件 作用
js 页面的具体逻辑功能,如页面的分享等逻辑方法
wxml 页面的结构,MINA 框架提供的各种组件便用于此
wxss 页面样式表,类似 Web 开发的 CSS 文件,用于控制页面的具体显示样式
json 页面配置,用以配置 MINA 框架提供的特有功能,如下拉刷新是否启用等配置信息
注意:以上的四个文件必须具有相同的路径和文件名。

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

当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后 (温馨官方文档 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)
})

}
...
})

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

上一篇:低版本IE浏览器 input元素出现叉叉的情况


下一篇:微信小程序开发入门与实践(1)