在本专栏之前的文章已经为大家介绍过,uniapp作为一个跨端开发框架被广泛应用。通过uniapp可以开发一套程序。运行到andoid、ios以及各种小程序端,微信小程序、支付宝小程序、百度小程序、字节跳动小程序、快应用、QQ小程序、360小程序、京东小程序、快手小程序等
本文为大家创建第一个uniapp项目,并将项目以andorid应用的形式运行到真机进行调试,以“微信小程序”为例编译运行到微信开发者工具。
在开始之前我们有必要先去下载2个工具,因为uniapp的开发,如果是andoid、ios我们可以通过、调试或者打包运行到真实的手机上。如果是小程序的开发,我们需要将uniapp代码先编译为微信小程序代码、支付宝小程序代码、百度小程序代码等,然后运行到对应的开发者工具上面才可以进行后续的发行、扫码之类的操作。
百度搜索关键字“HBuilderX”、“微信开发者工具”、“下载”即可,我这里就不给出下载地址了。这两个工具安装都很简单,下一步、下一步安装完成即可。
安装完成HBuilderX之后,文件->新建->项目
之后会弹出一个弹出框,在弹出框内我们选择uniapp、然后输入我们开发的uniapp项目名称。选择模板,uniapp(DCloud)官方有很多的现成的uniapp开发模板。uniapp是基于vue语法进行开发的,根据自己熟悉的vue语法选择图中的Vue版本,然后点击创建这样我们的第一个uniapp项目就创建成功了。
如果你是一个新手,建议你先把经典模板里面的经典组件使用方式演示看一遍,这样在你自己开发的时候,你知道某个组件的应用方式,然后找到对应的模板对应的代码copy过来直接使用即可,这样会节省你很多的开发时间,也是上手学习uniapp最快的方法。
新建uniapp项目完成之后,HbuilderX会自动打开新建的项目,项目的目录结构几乎和vue项目的结构是同样的。关于uniapp项目结构和各种文件的作用,我会在本专栏再单独写一篇文章进行介绍。
首先将您的手机连接到开发电脑上,确保手机处于“开发者模式”。在开发者选项中,将“USB调试”以及“USB安装”的开关按钮打开,这样我们才能将项目真机运行。这一步各种手机存在差异,但大同小异,根据自己不同的手机型号大家自己研究一下吧。HbuilderX将Uniapp运行到手机端需要下载一个插件,参考下图
插件安装完成之后,我们将项目运行到手机端,因为我使用Android手机,所以选择运行到Android App基座。
完成上面的步骤,uniapp会提示您选择的真机设备,然后进行项目编译。实际真机运行就是在手机端安装了一个真实的android应用,所以安装过程中手机端有提示信息“允许、拒绝”相关的,都选择“允许”。完成这些步骤之后,你会发现你的uniapp-android应用在你的手机上运行起来了。
首先微信开发者工具安装完成之后,需要开发者用微信扫码才能登陆,先登录进去。登录进去之后,我们找到设置按钮,在安全设置里面,将服务端口打开。服务端口打开之后,HBuilderX才能和微信开发者工具进行通信。将uniapp编译之后的代码,自动转移到微信小程序开发者工具中。
然后回到HBuilderX开发工具里面,我们选择“运行” ->“运行到小程序模拟器”,我们可以看到有很多的开发者工具可以选择。假如我们希望我们的uniapp项目,被编译为微信小程序项目,那么我们就选择微信开发者工具。如果你想开发的是支付宝小程序、百度小程序,就安装并选择对应的工具即可。
我们选择“微信开发者”工具,第一次运行的时候会提示你指定微信开发者工具的安装路径。
完成上面的指定动作之后,uniapp项目代码就被编译为微信小程序的代码,运行在微信开发者工具端。后续无论你是发行小程序、还是扫码查看小程序都是和原生微信小程序一样的操作了。
后续我会写文章介绍,uniapp的项目结构,微信原生小程序的项目结构及微信开发者工具的使用,当然这个专栏还会写很多的内容,欢迎大家关注我。