高端响应式模板免费下载

响应式网页设计、开放源代码、永久使用、不限域名、不限使用次数

什么是响应式网页设计?

2024年小程序与网页区别(必备3篇)

小程序与网页区别 第1篇

小程序官方把 API 分为了如下 3 大类:

事件监听 API

同步 API

异步 API

在 data 中定义数据

在 WXML 中使用数据

在页面对应的 .js 文件中,把数据定义到 data 对象中即可:

把data中的数据绑定到页面中渲染,使用 Mustache 语法(双大括号)将变量包起来即可。语法格式为

绑定内容  

绑定属性  

运算(三元运算、算术运算等)

页面的数据如下

 页面的结构如下:

 

 

 

绑定方式

事件描述

tap

bindtap 或 bind:tap

手指触摸后马上离开,类似于 HTML 中的 click 事件

input

bindinput 或 bind:input

文本框的输入事件

change

bindchange 或 bind:change

状态改变时触发

当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示:

type

String

事件类型

timeStamp

Integer

页面打开到触发事件所经过的毫秒数

target

Object

触发事件的组件的一些属性值集合

currentTarget

Object

当前组件的一些属性值集合

detail

Object

额外的信息

touches

Array

触摸事件,当前停留在屏幕中的触摸点信息的数组

changedTouches

Array

触摸事件,当前变化的触摸点信息的数组

target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件。举例如下:

小程序与网页区别 第2篇

出于安全性方面的考虑,小程序官方对数据接口的请求做出了如下两个限制:

只能请求 HTTPS 类型的接口

必须将接口的域名添加到信任列表中

 需求描述:假设在自己的微信小程序中,希望请求 域名下的接口

配置步骤:

登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名

注意事项:

调用微信小程序提供的 () 方法,可以发起 GET 数据请求,示例代码如下

调用微信小程序提供的 () 方法,可以发起 POST 数据请求,示例代码如下:

在很多情况下,我们需要在页面刚加载的时候,自动请求一些初始化的数据。此时需要在页面的 onLoad 事件中调用获取数据的函数,示例代码如下:

如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口。

此时为了不耽误开发的进度,我们可以在微信开发者工具中,临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项,跳过 request 合法域名的校验。

注意: 跳过 request 合法域名校验的选项,仅限在开发与调试阶段使用

 

跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序中不存在跨域的问题。

Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象,由于小程序的宿主环境是微信客户端,所以小程序中不能叫做“发起 Ajax 请求”,而是叫做“发起网络数据请求”。

小程序与网页区别 第3篇

小程序根目录下的 文件是小程序的全局配置文件。常用的配置项如下:

属性名

类型

默认值

说明

navigationBarTitleText

String

字符串

导航栏标题文字内容

navigationBarBackgroundColor

HexColor

#000000

导航栏背景颜色,如 #000000

navigationBarTextStyle

String

white

导航栏标题颜色,仅支持 black / white

backgroundColor

HexColor

#ffffff

窗口的背景色

backgroundTextStyle

String

dark

下拉 loading 的样式,仅支持 dark / light

enablePullDownRefresh

Boolean

false

是否全局开启下拉刷新

onReachBottomDistance

Number

页面上拉触底事件触发时距页面底部距离,单位为px

概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。

设置步骤: -> window -> 把 enablePullDownRefresh 的值设置为 true

注意:在 中启用下拉刷新功能,会作用于每个小程序页面!

当全局开启下拉刷新功能之后,默认的窗口背景为白色。如果自定义下拉刷新窗口背景色,设置步骤为: -> window -> 为 backgroundColor 指定16进制的颜色值 #efefef。

当全局开启下拉刷新功能之后,默认窗口的 loading 样式为白色,如果要更改 loading 样式的效果,设置步骤为 -> window -> 为 backgroundTextStyle 指定 dark 值。效果如下:

注意: backgroundTextStyle 的可选值只有 light 和 dark

概念:上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。

设置步骤: -> window -> 为 onReachBottomDistance 设置新的数值

注意:默认距离为50px,如果没有特殊需求,建议使用默认值即可。

tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为: 底部 tabBar 顶部 tabBar

注意:

tabBar中只能配置最少 2 个、最多 5 个 tab 页签

当渲染顶部 tabBar 时,不显示 icon,只显示文本

 

默认值

position

String

bottom

tabBar 的位置,仅支持 bottom/top

borderStyle

String

black

tabBar 上边框的颜色,仅支持 black/white

color

HexColor

tab 上文字的默认(未选中)颜色

selectedColor

HexColor

tab 上的文字选中时的颜色

backgroundColor

HexColor

tabBar 的背景色

list

Array

tab 页签的列表,

最少 2 个、最多 5 个 tab

pagePath

String

页面路径,页面必须在 pages 中预先定义

text

String

tab 上显示的文字

iconPath

String

未选中时的图标路径;当 postion 为 top 时,不显示 icon

selectedIconPath

String

选中时的图标路径;当 postion 为 top 时,不显示 icon

猜你喜欢