2.1微信小程序代码框架介绍

微信小程序开发

2.1微信小程序代码框架介绍1.微信小程序前端与网站前端网页的相同点与区别

2.1微信小程序代码框架介绍

1.微信小程序前端的开发技术使用wxml、js、wxss三种开发语言组合使用，见表3-2所示。表3-2微信小程序前端的开发技术2.微信小程序前端的开发技术

2.1微信小程序代码框架介绍3.微信小程序的文件类型

2.1微信小程序代码框架介绍

4.小程序的目录结构新建一个小程序项目

2.1微信小程序代码框架介绍

4.小程序的目录结构

2.2微信小程序JSON文件

主讲人：谭丽君微信小程序开发

2.2微信小程序JSON文件JSON是一种数据格式，不是编程语言。Json文件的语法格式：包含在一个大括号中，通过key：value键值对的方式来描述数据。key必须放在一对双引号中。最后特别强调，JSON文件中不能使用注释。

2.2微信小程序JSON文件（1）全局配置文件在项目的根目录有一个?app.json，它是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。

2.2微信小程序JSON文件（2）页面JSON文件在第2章新建项目目录中，?pages/index和?pages/logs?目录下的index.json和?logs.json文件，就是页面JSON文件。在页面JSON文件中可以设置顶部导航栏的背景颜色、文字。

主讲人：谭丽君2.3微信小程序代码WXML微信小程序开发

2.3.1WXML基本语法WXML是从HTML（超文本标签语言）衍生而来的一种在小程序前端页面使用的语言，WXML仍然是标签语言，使用标记标签来描述页面的结构，页面内容写在标签内部.

2.3.1WXML基本语法双标签：成对出现的标签。格式：关键词内容/关键词例如：视图容器view/view单标签：不成对出现的标签。格式：关键词/例如：输入框input/1.标签：标签由一对尖括号包围关键词。

2.3.1WXML基本语法通用属性大部分标签都有的属性。例如：class、id、style等专用属性不同标签有自己独特属性。例如：inputpassword=true/password作用：输入框中输入内容以小圆点显示2.标签属性:给组件设置参数用的。

2.3.1WXML基本语法3.常用组件

2.3.2制作第一个小程序pages:[pages/test/test,pages/index/index,pages/logs/logs],view第一个小程序/view?????????viewHello?World/view?????????inputplaceholder=请输入姓名/新建一个微信小程序运行效果步骤一app.json文件步骤二test.wxml文件

2.3.3制作“景区名片”页面1.“景区名片”页面框架大框viewclass=card大标题框viewclass=big-title图片image内容框viewclass=content小标题框viewclass=small-title段落框viewclass=dl

2.3.3制作“景区名片”页面1.“景区名片”页面代码pages:[pages/jqmp//jqmp,pages/index/index,pages/logs/logs],viewclass=card viewclass=big-title荔波小七孔/view imagesrc=../../images/lb.jpg/image viewclass=content viewclass=small-title简介/view viewclass=dl小七孔风景区位于贵州省荔波县城南部30余公里的群峰之中，景区全长7公里，面积约10平方公里，有百多个游览景点。是集山、水、林、洞、湖、瀑为一体的原始奇景。1988年被列为国家级自然保护区。/view /view /view步骤一app.json文件步骤二jqmp.wxml文件

2.3.4制作“比较成绩”页面1.“比较成绩”页面框架框框按钮框框框按钮框文本输入框文本输入框文本

2.3.4制作“比较成绩”页面

2.“比较成绩”页面WXML代码viewtext请输入语文成绩/textinputtype=number//viewviewtext请输入数学成绩/textinputtype=number//