Skip to content

XieXiePro/FeedBackStar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

  本文内容整理自uni-app官方教程

  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 即可体验官方示例。

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

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

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

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

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

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

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

image

image

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

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

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

uni-app

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

uni-app

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

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

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

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

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

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

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

  1. 申请微信小程序AppID,参考微信教程   2. 在HBuiderX中,打开manifest.json,如下图所示配置小程序AppID

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

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

六、项目代码

  反馈星是使用uniapp开发的上报工具类项目。   发送文字、图片、音频、视频内容,您将获得意想不到的反馈。

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

About

本项目是uniapp开发的上报工具类App反馈星。 发起文字、图片、音频、视频反馈,您将会获得意想不到的反馈。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published