uni-app简介、条件编译、App端Nvue开发、HTML5+、开发环境搭建、自定义组件、配置平台环境、uniCloud云开发平台

uni-app简介

概述:uni-app是一个前端跨平台框架:会uni-app就可以用一套代码(类似vue语法)打包出安卓、ios、及各种小程序(微信、qq、支付宝等)端跨平台发布。

生态:完整的生态,很多第三方接入只需简单配置即可。

优势:开发者数量多、平台能力不受限(支持原生代码混写和原生sdk集成)、性能优越、周边生态丰富、学习成本低、开发成本低

代码风格:整体采用vue代码开发风格,支持vue语法,组件标签靠近小程序规范,在发布h5时支持所有vue语法,发布到APP和小程序时,支持部分vue语法。

uni-app和vue及小程序的关系:vue中很多硬件接口不支持,而小程序支持,uni-app结合它们各自的优点,接口能力靠近微信小程序规范(wx换成uni),整体代码风格靠近vue,在vue的生命周期基础上还支持所有微信小程序生命周期。

支持组件化开发:和vue一样,支持自定义组件开发方式,大大提高开发效率,完全吻合软件开发思想(高内聚低耦合)。

uni-app规范:遵循vue单文件组件(SFC)规范,数据绑定及事件处理同vue一样,为兼容多端,建议使用flex布局。

web代码和uni-app简单对比:


<div class="main_box">
  <img src="logo.png" alt="">
  <p>
    <span>标题:xxxspan>
  p>
div>


<view class="main_box">
  <image src="logo.png" alt="">image>
  <view>
    <text>标题:xxxtext>
  view>
view>

条件编译:
在跨平台开发中难免遇到一些兼容问题,此时如果写很多if-else就会导致项目很难维护,uni-app考虑这点提供了条件编译的写法,具体语法:如下:

#ifdef APP-PLUS
 写仅支持app下的代码块 
#endif

#ifdef H5
 写除h5平台以外平台的代码
#endif

#ifdef H5||MP-WEIXINH5或微信小程序代码块
#endif

App端Nvue开发:
Nvue是nativeVue的简写(后缀为nvue的文件),内置了weex渲染能力(Weex使开发人员能够使用类似Web的语法通过单一代码库构建iOS、Android和Web应用),在Nvue可以使用uni-app语法和Weex做到原生app体验的App。

HTML5+:
html5+可以提供我们在App端直接调用原生Android和iOS插件解决uni-app开发中很难实现的某些功能,同时内置很多api丰富开发功能。

uni-app知识点:
组件 :自定义组件、基础组件

API : 获取网络状态,网络请求,系统信息等;导航跳转api,uni-app中没有vue-router,而是更接近小程序中的页面切换。

生命周期:
语法 :条件判断,列表渲染等,布局样式处理,使用less/sass等样式预处理器

uni-app中每个.vue文件语法:

<template>
	
	<view v-bind:class="className">
		
		<text class="title">{
  {title}}text>
		
		<view v-on:click='clickHandle'>点我触发函数view>
		
		<view v-if='false'>哈哈哈1view>
		<view v-else

你可能感兴趣的:(Uni-app,uni-app,html5,前端)