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的生命周期,和 应用生命周期,页面生命周期合起来的执行顺序:

 


原文地址:https://www.cnblogs.com/haoqiyouyu/p/14811642.html