uniapp教程指南

uniapp介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

• 官网跨平台项目预览地址

uniapp特点

1. 跨平台
   • 一套代码可以运行在多个平台，打包生成多个平台的应用
2. 学习成本低（拥抱开发者）
   • 基于vue+小程序的语法
3. 开发成本低（拥抱老板）
   • 无需单独招聘IOS和安卓开发

创建并运行项目

1. 通过HBuildreX(亲爸开发的)编辑器内置环境，下载App版本，该编辑器包含了uniapp创建、运行、打包。(推荐的方式)

   • 下载地址
   • 一定要下载App版本
   • 此编辑器是不需要安装，只需要解压使用就行
   • 创建项目

     1. 文件 --> 新建 --> 项目

        • 

     2. 选择类型uni-app,输入项目名称（建议不要使用中文），选择模板（推荐学习的时候选择默认模板）

        • 
   • 运行项目

     1. 运行到浏览器端（h5）

        • 在编辑器就会生成项目，随便点击项目的某个文件，比如点击选中app.vue，点击工具栏运行-->运行到浏览器 --> chrome
        • 运行效果如下
          • 

     2. 运行到真机或者模拟器

        • 真机需要连接usb，打开开发者工具开启usb调试功能
        • 此处我是采用雷神模拟器，下载安装雷神模拟器，进行如下配置
          1. 打开模拟器，设置模拟器（如下图）
             • 
          2. 打开HBuilder，点击运行 --> 运行到手机或模拟器 --> android模拟器端口号设置
             • 
          3. 进行模拟器安装目录和端口号配置
             • 
          4. 选择运行 --> 运行到手机或模拟器 --> 选中运行即可
             • 
          5. 切换到模拟器，效果如下
             • 

2. 通过vue-cli命令行创建（不推荐）

   1. 全局安装vue-cli

       npm install -g @vue/cli
       yarn add @vue/cli -g 
   

   2. 创建uni-app

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

      • 此处项目因为托管github上面，安装可能会超时
      • 
      • 解决方案
        • 使用手机热点
        • 增加本地dns解析，修改hosts文件
      • 选中模板
        • 
   3. 运行项目
      • npm run dev:h5