• 01-基础


    下载微信开发者工具:传送门

    下载后安装,点击运行工具:

     扫码登录


     uni-app 规范:

    1.页面文件遵循Vue单文件组件规范

    2.组件标签靠近小程序规范

    3.接口能力(JS API)靠近微信小程序规范

    4.数据绑定及事件处理同Vue.js规范

    5.为兼容多端运行,建议使用flex布局进行开发 

    upiapp框架会为我们自动带上各个浏览器的样式前缀


    uniapp特色:

    1.条件编译

    2.App端的 Nvue 开发(native vue的简写)

    Nvue内置了weex的渲染引擎,weex为App提供了源生的渲染能力,在Nvue中我们既可以使用weex的组件和API,也可以使用uniapp的组件和API,这就相当于Nvue为weex渲染引擎补充了大量的uniapp的组件和API

    3.HTML5+ 

    像一些比较复杂的功能,在纯前端很难做到的时候,我们可以使用原生的安卓和IOS插件来帮助我们去实现这些功能。同时HTML5+还内置了几十万种API和方法,让我们能够方便的快速实现这些丰富的原生能力。

    需要说明:Nvue 和 HTML5+只能在APP端去使用,在H5和小程序端是无法使用的,如果我们项目只是去实现APP端的话,不妨去体验一下Nvue和HTML5+。


     uniapp知识点:


     搭建uniapp开发环境:

    两种创建uniapp项目的方式:

    1.安装并运行HbuilderX(uniapp自家的产品,对uniapp比其他编辑器支持度高)

    传送门 下载了正式版的APP开发版

    打开hbuilderX后新建项目:

    2.使用vue-cli的方式运行项目

    前提要装有node和vue cli

    使用命令:

    vue create -p dcloudio/uni-preset-vue test-uniapp(项目名)

    安装成功后提示选择模板:

     选择模板后回车,安装模板后,就可以进入模板项目,运行启动项目了

     两种创建项目的方式:(左边第一种hbuilderX自建项目的模板,右边vue-cli模板),我们使用vue开发基本都会选择vue-cli的方式把,但是我们用hbuilderX编辑器更好,因为自带提示,用其他编辑器如Vscode就没有,比如下面的右图,是在hbuilderX中打开的项目,输入就有提示,同样的项目VSCODE中就没有提示。


    1. 它拥有像vue一样的模板语法{{}},v-if条件判断,v-for循环,写法与vue一模一样


     2..基础组件:就是一些标签,如view 相当于div,text相当于span,写的时候对照着官方文档,组件上还可以加上一些内置的属性如:

     

     这样鼠标按下去的时候,就会出现设置的边框


     3.自定义组件:

    自定义组件创建与vue一样的方式,引入的时候,直接@路径,就代表是src下的,不需要我们像vue中去进行配置(uniapp帮你配置好了)

    组件之间的数据通信跟vue一样。


     4.uniapp中的一些api的使用

    输出结果:


     5.条件编译

     如果上面加上h5,就会在h5页面(就是我们谷歌浏览器中看到这句话)

     在样式和方法中同样这样写,就是把要加条件编译的代码用#ifdef #endif包裹一下


     6.样式

     

     在uniapp中写样式的单位可以是px,rpx , rem , vw/vh

    rpx是一个相对于屏幕宽度的自适应单位。 在uniapp是以750屏幕宽度为基准的

     引入外部样式文件:同vue一样,用@import '~~~'


     7.生命周期:

    1)应用的生命周期

    在App.vue文件中

    启动编译:

     注意:第一次需要设置微信开发者工具的本地文件路径,还需要打开微信开发者工具的设置-安全设置功能:

     接着,就会自动打开微信开发者工具

    非常注意的一点:微信开发者工具的启动必须是用上面说到的用uniapp创建的upiapp的项目,如果用vue-cli创建的项目是虽然可以启动微信开发者工具,但是不会自动打开项目,如果自己导入项目,会报错。


     2)页面生命周期

     因为rediect会卸载掉(关闭)上一个页面,所以再进来的时候还会触发onLoad,onShow,onReady 钩子

     


     3)组件生命周期

    就是一个vue的生命周期,和 应用生命周期,页面生命周期合起来的执行顺序:

     


  • 相关阅读:
    常见的线性结构
    Lambda表达式学习笔记
    Spring Security 入门 (二)
    Spring Security 入门(一)
    Eclipse 创建 Maven 项目
    初学 Spring MVC(基于 Spring in Action)
    蓝桥杯之入学考试
    Java 学习总结
    二叉搜索树和红黑树
    Detours 劫持
  • 原文地址:https://www.cnblogs.com/haoqiyouyu/p/14811642.html
Copyright © 2020-2023  润新知