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、使用标签

原文地址:https://www.cnblogs.com/caibaotimes/p/13857602.html