微信小程序转换uni-app详细指南

真同学
2,233 阅读3分钟

一.安装插件

打开插件链接：HBuilder X 插件 miniprogram-to-uniapp，点击右侧绿色按钮“使用HBuilderX导入插件”。

二. 开始转换

在HBuilder X左侧项目管理器里，在小程序项目上右键，点击弹出菜单里面的 “miniprogram to uniapp v2”，然后等待插件运行结束即可

参考：ext.dcloud.net.cn/plugin?id=2…

三. 解决运行报错

问题1：

image.png

报错原因

  1. 微信小程序原生路径@vant/weapp/calendar/index在UniApp中无法直接使用
  2. UniApp有自己的组件引入机制
  3. Vant Weapp是专为微信小程序设计的组件库

解决方案

将原来的vant组件全部替换，使用UniApp的组件

问题2：

image.png

报错原因

微信小程序原生引入了BehaviorWithStore 来源于 mobx-miniprogram-bindings插件，该插件在uniapp中不可用

解决方案

UniApp 支持在项目中直接使用 Vuex

//1.安装vuex
//首先，确保你已经安装了 Vuex。你可以通过 npm 或 yarn 来安装 Vuex：
npm install vuex@next --save

//2.配置 Vuex
//在你的项目中创建一个 store 文件（例如 `store/index.js`），并配置你的状态、mutations、actions 等：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 state: {
   count: 0
 },
 mutations: {
   increment(state) {
     state.count++
   }
 }
})
export default store

//3.在 UniApp 中使用 Vuex
//在你的 `main.js` 或 `main.ts` 文件中引入并使用这个 store：
import Vue from 'vue'
import App from './App'
import store from './store'
const app = new Vue({
 ...App,
 store
})
app.$mount()

//4.在组件中使用 Vuex：
//在你的组件中，你可以通过 `this.$store` 访问 Vuex store，并使用其中的状态或方法：
<template>
  <view>
    <text>{{ count }}</text>
    <button @click="increment">Increment</button>
  </view>
</template>
 
<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  }
}
</script>

四. uni-app HBuilderX 工程与 vue-cli 工程相互转换

1.创建vue-cli项目

参考:uniapp.dcloud.io/quickstart-…

2.将 HBuilderX 工程内的文件（除 unpackage、node_modules 目录）拷贝至 vue-cli 工程内 src 目录

3.在 vue-cli 工程内重新安装 npm 依赖（如果之前使用了 npm 依赖的话）

4.产生报错问题总结

//【问题1】
# uniapp eslint error ‘uni‘ is not defined no-undef
//【解决1】
.eslintrc.js 加上
module.exports = {
    globals: {
        uni: true, 
        wx: true
    }
}

//【问题2】 
error  Parsing error: The keyword 'import' is reserved
//【解决2】
{
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module"
  }
}

//【问题3】 
error  Parsing error: Unexpected token <
//【解决3】
yarn add babel-eslint

.eslintrc配置
"parser": "babel-eslint" 

//【问题4】
error  Parsing error: Unexpected token, expected "}"
//【解决4】
module.exports ={
    "root": true,
    "env": {
        "node": true
    },
    "globals": {
        uni: true, 
        wx: true
    },
    "extends": ["plugin:vue/vue3-essential"], // , "@vue/standard"
    "parserOptions": {
        "parser": "babel-eslint"
    },
    "rules": {
      "arrow-parens": 0,
      "generator-star-spacing": 0,
      "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
      "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
      "space-before-function-paren": 0,
      "eol-last": 0,
      "no-useless-escape": "off",
    }
  }

//【问题5】
Error: Cannot find module 'webpack/lib/RuleSet'
//【解决5】
1.卸载原来的脚手架
cnpm remove -g @vue/cli

2.重新安装脚手架（安装命令可以看uni的官网[uni-app](https://uniapp.dcloud.io/quickstart-cli.html)）
cnpm install -g @vue/cli@4

3.查看脚手架版本
npm list vue -g

4.重新创建项目

//【问题6】
Module Warning (from ./node_modules/postcss-loader/src/index.js)
//【解决6】
CSS预处理警告：大概意思是start这个值有混合支持，考虑用flex-start来替换它。

参考：https://blog.csdn.net/Yukinoshita_kino/article/details/121152043

//【问题7】
微信小程序转[uniapp]后，uniapp会自动创建一个static文件夹，并把微信原来的resources文件剪切到static文件下。
//【解决7】
需要手动更改一下

//【问题8】
vendor.js? [sm]:8145 [Vue warn]: Invalid prop: type check failed for prop "styleColumnWidth". Expected Array, got Object
//【解决8】
传值进来的是数组，但是默认给的对象

四.解决 vant组件 兼容问题

我这里用了 uviewui1.xx

avatar
文章
阅读
粉丝