helloworld-微信小程序开发教程-入门篇

Posted 2020-11-01 slim

1. 开篇导言   

• 本节目标：通过上一节的讲解，相信大家对微信小程序有了初步的了解。接下来将会对小程序的框架进行简单介绍。
• 目标用户：无编程经验，但对微信小程序感兴趣的同学。
• 学习目标：了解MINA框架的基本特征，并对数据绑定和页面(Page)有概念上的认识。
• 案例分析：对于helloworld小程序的进行讲解。
• 代码下载
• 传送门：

目录：微信小程序教程-开篇导言-很快微信小程序社区
上一篇：【helloworld】-微信小程序教程-入门篇【1】-很快微信小程序社区
下一篇：【helloworld】-微信小程序教程-入门篇【3】-很快微信小程序社区

• 备注：有编程经验或看过微信官网简易教程的同学，请酌情略过该章节。

2. 框架概述

• 业务逻辑部分

MINA(MINA IS NOT APP)是在微信中开发小程序的框架。

• 框架结构

MINA框架由两部分组成：视图层(View)和逻辑层(App Service)。         
逻辑层：由js(javascript)编写。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
视图层：由WXML(WeiXin Markup Language)与WXSS(WeiXin Style Sheets)编写。将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

• 框架特征

响应式的数据绑定：用响应式数据绑定的方式，在视图层和逻辑层之间进行通信。从某种程度上，可以看成是MVVM模式。
页面管理：MINA在很高的层级上(页面：Page)对业务逻辑进行程序建模，即通过页面的组织方式来实现不同的业务逻辑，从而提高研发效率。赞！！！！！！！
从MINA本身来看，其通过管理整理小程序的页面路由来做到页面之间的无缝切换，并给以页面完整的生命周期。
从开发者的角度上看，我们只需聚焦于页面的数据，方法，生命周期函数的注册，其他的复杂的操作都交由MINA处理(从官网提供资料来看是这样)。

3. 响应式数据绑定-初探

在例子helloworld中，我们通过【motto】将【视图层-view】和【逻辑层-app service】绑定在一起，从而在运行状态下，显示为【Hello world】，如下图所示：  


接下来我们将显示的【Hello World】更改为【Hello MINA】。           
修改流程：在index.js中的第六行，将【motto: ‘Hello World‘,】更改为【motto: ‘Hello MINA‘,】，然后【保存-Ctrl+s】。依次点击【调试】，【重启】，我们会看到更改后的【Hello MINA】。具体如下图：
  

4. 页面-初探

一个MINA页面由四个文件组成，如下图：

(来自于官网)

注意：为了方便开发者减少配置项，我们规定描述页面的这四个文件必须具有相同的路径与文件名。 

5. 小结

知识点：了解MINA框架的基本特征，并对数据绑定和页面(Page)有概念上的认识。

6. 预告

下一节通过对helloworld项目的深入讲解，来了解MINA框架的目录结构和配置。