一、视图dom标签的替换
以下标签的替换需要注意css中的选择器也需要跟着替换。
1、div、p、h1~5等等块级元素替换为view标签
h1~5注意字体大小需要调整，具体根据页面大小调整。
2、span、label等等所有内联元素替换为text标签
注意：text的字体大小，选择器必须选择到text标签才能修改其字体大小。
因为text标签它本身就拥有一个默认字体大小12px的属性。
3、img替换位image标签
image需要闭合否则会运行时报错。
二、request请求
请求需要从axios更换为uni.request
三、路由跳转
1、路由配置
从router变为pages.json配置
2、路由跳转
从router.push标为uni.navigateTo，其他的router.go等等也需要被替换。
3、路由拦截
路由拦截，可以使用ui组件中的路由拦截，例如uview的路由跳转uni.$u.route方法可以配置路由拦截。
此时路由跳转，需要全部更换成改方法
四、浏览器缓存数据
小程序时没有localStorage、sessionStorage和cookies的，如果需要存缓存就只能用uni.setStorage、uni.setStorageSync。
五、组件的替换
1、整体UI组件的替换（工作量最大）
项目中ui组件在uniapp中大概率是不兼容的，比如：我们vue移动端常用的组件有vantUI等等，不兼容uniapp。
这时可以去uniapp官网的插件市场，找到兼容的ui组件，比如uni-ui、uview然后替换ui组件。
其中大体包括一些标签，例如：input，textarea，checkbox，radio，button，img等等，
以上这些需要替换成新替换上去ui组件对应的标签。
2、npm install组件的兼容与替换
1、首先：uniapp项目中可以不用npm install就不用，如果用的话，尽量保持组件的体积不要过大，因为小程序要发布提交到管理平台的话，整体打包后的代码主包不能超过2M，如果组件太大，会导致vendor.js文件过大。
2、有些组件有包括dom操作根据情况使用，这里是不建议使用的，因为如果你要兼容小程序的话，小程序中是没有dom操作的。
遇到这种情况的话：
（1）要么就在uniapp插件市场寻找对应的组件进行替换。
（2）要么就自己写一个，小程序有自己的dom操作api，uni.createSelectorQuery，可去官网搜索这个api进行查看。
六、组件样式修改
1、建议不要在组件上加class样式。
有时候运行到h5是正常的，
运行到小程序就被吃掉了，直接不见。
2、某个页面需要修改组件内部样式。(重要)
H5我们使用::v-deep一般就能穿透到组件内部去影响样式。
但是小程序光有这个还不行，得在methods同级加上：
options: {
styleIsolation: "shared"
}
^^
七、数据获取问题
1、vuex数据获取问题
H5上数据能够用state或getters中的数据进行数据的实时渲染。
但小程序不行，永远是旧的数据，无法进行实时渲染。
小程序得借助页面中的computed属性，来实现vuex数据在dom上的实施渲染，例如：
computed: {
username() {
return this.$store.getters.user.username;
}
}
2、小程序中Vue.protype中属性渲染问题
H5中，如果在main.js中使用Vue.prototype.定义一个属性，这时候如果把这个属性使用在视图上，当属性变化的时候，视图也会跟着变化。
但是在小程序上却不行，永远是旧的数据，无法进行实时变化。
解决办法：
（1）尽量不设置Vue.prototype属性，把变换的属性放到Vuex中。
（2）使用方法的形式，例如：
Vue.prototype.getData = () => {
return Vue.prototype.data;
}
通过方法的形式，再每次执行方法的时候重新获取数据。
但也有情况不建议使用，如果你停留在这个页面，又去改变了Vue.prototype.data，视图还是不会刷新。这种方法仅仅适用于，获取一次性的数据。例如：进入项目时获取用户信息。
文章来源：https://www.toymoban.com/news/detail-478273.html
八、主包体积过大的问题
1、小程序包主包体积大于2M就无法上传发布。
这时候我们就要进行分包，分包有几个注意的点：
（1）通常我们写代码每个文件夹里面的文件可能与其他文件夹里的文件有有依赖关系，这时需要注意：主包、分包无法引用其他分包中的文件，主包、分包可以引用主包中的文件。
（2）分包数量没有上限。
（3）每个分包的大小不可大于2M。
（4）tabbar页面组件必须在主包中。
（5）技巧：如果多个分包的内容相互依赖了，那么为了可以将这多个分包整合成一个分包。这样能避免分包不能引用分包的问题。文章来源地址https://www.toymoban.com/news/detail-478273.html
2、删掉冗余的代码
# 九、dom操作的指令无法使用 小程序不支持dom操作。
# 十、图片的迁移 除了tabbar的icon图标，其他的图片全部迁移到服务器上，通过链接的形式访问。
# 十一、dom操作别用 小程序不支持dom操作。
到了这里，关于vue移动端项目迁移到uniapp，并兼容小程序的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[微信小程序] movable-view 可移动视图容器 - 范围问题](https://imgs.yssmx.com/Uploads/2024/02/561291-1.gif)
