微信小程序开发【PPT课件】03-小程序框架.pptx

第3章 小程序框架《微信小程序开发——从入门到项目实战》学习目标|Target 了解微信小程序的JSON配置 掌握微信小程序的 WXML模板 掌握事件、 WXSS样式以及模块化、wx对象、 console对象、断点调试 掌握获取微信小程序JavaScript逻辑交互小程序开发框架概述 小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。整个小程序框架系统分为两部分：逻辑层（App Service）和视图层（View）。小程序提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。 小程序代码由配置代码JSON文件、模板代码WXML文件、样式代码WXSS文件、逻辑代码JavaScript文件组成以及WXS脚本文件组成。本章主要讲解微信小程序配置代码JSON文件的常用配置、WXML语法（包括数据绑定、列表渲染、条件渲染、模板及引用）等。目录|Contents01JSON配置WXML模板02 JavaScript逻辑交互03目录|Contents04事件 WXSS样式05其他06一、JSON配置1.1 什么是JSON配置 什么是JSON配置1.1 什么是JSON配置JSON对象是一个无序的“键/值”（也叫名“名称/值”、“key/value”）对组成的集合。一个JSON对象以“{”（左括号）开始，“}”（右括号）结束，每个“键”后跟一个“:”（冒号），“键/值”对之间使用“，”（逗号）分隔。1.1 什么是JSON配置1.JSON语法衍生于JavaScript对象表示法语，是JavaScript对象表示语法的一个子集，其语法规则如下：<1>、数据在名称/值对中；<2>、数据由逗号分隔；<3>、{}容纳对象<4>、[]容纳数组2.在JSON中，键值对中值的数据类型是有限制的，必须是以下数据类型之一：<1>、字符串<2>、数字<3>、对象（仅限JSON对象，嵌套效果）<4>、数组（数组的内容可以为JSON对象）<5>、布尔<6>、null1.1 什么是JSON配置JSON举例1、简单JSON代码示例3-1 简单的JSON{ "name":"王兴", "gender":"女", "age":27}1.1 什么是JSON配置JSON举例2、复杂的JSON{ "name" : "王兴", "gender" : "女", "age" : 27, "parents" : { "mother" : { "name" : "李绒", "gender" : "女", "age" : 49 }, "father" : { "name" : "王全", "gender" : "男", "age" : 50 } }, 1.1 什么是JSON配置 "hornor" : [{ "name" : "微信小程序应用开发赛", "level" : "省级三等奖" }, { "name" : "全国职业院校技能大赛云安全技术应用", "level" : "国家级三等奖" }]}1.1 什么是JSON配置JSON举例1.2 JavaScript对象、JSON对象与JSON字符串 先定一个小目标！了解JavaScript对象、JSON对象与JSON字符串1.2 JavaScript对象、JSON对象与JSON字符串JavaScript对象、JSON对象与JSON字符串异同区别JavaScript对象JSON对象JSON字符串含义类的实例类的实例仅仅是一种数据格式传输不能传输不能传输可以跨平台数据传输，速度快表现键值对方式，属性不加引号、值可以是函数、对象、字符串、数字、boolean等键值对的方式，属性必须加双引号、值不可以是方法函数、undefined以及NAN键值对的方式，属性必须加双引号值不可以是方法函数、undefined以及NAN举例let p;p.name = "王兴";p.gender = "女";p.age = 27let p = {"name" : "王兴","gender" : "女","age" : 27}let p='{"name" : "王兴","gender" : "女","age" : 27}'相互转换JS对象转换为JSON字符串JSON.stringify(obj)JSON对象转字符串JSON.stringify(obj)JSON字符串转换为JS对象JSON.parse(str)1.3 JSON配置文件JSON除了以JSON数据格式或JSON对象的形式参与微信小程序开发，JOSN还可以是配置文件。JSON作为配置文件与JSON数据格式或JSON对象是完全不同的事物，JSON