从0开始微信小程序项目搭建

开始

第一个微信小程序从申请账号开始。先到微信公众平台根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。

注册完成后，登录 小程序后台 ，我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了。

小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。

有了小程序帐号之后，我们需要一个工具来开发小程序。

安装开发工具

前往 开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。

打开小程序开发者工具，用微信扫码登录开发者工具，就可以开发你的第一个小程序了。

但是开发前还是建议务必先熟悉一下小程序原生的框架、组件和API。

小程序框架参考文档

项目搭建

由于之前一直是使用webstorm开发项目，我是很用不惯微信小程序开发工具的，而且也不习惯那种开发模式。所以在万能的网上找了一些资料，发现了一个宝藏

WePY

WePY 框架在开发过程中参考了 Vue 等现有框架的一些语法风格和功能特性，对原生小程序的开发模式进行了再次封装，更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。

这套框架大大便利了小程序的开发，开发风格接近Vue.js，支持组件化，而且支持使用第三方 npm 资源。

而且重要的是，我可以用webstorm开发微信小程序了。

1.安装wepy框架

运行命令npm install wepy-cli -g可以全局安装wepy。

2.生成项目

使用 wepy init standard yourProjectName 初始化项目。

其中，
Use ESLint to lint your code? //是否使用ESLint帮你检测代码？
Use Redux in your project? //是否使用Redux来处理状态管理？
Use web transform feature in your project? //是否在项目中使用Web转换特性？

//进入到demo目录中
cd wqwxdemo
//安装依赖
npm install

3.运行项目

用webstorm打开项目，执行下列命令，开启实时编译。

wepy build --watch

执行命令后，会发现项目目录下生成了一个dist目录。

打开微信开发者工具，选择小程序导入项目

选择项目所在目录的dist文件夹，填写你的微信小程序AppID，点击导入。就可以打开项目了。

但是Console中会有一个报错，如下：

解决方法：
点击微信开发者工具右上角‘详情’，将项目设置改为如下配置即可：

到此，一个项目就初始化完成了！接下开你就可以为所欲为了。

值得注意的问题是：
有时候你改了某块代码后发现小程序页面不管怎样都更新不了，这个时候你需要考虑到可能是缓存的问题，建议执行下面命令来清空缓存。

wepy build --no-cache --watch

最后

搭建好一个小程序项目后，你也许还不知从何处下手，那么建议你可以去github上看看。我推荐一个觉得不错的项目，代码地址：https://github.com/dyq086/wepy-mall.git

如果你想要一个漂亮的页面效果，可以结合一下UI组件库。

如：
weUI在线预览：

Vant Weapp在线预览：

谢谢观看