一.微信小程序
1.微信公众号平台
当做浏览器看待
2.小程序
pages:存放需要展示的页面
一个页面对应一个文件夹,一个页面有四个文件组成(四个文件名字一样,后缀不一样):
.js:负责描述对象行为,业务逻辑
.json:页面配置描述文件
.wxml:页面骨架,相当于html文件
.wxss:样式文件,相当于css文件
utils:存放工具文件,utils.js文件就是工具文件,提供一些公用的方法
外层三个app文件:
用于描述整个应用程序的状态,没有对应的wxml文件,他们是应用程序的入口文件
app文件只能有一个,并且不能重命名
app.js:全局js文件,如果想要使用app.js中的内容,可以使用const app = getApp() 方法获取
app.json:全局配置文件
app.wxss:全局的样式表文件,如果页面中的wxss文件有相同的样式设置,则会就近原则,执行页面中的样式
pqoject.config.json:项目配置文件,一般情况不需要修改
eg:appid
打开一个已有项目时,自动导入这些项目配置信息
注意:
以上的目录结构,index是一级目录,向下延伸,不超过五级。是小程序为了保护它简单的业务逻辑所人为设置的限制
index是一级目录,logs是二级目录,因为从index跳转到logs页面中
3.调试
不需要笔记
4.小程序的flex布局(弹性布局)
小程序有两种布局方法(block+flex)对象
view 视图就是默认的block布局,所有不说了
flex布局:
https://blog.csdn.net/maindek/article/details/83307804
要使用flex布局的话需要显示的声明(给父元素):display:flex;
5.组件:https://developers.weixin.qq.com/miniprogram/dev/component/image.html
view:功能类似于html中的div 容器,分割文档
text:相当于span,文本组件,selectable='true'文本长按选中
app.json:文件中全局配置信息,https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE
注意:.json文件中不允许出现注释
image:相当于img,src属性给个路径
注1:image组件默认宽度300px、高度225px 注2:image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别。
6.事件绑定:
bindtap:点击事件绑定,事件冒泡
bindlongtap:长按事件绑定
bindtouchcancle:触摸事件取消
bingtouchstart:触摸事件开始
bindtouchmove:触摸移动事件
bindtouchend:触摸结束事件
阻止点击事件冒泡:
catchtap:点击事件绑定,阻止事件冒泡
7.rpx
小程序单位使用rpx,因为px是物理像素大小,而针对手机是有逻辑上的分辨率概念
逻辑像素 : 物理像素 = 1 : 2 苹果 1 : 1.5 安卓
如果想要使用px做单位,那就除以2或1.5
如果使用px设置单位,想让所有设备都能大小自适应是做不到的
建议实际使用iphone7 750px宽度作为设计效果图,将单位使用rpx就可以做到效果图与设备1 :1适应显示
8.swiper
滑动视图
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
父视图使用 swiper
子视图使用 swiper-item4vertical="{{false}}"控制纵向操作,这里true或false 一定要写{{}}
9.生命周期
10.页面跳转
wx.navigateTo(Object,Object)
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。
小程序提供了一些页面(路由)跳转的方法:wx.navigateTo(),wx.redirectTo(),wx.switchTab()
注意:目前页面路径最多嵌套十层
wx.navigateTo():可以跳转到任何页面,但是不能跳转到tabbar页面
wx.redirectTo():页面重定位,原来页面就没了
wx.switchTab():想要跳转tabbar页面,从任何页面跳转到tabbar页面
wx.navigateTo({
url:'string',
success:function(res){
//seccuess
//res获取数据
},
fail:function(err){
//fail
},
complete:function(){
//无论成功失败都做的事
}
})
页面跳转传参:
A页面 --> B页面
A:url:'B?a=100'
B:onload:function(options){
console.log(options.a) //100
}
wx.navigateTo()和wx.switchTab()会触发onHide()事件
wx.redirectTo()触发onUnload()事件
11.模板
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html
<template name='popstItem'></template>
name:模板的名字,被调用时使用
调用模板:
<import src='post-item/post-item-template.wxml'/> //引入
<view catchtap='onPostTap' data-postId='{{item.postId}}'><template is="postItem" data="{{...item}}"></template></view>
注意:不能再template上加时间,因为.wxml在编译过后会将template替换掉,template不是标签,而是一个占位符
12.数据绑定:
数据绑定适应Mustache 语法(双大括号)将变量包起来
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html
// 小程序中的数据绑定总会来data中拿数据,我们称这个动作为A
// 动作A 的执行时在onLoad函数执行之后发生的
// 所以data中的数据一般是在onLoader函数中设置的
onLoad函数参数用于接受其他页面传递的数据
//setData({}) 转义用来设置data数据的
this.setData({
a:100,
b:200
})
13.block (列表渲染)
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html
<block></block>可以认为是for循环后边的大括号,是一个循环体的语句整体
<block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx"></block>
item是循环变量 idx是循环下标
14.data-
data-postId:data-开头 + 自定义单词 = 自定义属性
自定义postId属性
data-postId-name-yyyy
15. ...item
...:相当于展开了某个对象,将这个对象展开以后,在.wxml中调用时就不需要用item调用{{item.avatar}},写了...就可以直接{{avatar}}
16.事件对象
event.currentTarget 指的是事件捕获的组件
event.target 指的是当前真正点击的组件
17.wx:if
wx:if
在框架中,使用wx:if="{{condition}}"来判断是否序言渲染该代码块
如果condition = true渲染当前代码块
block wx:if
wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。
注意: <block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
wx:if vs hidden
wx:if 之中的模板也可能包含数据绑定,所以当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。
18.背景音乐
var backgroundAudioManager = wx.getBackgroundAudioManager();
//开始播放
backgroundAudioManager.src = postData.music.url;
backgroundAudioManager.title = postData.music.title;
backgroundAudioManager.coverImgUrl = postData.music.coverImg;
backgroundAudioManager.play();
//暂停播放
backgroundAudioManager.pause();
博客地址:
https://blog.csdn.net/u012729832/article/details/79745090
19.getCurrentPages()
getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
注意:
不要尝试修改页面栈,会导致路由以及页面状态错误。
不要在 App.onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。
20.本地缓存:https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorage.html
wx.setStorage(Object object)
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。数据存储生命周期跟小程序本身一致,即除用户主动删除或超过一定时间被自动清理,否则数据都一直可用。数据存储上限为 10MB。
21.显示弹出框
wx.showToast({
title:postCollected ? '收藏成功' : '取消成功',
duration:1000, //延迟时间
icon:'success' //显示图标
})
22.wx.showActionSheet(obj) 显示一个操作菜单
从窗口底部向上划出一个列表框,可以进行选择
提示:小程序是不能播放本地音乐,只能播放流媒体音乐,限制大小为1MB
23.tabbar
24.scroll-view:可滚动视图区域:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
movable-view :的可移动区域
cover-view:覆盖在原生组件之上的文本视图,
25. wx.request({
url: url,
})
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
26.icon
图表
type String icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
27.表单元素事件绑定:
https://developers.weixin.qq.com/miniprogram/dev/component/input.html