ui图转vue

ui图转vue有以下步骤。

1、直接打开sketch文件后，在顶部「插件」菜单，选择「CodeFun」的「上传设计稿」菜单。

2、然后在d框中登录账号，并选择创建的「项目」和「画板」。

3、然后点击「上传」，等待上传完成后，后台便马上能看到我们导入的项目，并且每个页面整齐摆放，我们随便打开一个页面看看。熟悉的代码，熟悉的HTML/CSS/JavaScript映入眼帘。

4、然后试试导出项目代码，可以自行选择导出「微信小程序」或者「Vuejs」项目，还有选择导出的是rpx单位还是px单位。

前端最火热的话题无法就是flutter,不管是刷哪个论坛，必定有探讨flutter的文章。没用过flutter，但是对于跨平台的技术，我一直都在研究。

为什么是uni-app

之前一直在找解决跨平台的方案，尝试了很多方案，比如滴滴的变色龙，但是最终还是选择了uni-app，这里附上uni-app的官网。为什么会选择它呢，第一，vue语法，学习成本低，上手速度快，只要之前你做过vue的项目，那么就能很快上手，其实是vue和微信小程序的结合体，一半vue，一半微信小程序。第二，长期维护，之前做微信小程序的时候，选择了美团的mpvue，但是后面发现长期不维护了，提了Issues也没人理，随之就放弃了，而uni-app长期在维护，这样看出了开发团队的用心。第三，跨平台的能力，uni-app能够跨多个终端，H5，安卓，Ios，微信小程序，百度小程序，头条小程序，支付宝小程序，真正实现了一套代码，多端运行，而且很好适应了我国的市场。第四，日益丰富的插件市场，uni的插件市场也在日益强大，能够基本上满足我们平时的开发需求。

uni-app的组件有原生调用能力，第三方的vue库在调原生接口时跟5runtime不兼容。就像有vue版和angular版，类似于reactnative,都是起源于phonegap/cordova

实际开发效果遵义小红椒做了一款app，打包了安卓，Ios,微信小程序3个平台，产出的效果都还是不错，总体还是比较满意。而且打包过程也很方便简单，配套的HBuilderX自动内置了打包功能，所以也省去了打包的烦恼。

遵义小红椒建议

如果你现在想做一款跨平台的产品，而且有vue和微信小程序的经验，最重要的，你不想学习一门新语言，那么uni-app也许是你的一个选择。

被wx-open-launch-weapp折磨累了，也就不废话了，直接上关键点：

<font color='red' size='2'>ps:其他细节不赘述，自行百度，有很多案例</font>

<font color='gray' size='2'>在vue的视图页：</font>

<font color='gray' size='2'>在vue的methods中：</font>

<font color='gray' size='2'>在vue视图中：</font>

<font color='gray' size='2'>在vue的script中（可放在created中）：</font>

<font color='red' size='3'> 注意：</font>

<font color='gray' size='3'>vue页面中，可以使用 <script type="text/wxtag-template"></script> 进行包裹标签</font>

<font color='gray' size='3'>普通html页面中，使用 <template></template> 进行包裹</font>

<font color='gray' size='3'>样式中不可添加 position:fixed，position:absoulte 样式，不然按钮不展示</font>

ps： 尽自己的绵薄之力让大家少走点坑，其他的坑大家慢慢踩吧