uni-app项目工程入门

官网:https://haomo-tech.com
作者:田涛
邮箱:tiantao@haomo-studio.com

概述

课程时长:17分钟
面向群体:初级前端工程师

课程大纲

第一节:uni-app介绍 (时长:2分钟)

  • uni-app是一个使用Vue.js开发跨平台应用的前端框架。

  • uni-app继承自Vue.js,提供了完成的Vue.js开发体验。有一定Vue.js和小程序开发经验的开发者可快速上手uni-app,开发出兼容多端的应用。

  • 通过编写Vue.js代码,uni-app将其编译到IOS,Android,微信小程序等多个平台。

所以对于我们技术人员而言,不需要学习那么多的平台开发技术,研究那么多的前端框架,学会基于vue的uni-app就够了。对于公司而言,降低成本,覆盖更多用户,uni-app是高效利器。

第二节:基于uni-app开发 (时长:7分钟)

搭建环境 (时长:2分钟)
  • 下载编辑器 HbuilderX:HbuilderX下载地址,也可以进入uni-app官网,介绍 --> 快速上手 --> 环境安装,下载安装。

  • 微信开发者工具,最新下载地址,编译、调试小程序可用。

创建项目 (时长:5分钟)
  • 打开HbuilderX,点击文件 --> 新建--> 项目 --> 选择 uni-app,选择默认模板,输入项目名称点击创建。

  • 此时项目已经创建好了。可以用以下几种方式运行调试。
    (1)运行到浏览器,即可在浏览器里面体验uni-app 的 H5 版。。
    (2)运行到手机或模拟器。若是用手机调试,需要先去下载真机运行的插件,下载插件后,插入手机,就可以发现手机,并进行调试。
    (3)运行到小程序模拟器。首次使用需要进行运行设置。将安装好的微信开发者工具路径配置好。然后可以运行进行调试。在模拟器运行时,修改页面代码,保存代码后会进行重新编译,模拟器也会重新运行,可以实时观察页面更新,这也是模拟器的一个便捷性。

第三节:开发规范及目录结构 (时长:5分钟)

  • pages.json,配置页面路由,导航条,选项卡等页面信息。
  • manifest.json,配置应用名称。
  • App.vue,应用配置,用来配置app全局样式以及用来监听应用的生命周期。
  • main.js,vue初始化入口文件,整个程序运行都会加载的js文件,会应用到整个app和小程序中去,可以把全局的内容写入其中。
  • app.wxss,小程序专用css样式文件,是一个全局样式文件。
  • staic,静态资源文件目录,存储图片、视频资源等(注意,静态资源只能存放在这里)。
  • pages,业务页面文件存放目录。
  • components,组件文件存放目录。
  • pages目录中的.vue文件。.vue文件是一个自定义的文件类型。用HTML语法描述一个Vue组件,每个.vue文件包含三种类型的顶级模块,分别是 template 模板层、scriptjs模块、style样式模块。这是uniapp的单文件规范。也是可以使用src导入的方式,把模板层,js,css写入外部文件。
  • 为了更好地兼容多段运行,建议使用flex布局,相比较传统css,flex布局灵活,可控性好。

第四节:发布uni-app (时长:3分钟)

  • 打包为原生app(云端)。在HbuilderX工具栏,点击发行,选择原生app-云端打包,在点击打包即可。

  • 打包为原生app(离线)。在HBuilderX工具栏,点击发行,选择本地打包,点击生成本地打包App资源。

  • 发布为H5。
    (1)在 manifest.json 配置发行后的路径(发行在网站根目录可不配置),比如发行网站路径是 www.xxx.com/html5,在 manifest.json 文件内编辑 h5 节点,router 下增加 base 属性为 html5。
    (2)在HBuilderX工具栏,点击发行,选择网站-H5手机版,点击即可生成 H5 的相关资源文件,保存于 unpackage 目录。

  • 发布为小程序
    (1)申请微信小程序AppID。
    (2)在HBuiderX中,打开manifest.json,配置AppID。
    (3)在HBuilderX中顶部菜单依次点击 "运行" --> "运行到小程序模拟器" --> "微信开发者工具",等待 uni-app 项目成功编译并自动启动微信开发者工具。
    (4)在微信开发者工具中,测试项目代码运行正常后,点击"上传"按钮,之后按照 "提交审核"--> "发布" 小程序标准流程,逐步操作即可。

results matching ""

    No results matching ""