微信小程序入门到实战(二)
上一文章里面,我们实现了第一个小程序页面,并且了解到了一些小程序的知识,接下来继续开始我们的学习。
页面的跳转
在第一个小程序页面,预留了一个按钮,这是为了跳转到其他的页面,在微信小程序里面跳转的方法主要有下面三种:
- wx.navigateTo()
- wx.redirectTo()
- wx.switchTab()
wx.switchTab({url: '/index'
})
路径可得注意写对,区分绝对路径和相对路径:
绝对路径:一般在前面加上
/
,表示从根目录开始往下寻找
相对路径:相对于当前页面来说,每次使用../
就是往上跳出一层
第一和第二种方法主要的区别是:前者保留当前页面(父页面,执行onHide()方法
),跳转到其他页面(子页面),最后可以返回到当前页面(父页面),两个页面之间是父子关系;后者关闭当前页面(执行onUnload()方法
),跳转到其他页面,无法返回,两个页面是平行关系。
第三种比较特别,这种跳转是专门跳转到带有tabBar
的页面,并关闭其他所有非tabBar
页面,使用上面两种跳转方式是无效的。从tabBar
的页面跳转到非tabBar
的页面,可以使用上面的两种方式。
轮播组件swiper
swiper
通常是配合着swiper-item
来使用的,前者是整个轮播图的容器,后者是单一轮播子项目容器,仅在前者内部使用,宽高默认为swiper
的宽高,只是一个容器,没有其他作用,但是缺少又不行。所以对于swiper-item
都应该作用在swiper
父节点上面。
<swiper catchtap='onSwiperTab' indicator-dots='true' autoplay='true' interval='5000'><swiper-item><image src='/images/post/bl.png' ></image></swiper-item><swiper-item><image src='/images/post/xiaolong.jpg'></image></swiper-item><swiper-item><image src='/images/post/vr.png' ></image></swiper-item></swiper>
我们不能想当然的认为在swiper-item
里面只能放图片,还可以放入其他的一些东西,比如文本;实现一些其他的业务,比如弹幕轮播。
通过设置vertical='true'
设置轮播滚动的方向,indicator-dots='true'
指示器的显示
在轮播图里面,实际控制图片的大小是依靠image
标签,默认有宽高。
事件的绑定
事件一般分两种:
冒泡事件:点击了子节点,父节点上面的事件也会执行;但是点击父节点上面的事件,子节点上面的事件不会执行
bind
开头:表示冒泡,后面接事件名非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。一般在子节点上面添加。
catch
开头:表示非冒泡,后面接事件名
<view bindtap='onbind'>
我是事件2
<view bindtap='onBind'>我是事件1</view>
</view>onBind: function (event) {console.log("事件1执行了")},onbind: function (event) {console.log("事件2执行了")}
在我点击了事件1没有点击事件2的时候,事件2也会被触发,这就是冒泡;但是把方法改为catchtap
,点击事件1的时候,只是事件1的函数触发,事件2函数不会被执行。还有一种catch:tap
的声明事件的方法。
tabBar
页面配置
前面说到在app.json
是配置一些小程序项目的全局配置,可以在某个页面下面的json
文件来单独配置该页面所需要的配置。
tabBar
是在全局app.json
里面配置,跟项目页面都需要在全局app.json
里面注册一样,tabBar
也是里面的一个属性,其中的list数组
最上至少配置2个,最多5个,按照其在数组里面的顺序排布。
"tabBar": {"position":"top", // 按钮的位置,默认为bottom,设置为top的时候,icon设置无效"borderStyle": "white", // tabBar的颜色"list": [{"pagePath": "pages/posts/post", // 页面路径,必须先在pages属性中定义"text": "阅读","iconPath": "images/tab/yuedu.png", // 未选中的图片"selectedIconPath": "images/tab/yuedu_hl.png" // 选中的图片},{"pagePath": "pages/movies/movies","text": "电影","iconPath": "images/tab/dianying.png","selectedIconPath": "images/tab/dianying_hl.png"}]}
在全局的app.json
里面配置好了,那么项目启动的时候就默认在最底部出现栏位的切换;
当然也可以改变其位置,使其出现在顶部,出现在顶部的时候,按钮的图片失效:
数据的绑定
小程序里面没有dom节点
的概念,不能够像使用jQuery
一样,通过操作DOM节点来给页面添加数据。相反的小程序通过数据绑定,来达到数据优先。这样的好处在于不用操作DOM,减少页面加载的时间。
<view><view src='{{author_img}}' catch:tap='onBind'>{{date}}</view>
</view>Page({// 页面的初始数据data: {date:"我是事件1"}
}
上面这种就是数据绑定的方式,在对应页面JS文件中的page()
的data
属性里面,填写页面需要的数据,以键值对的形式,然后在页面对应的位置使用{{key}}
,绑定数据。当然可以在一个位置绑定多个数据,只需要这样{{key1}}{{key2}}
。在标签的属性上面绑定数据的时候,需要使用"{{key}}"
<view><view catch:tap='onBind'>{{date}}{{title}}</view>
</view>Page({data: { date:'stp 17',title:' hi icessun'},onLoad: function (options) {var dates={date:'stp 18',title:'icessun'}this.setData(dates)}
}
当然不可能直接在data
里面写数据,这些数据都是从服务器上面获取的,在页面初始化的时候,就会向服务器发送请求,对数据进行一番处理后,通过this.setData()
的方法把数据绑定在页面上面,this.setData()
方法里面接收到的参数,相当于把这写参数,先放在data属性里面
,然后在通过data属性
中的键值,绑定在页面上。当然会把相同的属性名(key值)的覆盖掉
微信小程序入门到实战(二)相关推荐
- 【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战 文章目录 微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
- 微信小程序入门与实战(七月)
微信小程序入门与实战(七月) 第1章 初识微信小程序 第2章 小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解 第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...
- 【DRF+Django】微信小程序入门到实战_day01(下)
(0)摘要 # 课程链接 入门到实战,讲讲公司的微信小程序[django+drf+小程序实战]_哔哩哔哩_bilibili # 文档链接 微信开放文档 # 课程内容 (1)flex 布局 (2)fle ...
- 【DRF+Django】微信小程序入门到实战_day04(上)
(0)摘要 # 课程链接 入门到实战,讲讲公司的微信小程序[django+drf+小程序实战]_哔哩哔哩_bilibili # 微信开发者文档 微信开放文档 # 课程内容 (1)P28_用户登录页面 ...
- 【DRF+Django】微信小程序入门到实战_day03(下)
(0)摘要 # 课程链接 入门到实战,讲讲公司的微信小程序[django+drf+小程序实战]_哔哩哔哩_bilibili # 微信开发者文档 微信开放文档 # 课程内容 (1)P28_发送短信验证码 ...
- github打开前端样式丢失_微信小程序入门教程之二:页面样式
这个系列的上一篇教程,教大家写了一个最简单的 Hello world 微信小程序. 但是,那只是一个裸页面,并不好看.今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的 ...
- 微信小程序入门与实战笔记
微信小程序 目录 微信小程序 1微信小程序介绍 1.1什么是微信小程序 1.2小程序特点 1.3对开发者的影响 1.4分辨率与rpx 1.4.1英寸 1.4.1分辨率(pt): 1.4.2分辨率(px ...
- image 微信小程序flex_微信小程序入门教程之二:页面样式
这个系列的上一篇教程,教大家写了一个最简单的 Hello world 微信小程序. 但是,那只是一个裸页面,并不好看.今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的 ...
- 微信小程序入门篇(二)
上篇我们讲解了一下小程序的整体架构,今天来讲一下,一个页面的具体实现原理,好注意听,下面要开始画重点啦~哈哈 页面的构成 还记得我们在上篇文章中讲解如何加入一个界面吗?在app.json中的pages ...
最新文章
- YC陆奇发起知乎第一问:怎样的环境才能让更多AI创业公司成功?
- poj 1789 Truck History(最小生成树 prim)
- Dataset之Facades:Facades数据集的简介、安装、使用方法之详细攻略
- 从ucOS谈,为什么需要操作系统?
- python中ntlk报错及解决
- 13款宝马x5质量到底怎么样_新款宝马X5和奔驰GLE450谁更强?
- 为什么 PUSH 推送要经常背锅?
- 安卓恶意软件Skygofree爆发,连你的照片都能监控到
- 基于Protues的Arduino学习笔记01-Arduino UNO实验板设计
- CONSUL install 和启动
- UltraISO 对光盘镜像常用操作方法图解
- 怎么复制黑苹果config配置_[黑苹果硬件] 实用黑苹果配置推荐
- java读取json文件
- 创新设计思维——做出好产品的艺术
- 删除插件mysearchresult(chrome和firebox)
- 跟锦数学2017年上半年
- 【Simulink】数字控制振荡器 NCO ( N umerically CONtrolled Oscillator )
- SaaSBase:推荐一些超好用的低代码开发软件(中篇)
- 普通人如何从0到1,成为百万粉自媒体大V?
- 无线lan连接服务器,无线 LAN 控制器和轻量接入点基本配置示例
热门文章
- Ubuntu下 intel网卡wifi驱动安装
- 腾讯qq珊瑚虫版_腾讯QQ迎来重大更新:三大新功能上线,短板补齐了
- mysql ERROR 1018
- wma转mp3怎么弄_如何将wma格式转换成mp3格式?
- window.load和window.onload
- android平板 唯一编号,iPad2不是唯一 最热门Android平板导购
- Linux服务器必会命令-操作秀
- pip安装GeoIP时报fatal error: GeoIP.h: No such file or directory
- 环形工频变压器线圈参数
- 邦纳传感器S18UIA