Vue小程序项目知识积累（二）

1.wx.reLaunch(Object object)

关闭所有页面，打开到应用内的某个页面。

wx.reLaunch({

  url:'/pages/positons/index'

})

参数说明：

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内页面路径 (代码包路径)，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

2.wx.setStorageSync(string key, any data)

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

key和value值。

value:需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。

wx.setStorageSync(`abcde${abcdefg}`,value);

Tip:

storage 应只用来进行数据的持久化存储，不应用于运行时的数据传递或全局状态管理。启动过程中过多的同步读写存储，会显著影响启动耗时。

3.wx.getStorageSync(string key)

从本地缓存中同步获取指定 key 的内容。

wx.getStorageSync(`ancdef${abc}`)

4.wx.getAccountInfoSync()

获取当前账号信息。线上小程序版本号仅支持在正式版小程序中获取，开发版和体验版中无法获取。

	属性	类型	说明
	miniProgram	Object	小程序账号信息
			结构属性
	plugin	Object	插件账号信息（仅在插件中调用时包含这一项）
			结构属性

const accountInfo = wx.getAccountInfoSync();
console.log(accountInfo.miniProgram.appId) // 小程序 appId
console.log(accountInfo.miniProgram.envVersion) // 小程序小程序版本 envVersion 
console.log(accountInfo.plugin.appId) // 插件 appId
console.log(accountInfo.plugin.version) // 插件版本号， 'a.b.c' 这样的形式

5.wx.showLoading(Object object)

显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框

属性	类型	默认值	必填	说明
title	string		是	提示的内容
mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.showLoading({
  title: '加载中',
  mask: true
})

6.wx.hideLoading(Object object)

隐藏 loading 提示框

属性	类型	默认值	必填	说明	最低版本
noConflict	boolean	false	否	目前 toast 和 loading 相关接口可以相互混用，此参数可用于取消混用特性	2.22.1
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.hideLoading()

7.wx.login(Object object)

调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台账号下的唯一标识（unionid，若当前小程序已绑定到微信开放平台账号）及本次登录的会话密钥（session_key）等。用户数据的加解密通讯需要依赖会话密钥完成。

属性	类型	默认值	必填	说明	最低版本
timeout	number		否	超时时间，单位ms	1.9.90
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

属性	类型	说明
code	string	用户登录凭证（有效期五分钟）。开发者需要在开发者服务器后台调用 code2Session，使用 code 换取 openid、unionid、session_key 等信息

object.fail 回调函数

属性	类型	说明	最低版本
errMsg	String	错误信息
errno	Number	errno 错误码，错误码的详细说明参考 Errno错误码	2.24.0

wx.login({
  success: async (res) {
  const {a,b,c}=await getPnoneInfo({
   loginKey:resCode.code
  }) 
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://example.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

8.wx.hideShareMenu(Object object)

隐藏当前页面的转发按钮

属性	类型	默认值	必填	说明	最低版本
menus	Array.<string>		否	本接口为 Beta 版本，暂只在 Android 平台支持。需要隐藏的转发按钮名称列表，默认['shareAppMessage', 'shareTimeline']。按钮名称合法值包含 "shareAppMessage"、"shareTimeline" 两种	2.11.3
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

Tip:

• "shareAppMessage"表示"发送给朋友"按钮，"shareTimeline"表示"分享到朋友圈"按钮
• 隐藏"发送给朋友"按钮时必须同时隐藏"分享到朋友圈"按钮，隐藏"分享到朋友圈"按钮时则允许不隐藏"发送给朋友"按钮

wx.hideShareMenu({
  menus: ['shareAppMessage', 'shareTimeline']
})

or

wx.hideShareMenu();

9.wx.showShareMenu(Object object)

显示当前页面的转发按钮

属性	类型	默认值	必填	说明	最低版本
withShareTicket	boolean	false	否	是否使用带 shareTicket 的转发详情
menus	Array.<string>		否	本接口为 Beta 版本，暂只在 Android 平台支持。需要显示的转发按钮名称列表，默认['shareAppMessage']。按钮名称合法值包含 "shareAppMessage"、"shareTimeline" 两种	2.11.3
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

Tip:

• "shareAppMessage"表示"发送给朋友"按钮，"shareTimeline"表示"分享到朋友圈"按钮
• 显示"分享到朋友圈"按钮时必须同时显示"发送给朋友"按钮，显示"发送给朋友"按钮时则允许不显示"分享到朋友圈"按钮

wx.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline']
})

10.wx.navigateTo(Object object)

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'
events	Object		否	页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
routeType	string		否	2.29.2 自定义路由类型，相关文档 自定义路由
routeConfig	Object		否	3.4.0 自定义路由配置，相关文档 自定义路由
routeOptions	Object		否	3.4.0 自定义路由参数，相关文档 自定义路由
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

属性	类型	说明
eventChannel	EventChannel	和被打开页面进行通信

wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})
//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

or

wx.navigateTo({
  url: '/pages/hotView/index',
})

11.wx.navigateBack(Object object)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

属性	类型	默认值	必填	说明
delta	number	1	否	返回的页面数，如果 delta 大于现有页面数，则返回到首页。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.navigateBack()

or 
 
// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2
})

12.wx.clearStorage(Object object)

清理本地数据缓存。

属性	类型	默认值	必填	说明
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.clearStorage()

or

try {
  wx.clearStorageSync()
} catch(e) {
  // Do something when catch error
}

13.wx.clearStorageSync()

清理本地数据缓存。

wx.clearStorage()

14.wx.exitMiniProgram(Object object)

退出当前小程序。必须有点击行为才能调用成功。

属性	类型	默认值	必填	说明
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

Onclick(){

 wx.exitMiniProgram()

}

15.wx.showToast(Object object)

显示消息提示框。

	属性	类型	默认值	必填	说明	最低版本
	title	string		是	提示的内容
	icon	string	success	否	图标
		合法值	说明	最低版本		---------
	image	string		否	自定义图标的本地路径，image 的优先级高于 icon	1.1.0
	duration	number	1500	否	提示的延迟时间
	mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透
	success	function		否	接口调用成功的回调函数
	fail	function		否	接口调用失败的回调函数
	complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

or

wx.showToast({
  title: res.message,
  icon: 'success',
  duration: 2000,
  icon:"none"
})

16.wx.reLaunch(Object object)

关闭所有页面，打开到应用内的某个页面。

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内页面路径 (代码包路径)，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.reLaunch({
  url: '/pages/positons/index?id=1',
})

//另一个页面拿到数据

// test
Page({
  onLoad (option) {
    console.log(option.query)
  }
})

17.wx.redirectTo(Object object)

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.redirectTo({
  url: '/pages/project/index?id=1'
})

18.wx.getLaunchOptionsSync()

获取小程序启动时的参数。与 App.onLaunch 的回调参数一致。

启动参数:

	属性	类型	说明	最低版本
	path	string	启动小程序的路径 (代码包路径)
	scene	number	启动小程序的场景值
	query	Object	启动小程序的 query 参数
	shareTicket	string	shareTicket，详见获取更多转发信息
	referrerInfo	Object	来源信息。从另一个小程序、公众号或 App 进入小程序时返回。否则返回 {}。(参见后文注意)
			结构属性	类型
	forwardMaterials	Array.<Object>	打开的文件信息数组，只有从聊天素材场景打开（scene为1173）才会携带该参数
			结构属性	类型
	chatType	number	从微信群聊/单聊打开小程序时，chatType 表示具体微信群聊/单聊类型
		合法值	说明
	apiCategory	string	API 类别	2.20.0
		合法值	说明

返回有效 referrerInfo 的场景

场景值	场景	appId含义
1020	公众号 profile 页相关小程序列表	来源公众号
1035	公众号自定义菜单	来源公众号
1036	App 分享消息卡片	来源App
1037	小程序打开小程序	来源小程序
1038	从另一个小程序返回	来源小程序
1043	公众号模板消息	来源公众号
1069	移动应用	来源App

不同 apiCategory 场景下的 API 限制

X 表示 API 被限制无法使用；不在表格中的 API 不限制。

	default	nativeFunctionalized	browseOnly	embedded
navigateToMiniProgram		X	X
openSetting			X
<button open-type="share">		X	X	X
<button open-type="feedback">			X
<button open-type="open-setting">			X
openEmbeddedMiniProgram		X	X	X

注意:

部分版本在无referrerInfo的时候会返回 undefined，建议使用 options.referrerInfo && options.referrerInfo.appId 进行判断。

let LaunchOptions = wx.getLaunchOptionsSync();

19.App(Object object)

注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

属性	类型	默认值	必填	说明	最低版本
onLaunch	function		否	生命周期回调------监听小程序初始化。
onShow	function		否	生命周期回调------监听小程序启动或切前台。
onHide	function		否	生命周期回调------监听小程序切后台。
onError	function		否	错误监听函数。
onPageNotFound	function		否	页面不存在监听函数。	1.9.90
onUnhandledRejection	function		否	未处理的 Promise 拒绝事件监听函数。	2.10.0
onThemeChange	function		否	监听系统主题变化	2.11.0
其他	any		否	开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问

关于小程序前后台的定义和小程序的运行机制，请参考运行机制章节。

onLaunch(Object object)

小程序初始化完成时触发，全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。

参数 ：与 wx.getLaunchOptionsSync 一致

onShow(Object object)

小程序启动，或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听。

参数 ：与 wx.onAppShow 一致

onHide()

小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。

onError(String error)

小程序发生脚本错误或 API 调用报错时触发。也可以使用 wx.onError 绑定监听。

参数 ：与 wx.onError 一致

onPageNotFound(Object object)

基础库 1.9.90 开始支持，低版本需做兼容处理。

小程序要打开的页面不存在时触发。也可以使用 wx.onPageNotFound 绑定监听。注意事项请参考 wx.onPageNotFound。

参数 ：与 wx.onPageNotFound 一致

示例代码：

App({
  onPageNotFound(res) {
    wx.redirectTo({
      url: 'pages/...'
    }) // 如果是 tabbar 页面，请使用 wx.switchTab
  }
})

onUnhandledRejection(Object object)

基础库 2.10.0 开始支持，低版本需做兼容处理。

小程序有未处理的 Promise 拒绝时触发。也可以使用 wx.onUnhandledRejection 绑定监听。注意事项请参考 wx.onUnhandledRejection。

参数 ：与 wx.onUnhandledRejection 一致

onThemeChange(Object object)

基础库 2.11.0 开始支持，低版本需做兼容处理。

系统切换主题时触发。也可以使用 wx.onThemeChange 绑定监听。

参数 ：与 wx.onThemeChange 一致

App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

20.wx.getMenuButtonBoundingClientRect()

获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。

菜单按钮的布局位置信息:

属性	类型	说明
width	number	宽度，单位：px
height	number	高度，单位：px
top	number	上边界坐标，单位：px
right	number	右边界坐标，单位：px
bottom	number	下边界坐标，单位：px
left	number	左边界坐标，单位：px

const res = wx.getMenuButtonBoundingClientRect()

console.log(res.width)
console.log(res.height)
console.log(res.top)
console.log(res.right)
console.log(res.bottom)
console.log(res.left)

21.wx.createSelectorQuery()

返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替。

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
  res[0].top       // #the-id节点的上边界坐标
  res[1].scrollTop // 显示区域的竖直滚动位置
})