小程序与网页区别 第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