行业知识
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) // 小程序 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 才能关闭提示框
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| 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. | 否 | 本接口为 Beta 版本,暂只在 Android 平台支持。需要隐藏的转发按钮名称列表,默认['shareAppMessage', 'shareTimeline']。按钮名称合法值包含 "shareAppMessage"、"shareTimeline" 两种 | 2.11.3 | |
| success | function | 否 | 接口调用成功的回调函数 | ||
| fail | function | 否 | 接口调用失败的回调函数 | ||
| complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
Tip:
- "shareAppMessage"表示“发送给朋友”按钮,"shareTimeline"表示“分享到朋友圈”按钮
- 隐藏“发送给朋友”按钮时必须同时隐藏“分享到朋友圈”按钮,隐藏“分享到朋友圈”按钮时则允许不隐藏“发送给朋友”按钮
wx.hideShareMenu({ menus: ['shareAppMessage', 'shareTimeline']})orwx.hideShareMenu();9.wx.showShareMenu(Object object)
显示当前页面的转发按钮
属性 类型 默认值 必填 说明 最低版本 withShareTicket boolean false 否 是否使用带 shareTicket 的转发详情 menus Array. 否 本接口为 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.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 获取当前的页面栈,决定需要返回几层。
属性 类型 默认值 必填 说明 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()ortry { 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 否 图标 合法值 说明 最低版本 success 显示成功图标,此时 title 文本最多显示 7 个汉字长度 error 显示失败图标,此时 title 文本最多显示 7 个汉字长度 2.14.1 loading 显示加载图标,此时 title 文本最多显示 7 个汉字长度 none 不显示图标,此时 title 文本最多可显示两行,1.9.0及以上版本支持 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})orwx.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',})//另一个页面拿到数据// testPage({ 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 进入小程序时返回。否则返回 {}。(参见后文注意) 结构属性 类型 说明 appId string 来源小程序、公众号或 App 的 appId extraData Object 来源小程序传过来的数据,scene=1037或1038时支持 forwardMaterials Array. 打开的文件信息数组,只有从聊天素材场景打开(scene为1173)才会携带该参数 结构属性 类型 说明 type string 文件的mimetype类型 name string 文件名 path string 文件路径(如果是webview则是url) size number 文件大小 chatType number 从微信群聊/单聊打开小程序时,chatType 表示具体微信群聊/单聊类型 合法值 说明 1 微信联系人单聊 2 企业微信联系人单聊 3 普通微信群聊 4 企业微信互通群聊 apiCategory string API 类别 2.20.0 合法值 说明 default 默认类别 nativeFunctionalized 原生功能化,视频号直播商品、商品橱窗等场景打开的小程序 browseOnly 仅浏览,朋友圈快照页等场景打开的小程序 embedded 内嵌,通过打开半屏小程序能力打开的小程序 返回有效 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 X X X X 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 // 显示区域的竖直滚动位置})
上一篇:浪潮服务器怎么列阵?