最近刚搞完H5转微信小程序，写一些经验之谈。最重要的是不要慌，一点一点来。 我总结了三个步骤。

一、解决编译成微信小程序的过程中的报错

我说一下我碰到的。 1，小程序不支持 component 动态组件，所以把所有需要用到的组件都引入进来。通过v-if来控制组件是否显示。

// 删除了项目中的一些代码 这些应该能看懂
 <div class="item" v-for="(item, index) in data" :key="index">
          <!-- #ifdef H5-->
          <component :is="template" :showData="item" />
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN -->
          <template1 v-if=""/>
          <template2 v-if="" />
          <!-- #endif -->
        </div>
        
// #ifdef MP-WEIXIN
import template1 from './template-1.vue'
import template2 from './template-2.vue'
// #endif

// #ifdef MP-WEIXIN
 components: {
    template1,
    template2,
  },
  // #endif

2，有的组件库不支持，uview是支持的，vant可以切换成支持小程序的版本，因为项目中只是引入而没有使用，所以就直接注释掉了。 3，h5是用的axios进行网络请求，小程序是不支持的，所以可以用axios适配器进行uniAPi的适配。 代码我贴一下。

// #ifdef MP-WEIXIN
// 自定义适配器来适配uniapp语法
axios.defaults.adapter = function(config) {
	return new Promise((resolve, reject) => {
		var settle = require('axios/lib/core/settle');
    var buildURL = require('axios/lib/helpers/buildURL');
    !config.url.startsWith('/') && (config.url = '/' + config.url)
		uni.request({
			method: config.method.toUpperCase(),
			url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
			header: config.headers,
			data: config.data,
			dataType: config.dataType,
			responseType: config.responseType,
			sslVerify: config.sslVerify,
			complete: function complete(response) {
				// console.log("执行完成：", response)
				response = {
					data: response.data,
					status: response.statusCode,
					errMsg: response.errMsg,
					header: response.header,
					config: config
				};
				settle(resolve, reject, response);
			}
		})
	})
}
// #endif

二、解决编译成功后，微信开发者工具中的报错

1，最主要的就是将webAPI替换成uniAPI，window对象、loacion对象等都无法使用，我的解决办法是有平替的语法，直接使用条件编译进行平替语法替换，如果没有，就直接全部// #ifdef H5 先不编译到小程序。项目先不报错跑起来再说。 2，这些报错如果找不到就全局搜索，可能是有的插件里有一些webAPI，那么就要根据webpack打包信息找到是哪个插件，先卸载了不报错。

三、基础报错解决完后，解决组件样式跟方法的不兼容，以及查补原有业务逻辑。

1.我主要碰到的是一些超文本标签不能使用、style无法设置、以及获取dom的方法的适配。

// 删除了一些项目代码 这个方法可以获取到dom宽高之类的信息 但是无法设置style  设置style可以用动态stlye进行设置
this.createSelectorQuery().select('class || id 名').boundingClientRect(data => {
            this.Width = data.width
          }).exec()

2，适配其他的样式 例如 tabbar navbar 等等 一些细节的项目问题。