小程序开发总结 第1篇
微信小程序的视图层由wxml和wxss组成。其中,wxss(WeiXin Style Sheets)是基于css拓展的样式语言,用于描述wxml的组成样式,决定wxml的组件如何显示。wxss具有css的大部分特性。
盒子模型就是我们在页面设计中经常用到的一种思维模型。在css中,一个独立的盒子模型由内容(Content)、内边距(padding)、边框(border)和外边距(margin)4个部分组成。此外对padding、border、margin可以进一步细化为上、下、左、右4个部分,在css中可以进行分别设置。图中个元素的含义如下:
运行结果图:
元素按显示方式分为块级元素、行内元素和行内块元素,他们的显示方式有display属性控制。
块级元素默认占一行高度,一行内通常只有一个块级元素(浮动后除外),添加新的块级元素时,会自动换行,块级元素一般作为盒子出现。
块级元素的特点如下:
项目运行结果图:
行内元素,不必从新一行开始,通常会与前后的其他行内元素显示在同一行中,他们不占有独立的区域,仅靠自身内容支撑结构,一般可以不设置大小,常用于控制页面中文本的样式。将一个元素的display属性设置为inline后,该元素就被设置为行内元素。
行内元素的特点如下:
项目运行结果图:
当元素的display属性被设置为inline-block时,元素被设置为行内块元素。行内块元素可以被设置宽度、高度、内边距和外边距。
示例代码如下:
项目运行结果图:
元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制,移到其父元素中指定位置的过程。在css中,通过float属性来定义浮动,其基本格式如下:
其中,none——默认值,表示元素不浮动。
left——元素向左浮动。
right——元素向右浮动。
项目运行结果图:此时我们发现,当box3左浮动后,父元素的边框未能包裹box3的元素。此时就需要通过清除浮动来解决。
由于浮动元素不再占用原文档流的位置,因此他会对页面中其他元素的排列产生影响。在css中,clear属性用于清除浮动元素对其他元素的影响,其基本格式如下:
其中,left——清除左边浮动的影响,也就是不允许左侧有浮动元素。
right——清除右边浮动的影响,也就是不允许右侧有浮动元素。
both——同时清除左右两侧浮动的影响。
none——不清除浮动。
项目运行结果图:
另外,我们还可以在父元素外添加一个空元素,实现父元素包裹浮动元素:
项目运行结果图:
浮动布局虽然灵活,但无法对元素的位置进行精确的控制。在css中,通过position属性可以实现对页面元素的精确定位。基本格式如下:
其中,static——默认值,该元素按照标准流进行布局。
relative——相对定位,相对于它在原文档流的位置进行定位,它后面的盒子仍然以标准流的方式对待他。
absolute——绝对定位,相对于其上一个已经定位的父元素进行定位,绝对定位的盒子从标准流中脱离,他对其后的兄弟盒子的定位没有影响。
fixed——固定定位,相对于浏览器窗口进行定位
项目运行结果图:
项目运行结果图:
项目运行结果图:
项目运行结果图:
项目运行结果图:
项目运行结果图:
flex布局可以简单快速的完成各种可以伸缩的设计,以便更好的支持响应式布局。flex布局主要由容器和项目组成,采用flex布局的元素成为flex容器,flex布局的所有直接子元素自动成为容器的成员,策划归纳为flex项目。
align-content:用来定义项目有多根轴线(出现换行后)在交叉轴上的对齐方式,如果只有一根轴线,该属性不起作用。语法格式如下:.box{align-content:flex-start|flex-end|center|space-between|space-around|stretch;}
本章首先介绍了页面布局中最基本的盒子模型,接下来介绍了浮动和定位,最后重点讲解了flex布局的基本原理、容器和项目的相关属性。
小程序开发总结 第2篇
页面结构文件(WXMI)是框架设计的一套类似 HITVL 的标签语言,结合基础组件、结合基础组件、事件系统,可以构建出页面的结构,即。wxml 文件。在小程序中,类似 HIML 的标签被称为组是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束如</vew >)标志,每个组件可以设置不同的属性(如id、dlass 等),组件还可以嵌套。
WXML 还具有数据绑定、条件数据绑定、列表数据鄉定、模板、引用页面文件、页面事件等能力。
小程序在进行绑定的时,框架会将WXML文件与逻辑文件中的data进行动态绑定,在页面中显示data中的数据。
1.简单绑定:用于使用双大括号({{ }})将变量打包起来,在页面中直接作为字符串输出使用、
注意:简单绑定作用于组件属性、控制属性时双大括号外应添加双引号。
2.运算:在{{ }}内可以做一些简单的运算(算术运算,逻辑运算,三元运算,字符串运算等)
示例代码:
条件绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。
通过判断true或false是否绑定当前组件
wx:if条件数据绑定是指使用WX:if这个属性来判断是否绑定当前组件。
需要通过一个表达式控制多个组件 可以通过
列表绑定用于将列表中的各项数据进行重复数据绑定。
在组件上,可以使用wx:for属性绑定一个数组,将数据循环绑定到该组件。
与block wx:if类似
在小程序中,如果要经常使用几个组件的组合(如“登录”选项),通常把这几个组件结合定义为一个模板,以后在需要的文件中直接使用这个模板
模板代码由 wxml组成,因此其定义也是在wxml文件中,定义模板的格式为:
示例代码
小程序开发总结 第3篇
设备相关的接口用于获取设备相关信息,主要包括系统信息、网络状态、拨打电话及扫码等。主要包括以下5个接口API:
(Object)接口、()接口分别用于异步和同步获取系统信息。其相关参数如表所示:
()接口或()接口调用成功后,返回相关系统信息,如表所示:
示例代码如下:
小程序运行结果图:
(Object)用于获取网络类型,其相关参数如表所示:
如果(Object)接口被成功调用,则返回网络类型包,有wifi、2g、3g、4g、unknow(Android下不常见的网络类型)、none(无网络)。
示例代码如下:
(CallBack)接口用于监听网络状态变化,当网络状态变化时,返回当_络状态类型及是否有网络连接。
示例代码如下:
(Object)接口用于实现调用手机拨打电话,其相关参数如表所示:
示例代码如下:
(Object)接口用于调起客户端扫码界面,扫码成功后返回响应的内容,其相关参数如表所示:
扫码成功后,返回的数据如表所示:示例代码如下:
本章主要介绍了小程序的各类核心API,包括网络API、多媒体API、文件API、本地数据及缓存API、位置信息API及设备相关API等。
小程序开发总结 第4篇
小程序的配置文件按作用范围可分为全局配置文件()和页面配置文件(*.json).
全局配置文件作用于整个程序,页面配置文件只作用当前页面。
可用来配置文件的路径、设置窗口表现、设定网络请求API的超时时间值以及配置多个切换页等。
下列是各全局配置项的相关描述:
全局配置文件内容结构如下:
//设置页面路径;
_pages_:[ ],
//设置默认页面窗口表现
_Window_:[ ],
设置底部tab的表现
_tabBar_:{ },
//设置网络请求API的超时时间值”
_networkTimeout _:{ },
//设置是否开启debug模式
_debug _:false
Window配置项负责设置小程序状态栏、导航条、标题、窗口颜色等系统样式。
Window配置参考表:
tabBar配置参考表如下:
其中list(列表)接收数组值,数组中每个项都是一个对象。
对象的数据值说明如下:
小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项进行统一设置,不能单独设置。
networkTimeout配置参考表如下:
debug 配置项用于开启开发者工具的调试模式。默认为false.
页面配置文件只能设置本窗口表现,而且只能设置Window配置项的内容。
配置页面文件后,页面中的Window配置将覆盖全局配置文件(就近原则)
小程序开发总结 第5篇
微信小程序的主体文件部分由3个文件组成,这三个文件必须放在项目的主目录中,负责小程序的主体配置,它们的名称是固定的:
小程序通常是由多个页面组成的,每个页面包含4个文件,同一页面的这4个文件必须具有相同的路径和文件名。当小程序被启动或小程序内的页面进行跳转时,小程序会根据设置的路径找到对应的资源进行数据绑定。
微信团队为小程序的开发提供了MINA框架。MINA框架通过微信客户端提供文件系统、网络通信、任务管理、数据安全等基础功能,对上层提供了一整套JavaScript API,让开发者能够非常方便地使用微信客户端提供的各种基础功能快速构建应用。
MINA框架的视图层有WXML与WXSS编写,由组件来进行展示。对于微信小程序而言,视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构;.wxss文件用于描述页面的样式。
逻辑层用于处理事务逻辑,对于微信小程序而言,逻辑层就是所有.js脚本文件的集合。微信小程序在逻辑层将数据进行处理后发送给视图层,同时接收视图层的事件反馈。
小程序系统默认提供的文件内容如下:
数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储)和网络存储与调用。
在小程序下的pages目录下新建demo文件夹,在demo文件夹下新建4个文件:,,,。
完善每个页面的内容:
在 文件中,添加我们页面文件
运行小程序,执行结果:
小程序的全局配置保存在全局配置文件中,使用全局配置文件来配置页面文件pages的路径,设置窗口window的表现,设定网络请求API的超时时间值networkTimeout以及配置多个切换页等。
全局配置项的相关描述:
全局配置文件内容的整体结构:
全局配置文件代码:
小程序运行效果图:
页面配置文件*.json只能设置本页面的窗口表现,而且只能设置window配置项的内容。在配置页面配置文件后,页面中的window配置值将覆盖全局配置文件中的配置值。
页面中的window配置只需书写配置项,不必书写window:
项目逻辑文件中可以通过App()函数注册小程序生命周期函数,全局属性和全局方法,已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。
小程序编译运行结果:
页面逻辑文件的主要功能有:设置初始数据;定义当前页面的生命周期函数;定义事件处理函数等,每个页面文件都有一个对应的逻辑文件,逻辑文件时运行在纯JavaScript引擎中。因此,在逻辑文件中不能使用浏览器提供的特有对象(document、window)及通过DOM操作改变页面,只能采用数据绑定和事件响应来实现。
我们可以在wxml文件中取出在js文件中定义的初始数据。
编译运行小程序运行结果:
onLoad:页面加载函数。当页面加载完成后调用该函数。
onSHow:页面显示函数。当页面显示时调用该函数。
onReady:页面数据绑定函数。当页面初次数据绑定完成时调用该函数。
onHide:页面隐藏函数。当页面隐藏时及当navigateTo或小程序底部进行tab切换时调用该函数。
onUnload:页面卸载函数。当页面卸载、进行navigateBack或redirectTo操作时,调用该函数。
页面结构文件wxml是框架设计的一套类似HTML的标签语言,结合基础组件、事件系统,可以构建出页面的结构,即.wxml文件。
小程序在进行页面数据绑定时,框架会将wxml文件与逻辑文件中的data进行动态绑定,在页面中显示data中的数据。小程序的数据绑定使用Mustache语法({{}})将变量或运算规则包起来。
编译运行小程序:
条件数据绑定就是根据绑定白哦大师的逻辑值来判断是否数据绑定当前组件。
列表数据绑定用于将列表中的各项数据进行重复数据绑定。
在小程序中,如果要经常使用几个组件的组合(如”登录“选项),通常把这几个组件结合定义为一个模板,以后再u需要的文件中直接使用这个模板。
在wxml文件中,不仅可以引用模板文件,还可以引用普通的页面文件。
简单来说,小程序中的事件是用户的一种行为或通信方式。在页面文件中,通过定义事件来完成页面与用户之间的交互,同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上,当达到触发条件时,事件就会执行逻辑层中对应的事件处理函数。
冒泡事件:
页面样式文件(wxss)是基于css扩展的样式语言,用于描述wxml的组成样式,静定wxml的组件如何显示。
wxss常用属性:
本章首先讲解了小程序的目录结构,然后通过目录结构介绍了小程序的开发框架,最后主要介绍了小程序文件的类型及其配置。