微信小程序开发学习笔记(二)——小程序框架、组件、WXML-腾讯云开发者社区-腾讯云
微信小程序开发学习文档(万字总结,一篇搞定前端开发)_微信小程序文档-CSDN博客
小程序简介
与普通网页开发的区别:
1.运行环境不同
网页运行在浏览器环境中
小程序运行在微信环境中
2.API不同
小程序无法调用DOM和BOM的API,可以调用微信环境中提供的各种API
3.开发模式不同
网页:浏览器+代码编辑器
小程序:申请小程序开发账号->安装开发工具->创建和配置小程序项目
第一步 下载“微信开发者工具”
注册appId或申请测试账号
第二步 创建小程序
小程序代码文件结构
第三步 新建小程序页面
app.json -> pages中新增页面的存放路径, 会自动创建目录
pages -> 存放所有页面的路径
项目首页应用pages中排在第一位的路径,所以改变顺序,可以改变页面首页,默认为pages/index/index
index.wxml是微信的标签语言(类似html),页面的结构由该文件控制,会将.js中设置的样式及内容通过wxml展示出来
.wxs是wexin script,是微信的一套脚本语言,结合.wxml构建页面的架构,类似JavaScript但不一致,有自己的语法。
.wxss是微信style sheets,类似CSS
3.1 WXML
和html区别,标签名称不同,属性节点不同,提供了类似Vue中的模板语法
3.2 WXSS
类似css,区别 :
3.3 .JS
在小程序汇总,通过该文件来处理用户的操作,比如:响应用户的点击,获取用户的位置
基本知识
1.宿主环境
程序运行所必需的依赖环境,安卓/ios是微信的宿主环境,手机微信是小程序的宿主环境
1.1 通信模型
通信主体,渲染层和逻辑层
通信:渲染层和逻辑层之间的通信,由微信客户端进行转发
逻辑层与第三方服务器之间的通信,由微信客户端进行转
1.2 运行机制
小程序启动过程:小程序的代码包下载到本地,解析app.json,执行其中的小程序入口文件,调用App()创建小程序实例,渲染小程序首页,小程序启动完成
页面渲染的过程:加载解析页面的.json配置文件,加载页面的.wxml模版和 .wxss 样式,执行页面的.js文件,调用Page()创建页面实例
1.3 组件
组件由宿主环境提供
1.3.1 视图容器类组件
2. 三大API
2.1 事件监听API
以on开头,用来监听某些事件的触发
2.2 同步API
以sync结尾,其结果可以通过函数返回值直接获取,如果执行出错会抛出异常
2.3 异步API
类似jQuery中的$.ajax(options)函数,需要通过success,fail,complete接收调用的结果
3.WXML模板语法
3.1 数据绑定
将数据定义到data对象中
info: 'hello world'
3.1.2 mustache语法(插值表达式) - 双大括号{{}}
动态绑定内容,将字符串类型的info显示到页面上
动态绑定属性,将图片链接等以图片的格式显示在页面上,需要在wxml中确定使用哪种标签,在其属性位置使用双大括号
3.1.2.1 三元运算
在mustache语法中 完成 条件表达式? 表达式1:表达式2
3.1.2.2 算数运算
可以在mustache语法中完成算数运算
3.2 事件绑定
事件是渲染层到逻辑层的通讯方式
将用户在渲染层的行为通过事件传递到逻辑层进行处理
小程序中常用的事件:tap (触屏的触摸),input(文本框的输入事件),change(状态改变)
3.2.1 事件对象的属性列表
代表当前事件的一些属性,如类型type,timeStamp(页面打开到触发事件所经过的毫秒数),target(触发事件的组件的一些属性值的组合),touches(当前停留在屏幕中的触摸点信息的数组),detail(额外的信息),currentTarget(当前组件的一些属性值)
3.2.1.1
target - 触发该事件的源头组件
currentTarget - 当前事件所绑定的组件
对于外层view来说:
内部按钮为源头组件
当前正在触发事件的组件是view,冒泡已经到达view
3.2.1.2 bindtap
不存在html中鼠标点击onclick事件,通过tap事件响应用户的触摸行为
通过bindtap,可以为组件绑定tap触摸事件
在.js文件中定义对应的事件处理函数,事件参数通过形参event来接收
3.2.2 事件传参
不能在绑定事件的同时为事件处理函数传递参数,因为小程序会把bindtap的属性值统一当作事件名称来处理,即入参也会被当作名称的一部分,而不是一个参数
传参:data-*={{input}},*代表参数的名字,input为参数的值
event.target.dataset.*, *为参数的名字,获取到传递的值
3.3 条件渲染
使用 wx:if="{{condition}}"来判断是否需要渲染该代码块,加在标签中
用block标签包裹多个view,对block进行条件判断,但是不会渲染block
hidden控制元素的显示与隐藏
3.4 列表渲染
wx:for,得到index和item
wx:key, 小程序在实现列表渲染时,建议为渲染出来的列表项指定唯一的key值来提高渲染效率
4. WXSS 模板样式
样式语言
wxss对css进行了扩充及修改:
rpx尺寸单位
@import 样式导入
通用的:通用选择器,通用的样式选择
4.1 rpx单位
responsive picxel,微信小程序独有,解决屏适配的尺寸单位
原理:rpx把所有设备的屏幕在宽度上等分为750份,在较小的屏幕上,1rpx的宽度较小,反之则较大,在不同设备运行时,小程序会自动把rpc样式单位换算成对应的像素单位来渲染,从儿实现屏幕适配
以1rpx=0.5px为标准进行样式设计
4.2样式导入
@import, 可以访问其他文件中的样式
4.3 全局样式和局部样式
app.wxss控制全局即所有页面的样式
***.wxss控制其对应的某一个页面的样式
局部样式和全局样式冲突时,局部样式会覆盖
局部样式权重大于等于全局样式时,局部样式会覆盖(以某一个样式为 单位,而不是整个文件)
5. 全局配置
全局配置文件 app.json
pages - 小程序中所有页面存放路径
window - 小程序窗口的外观
tabBar - 小程序底部tabBar效果
style - 是否启用新版的组件样式
5.1 window
导航栏背景色只支持16进制写法
5.1.1 下拉刷新:手指下拉滑动,小程序页面刷新
在window中新加enablePullDownRefresh,置为true,在app.json中添加会对所有页面刷新
模拟器不能完全模拟在真机上的操作,需要扫码在真机上预览
下拉刷新的背景色:backgroundColor
下拉刷新的loading样式:backgroundTextStyle:light or dark
5.1.2 上拉触底:手指上拉滑动,加载更多数据
小程序设置中默认距离为50px,即距离屏幕底部50px的时候,会触发加载更多数据
onReachBottomDistance设置新的数值
5.2 tabBar
实现多页面之间的快速切换,只能配置最少两个,最多5个tab页签
底部tabBar
顶部tabBar
渲染顶部tabBar时,不限时icon(图标),只显示文本
在app.json中添加tabBar配置项,和window并列
6. 页面配置
页面配置和全局配置的关系
在window中配置的都是全局生效的窗口表现,某些页面的特殊窗口表现,需要页面级别的.json配置文件
enablePullDownRefresh 只对当前页面开启下拉刷新效果
7. 网络数据请求
7.1 小程序中网络请求的限制
只能请求HTTPS类型的接口
必须将接口的域名添加到信任列表中,工具栏-详情-项目配置-域名信息
7.2 发起GET请求
wx.request() 方法,发起GET数据请求,域名必须是已经配置过的。
7.3 发起POST请求
wx.request(),method使用POST
7.4 在页面刚加载时请求数据
自动请求一些初始化的数据
.js文件中的onLoad事件中调用需要的函数
7.5 跳过request合法域名校验
详情-本地设置-不校验合法域名等,只能在开发测试阶段使用,项目上线时必须配置合法域名
7.6 跨域和Ajax
在小程序中不存在跨域问题,因为小程序宿主环境不是浏览器
8 自定义编译模式
每次编译之后定格到想要的页面
9 生命周期
一个对象从创建-运行-销毁的整个阶段
小程序生命周期分类:
应用生命周期
页面生命周期
生命周期函数:小程序框架提供的内置函数,伴随生命周期,自动按次序执行
允许程序员在特定的时间点,执行某些特定的操作,强调时间点
10 WXS脚本
在wxml中无法调用在页面的.js中定义的函数,但是可以调用wxs中定义的函数 -- 过滤器
11 自定义组件
创建components文件夹,并划分子目录
引用组件:在.json文件中的usingComponents写入组件所在路径,并为其起名,之后在.wxml文件中将该名称作为标签名使用
组件默认使用自己的样式,app.wxss中的全局样式对组件无效
stylesolation空翼修改组件的样式隔离
12 全局数据共享
组件之间的数据共享,各个组件统一从一个store中获取、更新数据,实现数据共享