微信小程序开发流程(一)

前言

  作为一名Android开发，会小程序开发是应该的吧？可是我不会HTML / CSS、JavaScript、Vue啊，可是不会那些怎么办？学呗，一定要会那些只是才能开发小程序吗？你可以用原生开发，但是你也要学习官方小程序知识。如果你是一名有经验的开发者，学起来应该挺快的才对。这里推荐个学习地址：go go go ,（注：我是把需要的知识大概浏览一遍，好有个印象，具体学习的话效率感觉不划算，边做项目边学是最好的）

开发组合

  这里开发小程序以visual studio code(代码编辑器)+MPVue+微信官方web开发工具来完成小程序开发。

小程序

  小程序有很多，微信小程序、支付宝小程序、百度小程序、头条小程序…这里暂时以微信小程序为例吧。

编辑器

  这里开发小程序选择的编辑器是visual studio code，安装完visual studio code后打开，然后最好安装插件Vetur,Vetur是一款可以提供Vue语法高亮、语法检查和代码快捷输入等功能的插件，可以为我们的开发过程提供很多便利。

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅，可谓是微软的良心之作……

相信很多程序员同学都没想过有一天能在不用虚拟机的情况下直接在 Mac、Linux 上使用 VisualStudio 吧。当然，微软称 Visual Studio Code 并非完整版的 Visual Studio，它只是一款轻量级的代码编辑器，而不是一个重量级的完整 IDE (集成开发环境)，它的竞争对手将会是 Sublime Text、Atom、VIM、Notepad++ 等产品。

当你开始阅读这篇文章时，请先不要把Visual Studio Code和.net、Windows联想到一起，因为VS Code是一个跨平台，支持30多种语言的开箱代码编辑器。不管你是.Net、Java、PHP、Python、TypeScript、Objective-C…还是前端开发者，你都值得拥有。

MPVue

  可以开发小程序的框架很多，MPVue(万年不更？)、wepy(android会很卡？)、taro(不错？)…
这里还会选择MPVue来开发吧。

  在github上我们可以看到其介绍如下：

mpvue 是一个使用 Vue.js 开发小程序的前端框架，目前支持 微信小程序、百度智能小程序，头条小程序 和 支付宝小程序。 框架基于 Vue.js，修改了的运行时框架 runtime 和代码编译器 compiler 实现，使其可运行在小程序环境中，从而为小程序开发引入了 Vue.js 开发体验。
mpvue 2.0 开始正式支持 百度智能小程序、头条小程序 和 支付宝小程序

开发环境安装

1. node.js
现在，前端工具链基本都依赖Node.js,所以请先安装

安装完成后，打开你的命令行输入如下命令，验证安装是否成功：

C:\Users\Administrator>node -v
v10.15.3
C:\Users\Administrator>npm -v
6.4.1

然后，执行以下命令，将npm的下载源切换到国内淘宝的镜像，以提高下载时的速度和成功率：

npm set registry https://registry.npm.taobao.org/

2. vue-cli
vue-cli是一个vue专用的项目脚手架工具，可以用于方便的创建vue项目骨架代码，包括我们要讲到的mpvue的项目代码。我们可以通过安装node.js后里面包含的npm工具来安装vue-cli，在命令行输入如下命令：

npm install vue-cli -g

安装完后，输入如下命令进行验证是否成功：

C:\Users\Administrator>vue
Usage: vue <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  init           generate a new project from a template
  list           list available official templates
  build          prototype a new project
  create         (for v3 warning only)
  help [cmd]     display help for [cmd]

3、微信开发者工具
  这个工具是开发、调试和模拟运行微信小程序的最核心的工具,下载安装

下一篇