搭建环境
- 前言
- 开发工具
- 小程序中的版本控制
- 微信小程序 与 npm
前言
好久没发过博客了，今天心血来潮，想写一系列关于小程序的博客，具体能写多少篇，看心情了吧。以下进入正题。
开发工具
开发工具我这里选用的是微信的官方软件：微信开发工具
以下提供各操作系统稳定版本的下载地址，如要体验最新版也可以去官网下载。
官方下载网址：点击前往 (如网址无效请留言告知)
注册成为开发者直接在官网注册就行，此处不做赘述。
下载并安装以后，打开开发工具，可通过新建项目创建小程序，如下图：
appid可以使用注册以后生成的appid，也可以点击使用测试号。
当然我们也可以通过导入项目导入已有项目进行开发或学习。
新建项目以后，项目结构如下：
├─pages
│ ├─index
│ │ index.js
│ │ index.json
│ │ index.wxml
│ │ index.wxss
│ │
│ └─logs
│ logs.js
│ logs.json
│ logs.wxml
│ logs.wxss
│
│ app.js
│ app.json
│ app.wxss
│ project.config.json
│ sitemap.json
│
└─utils
util.jspages中放的是页面文件，包括四部分，分别是*.js,*.json,*.wxml,*.wxss，各个文件用途如下：
文件 | 描述 |
| 页面js数据 |
| 页面配置文件 |
| 页面展示文件 |
| 页面样式文件 |
再主要的就是app.js/json/wxss用来配置小程序相关参数，具体配置参考官方文档，点击进入
小程序中的版本控制
微信官方提供了简化版git对小程序进行版本的管理，具体操作如下：
- 点击右上角版本管理，打开如下图提示：
此时我们选择初始化git仓库。如下图，点击确定进行创建。创建之后界面如图所示：
主要就是三个地方，一个是工作区，展示变更信息，第二个是设置，对git仓库及用户进行设置，第三个是远程及分支展示已提交代码及其变更，至此我们就对版本控制有了一定了解，如果要深入学习请查看官方文档，不再累述。
微信小程序 与 npm
对于现在的前端框架来说，npm已经是一个不可获取的包管理工具，具体的安装教程请参考之前写的博客：
windows下 NodeJS 免安装版 安装步骤
当你按照安装教程安装完以后，我们继续小程序的操作。首先，在项目根路径下初始化npm，命令如下：
- 首先初始化：
#推荐命令（针对项目初始化）
npm init -y#默认命令（自定义初始化）
npm init敲黑板了，重点，省事快捷不操心。
初始化以后，我们下载weui，我目前在用的一套框架，要问为什么选择这套框架，大概是官方出品吧。
执行以下命令安装weui框架：
#安装weui-wxss框架
npm install weui-wxss当然官网上说的先执行npm install再如何如何，我想说完全没必要，初始化完毕以后直接安装weui框架就行，其实官网上有很多操作和讲解都是以有前端开发经验为前提，忽略了很多步骤，如果对这方面比较弱的话，建议重点学习以下，当然不强制，不学也能玩转。
转回正题，安装完框架以后，我们需要构建npm，具体操作为：菜单栏->工具->构建npm。
至于网上很多说菜单->构建npm路径的也没错，并不是同一个版本，我们需要的是构建npm，如果找不到，就在菜单栏一个个点，一级目录就有，很容易就看到。
点击之后会出现两种情况，如下：
- 没有找到可以构建的npm包。如图：
- 这种情况通常是没有初始化或者初始化npm有问题导致的，重复npm初始化操作。
- 虽然完成了构建，但是提示未找到npm包入口文件，如图：
- 在其他版本中中找不到的好像是app.wxss.js，记不清了，都无所谓，按照给出的路径一路找下去，哎呦，确实没有，那我们就手动创建这个文件。大概位置在：
node_modules\weui-wxss\dist\style，定位到此处，右键创建即可。
创建完毕以后，重新构建，构建完成，如图所示：
