【uniapp】

171 阅读3分钟

基础

uniapp是什么?

uni-app 是 DCloud 出品的新一代跨端框架,可以说是目前跨端数最多的框架之一了,目前支持发布到:App(Android/iOS)、H5、小程序(微信小程序/支付宝小程序/百度小程序/字节跳动小程序)

uniapp的同类框架:

目前市面上类似的框架还有:Taro(京东出品)、Megalo(网易出品)。

nvue是什么?

uni-app 的 nvue 说白了就是 weex 的那一套东西,uni-app 集成了 weex 的 SDK,也就实现了 App 端的原生渲染能力。 weex 支持的东西,在 nvue 里大多都是支持的。

项目目录

image.png

文件加载顺序

参照vue项目启动后调用顺序: index.html → main.js → app.vue → router/index.js → components/组件。

uni-app项目启动后文件调用顺序为: index.html → main.js → app.vue → pages.json → components/组件。

main.js

main.js是uni-app的入口文件,主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。 使用Vue.use引用插件,使用Vue.prototype添加全局变量,使用Vue.component注册全局组件。 注意:此处无法使用vue-router,路由须在pages.json中进行配置。如果开发者坚持使用vue-router,可以在插件市场找到转换插件。

App.vue

App.vue是uni-app的主组件,所有页面都是在App.vue下进行切换的,是页面入口文件。但App.vue本身不是页面,这里不能编写视图元素。 这个文件的作用包括:调用应用生命周期函数、配置全局样式、配置全局的存储globalData。

globalData的使用

js中操作globalData的时候要注意,在onLaunchonShow生命周期函数中不能直接使用getApp().globalData,应用会报错。因为getApp()在这两个生命周期函数中还没有创建出app实例。

setTimeout(() => { 
    let provider = getApp().globalData.provider 
    console.log(`globalData is: ${provider}`) 
}, 0)
// 或
this.$nextTick(function(){ 
    let provider = getApp().globalData.provider 
    console.log(`liubbc provider: ${provider}`) 
})

应用生命周期仅可在App.vue中监听,在页面监听无效。 uni-app 支持 onLaunch、onShow、onHide 等应用生命周期函数,

pages.json

pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生导航栏、底部原生tabbar 等。 它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容,在uni-app中是在manifest.json中配置。 uni-app 通过 pages 节点配置应用由哪些页面组成

  • pages节点的第一项为应用入口页(即首页);
  • 应用中新增/减少页面,都需要对 pages 数组进行修改;
  • 文件名不需要写后缀,框架会自动寻找路径下的页面资源; 详见:shq5785.blog.csdn.net/article/det…

路由跳转

路由传参

详见:blog.csdn.net/sunhuaqiang…

标准js 和 浏览器js的区别

  • uni-app的js代码,h5端运行于浏览器中。非h5端(包含小程序和App),Android平台运行在v8引擎中,iOS平台运行在iOS自带的jscore引擎中,都没有运行在浏览器或webview里。
  • 非H5端,虽不支持window、document、navigator等浏览器的js API,但也支持标准ECMAScript。
  • 不要把浏览器的js扩展对象等价于标准js。
  • uni-app的非H5端,一样支持标准js,支持if、for等语法,支持字符串、数字、时间、布尔值、数组、自定义对象等变量类型及各种处理方法。仅仅是不支持window、document、navigator等浏览器专用对象。

推荐看:CSDN博主「No Silver Bullet」 参考链接:blog.csdn.net/sunhuaqiang…