基于Mpvue搭建的小程序

基于mpvue搭建的小程序项目

---

1. 注册小程序账号

• 开发小程序的第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序。注册的邮箱最好是新的，因为一个邮箱只能绑定一个微信小程序！

• 怎么注册小程序账号，跟着官方文档慢慢走就能注册成功：微信公众平台注册地址。

• 跟着官方文档的开发项目的开发工具是：微信Web开发者工具，在我写这个文档之前，我以为开发微信小程序只能使用官方提供的开发者工具，but,事实是所有的IDE基本上都支持这个开发，而我最习惯的是VS CODE,那个什么IDEA跟我不投缘，或许以后会很喜欢，暂时最爱VS CODE.

2. 安装NODE

• NODE安装直接从官网下载，然后一直下一步安装，安装完毕在终端输入node -v查看node的安装版本。好像必须是8以上的版本支持小程序开发，我也不知道为什么，直接从官网下载LTS的长期支持版最保险啦：NODE下载地址。

3. 使用mpvue搭建项目

• mpvue官网地址。
• 官方文档有个五分钟教程, 这里的五分钟也不知道针对的是哪些人的，反正第一次我花了不止五分钟吧。

• 五分钟步骤+vs code截图：

      （1）新建一个文件夹小程序-->test，右击->在命令提示符中打开（或者在终端中打开），这样可以直接进入这个文件夹，方便一点，输入npm install --global vue-cli，下面的截图说明安装vue-cli成功，下面炫酷的线条是提示要不要更新npm版本，这个不妨碍搭建项目，让他提示去吧。

      （2）创建一个基于 mpvue-quickstart 模板的新项目，输入vue init mpvue/mpvue-quickstart my-project，配置关于项目的信息：

      如果平常写代码不规范的小朋友，一定要把ESlint打开，因为这个会让你的代码very规范，就算是多了一个空格，它的提示信息也会非常明显，所以不用担心找不到，这就是我喜欢vue的原因，啦啦啦！
      图中上面红框中是自己注册的微信公众平台的开发者ID：

      配置完这些信息，看到上面第二个红框中的命令，就说明配置成功，然后根据to get started下面的执行就可以了（附上截图）:

      项目搭建成功后，my-project文件夹是这样的,其中dist文件夹是指定在微信开发者工具中预览的文件夹；

4. 引入项目即可预览到你的第一个 mpvue 小程序。

• 启动微信开发者工具,登录后，选择–>小程序：
  
• 项目目录选择my-project-->dist-->wx，因为规定的是这个文件夹，要么是空文件夹要么是有app.json或者project.config.json的文件夹，我是通过vs code搭建的，所以直接选择指定的目录就行。
• AppID就是开发者ID。
• 项目名称，就是这个小程序的名称。

• 点击确定后进入开发者工具的界面：

• 去往Vuex的示例页面有这个是因为配置项目信息的时候，开启了vuex，所以就会有一个小案例，显示：

这就表示小程序项目搭建成功啦！

5. 体验小程序

• 身份证号码验证：
  用vscode开发小程序，不用再dist目录下面写，直接在src的pages下面写就行，它会自动编译到dist的对应文件。

src文件夹：

dist文件夹：

在添加页面的时候启动项目要重新npm run dev。
需要注意的一点是以前写vue项目的时候，配置路由一般在router文件夹里面，小程序是在app.json里面，如果希望每次开发的当前页面默认执行的话，就直接配置在pages的第一个就可以解决这个问题。

当我直接写这个页面样式的时候：

然后IDE会提醒有问题：

因为我忘记下载less插件了，直接npm install less less-loader --save，然后重新启动一下项目就可以了。

methods里面的这些方法都是wx or mpvue提供的，跟写vue有些不同，所以真正的项目开发需要认真读官方文档。

6. 测试一下

-现在微信开发者工具里面测试：

• 点击真机调试，会自动打包好所有的东西:
  
  真机调试点击后弹出下面这个窗口，这个Wxml就是编译生成的小程序的页面结构：
  
  手机上的显示：
  
  

7. 上传发布

• 点击开发者工具-->菜单栏-->上传，也可以直接Ctrl + Shift + U:
  
  填下版本号和项目备注，点击上传就可以了，然后咱就在微信公众号平台操作了。
• 上传成功后：

• 在首页点击前往发布就有了刚刚发布成功的项目：

• 提交审核后的下箭头有个设置为体验版,我已经设置过了，所以上传显示的就是体验版了。
• 点击提交审核，然后一直确定或者下一步到下边这个页面：
  
  填完直接点击提交审核,在版本管理的下面就有了刚刚审核的版本：
  
  点击详情显示审核版本的具体信息:
  
• 如果很顺利的话，登录微信公众号平台的微信 就会自动显示上传发布的项目版本：
  
  太不容易了，终于写完了！