uni-app实战教程

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、使用标签<web-view src="https://............"></web-view>