uni-app简单入门_uni app菜鸟教程

一. uni-app的简单介绍

1. 什么是uni-app？
   uni-app 是使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

2. uni-app的优点？

   跨平台发行，运行体验更好

   • 与小程序的组件、API一致；
   • 兼容weex原生渲染，增加了开发效率高，但是由于weex坑比较多，建议还是使用局部渲染优化；

   通用前端技术栈,学习成本更低

   • 支持vue语法，微信小程序API
   • 内嵌mpvue

   开发生态,组件更丰富

   • 支持通过npm安装第三方包
   • 支持微信小程序自定义组件及JS SDK
   • 兼容mpvue组件及项目(内嵌mpvue开源框架)
   • App端支持和原生混合编码
   • 插件丰富,DCloud将发布插件到市场

3. uni-app和vue的区别？

   这篇文章关于这问题讲的很详细，分享给大家，希望我们对uni-app有一个更深的理解

   uni-app和vue的区别

二. 功能框架浏览图

三 . 接下来的很重要，就是怎么去创建一个uni-app项目

• 首先就是安装HBuilderX

  可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。

  开始之前，当然先要下载HBuilderX：官方IDE下载地址

  • 小提示：ctril+N可以快速调转到新建选择类型
    

• 创建uni-app
  

• 运行项目
  

• 官方提示

  • static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
  • css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。

四 . 学习框架

1. 项目结构介绍
   1.1 项目结构介绍
   

2. 开发规范
   2.1 uni-app约定的开发规范
   + 页面文件遵循 Vue 单文件组件(SFC)规范
   + 组件标签靠近小程序规范，详见 uni-app组件规范
   + 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx替换为uni，详见uni-app接口规范
   + 数据绑定及事件处理同Vue.js 规范，同时补充了App及页面的生命周期
   + 为兼容多端运行，建议使用flex布局进行开发
   2.2 uni-app开发的注意事项
   a. html标签
   uni-app的tag同小程序的tag，和HTML的tag不一样，比如div要改成view，span要改成text、a要改成navigator。

   b.CSS

   推荐使用flex布局模型
   单位方面，uni-app 支持的通用 css 单位包括 px、rpx
   (早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx 了)

   c. JS

   只有H5端可使用浏览器内置对象，比如document、window、localstorage、cookie等，以及jquery等依赖。

   d. 项目文件
   显示页面必须放到pages目录下，页面所在目录的目录名需要放入相同名称的.vue文件。
   
   静态资源如图片，固定放到static目录下。这是webpack、mpvue的规则
   e. echats图表
   H5端流行的echart报表因为涉及大量dom操作，无法跨端使用，而wx-chart在跨端和更新方面都不足，推荐使用uChart组件。如仍然坚持使用原版echart，可在web-view组件中内嵌html来使用。

3. 页面样式与布局
   3.1 尺寸单位
   uni-app支持一下css单位：

注意问题： 动态绑定的 style 不支持使用 upx，因为upx是编译器处理的，在手机端动态修改样式赋值时，无法直接使用 upx。

解决方案： 使用 uni.upx2px(Number) 转换为 px 后再赋值。

this.cWidth = uni.upx2px(750);
1

3.2 样式导入

<style>
    @import "../../common/color.css";
    .colorA {
        box-shadow: none;
    }
</style>
1
2
3
4
5
6

3.3 内联样式

支持 style 和 class来控制样式，但建议不要在style中直接使用，影响渲染速度。

3.4 所支持的选择器

3.5 背景图片和字体图标

• 支持 base64 格式图片。
• 支持网络路径图片。
• 使用本地图片或字体图标需注意：

1. 图片小于 40kb，uni-app 会自动将其转化为 base64 格式；
2. 图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
3. 本地引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。

/* 背景图片 */
 .bgImg {
     background-image: url('~@/static/logo.png');
 }
/* 字体图标 */
 @iconImg {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }
1
2
3
4
5
6
7
8
9

3.6 条件编译

1. 用特殊的代码做标记，不同标记里面的代码可以在不同平台里面执行。
2. 支持的文件
   .vue
   .js
   .css
   pages.json
   各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug
3. 语法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
   #ifdef：if defined 仅在某平台存在
   #ifndef：if not defined 除了某平台均存在
   %PLATFORM%：平台名称

	<!-- #ifndef APP-PLUS -->
	<text class="app-text">text</text>
	<!-- #endif -->
	
	<!-- #ifdef MP-WEIXIN -->
	<text class="weixin-text">text</text>
	<!-- #endif -->

1
2
3
4
5
6
7
8