uni-app:学习使用门槛低,vuejs语法,一套代码多种编译方式多个平台运行,抛开这些兼容性不说,单单用来开发小程序也是最佳的选择
一:下载配置Hbuilder X
新建uni-app项目,包含模板,可选择支持scss语法
二:项目目录结构
components: uni-app组件目录
pages:项目文件目录
static:静态资源文件(图片、字体图标)
wxcomponents: 微信小程序组件目录
main.js : vue初始化入口文件
App.vue : 全局样式配置
manifest.json : 配置应用名称、打包信息等
pages.json : 配置页面路由等
三:生命周期
应用生命周期:应用生命周期仅可在App.vue中监听,在其它页面监听无效
onLaunch:项目初始化触发,仅一次
onShow: 显示页面时触发
onHide:关闭页面后触发
onError: 出现错误时触发
onUniNViewMessage:对nvue页面发送数据时触发
onUnhandledRejection:对未处理的Promise拒绝事件监听函数
页面生命周期:
onLoad: 页面加载时
onReady: 页面加载完成
onPullDownRefresh:监听用户下拉动作
onTabItemTap: 点击tab时触发
onPageScroll:监听页面滚动
四:路由
uni.navigateTo({ url }) 跳转到某个页面,保留当前页
uni.redirectTo({ url }) 跳转到某个页面,关闭当前页
uni.switchTab({ url }) 跳转到tabBar,并关闭所有不是tab的页面
uni.navigateBack() 关闭当前页,返回上一页面
五:发送请求
uni.request({
url,
data,
method,
success
})
六:下拉刷新
onPullDownRefresh
当把回调函数作为参数在另一个函数中执行的时候,如果想要确保参数不报错,在函数体内这么做:
callBack && callBack()
七:页面内跳转到站外的地址
1、location.href = "https://............."
2、使用标签