小工具知识网

当前位置: 首页 > 行业知识 > Vue小程序项目知识积累(二)

行业知识

Vue小程序项目知识积累(二)

2026-11-08 07:10:52 来源:互联网转载

1.wx.reLaunch(Object object)

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

wx.reLaunch({  url:'/pages/positons/index'})

参数说明:

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

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()

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

属性类型说明
miniProgramObject小程序账号信息
结构属性类型说明最低版本
appIdstring小程序 appId
envVersionstring小程序版本2.10.0
合法值说明
develop开发版
trial体验版
release正式版
versionstring线上小程序版本号2.10.2
pluginObject插件账号信息(仅在插件中调用时包含这一项)
结构属性类型说明
appIdstring插件 appId
versionstring插件版本号
const accountInfo = wx.getAccountInfoSync();console.log(accountInfo.miniProgram.appId) // 小程序 appIdconsole.log(accountInfo.miniProgram.envVersion) // 小程序小程序版本 envVersion console.log(accountInfo.plugin.appId) // 插件 appIdconsole.log(accountInfo.plugin.version) // 插件版本号, 'a.b.c' 这样的形式

5.wx.showLoading(Object object)

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

属性类型默认值必填说明
titlestring是提示的内容
maskbooleanfalse否是否显示透明蒙层,防止触摸穿透
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数(调用成功、失败都会执行)
wx.showLoading({  title: '加载中',  mask: true})

6.wx.hideLoading(Object object)

隐藏 loading 提示框

属性类型默认值必填说明最低版本
noConflictbooleanfalse否目前 toast 和 loading 相关接口可以相互混用,此参数可用于取消混用特性2.22.1
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数(调用成功、失败都会执行)
wx.hideLoading()

7.wx.login(Object object)

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

属性类型默认值必填说明最低版本
timeoutnumber否超时时间,单位ms1.9.90
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

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

object.fail 回调函数

属性类型说明最低版本
errMsgString错误信息
errnoNumbererrno 错误码,错误码的详细说明参考 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)

隐藏当前页面的转发按钮

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

Tip:

  • "shareAppMessage"表示“发送给朋友”按钮,"shareTimeline"表示“分享到朋友圈”按钮
  • 隐藏“发送给朋友”按钮时必须同时隐藏“分享到朋友圈”按钮,隐藏“分享到朋友圈”按钮时则允许不隐藏“发送给朋友”按钮
    wx.hideShareMenu({  menus: ['shareAppMessage', 'shareTimeline']})orwx.hideShareMenu();

    9.wx.showShareMenu(Object object)

    显示当前页面的转发按钮

    属性类型默认值必填说明最低版本
    withShareTicketbooleanfalse否是否使用带 shareTicket 的转发详情
    menusArray.否本接口为 Beta 版本,暂只在 Android 平台支持。需要显示的转发按钮名称列表,默认['shareAppMessage']。按钮名称合法值包含 "shareAppMessage"、"shareTimeline" 两种2.11.3
    successfunction否接口调用成功的回调函数
    failfunction否接口调用失败的回调函数
    completefunction否接口调用结束的回调函数(调用成功、失败都会执行)

    Tip:

    • "shareAppMessage"表示“发送给朋友”按钮,"shareTimeline"表示“分享到朋友圈”按钮
    • 显示“分享到朋友圈”按钮时必须同时显示“发送给朋友”按钮,显示“发送给朋友”按钮时则允许不显示“分享到朋友圈”按钮
      wx.showShareMenu({  withShareTicket: true,  menus: ['shareAppMessage', 'shareTimeline']})

      10.wx.navigateTo(Object object)

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

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

      object.success 回调函数

      属性类型说明
      eventChannelEventChannel和被打开页面进行通信
      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.jsPage({  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)    })  }})orwx.navigateTo({  url: '/pages/hotView/index',})

      11.wx.navigateBack(Object object)

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

      属性类型默认值必填说明
      deltanumber1否返回的页面数,如果 delta 大于现有页面数,则返回到首页。
      successfunction否接口调用成功的回调函数
      failfunction否接口调用失败的回调函数
      completefunction否接口调用结束的回调函数(调用成功、失败都会执行)
      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)

      清理本地数据缓存。

      属性类型默认值必填说明
      successfunction否接口调用成功的回调函数
      failfunction否接口调用失败的回调函数
      completefunction否接口调用结束的回调函数(调用成功、失败都会执行)
      wx.clearStorage()ortry {  wx.clearStorageSync()} catch(e) {  // Do something when catch error}

      13.wx.clearStorageSync()

      清理本地数据缓存。

      wx.clearStorage()

      14.wx.exitMiniProgram(Object object)

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

      属性类型默认值必填说明
      successfunction否接口调用成功的回调函数
      failfunction否接口调用失败的回调函数
      completefunction否接口调用结束的回调函数(调用成功、失败都会执行)
      Onclick(){ wx.exitMiniProgram()}

      15.wx.showToast(Object object)

      显示消息提示框。

      属性类型默认值必填说明最低版本
      titlestring是提示的内容
      iconstringsuccess否图标
      合法值说明最低版本
      success显示成功图标,此时 title 文本最多显示 7 个汉字长度
      error显示失败图标,此时 title 文本最多显示 7 个汉字长度2.14.1
      loading显示加载图标,此时 title 文本最多显示 7 个汉字长度
      none不显示图标,此时 title 文本最多可显示两行,1.9.0及以上版本支持
      imagestring否自定义图标的本地路径,image 的优先级高于 icon1.1.0
      durationnumber1500否提示的延迟时间
      maskbooleanfalse否是否显示透明蒙层,防止触摸穿透
      successfunction否接口调用成功的回调函数
      failfunction否接口调用失败的回调函数
      completefunction否接口调用结束的回调函数(调用成功、失败都会执行)
      wx.showToast({  title: '成功',  icon: 'success',  duration: 2000})orwx.showToast({  title: res.message,  icon: 'success',  duration: 2000,  icon:"none"})

      16.wx.reLaunch(Object object)

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

      属性类型默认值必填说明
      urlstring是需要跳转的应用内页面路径 (代码包路径),路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
      successfunction否接口调用成功的回调函数
      failfunction否接口调用失败的回调函数
      completefunction否接口调用结束的回调函数(调用成功、失败都会执行)
      wx.reLaunch({  url: '/pages/positons/index?id=1',})//另一个页面拿到数据// testPage({  onLoad (option) {    console.log(option.query)  }})

      17.wx.redirectTo(Object object)

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

      属性类型默认值必填说明
      urlstring是需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 'path?key=value&key2=value2'
      successfunction否接口调用成功的回调函数
      failfunction否接口调用失败的回调函数
      completefunction否接口调用结束的回调函数(调用成功、失败都会执行)
      wx.redirectTo({  url: '/pages/project/index?id=1'})

      18.wx.getLaunchOptionsSync()

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

      启动参数:

      属性类型说明最低版本
      pathstring启动小程序的路径 (代码包路径)
      scenenumber启动小程序的场景值
      queryObject启动小程序的 query 参数
      shareTicketstringshareTicket,详见获取更多转发信息
      referrerInfoObject来源信息。从另一个小程序、公众号或 App 进入小程序时返回。否则返回 {}。(参见后文注意)
      结构属性类型说明
      appIdstring来源小程序、公众号或 App 的 appId
      extraDataObject来源小程序传过来的数据,scene=1037或1038时支持
      forwardMaterialsArray.打开的文件信息数组,只有从聊天素材场景打开(scene为1173)才会携带该参数
      结构属性类型说明
      typestring文件的mimetype类型
      namestring文件名
      pathstring文件路径(如果是webview则是url)
      sizenumber文件大小
      chatTypenumber从微信群聊/单聊打开小程序时,chatType 表示具体微信群聊/单聊类型
      合法值说明
      1微信联系人单聊
      2企业微信联系人单聊
      3普通微信群聊
      4企业微信互通群聊
      apiCategorystringAPI 类别2.20.0
      合法值说明
      default默认类别
      nativeFunctionalized原生功能化,视频号直播商品、商品橱窗等场景打开的小程序
      browseOnly仅浏览,朋友圈快照页等场景打开的小程序
      embedded内嵌,通过打开半屏小程序能力打开的小程序

      返回有效 referrerInfo 的场景

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

      不同 apiCategory 场景下的 API 限制

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

      defaultnativeFunctionalizedbrowseOnlyembedded
      navigateToMiniProgramXX
      openSettingX
      XXX
      X
      X
      openEmbeddedMiniProgramXXX

      注意:

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

      let LaunchOptions = wx.getLaunchOptionsSync();

      19.App(Object object)

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

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

      属性类型默认值必填说明最低版本
      onLaunchfunction否生命周期回调——监听小程序初始化。
      onShowfunction否生命周期回调——监听小程序启动或切前台。
      onHidefunction否生命周期回调——监听小程序切后台。
      onErrorfunction否错误监听函数。
      onPageNotFoundfunction否页面不存在监听函数。1.9.90
      onUnhandledRejectionfunction否未处理的 Promise 拒绝事件监听函数。2.10.0
      onThemeChangefunction否监听系统主题变化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()

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

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

      属性类型说明
      widthnumber宽度,单位:px
      heightnumber高度,单位:px
      topnumber上边界坐标,单位:px
      rightnumber右边界坐标,单位:px
      bottomnumber下边界坐标,单位:px
      leftnumber左边界坐标,单位: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 // 显示区域的竖直滚动位置})

上一篇:浪潮服务器怎么列阵?

下一篇:宝塔面板入口揭秘,轻松掌握进入方法!