小程序WEPY

有很长一段时间没有写博客了，不管有没有关注自己，有没有人看到我的博客，我依然坚持自己的信念，不忘初心。
先交代一下这些时间自己在做些什么，其实呢，并没有做什么非常特别的事情；就是随着互联网的趋势和需求向前进，公司最近需要开发一个小程序的需求，然后公司就把这个任务交给了我接手，可我是做java和android的呀，没有小程序的经验啊，但是我心里又有点小激动，因为我知道这是一个可以挑战自己的机会；一个人永远不要相信这就是自己的极限。
自那之后，我翻阅很多关于小程序的学习资料，看官网，看博客，看demo。发现很多真的是所有IT是一家的说法，万变不离其宗。
经过一个礼拜的学习，于是自己动手开始写项目，这里介绍一下整体的架构。
首先开发一个程序，欲要善其工，必先利其器，专注的是高效和质量，所以我们选择开发工具工具很重要，这里我不推荐大家使用官网的开发工具，谁用谁痛苦，具体原因就不说明了，我们选择vscode https://code.visualstudio.com，作为我们的主要开发工具，然后再下载一个官网的开发工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.htm ，这里有人会疑惑，为什么还用官网的，不是不推荐吗，别急，当你下载vscode的时候，你会发现它并没有调试窗口，所以我们需要借助其它工具，这里我们就可以借助官网的开发工具了。
我们安装好这两个开发工具后该怎么下手呢
1，首先我们先把小程序的架构搭起来，这里我不适用纯原生的方式开发，选择 https://wepyjs.github.io/wepy-docs/， wepy框架开发

我们打开官网，具体可以看看介绍，下面我们先来看怎么开始

这里看到，构建wepy是依赖于npm的 (这里不说明NPM),如果你还没有安装过npm,我们可以在 https://nodejs.org/zh-cn/， 这里的npm我们之后选择node自带的npm，安装说明看官方文档（如果还是不会，可以加我qq826131978,或者邮箱zeng_huanmu@163.com。

打开vscode,我们可以看到，这样的界面，这里还没有构建任何的项目，我们一步一步来
1).全局安装 WePY CLI 工具

这里首先确认npm的安装，(npm -V)可以查看版本，如果能看到版本信息就证明成功了，接下来在控制台可以这样(输入npm install @wepy/cli -g)，等待安装完毕即可

2). 初始化摸板项目( wepy init standard 项目名称你随意)，然后在自己的所在路径找到项目包直接导入vscode

3).导入项目之后是这样的（common文件夹是存放基础类的，components是组件存放，pages就是我们需要创建的页面，app.wpy是程序主入口)

打开项目index.wpy文件，有网站开发经验的同学一定不陌生，style就是我们的css样式层，

template就是视图层

script就是我们的逻辑层

这里的wpy集成了css ，xml，js的混合开发，是不是非常方便

4）.给项目包安装npm (控制台输入npm install)，等待执行完后我们可以看到（node_modules包证明项目npm就安装成功了)

5).我们把项目运行起来看看效果，(控制台输入npm run dev)，看到dist文件，表示编译成功了

6）.打开小程序开发工具导入dist文件，看到如下界面表示wepy创建成功，我们在修在代码的时候，直接在vscode修改，之后直接ctrl+s小程序界面就会直接更新数据了

2.需要注意的地方
1）导入项目之后，很多时候会出现无法显示的问题，这是问什么呢，这时候我们需要设置一下开发工具中的【详情->本地设置】把如下配置都去掉，具体说明看官网

2）修改完代码后开发者工具不更新，这个问题经常会出现，这时候先确保自己的代码的确没有问题，然后【关闭开发者工具->删除vscode的dist文件->重新执行 npm run dev编译->重新打开开发者工具】，如果代码没有问题，一般都没有问题的

以上总结：
1.建议使用js,不要使用ts来开发，因为后面有介绍到通用的ui组件不支持ts的，所以尽量用js开发
2.开发前先思考，一定要先捋清楚业务需求再动手，编程最难的不是写代码，而是弄清楚自己接下来首先要做什么，只有捋清楚后才能真正高效开发，编码水平并不是一朝一夕就能练成的
3.开发过程中，你可能会遇到各种各样的问题，别气馁，先思考，再google,然后向前辈们请教，不懂真的不丢人，我亦是如此，经常向前辈学习，共勉，加油吧！

最后以上为个人学习观点，不对的地方请指正，如果有问题，我能帮上忙的可以联系我【QQ：826131978 email：zeng_huanmu@163.com】共同学习

本章完结