什么是uniapp

什么是 uni-app

  • Uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
  • DCloud公司拥有600万开发者用户，几十万应用案例、12亿手机端月活用户，数千款uni-app插件、70+微信/qq群。
  • Uni-app在手，做啥都不愁。即使不跨端， uni-app 也是更好的小程序开发框架（详见）、更好的App跨平台框
    架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。
  • Uni-app使用 vue 的语法 + 小程序的标签和 API 。

安装开发工具 HBuilderX

什么是 HBuilderX

HBuilderX，H是HTML的首字母，Builder是构造者，X是HBuilder的下一代版本。我们也简称 。 是轻如编辑器、强如IDE的合体版本，它是免费的。

  1. 轻巧
    仅10余M的绿色发行包(不含插件)

  2. 极速 不管是启动速度、大文档打开速度、编码提示，都极速响应 C++的架构性能远超Java或Electron架构

  3. vue开发强化打开网址

对vue做了大量优化投入，开发体验远超其他开发工具 详见 按下Alt+鼠标左键可直接

  1. 小程序支持 国外开发工具没有对中国的小程序开发优化，HX可新建uni-app或小程序、快应用等项目，为国人提供更高效工具

  2. markdown利器 HX 是唯一一个新建文件默认类型是markdown的编辑器，HX也是对md支持最强的编辑器HX为md强化了众多功能，请务必点击【菜单-帮助-markdown语法示例】，快速掌握md及 HX的强化技巧！

  3. 清爽护眼 HX的界面比其他工具更清爽简洁，绿柔主题经过科学的脑疲劳测试，是最适合人眼长期观看的主题界面 详见

  4. 强大的语法提示 HX是中国唯一一家拥有自主IDE语法分析引擎的公司，对前端语言提供准确的代码提示和转到定义(Alt+鼠标左键)

  5. 高效极客工具 更强大的多光标、智能双击…让字处理的效率大幅提升 了解 HX的极客技巧，详见，

  6. 更强的json支持 现代js开发中大量json结构的写法，HX提供了比其他工具更高效的操作 详见

  7. 丰富的快捷键
    如果你习惯了其他工具(如vscode或sublime)的快捷键，在 方案中可以切换。

下载 HBuilderX 开发工具

最新版本下载：https://www.dcloud.io/hbuilderx.html
HBuilderX历史版本下载地址： https://ask.dcloud.net.cn/article/37302

我们从历史版本中下载 2.9.3 ，如下图: （ 不要用2.9.7+以上，新版本对 vedio 自定义视频播放竖/横屏有问题）

在这里插入图片描述

下载好后，直接傻瓜式安装，安装后查看HuilderX版本，使用2.9.3.20201014版本
在这里插入图片描述
安装后，如果会弹出安装一个语法提示库插件，点击它进行安装（不弹就忽略它）。安装成功后，重启
HuilderX
在这里插入图片描述
在这里插入图片描述

安装scss/sass编译

使用了scss/sass语法后需要编译为css。uni-app会自动编译或对文件右键-外部命令编译时使用。

  1. 浏览器访问下面链接，点击右侧使用HBuilderX > 弹出窗口点击打开HBilderX ：
    https://ext.dcloud.net.cn/plugin?name=compile-node-sass
    在这里插入图片描述
  2. 在 HuilderX 会弹出是否安装，点击
    在这里插入图片描述
  3. 安装成功后，在页面的style标签上使用 lang=“scss” 后即可编写scss代码
<style lang="scss">

</style>

创建项目

  1. 文件-新建-项目
    在这里插入图片描述

  2. 打开新建项目窗口后，项目名mxg-education-app , 具体如下操作，
    在这里插入图片描述

HBuilder 连接真机

HBuilder/HBuilderX真机运行、手机运行、真机联调常见问题 http://ask.dcloud.net.cn/article/97

Mac 连接iphone真机

新安装HBuilderX工具的要保证有App真机运行插件，有手机才会被HBuilder识别。
在这里插入图片描述

上面是预告，连接步骤：
  1. 确认手机已通过数据线连接电脑
  2. 电脑下载iTunes，确认iTunes能正常连接手机
    (爱思官方可下：http://url.i4.cn/UjuIbiaa)

在这里插入图片描述
3. 如手机屏幕弹出需信任本计算机的询问，请同意该授权
4. 连接成功，在Hbuilder菜单栏上点击 运行 ，如下图就可以查看到手机型号，运行项目到手机上
在这里插入图片描述如果显示未检测到设备，就是Hbuilder没有识别到，连接失败，参见官方说明 http://ask.dcloud.net.cn/a rticle/97
5. 运行后，查看控制台到如下日志，说明APP已经安装到手机，
在这里插入图片描述
6. 打开手机，查看桌面上已经有一个HBuilder的APP后，当前点击app还打不开，
7. 然后如下操作后就可以打开APP了，步骤：
“设置”—》“通用”—》“设备管理” (或"描述文件"。这步app安装成功后才找得到）— 》找到 Digital Heaven
开头的证书 》 信任
在这里插入图片描述

Mac连接Android手机

  1. 关于本机(指Mac系统的关于本机，非手机) --> 系统报告 -> usb -> 你所连接的device --> 厂商ID或者供应商ID(Vendor ID)

在这里插入图片描述
2. 在终端执行如下命令：echo xxxxxx >> ~/.android/adb_usb.ini （“xxxxxx”为厂商ID或者供应商ID(Vendor ID)，有些系统下echo命令并不能正确写入文件，可在~/.android/目录下修改或新建adb_usb.ini添加 xxxxxx）

# 进入 ~ 目录
mengxuegu@mengxuegu ~ % cd ~ 
# 如果不存在android则创建
mengxuegu@mengxuegu ~ % mkdir android 
# 写入文件
mengxuegu@mengxuegu ~ % echo 0x17ef >> ~/android/adb_usb.ini 
# 查看下是否添加成功
mengxuegu@mengxuegu ~ % cat ~/android/adb_usb.ini 0x17ef
  1. 重启HBuilderX。
  2. 如重启HBuilderX仍然不行，请使用命令行(终端.app)，切换到HBuilderX自带的adb目录。
  3. HBuilderX正式版的adb目录位置：tools/adbs目录（MAC下为HBuilderX.app/Contents/tools/adbs目录）
  4. HBuilderX Alpha版的adb目录位置：plugins/launcher/tools/adbs目录（MAC下为/Applications/HBuilderX-Alpha.app/Contents/HBuilderX/plugins/launcher/tools/adbs目录）
  5. 在adbs目录下运行./adb kill-server重试。
  6. 重启电脑重试。

Windows连接Android手机

确认已安装Android手机驱动。
如果手机连接没有任何反应或提示驱动问题，可通过以下方式解决：

  1. 装驱动比较好的方式是使用各种手机助手，比如360、腾讯的各种手机助手，如果有问题，尝试升级助手的版本。

  2. 打开手机开发者模式，（不同机型打开方式不一样，自行百度）一般是找到机器版本号。如打开开发者模式：关于手机》设备停止》版本号 （多点击它几下，会提示已打开开发者模式）

  3. 找下手机是否有个 usb调试，打开它。

Windows 连接iphone真机

  1. 确认手机已通过数据线连接电脑
  2. 确认已安装iTunes，若未安装点击itunes历史版本下载地址, 请下载12.9.4.102之前的版本
    win7安装itunes失败说明：https://baijiahao.baidu.com/s?id=1602604904242895792&wfr=spider&for=pc
    itunes历史版本下载地址（ 请下载12.9.4.102之前的版本）：https://mydown.yesky.com/pcsoft/3349142 7/versions/
    12.9.4.102 版本会出现以下情况，所以不使用这个版本：
    在这里插入图片描述
  • 12.11.0.26版本itunes连接上，但是HBuilder识别不到；或者itunes连接不上手机
    如果出现上面情况，安装 04-配套软件\itoolssetup_4500.exe工具，然后手机usb连接电脑，打开
    itools 工具，它会自动修复驱动，需要等待10分钟左右。等itools识别到了后，将 HBuilderX重启，就 可以识别到了。
    在这里插入图片描述
    如果重新安装itunes 识别不到iphone，没有卸载干净，按下面网站卸载
    https://zhidao.baidu.com/question/1731993899251396907.html
    apple官网提示（我测试无效）：https://discussionschinese.apple.com/thread/79226
  1. 确认iTunes能正常连接手机
  2. 如手机屏幕弹出需信任本计算机的询问，请同意该授权

如果不小心点了不信任，可请前往“设置”>“通用”>“还原”>“还原位置与隐私”

  1. 如果是第一次安装完itunes，建议重新启动HBuilderX
  2. 如果以上方案都无法解决，有可能是因为本地库与iTunes带的库冲突了，一般是iTunes库目录（32位系统目录为：C:\Program Files\Common Files\Apple\Apple Application Support，64位系统目录为：C:\Program Files (x86)\Common Files\Apple\Apple Application Support）下的dll文件和系统库目录（32位系统目录 为：C:\WINDOWS\system32，64位系统目录为：C:\Windows\SysWOW64）下的dll重名，可将iTunes库目录下的同名dll文件拷贝到系统库目录下，或者将系统目录下的同名dll文件重命名或删除，然后再重启 HBuilder或者重试真机运行
  3. 有可能是iTunes安装时依赖库丢失，尝试重装iTunes解决问题
  4. iTools提供了一个修复驱动的工具和教程，可以参考http://bbs.itools.cn/thread-129390-1-1.html

运行到微信小程序

  1. 下载微信小程序开发工具稳定版： https://developers.weixin.qq.com/miniprogram/dev/devtools/downlo ad.html
  2. 安装微信小程序开发者工具
  3. 运行到微信小程序，如下

在这里插入图片描述
4. 如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。
在这里插入图片描述

微信小程序真机预览

  1. 访问 https://mp.weixin.qq.com/ 注册微信小程序个人帐号，注册后，再登录如下操作查看AppID

在这里插入图片描述
2. 打开HBuilderX工具中，项目的mainfest.json文件，点击微信小程序 将AppID粘贴进入就可以了，

在这里插入图片描述
3. 打开工具，点击右上角 详情 》基本信息》会有一个AppID框，将上面复制的AppID粘贴即可。

在这里插入图片描述
4. 点击菜单栏的 预览》自动预览》编译并预览，你打开小程序绑定的微信号，它就会自动运行打开小程序
在这里插入图片描述
报错： Cannot read property ‘forceUpdate’ of undefined
在这里插入图片描述
解决：
在这里插入图片描述

# 前端 # uni-app
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

基于云主机搭建Termgraph绘图工具，将数据转化为可视化图形

avatar 华为开发者空间
cover

解读TaurusDB字段压缩：减少存储成本，避免语句大量修改

avatar 华为开发者空间
cover

使用DAS的导出和导入功能迁移GaussDB数据

avatar 华为开发者空间