前言
一直都在使用typora做笔记存本地 内容多了有点卡 现在移到博客来
内容是学习时简单记录 不免有错误的见解 望赐教并见谅哦
小程序的启动过程
下载小程序包---启动小程序---加载解析app.json---注册App()
接下来一边执行App的生命周期 一边根据app.json中pages的配置加载自定义的组件代码 接着按顺序加载解析对应page的page.json 渲染page.wxml 注册page.js中的Page() 执行Page的生命周期
全局App.js
生命周期
onLaunch
onShow
onHide
onError
获取场景值在onShow或onLunch的参数中获取
定义全局对象
App({
...
globalData:{
...
}
})
页面Page
生命周期
onLoad
onShow
onReady
onHide
onUnload
页面栈
小程序中所有页面路由全部由框架管理,框架通过栈的方式管理页面,页面路由发生切换的时候,页面栈会有不同的表现 可以根据getCurrentPages()方法获取当前的页面栈 页面栈最多只可存放5个页面路由。
通过getCurrentPages()方法可以获取当前页面栈中的页面数组,最后那个页面即是当前打开的页面
const len = getCurrentPages().length;
const current = getCurrentPages()[len-1]
内置方法
onPageScroll(options){} //此函数内部不要频繁调用setData
可通过定义flag 对比
const flag = scrollTop>distance;
if(flag != this.currentFlag){
this.setData({
currentFlag:flag
})
}
setData更新视图数据
setData函数用于将数据从逻辑层发送到试图层(异步) 同时改变对应的this.data的值(同步)
setData({ key:value }, callback)
第一个参数是更改的data中数据 key可以是对象的属性或数组的某一项
第二个参数是数据改变试图更新后的回调函数
获取app
const app = getApp();
app.globalData.xxx
页面变组件
页面也可以作为组件 使用Component构造器 要求对应 json 文件中包含 usingComponents
此时,组件的属性可以用于接收页面的参数,如访问页面 /pages/index/index?paramA=123¶mB=xyz ,如果声明有属性 paramA 或 paramB ,则它们会被赋值为 123 或 xyz 。
页面的生命周期方法(即 on 开头的方法),应写在 methods 定义段中
使用 Component 构造器来构造页面的一个好处是可以使用 behaviors 来提取所有页面中公用的代码段
// page-common-behavior.js
module.exports = Behavior({
attached: function() {
// 页面创建时执行
console.info('Page loaded!')
},
detached: function() {
// 页面销毁时执行
console.info('Page unloaded!')
}
})
// 页面 A
var pageCommonBehavior = require('./page-common-behavior')
Component({
behaviors: [pageCommonBehavior],
data: { /* ... */ },
methods: { /* ... */ },
})
组件Component
基本使用
components/cpn/cpn
cpn.json cpn.wxml cpn.js cpn.wxss
cpn.json: component:true
使用:
1、对应页面的json中注册
useComponents:{
"cpn1":"/components/cpn/cpn"
}
2、wxml中使用
全局注册在app.json中 usingComponents中注册
插槽组件
单插槽
组件:
页面:
多插槽
1、定义插槽组件
2、多插槽组件的js文件中配置options选项
Component({
options:{
multipleSlots:true
}
})
3、使用
左
中
右
组件与页面样式隔离
自定义组件中的样式与页面中的样式默认有隔离效果 互相不影响
但是为了避免样式错乱 在自定义组件中 不允许使用id选择器、标签选择器、属性选择器。
自定义组件注册时候 js文件中会执行Component()方法 如果希望组件与页面中的样式互相影响,需要在js文件中 更改options属性的styleIsolation
Component({
options:{
//isolated 互相隔离
//apply-shared 页面样式影响组件 组件不影响页面
// shared 互相影响
styleIsolation:isolated//互相隔离
}
})
页面给组件传递数据
组件中:
Component({
properties:{
title:{
type:String,
value:'默认标题',
observe:function(newV,oldV){
...
}
}
}
});
页面中:
页面给组件传递样式
组件中:
Component({
externalClasses:['propcls']
})
页面中:
.red{
color:red
}
组件传递事件
组件中:
btnTapHandle(){
this.triggerEvent(
'事件名btnTap',
{传输的数据对象},
{其他的配置信息}
);
}
页面中:
handleBtnTap(event){
event.detail 就是组件传过来的数据
}
页面中获取组件对象
页面中通过this.selectComponent('class/id'); 获取组件对象
var cpn = this.selectComponent('#cpn');
cpn.xxx
页面中改变组件中数据 不可直接在页面中调用cpn.setData()
需在组件中定义一个方法 更改数据 在页面中直接调用该方法即可
cpn:
methods:{
incrementNum(num){
this.setData({
num:this.data.count+num
})
}
}
页面:
var cpn = this.selectComponent('#cpn');
cpn.incrementNum(10);
默认通过this.selectComponent(id/class) 获取组件得到目标组件对象,可以使用内置的一个behavior 自定义获取组件时返回的对象
cpn1.js:
Component({
behaviors:['wx://component-export'],
export(){
return {name:'zhangsan'}
}
})
此时在页面中获取cpn1 得到的就是对象{name:'zhangsan'}
组件关联关系relations
-----
组件中监听数据变化
observers:{ //此处监听的数据变化只可以获取到新值
num:(newV){ ...},
'obj.name':function(newV){} //监听对象的属性
'**':function(newV){}//监听所有数据改变
}
组件间代码共享behaviors
类似混入mixins 相当于抽出公共的代码
新建behaviors/behaviors.js:
module.exports=Behaviors({
behaviors:[],
data:{
cpnNum:666
},
attached(){
console.log('----组件的attached生命周期');
}
})
引入组件cpn1.js:
const behaviors1 = require('../../behaviors/behaviors1.js');
Component({
behaviors:[behaviors1]
})
此时cpn1组件中可直接使用cpnNum值
纯数据字段
----
抽象节点
---
自定义组件扩展
---
开发第三方自定义组件
----
单元测试
---
获取更新性能统计信息
---
组件中有哪些选项
properties:{}//页面传给组件的数据
data:{} //组建内部初始化的一些数据
methods:{} //组件中事件需要写在methods中
options:{} //组件的一些配置
externalClasses:[] //页面传给组件的样式类
observers:{}// 对properties/data中的数据改变监听
pageLifetimes:{ //组件所在页面的生命周期
show(){}//组件所在页面显示
hide(){}//组件所在页面隐藏时
resize(){}//组件所在页面尺寸发生变化时
}
lifetimes:{ //组件的生命周期
created(){} //组件实例刚刚被创建时候执行
attached(){}//组件被添加到页面时候
ready //组件在视图层布局后执行
moved(){}// 组件被移动时
detached(){} //组件被移除时
error(){}//组件方法抛出错误时执行
}
wxml基本语法
插值语法{{}}
双向绑定model:
wx:for
{{item}}--{{index}}
{{tr}}--{{i}}
wx:if
按钮
hidden
hidden对自定义组件无效
setData
wxss样式写法
多行文字…显示
text{
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
基本使用
小程序不支持*通配符使用 可写组件名称并集消除默认样式
样式有行内样式、业内样式、全局样式
优先级 !import > 行内样式 > 业内样式 > 全局样式
样式引入
@import '路径'
wxs微信脚本
介绍
wxs 是微信小程序的一套脚本语言 WeiXin Script
page.js中的方法不可以直接在wxml中调用
不允许这么写:{{numToFixed(26.777)}}
这种场景可将方法定义在wxs中
使用
wxs可以写在wxml中 使用wxs标签包裹 也可以写在.wxs文件中
wxs只可写es5语法
wxml中使用:
var name='jn'
var age=10;
var fun=function(num1,num2){
return num1+num2
}
module.exports={
name:name,
age:age,
fun:fun
}
{{info.name}}
{{info.fun(1,2)}}
外部.wxs中:
info.wxs:
var name='jnn'
var fun=function(num1,num2){
return num1+num2;
}
module.exports={
name:name,
fun:fun
}
wxml:
{{wxs1.name}}
wxs文件中引入外部wxs文件 使用require
1.wxs:
var bb = require('./2.wxs');
var bb = bb;
...
module.exports{
...
bb:bb
}
事件
事件对象
bindtap="tapHandle"
tapHandle(event){
event.currentTarget
event.target
event.touches 触摸的对象数组
event.changeTouches 发生变化的对象数组
}
事件传参数
wx:for="{{3}}" bindtap="itemHandle" data-index="{{index}}" data-item="{{item}}"
itemHandle(event){
event.target.datasets.index
event.target.datasets.item
}
冒泡捕获
普通绑定事件:
bind:tap / bindtap
阻止事件冒泡的事件绑定:
catch:tap / catchtap
事件捕获绑定:
capture-bind:tap
事件捕获的阻止:
capture-catch:tap
页面跳转
navigator组件跳转
跳转新页面
navigator组件用于页面间跳转
open-type:'跳转的方式':
navigate 默认 新页面将当前页面覆盖 微信自动添加返回按钮
open-type="redirect" 当前页面关闭并打开新页面
open-type="switchTab" 关闭所有页面 跳转到tabbar管理的页面
open-type="reLaunch" 关闭所有页面 显示新页面
跳转携带参数
跳转详情
直接在navigator标签 url属性后拼接需要携带的参数
详情页接收参数 在onLoad生命周期中
onLoad(options){
options就是传递过来的参数对象
}
返回
返回
delta="number"
delta 返回的层级数
返回
返回更改上个页面数据
如果想要在detail返回时候做点什么 需要在detail.js中onUnload生命周期中处理。
若从detail页返回home页时,想要更改home页中数据,可在detail页面的onUnload生命周期中 通过 getCurrentPages() 获取栈中的页面对象
var pages = getCurrentPages();
var home = pages[pages.length-2];
home即是home页面对象
home.setData({
title:'哈哈哈'
})
代码跳转
跳转
wx.navigateTo({
url:'/pages/detail/detail?name=jn&age=26'
})
根据navigator组件中open-type的不同 有对应的api跳转
wx.switchTab({
url: '/pages/about/about',
})
返回
wx.navigateBack({
delta:2
})
小程序登陆
登录流程
前端调用 wx.login 向微信服务器获取 code 将code发送给后台服务器
后台服务器携带 code+AppId+AppSecret 请求微信服务器获取唯一标识openid
后台服务器拿到openid后将用户信息及唯一标识openid存储在数据库 并生成自定义登录态token发送给前端
前端拿到token 存在App.js中全局对象中 便于页面中使用 还要存在storage中,避免小程序关闭再重新打开时候token消失
App.js中onLaunch生命周期中,获取本地storage中的token 如果token不存在 执行登陆流程,如果token存在 携带token请求后台服务器验证token是否过期 如果过期了 重新执行登陆流程 如果没过期 将token再次赋值给App.js中的全局对象中的token
小程序性能优化
避免频繁调用setData
每次调用setData执行界面更新,会造成重渲染
1.不要过于频繁调用setData,应考虑将多次setData合并成一次setData调用;
2.数据通信的性能与数据量正相关,因而如果有一些数据字段不在界面中展示且数据结构比较复杂或包含长字符串,则不应使用setData来设置这些数据;
3.与界面渲染无关的数据最好不要设置在data中,可以考虑设置在page对象的其他字段下。
只使用setData更改展示在界面的数据
每次执行setData都会重渲染,每次重渲染时,将data和setData数据套用在WXML片段上,得到一个新节点树。然后将新节点树与当前节点树进行比较,这样可以得到哪些节点的哪些属性需要更新、哪些节点需要添加或移除。最后,将setData数据合并到data中,并用新节点树替换旧节点树,用于下一次重渲染。
在进行当前节点树与新节点树的比较时,会着重比较setData数据影响到的节点属性。因而,去掉不必要设置的数据、减少setData的数据量也有助于提升这一个步骤的性能。
事件绑定减少参数数据
视图层将事件反馈给逻辑层时,同样需要一个通信过程,通信的方向是从视图层到逻辑层。因为这个通信过程是异步的,会产生一定的延迟,延迟时间同样与传输的数据量正相关,数据量小于64KB时在30ms内。降低延迟时间的方法主要有两个。
1.去掉不必要的事件绑定(WXML中的bind和catch),从而减少通信的数据量和次数;
2.事件绑定时需要传输target和currentTarget的dataset,因而不要在节点的data前缀属性中放置过大的数据。
减少节点量提高渲染性能
时间开销大体上与节点树中节点的总量成正比例关系。因而减少WXML中节点的数量可以有效降低初始渲染和重渲染的时间开销,提升渲染性能。
分包优化
一般情况下,小程序的代码将打包在一起,在小程序启动时一次性下载完成
控制代码包大小有助于减少小程序的启动时间。对低于1MB的代码包,其下载时间可以控制在929ms(iOS)、1500ms(Android)内。
常规的控制代码包大小的方法。
精简代码,去掉不必要的WXML结构和未使用的WXSS定义。
减少在代码包中直接嵌入的资源文件。
压缩图片,使用适当的图片格式。
如果小程序比较复杂,优化后的代码总量可能仍然比较大,此时可以采用分包加载的方式进行优化。
小程序的代码将打包在一起,在小程序启动时一次性下载完成。采用分包时,小程序的代码包可以被划分为几个:一个是“主包”,包含小程序启动时会马上打开的页面代码和相关资源;其余是“分包”,包含其余的代码和资源。这样,小程序启动时,只需要先将主包下载完成,就可以立刻启动小程序。这样就可以显著降低小程序代码包的下载时间
小程序分包时配置:
{
"pages":[
"pages/index",
"pages/logs"
],
"subPackages": [
{
"root": "packageA",
"pages": [
"pages/cat",
"pages/dog"
]
}, {
"root": "packageB",
"pages": [
"pages/apple",
"pages/banana"
]
}
]
}
内置组件
前言
小程序的组件框架是Exparser Exparser是微信小程序的组件组织框架,内置在小程序基础库中,为小程序的各种组件提供基础的支持。小程序内的所有组件,包括内置组件和自定义组件,都由Exparser组织管理。
视图容器
cover-image
cover-view
覆盖在原生组件之上的容器
match-media
相当于媒体查询 限制在不同的屏幕宽高下显示不同的组件
符合条件时候显示此组件
movable-area
movable-view
可移动的视图容器 movable-area是可移动视图容器的移动区域
page-container
弹出在页面之上、并且点击页面的返回按钮不会立即跳转页面的容器
scroll-view
局部滑动组件
share-element
--
swiper
swiper-item
banner组件
view
基础内容
icon
progress
rich-text
text
6<5
表单组件
button
按钮
checkbox
checkbox-group
篮球
羽毛球
editor
form
input
keyboard-accessory
label
picker
当前选择{{rangeArray[index]}}
picker-view
picker-view-column
{{item}}
{{item}}
radio
radio-group
男
slider
switch
textarea
导航
navigator
媒体组件
audio
音频播放 不再维护
camera
系统相机 需要授权 authSetting.scope.camera
image
live-player
live-pusher
直播组件 需要先进行类目审核 如果小程序类型符合规定 才可激活该组件
video
视频播放器
voip-room
多人音视频通话 需要进行类目审核方可开通使用
地图
map
画布
canvas
开放能力
ad
banner广告 需要在小程序后台的流量主模块新建
ad-custom
原生模板广告
official-account
公众号关注组件 需要在小程序后台设置关联的公众号
open-data
用于展示微信开放的数据
web-view
展示网页的容器 个人小程序不支持使用
url可以是小程序关联的公众号内的文章
也可以是其他网页 但是这个网页必须在小程序后台配置域名
原生组件说明
小程序中的部分组件是由客户端创建的原生组件,原生组件在webview渲染流程外,使用时有限制
层级最高 其他组件无法盖在原生组件上 后插入的原生组件可盖在之前的原生组件之上
原生组件无法在pick-view中使用
部分css样式无法应用在原生组件
监听原生组件的方式不能使用 bind:事件名 只可bind事件名 不支持catch、cauture事件绑定
原生组件会遮挡vConsole调试面板
cover-view cover-image也是原生组件 但是使用限制与其他原生组件不同 他们可以覆盖在原生组件之上
导航栏
navigation-bar
配置当前页导航栏中的属性(标题、标题样式等等)
配合page-meta组件一起使用 必须是page-meta中的第一个节点
页面属性配置节点
page-meta
配置当前页面的一些属性(页面背景颜色、下拉刷新样式等 相当于页面的json文件中配置的那些) 只能是页面内的第一个节点
API
基础
wx.canIUse()
判断api/回调/参数/组件 在当前版本是否可用
var isCanUse = wx.canIUse('text.selectable')
wx.base64ToArrayBuffer
wx.arrayBufferToBase64
base64与Arraybuffer 互相转换
wx.getSystemInfo
获取系统信息
wx.updateWeChatApp
判断用户小程序所在的微信客户端版本过低时 跳到更新微信页面
wx.getUpdateManager
获取小程序的更新管理器 返回一个管理器对象UpdateManager
UpdateManager中有onCheckForUpdate、onUpdateReady、onUpdateFailed、applyUpdate
applyUpdate 强制小程序重启并使用新版本
onCheckForUpdate 监听向后台请求检查更新的结果 小程序冷启动时会自动检查
onUpdateReady 监听小程序有版本更新事件
onUpdateFailed 监听小程序更新失败事件
wx.getLaunchOptionsSync
获取小程序启动时候的参数等 冷启动 相当于生命周期onLaunch中的option参数
wx.getEnterOptionsSync
获取小程序不同情况下的启动参数
冷启动时 类似onLaunch生命周期
热启动时 类似onShow生命周期
wx.onHandledRejection
监听未处理的promise拒绝事件
wx.onThemeChange
监听系统主题改变事件
wx.onPageNotFound
监听页面不存在事件 可在回到函数中重定向页面 如果重定向的页面依然不存在 会跳转到微信客户端提供的页面不存在页面 且不再回调第二次
navigateTo跳转的页面不存在会被fail拦截 不会触发pageNotFound
wx.onError
监听小程序错误事件
wx.onAudioInterruptionEnd
监听音频中断结束事件
wx.onAudioInterruptionBegin
监听音频因受到系统占用被中断开始事件
闹钟、电话等会中断音频
wx.onAppShow
监听小程序切前台事件
wx.onAppHide
监听小程序切后台事件
wx.offUnhandledRejection
取消监听未处理的Promise拒绝事件
wx.offThemeChange
取消监听系统主题改变事件
wx.offPageNotFound
取消监听页面找不到事件
wx.offError
取消监听小程序错误事件
wx.offAudioInterruptionEnd
wx.offAudioInterruptionBegin
wx.offAppShow
wx.offAppHide
wx.setEnableDebug
是否打开调试开关
wx.setEnableDebug({
enableDebug:true
})
wx.setEnableDebug({
enableDebug:false
})
wx.getRealtimeLogManager
获取实时日志管理器对象 不需用户主动反馈即可查看
wx.getLogManager
LogManager
获取日志管理器对象 需要用户主动反馈方可在后台查看
console
全局打印日志的对象
wx.getRealtimeLogManager
RealtimeLogManager
实时日志管理器
RealtimeTagLogManager
给定tag标签的实时日志管理器实例
路由
wx.switchTab
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.reLaunch
关闭所有页面,打开到应用内的某个页面
wx.redirectTo
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.navigateTo
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面
小程序中页面栈最多十层
wx.navigateBack
关闭当前页面 返回上一级页面 可通过getCurrentPages获取当前页面栈
EventChannel.emit
---
界面
wx.showToast
wx.hideToast
显示吐司
wx.showModal
显示模态框
wx.showLoading
wx.hideLoading
显示loading 隐藏loading
wx.showActionSheet
底部弹出选择框
wx.enableAlertBeforeUnload
wx.disableAlertBeforeUnload
开启/关闭 页面返回时候的询问对话框
wx.showNavigationBarLoading
wx.hideNavigationBarLoading
显示/关闭 导航栏的loading
wx.setNavigationBarTitle
wx.setNavigationBarColor
动态设置导航栏标题、颜色
wx.setBackgroundColor
wx.setBackgroundTextStyle
设置下拉刷新时候页面背景颜色以及下拉刷新图标的样式
wx.showTabbarRedDot
wx.hideTabbarRedDot
显示/隐藏 tabbar某一个上的红点
wx.showTabBar
wx.hideTabBar
显示/隐藏 tabbar
wx.setTabBarStyle
动态设置tabbar的整体样式
wx.setTabBarItem
动态设置单个tabbar的内容
wx.setTabBarBadge
wx.removeTabBarBadge
动态为单个tabbar右上角添加/移除文本
wx.loadFontFace
动态加载网络字体
wx.startPullDownRefresh
wx.stopPullDownRefresh
开启/关闭 下拉刷新
wx.pageScrollTo
页面滚动到具体位置 可以是距离数字 也可以是选择器
wx.createAnimation
创建一个动画实例 animation
var ani = wx.createAnimation({
。。。
})
var animation1 = ani.rotate(30).step(); //调用step代表本组动画编写完成
var aniExpt = animation1.export();//导出动画队列 导出后的动画队列就可以赋值给组件的animation属性
thiS.setData({
animationData:aniExpt
})
wx.setTopBarText
设置小程序置顶栏文字内容
wx.nextTick
将一些逻辑放在下一个时间片再执行
wx.nextTick(()=>{
。。。
})
wx.getMenuButtonBoundingClientRect
获取导航栏中胶囊按钮的布局位置信息
wx.setWindowSize
设置窗口大小 仅适用于pc端
wx.setWindowSize({
width:'',
height:''
})
wx.onWindowResize
wx.offWindowResize
监听窗口尺寸变化事件/取消监听窗口尺寸变化事件
wx.onKeyboardHeightChange
wx.offKeyboardHeightChange
监听/取消监听 键盘高度变化事件
wx.hideKeyboard
收起键盘
wx.getSelectedTextRange
在输入框聚焦时 获取光标位置
网络
wx.request
发送https网络请求
wx.request({
url:'',
method:'GET',
success(){
}
})
wx.request() 返回值是RequestTask请求任务对象
requestTask.abort();//终端网络请求
requestTask.onHeadersReceived //监听服务器响应头接收事件
requestTask.offHeadersReceived//取消监听响应头接收事件
wx.downloadFile
下载文件资源到本地
wx.downloadFile({
url:'',
success(result){
}
})
wx.downloadFile返回一个任务对象downloadTask 可以监听下载进度、取消下载等
var downloadTask = wx.downloadFile({。。。});
downloadTask.abort() //取消下载
downloadTask.onProgressUpdate()//监听下载进度
downloadTask.offProgressUpdate //取消监听下载进度
downloadTask.onHeadersReceived()//监听响应头接收事件
downloadTask.offHeadersReceived()//取消监听响应头接收事件
wx.uploadFile
上传本地资源到服务器
wx.uploadFile({
url:'服务器地址',
filePath:'本地文件路径',
name:''
。。。
})
wx.iploadFile()返回一个上传任务对象 可监听上传进度和取消上传
var uploadTask = wx.uploadFile({...});
uploadTask.abort() //取消上传
uploadTask.onProgressUpdate()//监听上传进度
...
wx.connectSocket
wx.closeSocket
wx.sendSocketMessage
wx.onSocketClose
wx.onSockerError
wx.onSocketMessage
wx.onSocketOpen
websocket请求
连接socket后 会得到一个socketTask任务对象
调用对象的方法实现关闭、监听等
mDNS
---
udpSocket
wx.createUDPSocket
udp 的socket连接
数据缓存
wx.setStorage
wx.setStorageSync
将数据存储在本地缓存中 单个key允许存储的最大数据长度是1M 所有数据存储最多为10M
wx.setStorage({
key:'',
data:'',
success(){
...
}
})
wx.setStorageSync('key','data')
wx.getStorage
wx.getStorageSync
获取缓存中对应key的数据
wx.getStorage({
key:'',
success(){
...
}
})
var value = wx.getStorageSync('key')
wx.getStorageInfo
wx.getStorageInfoSync
获取缓存中所有的storage数据
wx.removeStorage
wx.removeStorageSync
删除指定key的storage
wx.clearStorage
wx.clearStorageSync
清空storage
wx.setBackgroundFetchToken
wx.onBackgroundFetchData
设置自定义登录态 便于第三方服务器验证请求合法性
媒体
位置
wx.getLocation
获取当前位置信息
wx.openLocation
使用微信内置地图查看位置
wx.openLocation({
latitude:'',
longitude:'',
})
wx.choosePoi
选择位置 会打开微信选择附近位置页面 不带地图 只有位置列表
wx.chooseLocation
打开带有地图选择位置的页面
wx.startLocationUpdate
开启小程序进入前台时接收位置信息
wx.startLocationUpdateBackground
开启小程序进入前后台均接收位置信息
wx.stopLocationUpdate
关闭监听位置变化 前后台都停止接收位置信息
wx.onLocationChange
实时监听位置变化信息
wx.offLocationChange
取消监听位置变化信息
转发
wx.showShareMenu
wx.hideShareMenu
显示/隐藏 当前页面的转发按钮
wx.showShareImageMenu
打开分享图片弹窗
wx.showShareImageMenu({
path:'本地图片路径/本地临时路径'
})
wx.getShareInfo
获取转发详细信息
wx.updateShareMenu
更新转发属性
wx.authPrivateMessage
验证私密消息
wx.onCopyUrl
wx.offCopyUrl
监听/取消监听 用户点击右上角菜单复制链接按钮时触发的事件
暂只在Android平台支持
wxml
wx.createSelectorQuery
返回一个SelectorQuery实例对象
var selectorQuery = wx.createSelectorQuery();
selectorQuery.in
selectorQuery.in();
//将选择器的选取范围更改为某自定义组件 component 内。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)。
selectorquery.select
在当前页面下选择第一个匹配选择器的节点 返回NodesRef实例
selectorquery.selectAll
在当前页面下选择匹配选择器的所有节点
selectquery.exec()
执行所有请求
selectquery.selectViewport
选择显示区域 可用于获取显示区域的尺寸、滚动位置等信息
NodesRef.boundingClientRect
获取所选节点的信息 在执行selectquery.exec() 后可在boundingClientRect回调中获取节点信息
var selectorQuery = wx.createSlectorQuery();
selectorQuery.select(.outer)
.boundingClientRect(()=>{
console.log(res)
})
.exec();
NodesRef.context
NodesRefs.fields
NodesRefs.node
NodesRefs.scrollOffset
联系人
wx.openContact()
拉起手机通讯录,选择联系人
wx.addPhoneContact()
添加手机通讯录联系人
剪切板
wx.setClipboardData
设置剪切板内容 设置成功后会有toast提示复制成功
wx.getClipboardData
获取剪切板内容
网络监听
wx.getNetworkType
获取网络状态
wx.onNetworkStatusChang
wx.offNetworkStatusChange
监听/取消监听 网络状态改变事件
屏幕
wx.onUserCaptureScreen
wx.offUserCaptureScreen
监听用户截屏事件/取消监听用户截屏事件
wx.getScreenBrightness
wx.setScreenBrightness
获取/设置屏幕亮度
wx.setKeepScreenOn
设置是否保持常亮状态
电话
wx.makePhoneCall
播打电话
wx.makePhoneCall({
phoneNumber:''
})
性能
wx.onMemoryWarning
wx.offMemoryWarning
监听/取消监听 内存不足的告警事件
扫码
wx.scanCode
调起客户端扫码界面进行扫码
震动
wx.vibrateShort
使手机发生较短时间的振动(15 ms)
wx.vibrateLong
使手机发生较长时间的振动(400 ms)