开始
第一个微信小程序从申请账号开始。先到微信公众平台根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。
在这里插入图片描述
注册完成后，登录 小程序后台 ，我们可以在菜单 “设置”-“开发设置” 看到小程序的 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在线预览：
image.png
Vant Weapp在线预览：
image.png
谢谢观看
网友评论