uni-app的介绍安装和运行

uniapp教程指南

uniapp介绍

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

uniapp特点

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

创建并运行项目

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

    • 下载地址
    • 一定要下载App版本
    • 此编辑器是不需要安装,只需要解压使用就行
    • 创建项目
      1. 文件 --> 新建 --> 项目

        • uni-app的介绍安装和运行
      2. 选择类型uni-app,输入项目名称(建议不要使用中文),选择模板(推荐学习的时候选择默认模板)

        • uni-app的介绍安装和运行
    • 运行项目
      1. 运行到浏览器端(h5)

        • 在编辑器就会生成项目,随便点击项目的某个文件,比如点击选中app.vue,点击工具栏运行-->运行到浏览器 --> chrome
        • 运行效果如下
          • uni-app的介绍安装和运行
      2. 运行到真机或者模拟器

        • 真机需要连接usb,打开开发者工具开启usb调试功能
        • 此处我是采用雷神模拟器,下载安装雷神模拟器,进行如下配置
          1. 打开模拟器,设置模拟器(如下图)
            • uni-app的介绍安装和运行
          2. 打开HBuilder,点击运行 --> 运行到手机或模拟器 --> android模拟器端口号设置
            • uni-app的介绍安装和运行
          3. 进行模拟器安装目录和端口号配置
            • uni-app的介绍安装和运行
          4. 选择运行 --> 运行到手机或模拟器 --> 选中运行即可
            • uni-app的介绍安装和运行
          5. 切换到模拟器,效果如下
            • uni-app的介绍安装和运行
  2. 通过vue-cli命令行创建(不推荐)

    1. 全局安装vue-cli
        npm install -g @vue/cli
        yarn add @vue/cli -g 
    
    1. 创建uni-app
      vue create -p dcloudio/uni-preset-vue my-project
      
      • 此处项目因为托管github上面,安装可能会超时
      • uni-app的介绍安装和运行
      • 解决方案
        • 使用手机热点
        • 增加本地dns解析,修改hosts文件
      • 选中模板
        • uni-app的介绍安装和运行
    2. 运行项目
      • npm run dev:h5
上一篇:iOS开发那些事-iOS应用本地化-文本信息本地化


下一篇:iOS开发那些事-平铺导航-基于Page的导航及案例实现