小程序WEPY

太过爱你忘了你带给我的痛 2021-12-14 03:21 299阅读 0赞

有很长一段时间没有写博客了，不管有没有关注自己，有没有人看到我的博客，我依然坚持自己的信念，不忘初心。  
先交代一下这些时间自己在做些什么，其实呢，并没有做什么非常特别的事情；就是随着互联网的趋势和需求向前进，公司最近需要开发一个小程序的需求，然后公司就把这个任务交给了我接手，可我是做java和android的呀，没有小程序的经验啊，但是我心里又有点小激动，因为我知道这是一个可以挑战自己的机会；一个人永远不要相信这就是自己的极限。  
自那之后，我翻阅很多关于小程序的学习资料，看官网，看博客，看demo。发现很多真的是所有IT是一家的说法，万变不离其宗。  
经过一个礼拜的学习，于是自己动手开始写项目，这里介绍一下整体的架构。  
首先开发一个程序，欲要善其工，必先利其器，专注的是高效和质量，所以我们选择开发工具工具很重要，这里我不推荐大家使用官网的开发工具，谁用谁痛苦，具体原因就不说明了，我们选择vscode [https://code.visualstudio.com][https_code.visualstudio.com]，作为我们的主要开发工具，然后再下载一个官网的开发工具 [https://developers.weixin.qq.com/miniprogram/dev/devtools/download.htm][https_developers.weixin.qq.com_miniprogram_dev_devtools_download.htm] ，这里有人会疑惑，为什么还用官网的，不是不推荐吗，别急，当你下载vscode的时候，你会发现它并没有调试窗口，所以我们需要借助其它工具，这里我们就可以借助官网的开发工具了。  
我们安装好这两个开发工具后该怎么下手呢  
1，首先我们先把小程序的架构搭起来，这里我不适用纯原生的方式开发，选择 [https://wepyjs.github.io/wepy-docs/，][https_wepyjs.github.io_wepy-docs] wepy框架开发  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70]  
我们打开官网，具体可以看看介绍，下面我们先来看怎么开始  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 1]  
这里看到，构建wepy是依赖于npm的 (这里不说明NPM),如果你还没有安装过npm,我们可以在 [https://nodejs.org/zh-cn/，][https_nodejs.org_zh-cn] 这里的npm我们之后选择node自带的npm，安装说明看官方文档（如果还是不会，可以加我qq826131978,或者邮箱zeng\_huanmu@163.com。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 2]  
打开vscode,我们可以看到，这样的界面，这里还没有构建任何的项目，我们一步一步来  
1).全局安装 WePY CLI 工具  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 3]  
这里首先确认npm的安装，(npm -V)可以查看版本，如果能看到版本信息就证明成功了，接下来在控制台可以这样(输入npm install @wepy/cli -g)，等待安装完毕即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 4]  
2). 初始化摸板项目( wepy init standard 项目名称你随意)，然后在自己的所在路径找到项目包直接导入vscode  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 5]  
3).导入项目之后是这样的（common文件夹是存放基础类的，components是组件存放，pages就是我们需要创建的页面，app.wpy是程序主入口)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 6]  
打开项目index.wpy文件，有网站开发经验的同学一定不陌生，style就是我们的css样式层，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 7]  
template就是视图层  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 8]  
script就是我们的逻辑层  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 9]  
这里的wpy集成了css ，xml，js的混合开发，是不是非常方便

4）.给项目包安装npm (控制台输入npm install)，等待执行完后我们可以看到（node\_modules包证明项目npm就安装成功了)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 10]  
5).我们把项目运行起来看看效果，(控制台输入npm run dev)，看到dist文件，表示编译成功了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 11]  
6）.打开小程序开发工具导入dist文件，看到如下界面表示wepy创建成功，我们在修在代码的时候，直接在vscode修改，之后直接ctrl+s小程序界面就会直接更新数据了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 12]  
2.需要注意的地方  
1）导入项目之后，很多时候会出现无法显示的问题，这是问什么呢，这时候我们需要设置一下开发工具中的【详情->本地设置】把如下配置都去掉，具体说明看官网  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 13]  
2）修改完代码后开发者工具不更新，这个问题经常会出现，这时候先确保自己的代码的确没有问题，然后【关闭开发者工具->删除vscode的dist文件->重新执行 npm run dev编译->重新打开开发者工具】，如果代码没有问题，一般都没有问题的

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

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

本章完结

[https_code.visualstudio.com]: https://code.visualstudio.com
[https_developers.weixin.qq.com_miniprogram_dev_devtools_download.htm]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.htm
[https_wepyjs.github.io_wepy-docs]: https://wepyjs.github.io/wepy-docs/%EF%BC%8C
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70]: /images/20211213/9d9411bcc94a4946b0ed298ebace7f3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 1]: /images/20211213/61416a2d7e1442df9004cbbe1aeedf0b.png
[https_nodejs.org_zh-cn]: https://nodejs.org/zh-cn/%EF%BC%8C
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 2]: /images/20211213/0b019074d44a47dbb388f39d527644fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 3]: /images/20211213/4bcac7a8313d4e27b87c95aab18a812e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 4]: /images/20211213/c26dbd4058ce497c971b0c4c9ddd2e09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 5]: /images/20211213/652d1de917b448fcb7df95db8bdf77c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 6]: /images/20211213/fc130f3abf6246a0af8b71175703e336.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 7]: /images/20211213/bbe42c2dfe014510b5676b6bf6abe5f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 8]: /images/20211213/bacb546ac1274b63afef7830fa42cee1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 9]: /images/20211213/6bd46aa9bfd446b0a14b7569e3f91630.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 10]: /images/20211213/8fee1a7db394443f9544a8164a5bc8ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 11]: /images/20211213/bbd7c371d2ac43da935863248acb5692.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 12]: /images/20211213/9fedc7c984ae4f8682ee8ffa1f2f7f62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 13]: /images/20211213/92e6b3ce2aae47878ac3976419392121.png