微信小程序教程（一） 搭建微信开发环境及框架weui的搭建

前言

好久没发过博客了，今天心血来潮，想写一系列关于小程序的博客，具体能写多少篇，看心情了吧。以下进入正题。

开发工具

开发工具我这里选用的是微信的官方软件：微信开发工具
以下提供各操作系统稳定版本的下载地址，如要体验最新版也可以去官网下载。

Windows 64(稳定版)点击下载

Windows 32(稳定版)点击下载

macOS(稳定版)点击下载

官方下载网址：点击前往
(如网址无效请留言告知)

注册成为开发者直接在官网注册就行，此处不做赘述。

下载并安装以后，打开开发工具，可通过新建项目创建小程序，如下图：

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.js

pages中放的是页面文件，包括四部分，分别是*.js,*.json,*.wxml,*.wxss，各个文件用途如下：

文件	描述
*.js	页面js数据
*.json	页面配置文件
*.wxml	页面展示文件
*.wxss	页面样式文件

再主要的就是app.js/json/wxss用来配置小程序相关参数，具体配置参考官方文档，点击进入

小程序中的版本控制

微信官方提供了简化版git对小程序进行版本的管理，具体操作如下：

1. 点击右上角版本管理，打开如下图提示：
   
   此时我们选择初始化git仓库。如下图，点击确定进行创建。创建之后界面如图所示：
   
   主要就是三个地方，一个是工作区，展示变更信息，第二个是设置，对git仓库及用户进行设置，第三个是远程及分支展示已提交代码及其变更，至此我们就对版本控制有了一定了解，如果要深入学习请查看官方文档，不再累述。

微信小程序 与 npm

对于现在的前端框架来说，npm已经是一个不可获取的包管理工具，具体的安装教程请参考之前写的博客：

windows下 NodeJS 免安装版 安装步骤

当你按照安装教程安装完以后，我们继续小程序的操作。首先，在项目根路径下初始化npm，命令如下：

1. 首先初始化：

#推荐命令（针对项目初始化）
npm init -y

#默认命令（自定义初始化）
npm init

敲黑板了，重点，省事快捷不操心。

初始化以后，我们下载weui，我目前在用的一套框架，要问为什么选择这套框架，大概是官方出品吧。

执行以下命令安装weui框架：

#安装weui-wxss框架
npm install weui-wxss

当然官网上说的先执行npm install再如何如何，我想说完全没必要，初始化完毕以后直接安装weui框架就行，其实官网上有很多操作和讲解都是以有前端开发经验为前提，忽略了很多步骤，如果对这方面比较弱的话，建议重点学习以下，当然不强制，不学也能玩转。

转回正题，安装完框架以后，我们需要构建npm，具体操作为：
菜单栏->工具->构建npm。

至于网上很多说菜单->构建npm路径的也没错，并不是同一个版本，我们需要的是构建npm，如果找不到，就在菜单栏一个个点，一级目录就有，很容易就看到。

点击之后会出现两种情况，如下：

1. 没有找到可以构建的npm包。如图：
   
   这种情况通常是没有初始化或者初始化npm有问题导致的，重复npm初始化操作。

2. 虽然完成了构建，但是提示未找到npm包入口文件，如图：
   
   在其他版本中中找不到的好像是app.wxss.js，记不清了，都无所谓，按照给出的路径一路找下去，哎呦，确实没有，那我们就手动创建这个文件。大概位置在：node_modules\weui-wxss\dist\style，定位到此处，右键创建即可。

创建完毕以后，重新构建，构建完成，如图所示：

下载的源码和github上发布的一致，也可以通过以下小程序码扫码查看样例。

GitHub地址：点击直达
小程序码：

至于如何使用weui进行开发，官网有详细介绍，不做赘述.
官网地址：点击直达

以上是微信小程序的搭建及weui框架的集成，嗯，以下说多了，weui框架集成应该在后面单开一章来讲的，但播主表示，咸鱼不想翻身，就这样吧，如有问题请在评论区留言。

有人说：种一棵树最好的时间，是十年以前，其次是现在。
希望这篇博客能为后来者们提供些许帮助。
做一件事，不是希望对方回报自己而去做，而是因为知道那么做是对的才去做。