mpvue+微信小程序云开发搭建

﹏ヽ暗。殇╰゛Y 2022-11-07 00:58 24阅读 0赞

**写在前言：****本文需要你有一定的前端知识、小程序语法知识，电脑已经安装了Node.js 环境 **

**开发工具：** **WebStorm + 微信开发者工具**

### **1、通过npm命令 搭建vue-cli脚手架：** ###

> 参考： [http://mpvue.com/mpvue/][http_mpvue.com_mpvue]
> 
> （1）在指定的文件夹中  打开 cmd 命令框输入相关命令创建vue项目：
> 
> --------------------
> 
>     #全局安装 vue-cli
>     $ npm install --global vue-cli
>     # 创建一个基于  mpvue-quickstart   模板的新项目
>     $ vue init mpvue/mpvue-quickstart my-project
>     # 安装依赖
>     $ cd my-project
>     $ npm install
>     # 启动构建
>     $ npm run dev
> 
>  
> 
> 在执行 **vue init mpvue/mpvue-quickstart my-project **  会有以下提示分别表示（**新手可直接回车跳过**）：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70][]
> 
>  
> 
> 可以看到文件夹里有刚创建热乎的新项目：
> 
> ![20210310162119536.png][]
> 
>  
> 
> 全部命令执行完之后，用WebStorm打开项目，结构是：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 1][]
> 
>  
> 
> 通过右侧说明可知，mpvue 框架可打包出各种平台的小程序，我们这里以微信小程序举例，通过 打包构建命令 **npm run dev** 可自动出现dist目录 存放真正的微信小程序代码：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 2][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 3][]

### **2、开始构建 小程序云开发 配置：** ###

> (1)在  **src/main.js**  文件中加入  **云函数初始化** 的代码：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 4][]
> 
>  
> 
> **注意： 确保编译构建之后  dist/wx/app.js 文件里面也存在同样的代码块：**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 5][]
> 
>  
> 
> (3)在  **dist/wx/** 文件夹中创建目录 **functions** (目录名可以随便起，位置只要在 dist/wx目录里面就行，但要记得位置)：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 6][]

### **3、打开微信开发者工具，构建云函数：** ###

> **（1）导入dist/wx目录，填入你的 appid：**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 7][]
> 
>  
> 
> **导入之后的样子：**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 8][]
> 
>  
> 
> **（2）**同时在工具 **WebStorm** 和 **微信开发者工具  **中找到 **project.config.json** 文件  新增字段 "**cloudfunctionRoot**"  值为 之前创建的 **functions** 目录位置**：**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 9][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 10][]** **
> 
> ** **
> 
> 保存之后，会发现 **functions** 图标变成原函数图标（如果没有生效 则使用 **npm run dev** 命令重新构建一下）**：**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 11][]      —————————>     ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 12][] 
> 
>  
> 
> 在微信开发者工具中 右击 **functions** 即可创建云函数了：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 13][]

至此， 一个完整的 mpvue+微信云开发 项目的基础就创建完成，后续会加上引入 **Vant-UI**  或者  **Mint-ui** 进行开发......

### **4、使用工具 WebStorm  引入 Vant-UI ：** ###

> [https://blog.csdn.net/weixin\_33763244/article/details/92418629?utm\_term=mpvue%E4%B8%AD%E4%BD%BF%E7%94%A8vant&utm\_medium=distribute.pc\_aggpage\_search\_result.none-task-blog-2~all~sobaiduweb~default-1-92418629&spm=3001.4430][https_blog.csdn.net_weixin_33763244_article_details_92418629_utm_term_mpvue_E4_B8_AD_E4_BD_BF_E7_94_A8vant_utm_medium_distribute.pc_aggpage_search_result.none-task-blog-2_all_sobaiduweb_default-1-92418629_spm_3001.4430]

[http_mpvue.com_mpvue]: http://xn--mpvue-4h8iz74s
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70]: /images/20221023/055caecc91eb40e8ad77c59cc1d38f2c.png
[20210310162119536.png]: /images/20221023/cc82c4b8405c4ed28470cfca64bb4ad6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 1]: /images/20221023/99b8106601af492e810324e4eda08d6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 2]: /images/20221023/962d6081ce964aa9bafe2ebec13731d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 3]: /images/20221023/d9635a823e9f49a9878b9064c6d9e3d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 4]: /images/20221023/fa1be766cf7e4c3183b36f5738276216.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 5]: /images/20221023/7616bacd6bc14bd6ae4e7c7205e1716b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 6]: /images/20221023/06c600c1f96c4fe4ba27aa8277645a54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 7]: /images/20221023/f08618bbb4334f80985511e2daa0b2bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 8]: /images/20221023/11855002071c4eb0b0a81e343b323c02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 9]: /images/20221023/acd8b3d1833f4e6e98d1442d481aa121.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 10]: /images/20221023/87ad743ece824f5084b5d6ecbef8e837.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20210310172015134.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 12]: /images/20221023/71308c7a9e4c4dab944bce6155dbcf71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 13]: /images/20221023/668b73bfbfe548f2bd3c844df131cad5.png
[https_blog.csdn.net_weixin_33763244_article_details_92418629_utm_term_mpvue_E4_B8_AD_E4_BD_BF_E7_94_A8vant_utm_medium_distribute.pc_aggpage_search_result.none-task-blog-2_all_sobaiduweb_default-1-92418629_spm_3001.4430]: https://blog.csdn.net/weixin_33763244/article/details/92418629?utm_term=mpvue%E4%B8%AD%E4%BD%BF%E7%94%A8vant&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduweb~default-1-92418629&spm=3001.4430