一灯问卷小程序 开发

前言

这个小程序原本开发是打算用于问卷报名的。
差不多在一个月前，也就是9月底，仲予师兄问我可不可以实现这个问卷填写的统计。
我原本打算是做一个网页进行跳转记录的。
但是考虑到要识别访问的用户唯一性，还是的用微信登录才可以识别。
那既然如此，使用小程序来做应该是最为方便的解决方案。

原本打算国庆的时候就在家里完成这个小程序开发。
然而因为自己懒惰，特别是校招顺利的消息出来了之后，感觉自己就没有以前那么刻苦了。
哎，自己有时候还是需要一些外部环境的压力才可以让自己更进一步。
就像《death by chocolate》里说的 sometimes you need extra push.

不管怎样，拖了到十月中旬，我总算是把这个东西给完成了。
主要是最近搞华强的表情开发，感觉自己陷入了泥潭，非常不好受吧。。。
这么急于参加校招摆脱这个环境，这里也有很深的缘由，这几个月感觉自己都在原地踏步，没有比这更难受的了。
也因此才有了9月份开发 MayaPy 的情况，在华强真的有点喘不过气来了，还是想做自己喜欢的东西。

小程序准备

其实在这之前我还没有怎么接触过小程序开发。
不过因为自己7月份有努力学习 Vue 和 node.js ，理解小程序的代码结构丝毫没有压力。
小程序的架构真的很像 React , 这种生命周期的架构简直有异曲同工之妙。
虽然我玩 react native 也是很短的时间，但是开发小程序真的很有相似的地方。

小程序开发和 react native 一样是没有 DOM 操作的，因此需要通过js的模板替换 wxml 里面的样式来实现组件更新。
对我来说这些都不算很困难。
简单看了一个小程序的教程，基本就上手了。

小程序云开发

当时对我来说最大的坑就是小程序云开发。
通过云开发功能，腾讯已经提供了最基础的数据库+服务器，而且还有很充足的免费流量使用。
基本上个人的小作品是完全用不完的流量。

在这里主要要学会如何利用小程序的云开发的功能来将读取和保存数据。
好在官方提供的小程序案例里面就有了我所需要的功能代码。
于是我也是在官方的基础上进行适量的修改而已，大体也没有太难的地方。

遇到的难点

为了识别用户，我需要通过小程序获取微信用户的 openid ，通过 openid 我可以知道用户是唯一的。
最初我以为需要通过 wx.login 函数来获取 openid 。
但是运行 wx.login 函数会顺带获取用户的头像和昵称，需要用户确认提供这方面的隐私数据。
而腾讯的最新公告禁止在用户不清楚小程序的用途前提下，让用户点击确认按钮。
于是我又折腾了好一会，发现原来即便不用 wx.login 也可以通过线上的云开发函数获取到 openid

下拉菜单

师兄要求我获取用户的基本信息
这个可以通过表单来实现
然而有一个问题，在选择用户的年级的时候，我需要提供一个下拉菜单。
在 wxml 里面并没有提供这样的一个组件。
于是我网上搜了一个下来菜单的实现代码，通过复制粘贴的方式实现了效果。

样式控制

由于没有 DOM 操作，这里控制样式是通过在 wxml 传入样式控制的变量
然后再页面的js中修改这个变量实现样式的控制。
因为用惯了jQuery ，最初遇到这个问题还让我难倒了好一阵子。

另外在样式的控制上，我在最外层 wxss 上写了很多类似于 bootstrap 调用的颜色类
整个样式风格的颜色搭配也花了我一天的时间进行调试。

小程序跳转

在用户完成了数据输入之后，我需要让用户跳转到问卷星的问卷上
原本我是想要跳转到网页链接上的，然而这个操作需要企业版的小程序才可以做到。
于是我只好退而求其次实现跳转问卷星的小程序上，好在问卷星的小程序支持这种问卷跳转。
只是跳转完了无法跳转回来了，跳转回自己的小程序需要开通会员才能操作。

因此按照目前的情况，录入的数据会有很大的问题，就是不知道访问者到底有没有填写问卷。
好在问卷星填写完成之后是可以显示信息的，我可以做一个跳转页面。
如果用户访问这个单独的跳转页面，就会记录用户已经完成问卷，当然如果用户完全没有录入信息则会跳转到信息录入的页面上。
只要用户回答完问卷之后扫描这个二维码或者跳转到小程序页面的跳转链接即可。

小程序扫码跳转

一开始不知道怎么才能让小程序正确扫码跳转到对应的页面。
后来网上查了之后发现草料二维码可以自动生成出这个二维码。
但是测试版本不可用。

后来在师兄的帮助下让小程序成功上线了。
经过简单的测试是可行的，那么只要问卷完成留下二维码图片就可以了。

问卷星的限制

原本我的想法很美好，既然指定跳转路径需要花钱。
那我回答完问卷之后直接弹出图片扫码跳转就好了。
没错，在网页页面是完全可以实现的。
问题就在于我跳转到的是问卷星的小程序，小程序里显示的图片就很有毒。
不仅没有识别图中二维码的功能，甚至连保存图片也会显示保存失败(:з」∠)
这可把我难倒了。
如果可以让小程序跳转到问卷星的网页就好了，然而腾讯限制了小程序跳转H5的功能
所以要实现我的自己设计的逻辑，就只有让用户截屏，然后再识别图中二维码了。