微信小程序开发实践-投票系统开发

本人作为多年经验的前端一名，由于公司最近没啥新项目，得以有点时间想搞点别的东西（就是闲的），于是开始研究微信小程序，其实已经不是啥新鲜的东西了，但是毕竟没研究过，于是把自己学习和研究方法总结下，希望对其他新手有所帮助，不足之处还请见谅。

一、欲练神功，必先自宫（呸呸，先看官网 ）

先去官网看看是必不可少的，主要了解注册流程和开发API，这里不再赘述。

刚开始以为可以用公众号账号登录小程序，后来才发现这两个是独立分开的，需要另外注册账号，好吧，难道就不能共通下？

庆幸的是目前支持个人开发者注册，这对开发人员来说是福音，不需要过多的审核和认证流程。

接下来就开始环境安装，先需要下载官方提供的IDE最新开发工具，点击下载

完成以后新建一个小程序项目，这里AppID需要到个人注册的账号中获得，在设置》开发设置》小程序ID中复制过来，如图：

二、准备开始

1、新建项目成功后，你会看到以下画面，当然是Hello World！（如果没有的话，应该是没有勾选官方的示例，点击下载 ）这里官网示例主要展示了登录和日志等一部分功能，远不能满足个人开发需要。

2、文件说明

右边会展示目录文件，但是他们分别代表些啥呢？如图：

· js ---------- JavaScrip文件

· json -------- 项目配置文件，负责窗口颜色等等

· wxml ------- 类似HTML文件

· wxss ------- 类似CSS文件

其实很简单了，就是每个部分都是独立的，互相不打扰，然后app的部分是全局配置，其他pages子目录中的就是每个单独的页面，刚开始会对文件名有点不习惯，不过慢慢就好了。如想了解更多的话可以看这里，从零开始小程序

3、可预见问题

这次我想做一个投票系统，但是由于示例文件描述过于简单，根本满足不了我的开发需要，不得不去查些资料。我需要了解的几个问题如下：

1、如何进行网络通信？（没有这就是个单机版）

2、如何使用模板进行数据绑定？

3、页面之间如何传参？

于是乎找到了这篇文章，里面有一个关于天气预报的小栗子，里面有我需要的东西，哈哈，点此传送

下载下来研究了下，发现模板部分写法有点像VUE，还好我学过这个不算太难。

网络通信直接使用wx.request来调用即可。

传参的话也不难，可看这里。

这几个问题解决完成后，终于可以开始啦。

三、遇到的坑

原以为很顺利，后来发现通信还是会出现问题，看来实际操作还是没有想象的简单。

我把通信地址换一个以后，会报错说什么不在合法域名列表中，如下图：

查了资料发现，原来需要在小程序后台里面进行配置，在设置》开发设置》服务器域名中，添加相关域名地址。（一个月内可申请5次修改）

问题又来了，官方对域名的要求必须是https的而不是http，如果没有这个格式应该就不能进行通信，那么开发不能继续进行。而我的域名是阿里云的，服务器还是虚拟机，感觉应该没有配置的地方，这可咋办？

四、解决问题

功夫不负有心人，查了半天终于让我找到了方法，简单来说就是要先申请阿里云的SSL免费证书，然后通过开启CDN，上传证书后强制将跳转类型设置为HTTP->HTTPS即可，点击传送

接下来就可以通信啦，激动人心，如图：

接下来就是漫长的CODEING过程，这个就不过多赘述，最后放出成果：

五、排坑总结

除了上述的坑以外，小程序命名审核也是经历了一波三折，开始没看懂官方要求怎么去命名，结果起了个XX投票小助手，结果死活审核不通过失败多次，也是醉了，说是要提交一些证明材料，后来发现去掉投票这个词就好了，我就呵呵哒，官方你是想闹哪样？如图：

好了吐槽结束，如果有相关问题可以联系我，[email protected]。

如需代码学习可以留言和邮箱。