什么是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的合体版本,它是免费的。
-
轻巧
仅10余M的绿色发行包(不含插件) -
极速 不管是启动速度、大文档打开速度、编码提示,都极速响应 C++的架构性能远超Java或Electron架构
-
vue开发强化打开网址
对vue做了大量优化投入,开发体验远超其他开发工具 详见 按下Alt+鼠标左键可直接
-
小程序支持 国外开发工具没有对中国的小程序开发优化,HX可新建uni-app或小程序、快应用等项目,为国人提供更高效工具
-
markdown利器 HX 是唯一一个新建文件默认类型是markdown的编辑器,HX也是对md支持最强的编辑器HX为md强化了众多功能,请务必点击【菜单-帮助-markdown语法示例】,快速掌握md及 HX的强化技巧!
-
清爽护眼 HX的界面比其他工具更清爽简洁,绿柔主题经过科学的脑疲劳测试,是最适合人眼长期观看的主题界面 详见
-
强大的语法提示 HX是中国唯一一家拥有自主IDE语法分析引擎的公司,对前端语言提供准确的代码提示和转到定义(Alt+鼠标左键)
-
高效极客工具 更强大的多光标、智能双击…让字处理的效率大幅提升 了解 HX的极客技巧,详见,
-
更强的json支持 现代js开发中大量json结构的写法,HX提供了比其他工具更高效的操作 详见
-
丰富的快捷键
如果你习惯了其他工具(如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会自动编译或对文件右键-外部命令编译时使用。
- 浏览器访问下面链接,点击右侧使用HBuilderX > 弹出窗口点击打开HBilderX :
https://ext.dcloud.net.cn/plugin?name=compile-node-sass
- 在 HuilderX 会弹出是否安装,点击
- 安装成功后,在页面的style标签上使用 lang=“scss” 后即可编写scss代码
<style lang="scss">
</style>
创建项目
-
文件-新建-项目
-
打开新建项目窗口后,项目名mxg-education-app , 具体如下操作,
HBuilder 连接真机
HBuilder/HBuilderX真机运行、手机运行、真机联调常见问题 http://ask.dcloud.net.cn/article/97
Mac 连接iphone真机
新安装HBuilderX工具的要保证有App真机运行插件,有手机才会被HBuilder识别。
上面是预告,连接步骤:
- 确认手机已通过数据线连接电脑
- 电脑下载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手机
- 关于本机(指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
- 重启HBuilderX。
- 如重启HBuilderX仍然不行,请使用命令行(终端.app),切换到HBuilderX自带的adb目录。
- HBuilderX正式版的adb目录位置:tools/adbs目录(MAC下为HBuilderX.app/Contents/tools/adbs目录)
- HBuilderX Alpha版的adb目录位置:plugins/launcher/tools/adbs目录(MAC下为/Applications/HBuilderX-Alpha.app/Contents/HBuilderX/plugins/launcher/tools/adbs目录)
- 在adbs目录下运行./adb kill-server重试。
- 重启电脑重试。
Windows连接Android手机
确认已安装Android手机驱动。
如果手机连接没有任何反应或提示驱动问题,可通过以下方式解决:
-
装驱动比较好的方式是使用各种手机助手,比如360、腾讯的各种手机助手,如果有问题,尝试升级助手的版本。
-
打开手机开发者模式,(不同机型打开方式不一样,自行百度)一般是找到机器版本号。如打开开发者模式:关于手机》设备停止》版本号 (多点击它几下,会提示已打开开发者模式)
-
找下手机是否有个 usb调试,打开它。
Windows 连接iphone真机
- 确认手机已通过数据线连接电脑
- 确认已安装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
- 确认iTunes能正常连接手机
- 如手机屏幕弹出需信任本计算机的询问,请同意该授权
如果不小心点了不信任,可请前往“设置”>“通用”>“还原”>“还原位置与隐私”
- 如果是第一次安装完itunes,建议重新启动HBuilderX
- 如果以上方案都无法解决,有可能是因为本地库与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或者重试真机运行
- 有可能是iTunes安装时依赖库丢失,尝试重装iTunes解决问题
- iTools提供了一个修复驱动的工具和教程,可以参考http://bbs.itools.cn/thread-129390-1-1.html
运行到微信小程序
- 下载微信小程序开发工具稳定版: https://developers.weixin.qq.com/miniprogram/dev/devtools/downlo ad.html
- 安装微信小程序开发者工具
- 运行到微信小程序,如下
4. 如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。如下图,需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具,需要开发者手动启动,然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面,在HBuilderX里面开发,在微信开发者工具里面就可看到实时的效果。
微信小程序真机预览
- 访问 https://mp.weixin.qq.com/ 注册微信小程序个人帐号,注册后,再登录如下操作查看AppID
2. 打开HBuilderX工具中,项目的mainfest.json文件,点击微信小程序 将AppID粘贴进入就可以了,
3. 打开工具,点击右上角 详情 》基本信息》会有一个AppID框,将上面复制的AppID粘贴即可。
4. 点击菜单栏的 预览》自动预览》编译并预览,你打开小程序绑定的微信号,它就会自动运行打开小程序
报错: Cannot read property ‘forceUpdate’ of undefined
解决: