uni-app（一）

uni-app（一）

最近迷上了多端开发，首先了解的是DCloud的uni-app和京东的taro，一位之前写过一个mui + native的app，所以决定先尝试以下同是出自DCloud的uni-app，这个号称是可以覆盖一套代码跑7个平台的框架，
且看以下官方的图片

创建项目

官方创建项目的方法有两种，一种是通过HbuilderX的可视化界面创建新的项目，比较简单，开箱即用，而且覆盖所有平台；另一种是通过vue-cli脚手架来创建项目，但是这个方法并不适用于app，如果只是小程序
和web界面的话，是可以的。我们这里选择HbuilderX的可视化创建项目

HbuilderX创建项目一如既往的简单明了，如下

然后填写项目名称，选择所需要的模版

大功告成，试试能不能那么神奇！

h5 浏览器环境

运行 -> 运行到浏览器 -> chrome 然后会自动调起 chrome浏览器，打开调试，调至手机模式，刷新一下，完全没有问题

微信小程序

微信开发者工具下载

运行到浏览器，完全没有问题，然后愉快的试了一下微信小程序，跟想象中的完全不同，发现会报如下错误

什么鬼，微信开发工具打开了，但是并不能展示我们的小程序，找不找原因，最后是在微信开发工具里面手动添加编译好的小程序路径，想查看效果的话就需要去微信开发工具里面点一下编译才行，很是纠结

虽然微信小程序过程有点繁琐，但是效果是没话说的，完全兼容小程序平台，以下是我随便写了点东西，效果还是不错的

支付宝小程序

支付宝开发者工具下载

类似与微信小程序，需要在支付宝小程序工具中打开项目路径，然后编译，可以直接运行

百度小程序

百度开发者工具下载

同上，直接是打不开的，需要先在百度开发者工具中打开编译好的路径，保存的时候，小程序会自动刷新，很方便

字节跳动小程序

字节跳动开发者工具

同上，也是需要在工具先打开，但是这个小程序有个坑，就是你更改代码编译之后，模拟器中的内容并没有任何变化，退出重新打开就可以了，可能是我配置错了，又知道的小伙伴，敬请告知

iOS模拟器

由于本地是macOS环境，所以优先测试了一下iOS能不能跑起来，确保本地安装了Xcode，然后 运行 -> 运行到手机或模拟器 -> iOS模拟器 然后随便选择了一个型号的手机，完全没问题

控制台会展示当前app的状态

这里附上项目编译后的路径

因为没有安卓环境，按个模拟器太占内存了，所以就没有在测试安卓的app，以后有机会一定会测一下。

基于一套代码，通过HBuilderX的编译，基本上在上诉几个平台运行是没什么问题的，我会写一个很小的测试项目来试一下uni-app效果如何。

本文纯手打，有不当之处请留言！如果对小伙伴们有帮助的话,点赞啊,谢谢!