这段时间又接了个uniap的项目,很久没写过系下程序的项目都快忘了,今天整理,温习下。
-
常用api
-
uni.request():发送网络请求,可以指定请求方法、请求头、请求参数等。
-
uni.showToast():显示一个消息提示框,可以设置提示内容、图标、持续时间等。
-
uni.showLoading():显示一个加载中的提示框,可以设置提示内容、样式等。
-
uni.hideLoading():隐藏正在加载的提示框。
-
uni.navigateTo():跳转到应用的某个页面,可以传递参数。
-
uni.switchTab():切换到应用的底部选项卡中的某个页面。
-
uni.getStorageSync():获取本地存储的数据。
-
uni.setStorageSync():将数据存储到本地存储中。
-
uni.getImageInfo():获取图片信息,如宽度、高度、格式等。
-
生命周期
-
onLaunch:小程序初始化时触发,全局只触发一次。
-
onShow:小程序启动或从后台进入前台显示时触发。
-
onHide:小程序从前台进入后台时触发。
-
onUniNViewMessage: uni-app 通信 API 触发,用于 H5 与小程序通信。
-
onLoad:页面加载时触发。
-
onReady:页面初次渲染完成时触发。
-
onUnload:页面被销毁时触发。
-
onPullDownRefresh:下拉刷新时触发。
-
onReachBottom:页面滚动到底部时触发。
-
onTabItemTap:点击底部 tab 时触发。
-
onPageScroll:页面滚动时触发。
-
onResize:页面尺寸变化时触发。
-
onNavigationBarButtonTap:导航栏按钮点击时触发。
-
如何使用微信api
-
安装插件
-
在 HBuilderX 开发工具的插件市场搜索 weixin-js-sdk 并下载安装。
-
配置插件
-
在项目根目录下的 manifest.json 文件中,将使用到的微信 API 在“permissions”节点下进行声明。例如:
{ "name": "myApp", "version": "0.0.1", "mp-weixin": { "appid": "wx***********", "permissions": { "scope.userLocation": { "desc": "你的位置信息将用于小程序定位" }, "scope.userInfo": { "desc": "您的个人信息将用于小程序登录和注册" } } } }
其中,“scope.xxx”表示需要使用的微信 API 的权限名称,“desc”是对该权限的描述,可以自定义修改。
3. 使用微信 API
1.在页面的 js 文件中,调用微信 API 的方式与原生小程序相同,直接引入 window.wx 即可,例如:
export default {
mounted () {
// 获取当前地理位置
window.wx.getLocation({
type: 'gcj02',
success: res => {
console.log(res)
},
fail: err => {
console.log(err)
}
})
}
}
需要注意的是,在使用微信 API 之前,需要先通过 wx.config 方法对 SDK 进行初始化。这个过程需要在服务端生成签名并传递给前端,一般可以使用第三方的 SDK 管理工具来完成。
4. 在使用 Uniapp 开发应用时需要注意以下几点
- 应用的兼容性:不同的平台有不同的限制和规范,需要根据具体平台的特点来设计和开发应用。
- 性能优化:Uniapp 通常采用了类似于打包技术的方式将多个页面合并到一个文件里面,需要考虑文件大小和加载速度等问题。
- 资源管理:由于不同平台的资源管理机制不同,需要针对不同平台进行资源管理和优化。
- 界面设计:Uniapp 对于界面设计较为灵活,但是需要考虑到不同平台的界面规范和交互方式。
- 调试和测试:Uniapp 支持直接在开发工具中进行调试和测试,但需要注意不同平台的调试方式和测试环境。
- 安全和权限:需要考虑到不同平台对于安全和权限的限制,尤其是对于敏感数据和操作的限制。