开发技术栈

uni-app快速开发

2019-04-18  本文已影响46人  十佳少年

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

uni-app框架由Dcloud即数字天堂(北京)网络技术有限公司推出,该公司主要产品有Web开发IDE Hbuiler、HbuilderX,前端框架mui、uni-app,增强版的手机浏览器引擎H5plus等。

一、环境搭建

使用HBuilderX可视化界面快速创建项目,HBuilderX内置处理了相关环境依赖。

HBuilderX:IDE。最新版本下载地址

微信开发者工具:调试预览工具。最新版本下载地址

二、创建uni-app项目

  点击工具栏里的文件 -> 新建 -> 项目:

  选择uni-app,输入工程名,如:hello-uniapp,点击创建,即可成功创建 uni-app。点击模板里的 Hello uni-app 即可体验官方示例。

三、运行uni-app

  1.  真机运行:连接手机,开启USB调试,进入hello-uniapp项目,点击工具栏的运行 -> 真机运行 -> 选择运行的设备,即可在该设备里面体验uni-app。

  2.  浏览器运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器,即可在浏览器里面体验uni-app 的 H5 版。

  3.  在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app。

四、uni-app调试

1.使用 Chrome 调试

进入uni-app项目,点击工具栏的运行 -> 运行到浏览器 -> 选择 Chrome,即可将 uni-app运行到 浏览器,可参考运行uni-app,运行到浏览器后,就能和普通 web 项目一样进行预览和调试了。

注意:Chrome调试只能保证样式一致,部分原生能力是不支持的。

  点 Chrome 控制台的 Sources 栏,可以给 js 打断点调试。

  在 Page 下找到 webpack 里的工程目录,可直接找到对应的vue页面进行断点调试;或按 Ctrl+P搜文件名,进入页面调试;也可点击控制台的 log 信息,进入对应的页面进行调试。

image

image

2.使用微信web开发者工具调试

uni-app运行到微信web开发者工具,可在控制台查看console信息,网络请求等信息等。

注意:开发App或微信小程序均可使用微信开发者工具进行调试。

  页面样式调试和一般的web项目一样,通过调试的箭头选中元素即可查看相应的节点和样式,如下图:

uni-app

  调试 js 时需要切换到 Sources 栏,选中想要调试的那个页面的js,进行调试(如果js代码是压缩过的,点击右下角的{}可格式化代码),如下图:

uni-app

五、发布 uni-app

1.打包为原生App(云端)

  在HBuilderX工具栏,点击发行,选择原生app-云端打包,如下图:

  出现如下界面,点击打包即可。

2.打包为原生App(离线)

uni-app支持离线打包,在 HBuilderX 生成离线打包资源,然后参考离线打包(或参考其他用户写的离线打包日记),即可进行离线打包。

  在HBuilderX工具栏,点击发行,选择本地打包,如下图,点击即可生成离线打包资源。

3.发布为H5

1.  在manifest.json配置发行后的路径(发行在网站根目录可不配置),比如发行网站路径是www.xxx.com/html5,在manifest.json文件内编辑h5节点,router下增加base属性为 html5,如下图所示:

  2.  在HBuilderX工具栏,点击发行,选择网站-H5手机版,如下图,点击即可生成 H5 的相关资源文件,保存于 unpackage 目录。

4.发布微信小程序

按照如下步骤可将uni-app发布到微信小程序:

1.  申请微信小程序AppID,参考微信教程

2.  在HBuiderX中,打开manifest.json,如下图所示配置小程序AppID

3.  在HBuilderX中顶部菜单依次点击 "运行" --> "运行到小程序模拟器" --> "微信开发者工具",等待uni-app项目成功编译并自动启动微信开发者工具

4.  在微信开发者工具中,测试项目代码运行正常后,点击"上传"按钮,之后按照 "提交审核"--> "发布" 小程序标准流程,逐步操作即可,详细查看微信官方教程

六、项目代码

反馈星是使用uniapp开发的上报工具类项目。

发送文字、图片、音频、视频内容,您将获得意想不到的反馈。

Github下载:https://github.com/XieXiePro/FeedBackStar

上一篇下一篇

猜你喜欢

热点阅读