web期末复习-小程序框架

这篇具有很好参考价值的文章主要介绍了web期末复习-小程序框架。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.逻辑层

1.逻辑层是处理事务逻辑的层,是MINA事务交互的逻辑中心

2.视图层和逻辑层是双线程通信的,视图层和逻辑层之间提供了数据传输和事件系统

3.视图层和逻辑层通过系统层的JSBridge进行通信

4.逻辑层把数据变化通知到视图层,触发视图层的页面更新

5.视图层把出发的事件通知给逻辑层进行业务处理

6.在逻辑层发生数据变更的时候,需要APP Service提供的的setData方法把数据从逻辑层传递到视图层。

web期末复习-小程序框架,小程序

web期末复习-小程序框架,小程序

web期末复习-小程序框架,小程序

web期末复习-小程序框架,小程序

web期末复习-小程序框架,小程序

小程序的生命周期:

小程序的生命周期包含小程序应用生命周期小程序页面的生命周期

小程序的页面生命周期包括五个生命周期钩子:

页面初次加载:onLoad

单页面显示后:onShow

页面初次渲染后:onReady

在前页面的基础打开一个新的页面:onHide

关闭当前页:onUnload

小程序的应用生命周期

web期末复习-小程序框架,小程序

注册页面的生命周期

web期末复习-小程序框架,小程序

小程序API

web期末复习-小程序框架,小程序

2.视图层

①WXML:类似于HTML

1.数据绑定:在WXML页面在可以使用{{变量名}}的形式表示动态数据

简单绑定

eg:

<view>{{}}</view>

Page({

data:{

msg:'你好!'

}文章来源地址https://www.toymoban.com/news/detail-778608.html

})

属性绑定

<view id='{{id}}'>测试</view>

Page({

data:{

id:'myView'

}

})

控制属性绑定

<view wx:if='{{condition}}'>测试</view>

Page({

data:{

condition:false

}

})

关键字绑定

<view wx:if='{{false}}'>测试1</view>

运算绑定

<!--WXML页面代码-->

<view> {{a + b}} + {{c}} + d </view> <!--显示的结果是3+3+d-->

//JS文件代码

Page

({   data: {     a : 1, b : 2, c : 3    }

})

组合绑定

<view wx:for='{{[1,2,x,4]}}'>{{item}}</view>

//JS文件代码

Page({

data:{

x:3

}

})

2.列表渲染

简单列表

wx:for实现列表渲染,wx:for绑定一个数组

<view wx:for='{{array}}'>学生{{index}}:{{item}}</view>

//JS代码

Page({

data:{

array:['张三','李四','王五']

}

})

web期末复习-小程序框架,小程序

<view wx:for='{{array}}' wx:for-index='stuID' wx:for-item='sruName'>

学生{{stuID}}:{{stuName}}

</view>

//JS

Page({

data:{

['张三','李四','王五']

}

})

嵌套列表

<view wx:for='{{array}}' wx:for-item='i'>

    <view wx:for='{{array}}' wx:for-item='j'>

        <view wx:if="{{i<=j}}">{{i}}*{{j}}={{i*j}}

        </view>

    </view>

</view>

//JS

Page({

data:{

array;[1,2,3,4,5,6,7,8,9]

}

})

web期末复习-小程序框架,小程序

多节点列表

可以将wx:for用在<block>标签上,以渲染一个包含多节点的结构块。

注:<block>并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染。

<block wx:for="{{['张三','李四','王五']}}"

<view>学号:{{index}}</view>

<view>姓名:{{item}}</view>

</block>

web期末复习-小程序框架,小程序

wx:ket属性

若要避免乱序的情况或不想看到该提示,可以使用wx:key属性来指定列表中的项目唯一标识符。

<view wx:for="{{['张三','李四','王五']}}"

wx:key='stu{{index}}'>

<view>学生{{index}}:{{item}}</view>

</view>

3.条件渲染

简单条件

<view wx:if="{{condition}}">测试组件</view>

//JS

Page({

data:{

condition:true

}

})

多节点条件

如果要一次性判断多个组件标签,可以使用<block>标签将多个组件包装起来,并在<block>上使用wx:if控制属性。

<block wx:if={{true}}>

<view>view1</view>

<view>view2</view>

</block>

4.模板

小程序框架允许在WXML文件中提供模板(template

模板可以用于定义代码片段,然后在不同的页面被重复调用。

1)定义模板

小程序使用<template>WXML文件中定义代码片段作为模板使用,每个<template>都使用name属性自定义模板名称。

<template name="myTemp">

<view>

<text> Name:{{name}}</text>

<text> Age:{{age}}</text>

</view>

</template>

2)使用模板

在新的WXML页面继续使用<template>标签就可以引用模板内容了,引用的<template>标签必须带有is属性,该属性值用于指定正确的模板name名称才能成功引用,然后使用data属性将模板所需要的数据值传入。

<template is="myTemp" data="{{...student}}"/>

//JS

Page({

data:{

student:{

name:'张三',

age:20

}

}

})

5.事件

5. 事件

事件是视图层到逻辑层的通讯方式,有以下特点:

可以将用户的行为反馈到逻辑层进行处理;

可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数;

对象可以携带额外信息,如 id, dataset, touches

1)事件使用方式

首先需要在WXML页面为组件绑定一个事件处理函数

<button id="myBtn" bindtap="myTap" data-my="hello">组件按钮</button>

上述代码表示为按钮绑定了一个触摸点击事件,手指触摸后将执行自定义函数myTap。其中data-*为事件附加属性,可以由用户自定义或省略不写。

然后必须在对应的JS文件中添加同名函数,若函数不存在会在触发时报错。

2)事件分类

事件分为冒泡事件和非冒泡事件,解释如下:

冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递;

非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

web期末复习-小程序框架,小程序

web期末复习-小程序框架,小程序

4)事件的捕获

可以在组件的冒泡事件被触发之前进行事件捕获,使其无法冒泡。捕获阶段事件顺序与冒泡阶段完全相反是由外向内进行捕获。

事件捕获的写法是以capture-bind(capture-catch):key=value的形式,解释如下:

capture-bind :在冒泡阶段 之前 捕获事件;
capture-catch :在冒泡阶段 之前 捕获事件,并且 取消冒泡阶段和中断捕获
key :事件的类型,如 tap touchstart 等,但只能是触摸类事件;
value :是一个字符串,需要在对应的 Page 中定义同名的函数。
web期末复习-小程序框架,小程序

5)事件对象详解

事件对象可以分为

基础事件( BaseEvent
自定义事件( CustomEvent
触摸事件( TouchEvent
web期末复习-小程序框架,小程序
注: <canvas> 画布组件中的触摸事件不可冒泡,所以没有 currentTarget 属性

6.引用

wxml提供两种文件引用方式:import,include

需要注意的是,<import>有作用域的概念,即只会引用目标文件自己定义的template,而不会引用目标文件里面用<import>引用的第三方模板。

web期末复习-小程序框架,小程序

import更适合于统一样式但内容需要动态变化的情况;而<include>标签更适合于无需改动目标文件的情况。

②WXSS: CSS 相比,WXSS 自主的特性有:尺寸单位和样式导入。

小程序规定了全新的尺寸单位rpx,可以根据屏幕宽度进行自适应。其原理是无视设备原先的尺寸大小,统一规定屏幕宽度为750rpx

rpx不是固定值,屏幕越大,1rpx对应的像素就越大。

由于iPhone6换算较为方便,建议开发者可以用该设备作为视觉稿的标准。

iPhone6     1rpx=0.5px    1px=2rpx

样式导入:小程序在wxss样式表中使用@import语句导入外联样式表

@import"common.wxss";

web期末复习-小程序框架,小程序

web期末复习-小程序框架,小程序

3.基本布局方法-flex模型

1.当页面需要适应不同屏幕大小以及设备类型时该模型可以确保元素在恰当的位置。

2.在flex布局中,用于包含内容的组件称为容器(container),容器内部的组件称为项目(item)。容器允许包含嵌套

web期末复习-小程序框架,小程序

3.坐标轴

flex布局默认是水平布局

web期末复习-小程序框架,小程序

flex-direction:column

web期末复习-小程序框架,小程序

4.Flex属性

web期末复习-小程序框架,小程序

web期末复习-小程序框架,小程序

flex-direction加-reverse代表项目按照主轴方向从右向左/从下到上排列

flex-wrap:默认不换行(nowrap),wrap(换行),wrap-reverse(换行方向为wrap的反方向)

justify-content:

web期末复习-小程序框架,小程序

web期末复习-小程序框架,小程序

align-items:

web期末复习-小程序框架,小程序

web期末复习-小程序框架,小程序

align-content:

web期末复习-小程序框架,小程序

无法确定容器组件的宽高但却要内部项目垂直居中,wxss代码如下:

.container{

display:flex;/*使用flex布局(必写语句)*/

flex-direction:column;/*排列方向:垂直*/

justify-content:center;/*内容调整:居中*/

}

到了这里,关于web期末复习-小程序框架的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Java应用程序开发】【期末复习题】【2022秋】【答案仅供参考】

    答题时长:90分钟 试卷共包含57道题目,其中单选题30道,多选题10道,判断题10道,简答题5道,程序题2道。 1.定义一个类,必须使用的是( ) A.public B.class C.interface D.static 2.抽象方法:( ) A.可以有方法体 B.不可以出现在非抽象类中 C.有方法体的方法 D.抽象类中的方法都是抽

    2024年02月11日
    浏览(48)
  • 大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html+jquery+bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页

    2024年02月11日
    浏览(78)
  • 【期末复习】北京邮电大学《数字内容安全》课程期末复习笔记(2. 信息隐藏与数字水印)

    【相关链接】 【期末复习】北京邮电大学《数字内容安全》课程期末复习笔记(1. 绪论) 【期末复习】北京邮电大学《数字内容安全》课程期末复习笔记(3. 文本安全) 【期末复习】北京邮电大学《数字内容安全》课程期末复习笔记(4. 多媒体安全) 【期末复习】北京邮电

    2024年02月09日
    浏览(44)
  • 移动应用开发期末复习(自用复习勿转)

    主要考察实验中的通知:notification,service。数据库的增删改查操作结合界面的一些操作。 Android是一种基于Linux的软件平台和操作系统,采用了软件堆层(Software Stack)的架构,由下往上分别是Linux内核层、硬件抽象层、系统运行时库层(又称为中间件层)、应用程序框架层和系

    2024年02月05日
    浏览(45)
  • 【机器学习】【期末复习】有关机器学习的计算题可供期末复习参考(带本人手写解答与思考)

    本文为学校课程《机器学习》的期末复习材料,主要是关于一些机器学习模型的计算题的解答过程。 给定一个二维空间的数据集: T={(2,3),(5,4),(9,6),(4,7),(8,1),(7,2)},请构造一个平衡 KD 树。 拓展: k近邻-如何构造平衡kd树? 构建KD树 利用 ID3 与 C4.5 算法构建决策树模型,要求写出

    2024年02月11日
    浏览(40)
  • 云计算复习之Hive数据仓库期末复习整理

    声明:                 1. 本文针对的是一个知识的梳理,自行整理以及方便记忆               2. 若有错误不当之处, 请指出 一、hive的定义与理解 首先,hive是一个构建于hadoop集群之上的数据仓库应用。那么,得先了解一下什么是数据仓库?数据仓库是一个数据集合,用于

    2024年02月04日
    浏览(42)
  • 云计算复习之Spark(Scala版)期末复习整理

    声明:                1. 本文针对的是一个知识的梳理,自行整理以及方便记忆               2. 若有错误不当之处, 请指出 Scala是一种针对JVM 将面向函数和面向对象技术组合在一起的编程语言。Scala编程语言近来抓住了很多开发者的眼球。它看起来像是一种纯粹

    2024年02月03日
    浏览(35)
  • 计算机网络期末复习汇总(附某高校期末真题试卷)

    1、传输延迟时间最小的交换方法是( A ) A.电路交换 B.报文交换 C.分组交换 D.信元交换 2、在OSI七层结构模型中,处于数据链路层与运输层之间的是( B) A、物理层 B、网络层 C、会话层 D、表示层 3、服务与协议是完全不同的两个概念,下列关于它们的说法错误的是(D )。 A、协

    2024年02月10日
    浏览(46)
  • 算法期末复习题

    一、选择题 1 、二分搜索算法是利用(     A        )实现的算法。 A 、分治策略   B、动态规划法   C、贪心法    D、回溯法 2 、下列不是动态规划算法基本步骤的是(   A     )。 A 、找出最优解的性质   B、构造最优解   C、算出最优解   D、定义最优解 3 、衡量

    2024年02月11日
    浏览(54)
  • 计算机视觉 期末复习

    目录 一,导论 二,图像采样和频域处理 1.计算机图像 2.常用的亮度等级(灰度值) 3.多通道图像 4.图像插值算法(记住哪些算法) 5.像素空间关系 1像素邻域 2.像素连接 3.像素连通 4.像素距离(三个公式记住) 6.傅里叶级数 7.傅里叶变换 8.离散余弦变换 三,基本图像处理运

    2024年02月08日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包