uni-app入门及练手项目

1多端的介绍

• pc：web,桌面应用
• 移动端：移动端–web app（android,ios） — 小程序（微信小程序，百度小程序，支付宝小程序，头条小程序，qq小程序，360小程序，华为小程序）

1.1原生app

• 使用原生的技术开发的手机端app Android系统（java android） ios–app(object-C)，京东，腾讯视屏，支付宝
• 优点：
  • 功能比h5较多，
  • 运行速度快，
  • 用户体验好
• 缺点:
  • 需要下载，占存储容量
  • 开发成本比较高。

1.2混合app

• 使用原生的app技术和H5技术进行一定比例混合开发的app,混合比例不限，
• 优点:
  • 功能比较多，速度比原生app运行速度慢，用户体验比较好。开发成本不高
• 缺点：
  • 需要下载，占存储容量
  • 混合技术不是特别成熟,
• react-native，filler

1.3多端

• pc：web,桌面应用
• 移动端：移动端–web app（android,ios） — 小程序（微信小程序，百度小程序，支付宝小程序，头条小程序，qq小程序，360小程序，华为小程序）

2dcloud的公司的介绍

https://www.dcloud.io/

2.1uni-app

概念

• uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
• DCloud公司拥有600万开发者用户，几十万应用案例、12亿手机端月活用户，数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。
• uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

选择原因

功能框架

3uni-app的由来

https://uniapp.dcloud.io/history

4快速上手

4.1使用hbuilderX可视化工具创建

https://www.dcloud.io/hbuilderx.html

1 下载hbuilderX

2 解压

• 将解压后的目录复制粘贴(不要是C盘，不要是中文目录)

3 新建项目

4 开发项目

5 调试运行项目

运行在h5端

行在微信小程序端

• 第一次告诉hbuilderX微信开发者工具安装到哪里去了
  
• 报错
  
• 原因：微信开发者工具没有ba端口打开
• 解决：打开微信开发者工具----设置—安全设置—打开端口
  
• 如果不能自动打开微信开发者工具，只能手动导入项目

运行在百度小程序端

运行在支付宝小程序端

运行在app上的表现

• 1 真机调试
• 2安装一个模拟器（雷电模拟器）
• 将真机或者模拟器调成开发者模式—设置—关于手机----版本号—连续点击5次|3次

6 上线项目

4.2使用命令行创建一个uni-app项目(了解)

1 创建项目

vue create -p dcloudio/uni-preset-vue my-project

2 编写代码

3调试代码

• npm run dev:平台

4 发布代码

• npm run build:平台
  

4.3命令行创建vs图形化的创建方式

• 图形创建的项目没有编译环境，使用的都是hbuilerX的编译环境

5框架简介

• uni-app 使用vue的语法+小程序的标签和API

开发规范

• 页面文件遵循 Vue 单文件组件 (SFC) 规范
• 组件标签靠近小程序规范，详见uni-app 组件规范
• 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
• 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发

目录结构

• 文件:
  • app.vue：对标app.js+app.wxss
  • main.js ：入口文件
  • mainfest.json：项目配置文件
  • pages.json:对标app.json和页面.json一个结合
  • uni.scss:全局的scss,css样式的值
• 目录
  • pages：uni-app的页面，一个页面是一个目录，目录下是个单文件**.vue
  • static:放置的是静态资源,图片，视屏，音频
  • common:放置公共的css文件
  • utils:放置公共的js文件
  • components：放置公共的组件的
  • platforms:个平台专用的页面
    • h5
    • mp-weixin

tips:

• 编译到任意平台时，static 目录下的文件均会被打包进去，非 static 目录下的文件（vue、js、css 等）被引用到才会被包含进去。
• static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
• css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。

资源路径的说明

引入静态资源(图片视屏)

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src