持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情

uniapp是一个支持多端的框架，支持小程序向uni-app的转换，uniapp是用的vue语言，小程序是vue语法的定制，跟vue很相似。本文主要介绍如何将小程序项目转为uniapp项目。

1.小程序转uniapp

首先新建uni-app项目。

uniapp中html，js，css是放在一个vue页面，而小程序是分为4个页面，将app.js,app.wxss的内容复制到app.vue中，globalData的数据也全部放到app.vue的script里面。
获取globalData的方法是getApp().globalData.user。
将app.json中的内容复制到pages.json下，把每个pages页面的json里的属性，放在pages.json的style中。
pages下的每一个目录新建一个空的vue页面，wxss的内容放在vue文件的style中，js的内容放在vue文件的script中。
自定义的方法放在vue文件的methods中。
onLoad和onShow直接复制放在script下
之前用setData存放数据，需要重新赋值，直接用this.代替。
wxml中的内容放在template的view下面
属性的修改，如下

小程序	uniapp
属性绑定 `attr="{{}}"`	`:attr="a`
`index="index{{ item }}"`	`:title="'index' + item"`
事件绑定 `bind:click="submit"`	`@click="submit"`
阻止事件冒泡 `catch:tap="skipNext"`	`@tap.native.stop="skipNext"`
`wx:if`	`v-if`
`wx:for="{{ list }}" wx:key="{{ index }}"`	`v-for="(item,index) in list"`

小程序自定义的组件放到根目录的wxcomponents下，然后在pages.json下的style下的usingComponents中引入需要的组件

{  
"pages": [ 
    {  
        "path": "pages/login/login",  
        "style":{  
            "navigationBarTitleText":"登录",  
            "usingComponents":{ 
                "van-button": "/wxcomponents/vant/buttont/index"  
            }  
        }  
    }  
]

2.关于vant

vant weapp是一套功能很强大的微信小程序组件，是基于微信的自定义组件原理实现的。但是它不能在H5及其他小程序平台运行。在uni-app的app中也实现了一套微信小程序引擎，所以可以兼容运行vant weapp。

但是uni-app的app端使用的是手机的webview而不是腾讯的X5浏览器内核，所以在低端的Android4、5手机上可能存在css兼容性问题

一般情况下，建议开发者使用标准的uni-app组件，即vue标准组件。
除非确定只做微信小程序，否则不建议整体项目依赖在vant weapp上。

3.总结

虽然小程序可以转为uniapp，但是转换后只能适用于微信和app，想支持支付宝，百度的话，需要新建swancomponents等目录，将微信自定义组件复制到这些目录，改造测试。各个端的细节还是有差异的，需要自己测试总结，修改。h5不支持自定义组件，所以可以选择使用uniapp插件里的类似组件来代替之前小程序的组件，比如用uview代替vant weapp，用ucharts代替wx-charts等等。

下一章就来介绍如何用uview开发uniappp，（主要是我用之前小程序用的vant，现在要支持h5，改造太难了，索性换掉了。）

uni-app学习day04-小程序转uniapp

1.小程序转uniapp

2.关于vant

3.总结