微信官方文档学习——API
2024-06-05 14:05:20
一、基础
1. wx.canIUse('console.log') //true //wx.canIUse （判断小程序的API，回调，参数，组件等是否在当前版本可用）2. const arrayBuffer = wx.base64ToArrayBuffer('xuezhiqian') //(将Base64字符串转成ArrayBuffer对象)3. const arrayBuffer = new Uint8Array([11, 22, 33]) //(将Base64字符串转成ArrayBuffer对象)const base64 = wx.arrayBufferToBase64(arrayBuffer)4. wx.getSystemInfoSync() //(系统信息,包括设备品牌、型号、微信号版本、摄像头、蓝牙、WiFi的开关等)5. wx.getSystemInfo({ //success、fail、completesuccess (res) {console.log(res)}})6. wx.getUpdateManager() //获取全局唯一的版本更新管理器const updateManager = wx.getUpdateManager()updateManager.onCheckForUpdate(function (res) { //onCheckForUpdate(监听向微信后台请求检查更新结果事件。微信在小程序冷启动时自动检查更新，)console.log(res.hasUpdate) // 请求完新版本信息的回调})updateManager.onUpdateReady(function () { //监听小程序有版本更新事件,下载成功后回调wx.showModal({title: '更新提示',content: '新版本已经准备好，是否重启应用？',success: function (res) {if (res.confirm) {updateManager.applyUpdate() // 强制小程序重启并使用新版本。在小程序新版本下载完成后调用。}}})})updateManager.onUpdateFailed(function () { // 新版本下载失败})7. wx.getLaunchOptionsSync() //获取小程序启动时的参数,包含path,query,scene,只有冷启动8.wx.getEnterOptionsSync() //获取小程序启动时的参数,包含path,query,scene,冷启动和热启动注：
①热启动：假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；
②冷启动：用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动，即冷启动
二、路由
// 1.switchTab跳转到tabBar页面wx.switchTab({url: '/index'})// 2.reLaunch 关闭所有页面，打开到应用内的某个页面// 3.redirectTo 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面// 4.navigateTo 保留当前页面，跳转到应用内的某个页面。小程序中页面栈最多十层// 5.navigateBack 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层// 此处是A页面wx.navigateTo({url: 'B?id=1'})// 此处是B页面wx.navigateTo({url: 'C?id=1'})// 在C页面内 navigateBack，将返回A页面wx.navigateBack({delta: 2})// 6.EventChannel 页面间事件通信通道三、界面
1.wx.showToast({title: '显示消息提示框',icon: 'success', //success、loading、noneduration: 2000,mask:true})2.wx.hideToast() //隐藏消息提示框3.wx.showModal({title: '提示',content: '这是一个模态弹窗',showCancel:false, //是否显示取消按钮cancelText:'取消', //取消按钮的文字cancelColor:'#000000', //取消按钮的文字颜色confirmText:'确定',confirmColor:'#576B95', success (res) {if (res.confirm) {console.log('用户点击确定')} else if (res.cancel) {console.log('用户点击取消')}}})4.wx.showLoading({title: '加载中'})5.setTimeout(function () {wx.hideLoading()}, 2000)// 6.显示操作菜单wx.showActionSheet({itemList: ['拍照', '从相册选取'],success (res) {console.log(res.tapIndex)},fail (res) {console.log(res.errMsg)}})//7.在当前页面显示导航条加载动画wx.showNavigationBarLoading({success(e){}})8. wx.hideNavigationBarLoading() //在当前页面隐藏导航条加载动画//9.动态设置当前页面的标题wx.setNavigationBarTitle({title: '当前页面'})//10.设置页面导航条颜色wx.setNavigationBarColor({frontColor: '#ffffff', //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000backgroundColor: '#ff0000',animation: {duration: 400,timingFunc: 'easeIn'}})11. wx.hideHomeButton() //隐藏返回首页按钮12. wx.setBackgroundTextStyle({textStyle: 'dark' // 下拉背景字体、loading 图的样式为dark 只能为dark和light})13. wx.setBackgroundColor({backgroundColorTop: '#ff0000', // 顶部窗口的背景色为白色backgroundColorBottom: '#fff000', // 底部窗口的背景色为白色})//14.显示 tabBar 某一项的右上角的红点wx.showTabBarRedDot({index: 0,})隐藏tabbar上的红点wx.hideTabBarRedDot({index: (0),})//15.显示tabbarwx.showTabBar({animation: true,})//16.隐藏tabbarwx.hideTabBar({animation: true,})//17.动态设置 tabBar 的整体样式wx.setTabBarStyle({color:'#000000',selectedColor:'#ffffff',backgroundColor: '#ff0000',borderStyle:'black' //值只能是black/white})//18.动态设置 tabBar 某一项的内容(文字和图片)wx.setTabBarItem({index: 0,text: 'text',iconPath: '/path/to/iconPath',selectedIconPath: '/path/to/selectedIconPath'})//19.为 tabBar 某一项的右上角添加文本wx.setTabBarBadge({index: 0,text: '1'})//20.移除 tabBar 某一项右上角的文本wx.removeTabBarBadge({index: 0,})//21.字体-------------------------------------------------需学习wx.loadFontFace({family: 'Bitstream Vera Serif Bold',source: 'url("https://sungd.github.io/Pacifico.ttf")',success: console.log})//22.下拉刷新 下拉刷新要在json文件中容许下拉刷新 "enablePullDownRefresh":truewx.startPullDownRefresh() //下拉刷新wx.stopPullDownRefresh() //停止下拉刷新//23.滚动wx.pageScrollTo({scrollTop: 0,duration: 300})//24.置顶wx.setTopBarText({text: 'hello, world!'})//25.延迟一部分操作到下一个时间片再执行（类似于 setTimeout）wx.nextTick(() => {this.setData({ number: 3 }) // 在当前同步流程结束后，下一个时间片执行})//26.获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点wx.getMenuButtonBoundingClientRect()27. wx.setWindowSize() //设置窗口大小，该接口仅适用于 PC 平台(已停止维护)28. wx.onWindowResize((result) => {console.log(result)})29. wx.offWindowResize((res) => {console.log(res)})30. 监听键盘高度变化 (一个值为height)wx.onKeyboardHeightChange((result) => {console.log(result)})31. 取消监听键盘高度变化事件wx.offKeyboardHeightChange(callback)//32. 在input、textarea等focus拉起键盘之后，手动调用此接口收起键盘wx.hideKeyboard({complete: (res) => {console.log(res)},})//33. 在input、textarea等focus之后，获取输入框的光标位置。注意：只有在focus的时候调用此接口才有效wx.getSelectedTextRange({complete: (res) => {console.log(res)},})四、动画
<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>Page({data: {animationData: {}},onShow: function(){var animation = wx.createAnimation({duration:3000, //动画持续时间,mstimingFunction:'linear', //动画的效果 linear匀速、ease慢快慢、ease-in慢速开始、// ease-in-out慢速开始和结束、ease-out慢速结束、step-start动画第一帧就跳至结束状态直到结束、step-end动画一直保持开始状态，最后一帧跳到结束状态delay: 500, //动画延迟时间,ms transformOrigin:"left top 0"})this.animation = animation// step()表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画animation.scale(2,2).rotate(45).step()this.setData({// this.animation.export() 导出动画队列。export 方法每次调用后会清掉之前的动画操作animationData:animation.export()})},
})五、数据缓存
1. wx.setStorageSync('0', '你好，ly！') //同步的(即当存储成功后才会执行下一步代码)2. wx.setStorage({ //异步的(即存储成功的同时也会执行下一步代码)data: "您好，wh！",key: '1',})3. wx.removeStorage({key: '0',success (res) {}})3. wx.removeStorageSync('1') //4. wx.getStorage({ //异步获取指定 key 的内容key: '1',success(res){console.log(res.data)}})4. wx.getStorage('1')5. wx.getStorageSync('1') //同步获取指定 key 的内容6. wx.getStorageInfo()7. wx.getStorageInfoSync()8. wx.clearStorage()9. wx.clearStorage()六、生命周期
/*** 生命周期函数--监听页面加载*/onLoad: function () {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}微信官方文档学习——API相关推荐
- ZooKeeper官方文档学习笔记03－程序员指南03
我的每一篇这种正经文章,都是我努力克制玩心的成果,我可太难了,和自己做斗争. ZooKeeper官方文档学习笔记04-程序员指南03 绑定 Java绑定 客户端配置参数 C绑定 陷阱: 常见问题及故障 ...
- ZooKeeper官方文档学习笔记01－zookeeper概述
纠结了很久,我决定用官方文档学习 ZooKeeper概述 学习文档 学习计划 ZooKeeper:分布式应用程序的分布式协调服务 设计目标 数据模型和分层名称空间 节点和短命节点 有条件的更新和监视 ...
- Spring Framework 官方文档学习（四）之Validation、Data Binding、Type Conversion（二）
接前一篇 Spring Framework 官方文档学习(四)之Validation.Data Binding.Type Conversion(一) 本篇主要内容:Spring Type Conver ...
- Spring Data Commons 官方文档学习
Spring Data Commons 官方文档学习 -by LarryZeal Version 1.12.6.Release, 2017-07-27 为知笔记版本在这里,带格式. Table o ...
- Spring Framework 官方文档学习（四）之Validation、Data Binding、Type Conversion
本篇太乱,请移步: Spring Framework 官方文档学习(四)之Validation.Data Binding.Type Conversion(一) 写了删删了写,反复几次,对自己的描述很不 ...
- jsTree 组件官方文档学习
jsTree 组件官方文档学习 什么是 jsTree 根据jsTree官网的解释:jsTree 是一个jquery 插件, 提供交互式树.它是完全免费的,开源的,并根据MIT许可进行分发.jsTree ...
- HarmonyOS（一） 快速开始学习鸿蒙开发，官方文档学习路线解析
系列文章目录 HarmonyOS(一):快速开始学习鸿蒙开发,官方文档学习路线解析 HarmonyOS(二):应用开发环境搭建准备 HarmonyOS(三):创建你的第一个HelloWorld应用 文 ...
- Open3D官方文档学习笔记
Open3D官方文档学习笔记 第一部分--点云 1 可视化点云 2 体素降采样 3 顶点法线评估 4 访问顶点法线 补充:Numpy在Open3D中的应用 5 裁剪点云 补充1:获取点云坐标 补充2: ...
- protocal buffers 官方文档学习
protocal buffers 官方文档学习 文章目录 protocal buffers 官方文档学习 1.What are protocol buffers? 2.选择你喜欢的语言 3.怎么开始, ...
最新文章
- PHP 设计模式 笔记与总结（9）数据对象映射模式
- v380云存储怎么用_云智中国-百度智能云薄磊：海量无限存储，助力产业智能化升级...
- PHP正则表达式快速学习方法
- 信息系统项目管理师：第6章：项目进度管理(2)-章节重点汇总
- java中的void是什么？有什么作用？
- 前端学习（3218）：批量传递props
- 分区界限必须调整为高于最后一个分区界限_不花一分钱，为SSD硬盘腾空间
- vue工程化与路由router
- (转)Managed DirectX +C# 开发（入门篇）（五）
- Torch7框架学习资料整理
- 发展壮大：帮助独立游戏开发商解决分销难题
- 计算机技术和通信技术始于,计算机网络基础试题精选.doc
- 漫画：互联网公司会议观察
- Linux下C语言开发通讯录管理软件(一)
- win10屡次自动打开系统代理服务器的解决办法
- OpenCV基础——threshold函数的使用
- zabbix Too many processes on xxx
- Maven 部署私服依赖
- 华为eNSP学习笔记 | 命令行配置视图
- 怎样在计算机查找应用程序,电脑打开IE浏览器显示找不到应用程序怎么解决