Vue做为当下最为流行之一的前端框架，作为一款轻量级的JavaScript框架，在开发效率、易用性、灵活性等方面都有着出色的表现。

Vue有哪些优势可以应用于微信小程序？

更快的开发速度，vue的模版语法简单易学，开发者可以快速上手
更好的可维护性，组件化的架构，代码结构更加清晰更容易维护
跨平台支持，支持web端，移动端，桌面应用等多个领域

Vue如何应用于微信小程序？

在微信小程序中使用vue框架，需要借助三方库来实现，目前比较流行的就是，mpvue和uni-app，本文只介绍下uni-app,uni-app是一款基于Vue的跨平台框架，它支持同时开发多个平台（包括微信小程序、H5、App等），使用同一套代码即可完成多个平台的开发。uni-app提供了大量的组件和API,还有插件平台。

一套代码多个平台

uni-app是一款基于Vue的跨平台框架，它支持同时开发多个平台（包括微信小程序、H5、App等），使用同一套代码即可完成多个平台的开发。uni-app提供了大量的组件和API，可以帮助开发者快速完成跨平台应用的开发。

脚手架搭建框架和开发使用

环境，确保已安装 node.js

安装 vue-cli

npm install -g @vue/cli

创建uni-app 使用Vue3/Vite版

npx degit dcloudio/uni-preset-vue#vite my-vue3-project
cd my-vue3-project
npm i

运行调试

提前下载好微信小程序开发工具

$ npm run dev:weixin
DONE  Build complete. Watching for changes...
运行方式：打开 微信开发者工具, 导入 dist\dev\mp-weixin 运行。

打开微信小程序导入dist\dev\mp-weixin 如下图

到此就可以进行开发流程了，框架还支持热重载，修改代码，同步编译

打包编译

执行以下代码

npm run build:mp-weixin

更多命令打开 pacage.json 查看

...
    "dev:app": "uni -p app",
    "dev:app-android": "uni -p app-android",
    "dev:app-ios": "uni -p app-ios",
    "dev:custom": "uni -p",
    "dev:h5": "uni",
    "dev:h5:ssr": "uni --ssr",
    "dev:mp-alipay": "uni -p mp-alipay",
    "dev:mp-baidu": "uni -p mp-baidu",
    "dev:mp-jd": "uni -p mp-jd",
    "dev:mp-kuaishou": "uni -p mp-kuaishou",
    "dev:mp-lark": "uni -p mp-lark",
    "dev:mp-qq": "uni -p mp-qq",
    "dev:mp-toutiao": "uni -p mp-toutiao",
    "dev:mp-weixin": "uni -p mp-weixin",
    "dev:quickapp-webview": "uni -p quickapp-webview",
    "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
    "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
    "build:app": "uni build -p app",
    "build:app-android": "uni build -p app-android",
    "build:app-ios": "uni build -p app-ios",
    "build:custom": "uni build -p",
    "build:h5": "uni build",
    "build:h5:ssr": "uni build --ssr",
    "build:mp-alipay": "uni build -p mp-alipay",
    "build:mp-baidu": "uni build -p mp-baidu",
    "build:mp-jd": "uni build -p mp-jd",
    "build:mp-kuaishou": "uni build -p mp-kuaishou",
    "build:mp-lark": "uni build -p mp-lark",
    "build:mp-qq": "uni build -p mp-qq",
    "build:mp-toutiao": "uni build -p mp-toutiao",
    "build:mp-weixin": "uni build -p mp-weixin",
    "build:quickapp-webview": "uni build -p quickapp-webview",
    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
    "build:quickapp-webview-union": "uni build -p quickapp-webview-union"
...

需要注意的点

request请求需要https，在本地运行时，可以使用http（需要设置勾选不校验合法域名）
但是预览或者上传时，使用http无法请求，
另外上传，下载，webview 对应的域名都需要在后端配置
法动态引入javascript脚本，不能像web端一样写script标签引入，因为不支持动态加载这种方式引入，无法解决，你只需要知道即可。
css 长度单位记得用rpx

文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。

THE END