小程序对文档的补充
-
属性值直接使用
autoplay= "false"
其计算结果是一个字符串转成布尔值为真
应使用autoplay="{{false}}"
或者autoplay="{{ 0 }}"
-
安卓导航栏标题文字内容 显示在左侧
-
page height: 100%;高度沾满整个小程序的窗口 类似
body / html
-
画布转换坐标系统
-
小程序 API :微信对象(wx)上的一个函数 函数的参数是一个对象形式
wx.showToast({
title: '加载中',
icon: 'loading',
})
setTimeout(function(){
wx.hideToast()
}, 1000)
其他
以下部分是以前写的了,当时是为了方便记忆,其实没什么用。
建议多查看官方的文档,
遇到问题躲在 官方社区 里搜索
对于原理性的东西可查阅 小程序 - 小故事 和 官方文档 - 框架
文件作用域
- 声明的变量和函数只在当前文件中有效,不同文件相同名字的变量和函数相互不影响
- 在本地文件中使用全局变量
var app = getApp();
app.globalData
模块化
公共js代码抽离为一个单独文件,做为一个模块。通过module.exports 对外暴露接口
视图层
- 数据绑定
组建属性中取数据 在双引号中
-
列表渲染
wx:for 绑定数组
下标变量默认 index wx:for-index=“当前下标的变量名”
当前项的变量名默认 item wx:for-item=“指定数组当前元素的变量名”
wx:key -
条件渲染
wx:if wx:elif wx:else
wx:if 只有在渲染条件第一次为真才开始局部渲染
wx:hidden 始终渲染只是简单控制显示隐藏 -
模板
…dataname 展开dataname
name=“属性定义模板名字”
is=“name声明需要使用的模板” 可以动态决定需要渲染那个模板
要使用的文件中引入 模板 存放的文件 相对路径 -
事件
-
事件对象可以携带的额外数据 id, dataset, touches
dataset:在组件中定义数据,多个单词用 - 链接(data-element-type) 大写会自动转成小写 在event.target.dataset中转成驼峰 elementType -
事件类型 触摸开始、移动、被打断(touchcancel)、结束、点击(tap)、长按(longtap)
-
事件对象
pageX、Y 距离文档左上角的距离
clientX、Y 距页面可现实区域(屏幕除去导航条)左上角的距离
x、y 距离Canvas左上角的距离
detail 自定义事件携带数据 -
引入
<import src=""/>
只引入目标文件中定义的template 而不会引入目标文件import的template
<include src=""/>
将目标文件除 的整个代码引入 相当于拷贝
-
WXSS
-
尺寸单位 iPhone 1px=2rpx
-
样式导入
@import “相对路径”; -
组件
-
swiper
默认150px高度
bindchange current 改变是触发change事件 event.detail={current: current}
垂直滑动 vertical=“true” -
text
文本
支持转义符""
只支持text嵌套
除此节点其它不支持长按选中 -
progress 进度条 (显示百分比 不可拖动)
-
slider 滑动选择器(类似于音乐播放器的进度条)
-
picker 从底部弹起的滚动选择器,现在支持普通选择器,时间选择器,日期选择器。默认为普通选择器
-
pick-view 嵌入页面的滚动选择器
-
radio-group 单项选择器 组成
-
switch 开关选择器
-
textarea 多行输入框(里边的bug和tip较多)
-
navigator 页面链接 页面跳转(可对应wx.navigateTo, wx.redirectTo, wx.switchTap)
-
audio 音频组件
-
image 4种缩放模式,9种裁剪模式
scaleToFill—不保持比例,拉伸宽高填满
aspectFit —保持比例长边完全显示
aspectFill —保持比例短边完全显示
widthFix —保持比例高度自动 -
video 视频 (相关API wx.createVideoContext)
-
map 地图
-
API
-
wx.request({发起HTTPS请求})
-
wx.uploadFile({将本地资源上传到服务器})
-
wx.downloadFile({下载文件资源到本地})
临时路径,在本次小程序启动期间可以正常使用 持久保存,需要调用wx.saveFile(下次启动也能访问)
-
WebSocket 实现实时通讯
-
wx.chooseImage({从本地相册选择图片或使用相机拍照})
-
wx.previewImage({预览图片 预览界面自带分享 保存 收藏})
-
wx.getImageInfo({获取图片信息 宽 高 本地路径})
-
wx.startRecord({开始录音 超过一分钟自动结束录音})
返回录音临时路径 离开小程序是接口无法调用 需要长期保存调用 wx.saveFile 接口需要用户授权 兼容用户拒绝授权场景
-
wx.stopRecord({主动调用 停止录音})
-
wx.playVoice({开始播放语音})
-
wx.pauseVoice({暂停正在播放的语音})
-
wx.stopVoice({结束播放})
暂停后再次调用wx.playVoice为继续播放 只有使用了stopVoice才能从头播放
-
wx.getBackgroundAudioPlayState({获取后台音乐播放状态 包括 音乐总时长 当前时长 是否播放 下载进度 歌曲数据连接})
-
wx.playBackgroundAudio({使用后台播放器播放})
微信客户端只能有一个后台音乐播放
其它小程序占用播放器时 原有小程序内音乐暂停播放
离开小程序(除了显示在聊天顶部) 音乐暂停播放
-
wx.seekBackgroundAudio({控制音乐播放进度})
-
wx.stopBackgroundAudio() 停止音乐播放
-
wx.onBackgroundAudioPlay(callback) 监听音乐播放
-
wx.onBackgroundAudioPause(callback) 监听暂停
-
wx.onBackgroundAudioStop(callback) 监听停止
-
wx.creatAudioContext(audioId)
创建并返回audioContext对象 可以操作对应的audio组件
-
wx.chooseVideo({拍摄视频或从手机相册中选择视频,并返回临时文件路径})
-
wx.createVideoContext(videoId)
创建并返回video上下文videoContext对象
播放 暂停 跳转 发送弹幕 -
wx.saveFile({保存文件到本地 限制10M})
-
wx.getSaveFileList({获取本地以保存的文件列表})
-
wx.getSavedFileInfo({获取本地文件信息})
FileList 中fileList 文件保存时间戳和文件大小
FileInfo 中文件大小与时间戳
-
wx.removeSavedFile({删除本地存储的文件})
-
wx.openDocument({新开页面打开文档})
-
数据缓存(最大10M 永久缓存 为防用户换设备,不建议将关键信息全部存储于本地)
-
wx.setStorage({异步存储于本地 会覆盖原来的key对应的内容})
-
wx.setStorageSync({同步存储})
-
wx.getStorage({异步获取})
-
wx.getStorageSync({同步获取})
-
wx.getStorageInfo({异步获取当前storage相关信息 所有的key 当前占用大小 限制空间大小})
-
wx.getStorageInfoSync({同步获取相关信息})
-
wx.removeStorage({移除指定key})
-
wx.removeStorageSync({})
-
wx.clearStorage() 清理本地数据缓存
-
wx.clearStorageSync()
位置
- wx.getLocation({获取当前地理位置,速度 离开(除 显示在聊天顶部)后此接口无法使用})
- wx.chooseLocation({打开地图选择位置})
- wx.openLocation({使用微信内置地图查看位置})
- wx.createMapContext(mapId)
创建并返回map上下文 mapContext 对象
设备
- wx.getSystemInfo({获取系统信息 窗口高宽度 设备像素比 微信设置的语言等})
- wx.getSystemInfoSync({同步获取})
- wx.getNetworkType({获取网络类型 wifi none})
- wx.makePhoneCall({拨打电话})
- scanCode({调起客户端扫码界面})
界面 交互反馈
-
wx.showTost({显示消息提示框})
-
wx.hideToast({隐藏消息提示框})
-
导航-页面跳转
wx.navigation({保留当前页,跳转到应用内某个页面})
wx.navigateBack({关闭当前页,返回上一页面或多级页面})
wx.redirectTo({关闭当前页面,跳转到应用内的某个页面})
wx.switchTab({跳转到tabBar页面,并关闭其他所有非tabBar页面})
1.调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。
2.只能用wx.switchTab跳转到tabBar页面
canvas 画布
1. 同一页面中的canvas-id不可重复,如果已经出现过,则对应的画布将被隐藏并不在工作;没有指定 canvas-id的画布也将被隐藏
2. 用的px做单位
- wx.canvasToTempFilePath({把当前画布的内容生成图片,并返回文件路径。成功后返回 res.tempFilePath 在编辑器上打印不出来东西})
- drawImage 绘制图像,图像保持原始尺寸
- fillText 在画布上绘制被填充的文本
- save 保存当前的绘图上下文
- restore 恢复之前保存的绘图上下文
wx.login({调用接口获取登录凭证code})
- code包括:
用户唯一标示openid
本次登录的会话密匙session_key