如果你手头上有一套微信小程序的代码，怎样把它变成一个网页版或者app版本的呢？我推荐你使用uni-app。

        使用uni-app可以很方便的将微信小程序代码翻译成uni-app项目，通过uni-app项目又可以编译成h5、app或微信小程序版本。这样一来，写一份代码同时可以在三个端甚至更多地方工作，何乐而不为呢？

        首先我们要在官网下载uni-app的官方IDE工具HBuilderX-高效极客技巧，安装好后大概就像下面这样。

        

         接下来为了可以将现有的微信小程序代码转成uni-app项目，我们需要在插件市场中找miniprogram-to-uniapp v2插件，并安装miniprogram-to-uniapp v2 - DCloud 插件市场，这个安装很简单我就不多言了，只要你的HBuilderX是运行的状态，它会自动检测并下载安装。

         

        准备工作做好了，首先通过打开目录将我们现有的微信小程序项目导进去。

 在项目上右击，会有一个选项miniprogram-to-uniapp v2，点击以后弹出对话框

选项基本不用动，这边需要留意的一点是这个输出目录好像不能随便乱改，改完便无法转换了。

 

        开始后等他转换就行，几分钟就可以完成。log里会有一些输出，提示你有哪些不兼容的。等转换完成后可以试着跑一下微信小程序试试，因为是从微信小程序转过来的，所以基本不会有什么问题。

        可能会有个别有语法问题的地方在编译的时候报错出来了，但我们打开了页面面对几千行代码无从下手怎么办呢？这个很好办，可以在插件市场里面找下面两款插件，一款是针对js代码的，一款是针对vue写法的。用不用的先装上再说。

        eslint-js - DCloud 插件市场

        eslint-plugin-vue - DCloud 插件市场

        装好后也不是立马就能用的，需要稍微改以下代码，然后保存，只要有保存的动作，他就可以检查整个文件，然后将报错的地方找出来。

        这两个插件一装，代码一改，基本上就是检查以下页面哪里有不兼容的插件，改掉就行了。

坑：

1. 如果在微信小程序中使用了插件，到uniapp中可能不会自动转换，需要在mainfest.json手动添加plugin依赖

"mp-weixin" : {
        "usingComponents" : true,
        "plugins": {
            "live-player-plugin": {
                "version": "1.3.5",
                "provider": "wx2b03c6e691cd7370"
            }
        },
}

2. 微信小程序中的富文本处理方式wxParse不能用了，uni-app会自动转成mp-html，如果需要拼接img中的src链接，可以使用domain字段

将域名传进去，需要拼接的时候mp-html会自动帮你拼接的

3. 如果在调试app版时遇到运行正常而一旦debug就白屏的情况，这不是代码出了问题，而是你的包体积过大，加载不出来，这时候需要在page.json中将一些暂时用不到的page注掉，待调试完成再反注回来。虽然麻烦但只能这么做了。

4. 调试android时遇到一个bug，getCurrentPages获取到的页面对象page，没办法调用setData方法更新页面。这个问题在微信小程序及H5版本都是好的，网上看了很多帖子，没有能够正面的解决这一问题，只好退而求其次，使用uni推出的EventBus来解决了。

使用到两个方法，

    uni.$emit('updateTabBar', tabBar);
    uni.$on('updateTabBar',function(data){
            that.setData({
                tabBar: data
            });
        });
将需要更新的对象通过data字段传递，在需要更新的页面接收再调用setData方法更新。虽然麻烦一点也只能这么做了

5. h5版本跨域设置

    dev环境下的跨域设置很简单，只需要在mainfest.json添加以下配置即可，不需要修改后端代码，这边target直接设置为正式环境，使用时将请求地址的hosturl替换为uniapi即可。

正式环境下的跨域配置就比较复杂了，需要前后端一起进行修改，并且一定要是在同域的服务器下才能配置成功。

首先后端需要在Web.Config下的system.webServer节点下配置以下节点

先remove再add，可以把缓存清除掉。

Access-Control-Allow-Origin配置我们前端部署的端口号

如果需要传递cookie的话，就必须配置Access-Control-Allow-Credentials，同时前端在发送接口时需要带上withCredentials参数。

Access-Control-Allow-Headers，Access-Control-Allow-Methods就是一些基本配置了。

差不多了，试下成功了没。