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

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框架的目录结构和配置。

原文地址:https://www.cnblogs.com/slim/p/8946657.html

时间: 2024-10-26 02:27:34

helloworld】-微信小程序开发教程-入门篇【2】的相关文章

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

1. 开篇导言 本节目标:通过上一节的讲解,相信大家对小程序框架MINA的目录结构和配置有了一定的了解.接下来将会讲解视图层,逻辑层及其之间的交互. 目标用户:无编程经验,但对微信小程序感兴趣的同学. 学习目标:了解MINA框架的视图层(View),逻辑层(App Service),及其之间的交互. 案例分析:helloworld小程序. 代码下载 传送门: 目录:微信小程序教程-开篇导言-很快微信小程序社区上一篇:[helloworld]-微信小程序教程-入门篇[3]    下一篇:未开启.

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

1. 开篇导言 本节目标:旨在演示如何用开发者工具构建并运行简单的 helloworld 应用. 目标用户:无编程经验,但对微信小程序感兴趣的同学. 学习目标:开发者工具的基本使用流程,即创建.导入.删除.关闭项目. 案例分析:创建helloworld应用,相似于微信官网简易教程中的quickstart demo. 代码下载 传送门: 目录:微信小程序教程-开篇导言-很快微信小程序社区下一篇:[helloworld]-微信小程序教程-入门篇[2]-很快微信小程序社区 备注:有编程经验或看过微信官

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

1. 开篇导言 本节目标:通过上一节的讲解,相信大家对小程序框架MINA有了初步了解.接下来将会对其进行深入介绍. 目标用户:无编程经验,但对微信小程序感兴趣的同学. 学习目标:了解MINA框架的目录结构和配置. 案例分析:helloworld小程序. 代码下载 传送门: 目录:微信小程序教程-开篇导言-很快微信小程序社区上一篇:[helloworld]-微信小程序教程-入门篇[2]-很快微信小程序社区    下一篇:[helloworld]-微信小程序教程-入门篇[4]-很快微信小程序社区.

微信小程序开发之入门篇(熟悉项目结构)

微信小程序创建之后会生成一个项目模板,如下图所示(基本如此,但并不局限于此) 现在分别来说明一下每个文件及目录的意思 app.js 程序的入口文件,必须存在. app.js是小程序的脚本代码.我们可以在这个文件中监听并处理小程序的生命周期函数.声明全局变量.调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据. app.json app.json 是对整个小程序的全局配置.我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题.注意该文件

微信小程序开发的入门教程

广州微信小程序开发公司(www.dthulian.com)品向科技,下面跟大家详细介绍微信小程序开发的入门教程: 开发前准备: 注册小程序帐号 绑定开发者 登录微信公众平台小程序,进入用户身份- 开发者,新增绑定开发者. 已认证的小程序可以绑定不多于20个开发者.未认证的小程序可以绑定不多于10个开发者. 获取AppID下载并安装开发者工具 下载完成后,使用管理员或者绑定的开发者微信号扫码登录. 一个微信小程序 创建项目 我们需要通过开发者工具,来完成小程序创建和代码编辑. 开发者工具安装完成后

微信小程序开发教程目录

本系列教程是自己在工作中使用到而记录的,没有顺序之分 如有错误之处,请给与指正,也不希望误导了别人 微信小程序开发教程目录 微信小程序之注册和入门 微信小程序之HTTPS请求 微信小程序开发之选项卡 微信小程序开发之picker 微信小程序开发之图片预览 微信小程序开发之模板 微信小程序开发之模板消息

微信小程序开发教程集合

微信小程序开发教程集合?不少朋友都知道现在是小程序发展如火如荼的时候,甚至不少朋友都准备进入小程序开发这个领域.但是互联网上各种信息浩如烟海,如何在这些繁杂的信息中找到自己所需要的,这对于不少人来说是个问题,来现在多享科技为你详细讲述一下微信小程序开发教程,希望可以帮助小程序开发者节约一些时间. 微信小程序开发教程官方文档 作为小程序开发这一领域的开创者以及裁判员,微信官方对于小程序是寄予厚望,微信小程序的版本更迭非常迅速.小程序开发者必须重视微信官方文档教程 小程序开发文档:developer

微信小程序开发教程,大多数人都搞错的八个问题

小程序目前被炒得沸沸扬扬,无数媒体和企业借机获取阅读流量. 这再次证明一点,微信想让什么火,真的就能让什么火.这种能力真是全中国再也没有人有了,政府也没有. 但四处传的消息很多是失真的,废话不说,先列出8个多数人都搞错的问题: 小程序是HTML5: 小程序是B/S的: 把M站改改就可以接入到小程序里: 小程序体验不佳: 小程序适合低频长尾应用: 小程序是新的Appstore: 小程序做不起来,需求不高: 小程序会做起来,但会和原生应用长期并存. 以上8个是很多人凭直觉得出的结论,但真正深度调研和

微信小程序开发教程

9月21日晚发布的微信公众平台·小程序内侧邀请,微信应用号(小程序,「应用号」的新称呼)终于来了!目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子? 怎样将一个「服务号」改造成为「小程序」?相信很多技术人员开始关注,会不会取代APP开发,一些职位会不会被取代. 现在带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志.下载源码