微信小程序js绑定 第1篇
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。与html类似,相当于用户与小程序的交互。
当事件回调触发的时候,会收到一个事件对象event(与js中的事件对象类似),它的详细属性如下表所示:
返回的是触发该事件的源头组件,而currentTarget则返回的是当前事件所绑定的源头组件。
给view绑定了单击事件,在该事件下有一个按钮组件,当我们单击按钮时,返回的就是这个按钮组件。而返回的就是view这个绑定事件的源头组件。因此,常用到的是target属性而非currentTarget属性。
微信小程序js绑定 第2篇
通过条件渲染,从而实现按需渲染。
如果我们需要一次渲染多个组件的展示于隐藏,就可以使用到标签了,他将所有需要条件渲染的组价包裹起来,然后,我们直接在 标签上使用 wx:if 进行控制。
在小程序中,直接使用 hidden=“{{}}” 也能直接控制元素的显示于隐藏(通过 true 或 false)
代码示例:
① 执行原理不同:
应用场景:和 vue一样,频繁切换使用 hidden,需要条件渲染的时候使用wx:if。
总结: hidden就是在控制结构样式,而wx:if控制的是创建结构或者移除结构。
渲染数组列表的时候,我们可以直接使用 wx:for实现,和vue中的v-for一样哦!
data数据代码:
需要注意的是,wx:key 不需要使用 {{}}
wxss 是一套样式语言,用于美化 wxml 的组件样式,类似于网页开发中的 css。
wxss 具有 css 大部分的特性,同时,wxss 还对 css 进行了扩充和修改,以适应微信小程序的开发。
与 css 相比,wxss 拓展的特性有:
这两个css中不能使用,同样的rem小程序中也不能使用。
原理:
rpx: 鉴于不同的设备大小不同,为了实现自动适配,rpx把所有设备的屏幕,在宽度上等分为750份(即当前屏幕的总宽度为750rpx)
小程序在不同设备上运行的时候,会自动把 rpx 的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。
单位换算:官方定义使用iphone6上,1px = rpx
因为 屏幕会被分为 750rpx 而 苹果6 正好 375px。
官方建议:开发微信小程序,设计可以使用iPhone6 作为视觉稿的标准。
例如:宽度 100px, 高度20px。使用rpx就是, 200rpx , 40rpx。
语法格式
@import 后跟需要导入的外联样式的相对路径,用 ; 表示语句结束。如下所示:
顾名思义:全局所用于全部页面,局部只限于当前页面。
① 中则就会作用到全局。
② 页面.wxss 文件中定义的样式为局部样式,只作用于当前页面。
注意点:
小程序根目录下的文件是小程序的全局配置文件,常用的配置如下:
配置文件,所管理的全局的文件有:
① pages
② window
③ tabBar
④ style
步骤: → window → navigationBarText
步骤: → window → navigationBarBackgroundColor
以十六进制色为要求哦!
需要注意的是,局部和全局配置文件的冲突哦!
步骤: → window → navigationBarTextStyle
需要注意的是,标题颜色可选值 只有 black and white.
下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而实现重新加载页面数据的行为。
步骤: → window → 把 enablePullDownRefresh 设置为 true
就开启了, false 则是不开启。
true 开启, false 关闭
注意:这里在实际开发中,并不是所有的页面需要开启下拉加载效果,所以这里建议配置在局部页面配置文件中。
默认的背景色是白色,如果想要自定义颜色的话
步骤: → window → 为backgroundColor 指定十六进制 的颜色值
步骤: → window → 为 backgroundTextStyle 指定 dark值
(灰色)
默认值就是light 白色,这里设置为dark 灰色。
注意这里就只能设置这两种颜色(效果图就是上面的图片)
上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而实现加载更多的数据行为。
步骤: → window → 为 onReschBottomDistance 设置新的值
(默认值为:50px) 单位默认省略哦!
实际开发不建议修改,使用默认之即可,特殊需求除外。
tabBar 是移动端常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为:
注意点:
实现方式:
1、先配置页面路径
2、全局配置文件中,与pages 和 window同级别创建一个 tabBar配置对象
注意点:只要是 tabBar的页面路径,必须在前面,否则报错!
效果图如下:
小程序中, 中的 window 节点,可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要 拥有特殊的窗口表现,此时,页面级别的 .json配置文件,就可以实现这种需求了。
注意:当页面配置与全局配置 冲突时,根据就近原则
,最终的效果以页面配置为准。
如上:我想要将消息页面的导航背景改为红色:
在局部配置文件中:
就近原则,直接覆盖掉全局配置的样式。
局部配置文件配置页面:
配置中
出于 安全 和 性能 方面的考虑,小程序官方对 数据接口请求 有一些要求:
两点限制:
假设在自己的微信小程序中,希望请求域名下的接口
此时就得配置域名接口:
配置步骤: 登录微信小程序管理后台 → 开发 → 开发设置 → 服务器域名 → 修改 request 合法域名
注意:一个月只能修改 5 次。且只支持https。
调用微信小程序提供过的 ()
方法,可以发起 GET 数据请求,如下所示:
调用微信小程序提供的 () 方法,可以发起 POST 数据请求,示例代码如下:
在很多情况下,我们需要在页面刚加载的时候,自动请求一些初始化的数据。此时我们需要在页面的 onLoad 事件中调用获取数据的函数。
代码示例:
当后端只提供了http协议接口的时候,我们开发又不能停止,所以,为了解决这个问题,我们得临时开启不校验开发环境域名请求
实现跳过 request 合法域名校验
跨域问题只存在于浏览器的Web开发中,由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序不存在跨域问题。
Ajax技术核心也是依赖于浏览器的,由于小程序的宿主环境是微信客户端,所以小程序中不能叫 发起Ajax请求,而是叫做发起网络数据请求
实现步骤:
结构代码:
样式代码:
① 能够使用 wxml 模板语法渲染页面结构
② 能够使用 wxss 样式美化页面结构
③ 能够使用 对小程序进行全局配置
④ 能够使用 对小程序页面进行个性化配置
⑤ 能够知道如何 发起网络数据请求
微信小程序js绑定 第3篇
通过bindinput,可以为文本框绑定输入事件
在页面js文件中定义事件处理函数。通过来获取文本框中的内容。
实现步骤:
定义数据
在页面js文件中定义文本数据
渲染结构
设置value默认值。
美化样式
将文本框美化一下
绑定input 事件处理函数
输入文本,此时data中的text也随之改变。
到这里本节内容就结束啦,下期带大家了解微信小程序中的条件渲染和列表渲染。