微信小程序规定所有设备屏幕宽高均为750rpx
每一个用户可能访问的页面,需要在全局配置中来登记它的访问路径
微信小程序文件类型
json是配置文件
js是脚本文件
wxml是视图文件
wxss样式表文件
公用的属性标签可以有
class 类 id
style 样式
bingtap绑定事件
hidden 属性(true就是隐藏)
data-use-name 自定义数据
view就是div容器元素
微信小程序冒泡与非冒泡
'''
冒泡事件:
当一个组件上的事件触发后,该事件会像父节点传递 bindtap
非冒泡事件:
当一个组件上的事件触发后,该事件不会像父节点传递 catchtap
'''
微信小程序页面脚本的生命周期函数
onLoad:function(options){}页面初始化调用一次
onShow:function(options){}页面每一从隐藏变成显示可见调用一次
onReady:function(options){}页面初始渲染完成,可以交互的时候调用一次
onHide:function(options){}页面每一次隐藏的时候调用一次
onUnload:function(options){}页面关闭,或者卸载的时候
需要更新数据 this.setData({})方法
微信小程序改变值不能直接赋值
微信小程序运行基本环境与架构
navigator组件_导航页
open-type属性 值redirect 不能直接返回的
值navigate可以返回的是默认的 (有返回键位)
值switchTab 会更改tabBar组件_底部标签栏UI
hover-class属性 被点击的出现的样式 需要在样式文件写样式 比如color
注意!!如果和class 都同时存在,谁在后面谁是最后的颜色
style='display: inline;' 加上这个 属性可以让navigator在两个text中间 三个组件文字变成一行
text组件_默认文字
只能包含纯文本,其他组件都将被忽略掉
hidden属性 默认值false 这个元素总要先渲染生成的 正常使用开销小 初始化开销大
对于hidden而言即使用户得到数据 ,服务端没有编辑生成这个在初始化也会生成这么一个元素
对于可见性需要频繁切换的时候不建议使用条件渲染
(条件渲染就是 wx.if)
tabBar组件_底部标签栏
tabBar": {
"color":#000",#默认颜色
"selectedColor": "#CD5C5C",#点击颜色
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabbar/ic_menu_choice_nor.png",
"selectedIconPath": "static/tabbar/ic_menu_choice_pressed.png"
},
],
}
配置全局导航栏样式
在全局配置中
app.json文件写入
#例子
"window":{
"navigationBarTextSyle":"black"
}
swiper 轮播图
swiper-item属性必须在swiper里面 ,他是属于列表
indicator-dots={{true}}属性 面板指示 (会出现小圆圈)
current='0' 控制幻灯片排行位置属性(0是默认的)
previous-margin左边边角属性
例子:
previous-margin='50rpx'
next-margin右边边角属性
例子:
next-margin='50rpx'
bindtap 属性事件绑定
微信发送请求
#reuest
wx.reuest({
url:""地址
method:"GET"请求方式
data:{数据1,数据2}
header:{请求头}})
success:function(res){},#将接收的respoend的回调函数
fail:function(res){},#没有受到respoend调用失败的时候
success:function(res){},#不论调用成功失败都会执行的函数
微信动态设置导航栏loading(等待)状态和标题
wx.showNavigationBarLoading()#在页面导航栏标题左方显示一个loading(暂停动画)
wx.hideNavigationBarLoading()#在页面导航栏标题左方隐藏一个loading(暂停动画)
wx.setNavigationBarLoading()#在页面动态的设置标题
页面事件处理函数与自定义页面转发
onPullDownRefresh#用户下拉页面刷新被调用
onReachBottom#用户上划触底页面刷新被调用
onPageScroll#用户在页面上滑动时被调用
onShareAppMessagel#用户分享的时候被调用
组件化开发
什么是组件
#组件就是以某种方式对业务逻辑和功能进行封装。
如何定义组件
特点
高内聚
一般HTMl css js封装在统一的内容
可复用