基于WeX5平台开发微信公众号中的在线问卷调查

在线调查问卷在我们的生活中应用的非常广泛，能够非常方便快捷的获取到我们需要的信息，统计分析出相关核心的数据，方便我们的决策。在微信发展迅速的时代，覆盖面非常的大，那么基于微信公众号去推送我们的在线问卷调查，这个就是一个相当方便、有价值的系统。那么，今天我就来大概讲一讲利用我们起步公司研发的WeX5平台快速开发出一款在线调查问卷的系统，我们主要分以下几个步骤讲解，如有纰漏，还望及时指出，谢谢

一、效果图展示

效果图展示主要分为后台的数据管理及前端的调查问卷：

后台管理系统效果图如下所示：

问卷调查发布页面：

问卷调查统计页面：

问卷调查汇总页面：

问卷调查详情页面：

微信公众号中的前端效果图：

二、在线调查后台管理

在线调查后台管理系统主要用于对调查问卷的发布及统计信息进行管理，方便管理人员对所有发布信息的管控，以及对调查的问卷进行汇总统计，总结出有利于生产的有价值的数据。我们在项目选型之前，考虑了java框架的后台以及BeX5的平台，分析评估后一致觉得BeX5平台在开发效率和后期维护、性能稳定方面都有非常大的优势，所以我们使用该平台作为我们后台管理系统的主选开发平台。在项目开发过程中也确实体现了该平台强大的优势：上手快、开发效率高、维护成本低、性能稳定。详细的后台管理系统的界面见上面的后台效果图。

废话不多说了，看看后台的开发界面吧，感受一下BeX5开发平台带给我们的快感：

是不是很壮观的页面啊，包括了源码、设计、JS、CSS，还有一系列的封装好的组件可供使用。其中设计页面，可实现拖拽布局、js页面实现前端逻辑处理、css实现样式。好了，贴些代码感受一下js的强大吧：

define(function(require) {var $ = require("jquery");var justep = require("$UI/system/lib/justep");var biz = require("$UI/system/lib/biz");var Model = function() {this.callParent();};var mainData = "";Model.prototype.modelLoad = function(event) {mainData = this.comp("mainData");var type = this.getContext().getRequestParameter("type");if (type == "new") {mainData.newData();} else if (type == "edit") {var data = this.getContext().getRequestParameter("data");if (data) {var filter = "RM_VS_Paper='" + data + "'";mainData.setFilter("____dataFilter_", filter);mainData.refreshData();}if (mainData.getValue("fPState") == "已完成"|| mainData.getValue("fPState") == "已终止") {this.comp("trgFinish").set({"disabled" : "true"});this.comp("trgAbort").set({"disabled" : "true"});this.comp("saveBtn").set({"disabled" : "true"});this.comp("surveyBtn").set({"disabled" : "true"});this.comp("button6").set({"disabled" : "true"});this.comp("button4").set({"disabled" : "true"});this.comp("button5").set({"disabled" : "true"});this.comp("button9").set({"disabled" : "true"});this.comp("button7").set({"disabled" : "true"});this.comp("button8").set({"disabled" : "true"});this.comp("addBtn").set({"disabled" : "true"});this.comp("button11").set({"disabled" : "true"});}}var uploader = this.comp("attachmentSimple1").uploader;var data = this.comp("dQuestion");uploader.on('onFileSelected', function(event) {var fileName = event.file.name;fileName.lastIndexOf(".")var fileType = fileName.substr(fileName.lastIndexOf(".") + 1,fileName.length).toLowerCase();// alert(fileType);if (fileType != "jpg" && fileType != "png") {alert("请选择jpg或者png格式文件！");event.cancel = true;return;}// 只能上传一张，再次上传则替换var img = data.val("fQuestionPic");// 要在这里取值if (img !== null && img != "" && img !== "[]"&& typeof (img) !== "undefined") {data.setValue("fQuestionPic", "");}});};// 新增Model.prototype.newBtnClick = function(event) {var url = "$UI/riskMonitor/survey/process/surveySend/detailActivity.w?process=/riskMonitor/survey/process/surveySend/surveySendProcess&activity=surveySendActivity&type=new&data="+ mainData.getCurrentRowID();justep.Portal.openWindow(url, {title : "问卷调查发布"});};// 完成调查Model.prototype.trgFinishDOMActivate = function(event) {var messageDialog2 = this.comp("messageDialog2");messageDialog2.show();messageDialog2.on("onOk", function(event) {var paperID = mainData.getCurrentRowID();mainData.setValue("fPState", "已完成");mainData.setValue("fFinishTime", new Date());mainData.saveData();mainData.filters.setFilter("paperFilter", "RM_VS_Paper='" + paperID+ "'");mainData.refreshData();this.callBackFun();}, this);};// 撤销问卷Model.prototype.trgAbortDOMActivate = function(event) {var messageDialog3 = this.comp("messageDialog3");messageDialog3.show();messageDialog3.on("onOk", function(event) {var paperID = mainData.getCurrentRowID();mainData.setValue("fPState", "已终止");mainData.saveData();mainData.filters.setFilter("paperFilter", "RM_VS_Paper='" + paperID+ "'");mainData.refreshData();this.callBackFun();}, this);};// 回调函数?????????????????????????Model.prototype.callBackFun = function(event) {this.comp("trgFinish").set({"disabled" : "true"});this.comp("trgAbort").set({"disabled" : "true"});this.comp("saveBtn").set({"disabled" : "true"});this.comp("deleteBtn").set({"disabled" : "true"});this.comp("surveyBtn").set({"disabled" : "true"});this.comp("button6").set({"disabled" : "true"});this.comp("button4").set({"disabled" : "true"});this.comp("button5").set({"disabled" : "true"});this.comp("button9").set({"disabled" : "true"});this.comp("button7").set({"disabled" : "true"});this.comp("button8").set({"disabled" : "true"});/** var caller = null; var callerName =* justep.Request.URLParams.callerName; if(callerName && (callerName !=* '')) { var frames = window.parent.frames; for(var i=0; i<frames.length;* i++) { if(frames[i].name == callerName) { caller = frames[i]; break; } } }* if(caller) { if(caller.dataChangeCallBackFun) { //var data =* justep.xbl('dPaper'); var id = mainData.getCurrentRowID();* caller.dataChangeCallBackFun(id); } }*/};// 调查发布Model.prototype.button1Click = function(event) {var mainData = this.comp('mainData');var paperID = mainData.getCurrentRowID();if (mainData.getCount() == 0) {alert("请选择要发布的问卷信息！");return;}var fPState = mainData.getValue("fPState");if (fPState == "编制中") {var messageDialog1 = this.comp("messageDialog1");messageDialog1.show();messageDialog1.on("onOk", function(event) {mainData.setValue("fPState", "已发布");mainData.setValue("fSendTime", new Date());mainData.saveData();mainData.filters.setFilter("paperFilter", "RM_VS_Paper='"+ paperID + "'");mainData.refreshData();}, this);} else if (fPState == "已发布") {alert("本次调查已发布,不能再进行发布！");} else if (fPState == "已终止") {alert("本次在线调查已终止,不能再进行问卷发布！");} else {alert("本次在线调查已完成,不能再进行问卷发布！");}};// 问卷调查预览Model.prototype.trgPreviewDOMActivate = function(event) {var process = this.getContext().getCurrentProcess();// justep.Context.getCurrentProcess();var activity = this.getContext().getCurrentActivity();// justep.Context.getCurrentActivity();var mainData = this.comp("mainData");var paperid = mainData.getCurrentRowID();// var url =// "/riskMonitor/survey/process/surveyPaper/surveyPaper.j?process=" +// process + "&activity=" + activity + "&paperID=" + paperid;var url = "$UI/riskMonitor/survey/process/surveyPaper/surveyPaper.j?process="+ process + "&activity=" + activity + "&paperID=" + paperid;justep.Portal.openWindow(url, {title : "调查问卷预览"});};Model.prototype.addBtnClick = function(event) {// 添加调查员this.comp("windowDialog").open();};return Model;
});

三、前端开发

前面我们讲解了后台管理系统的开发，那么还有一个最重要的前端展示，我们选择了WeX5平台，WeX5平台封装了相当多的H5组件，方便我们开发人员的拖拽，只要熟悉h5、js、css就可以完全胜任前端的开发了。

前端UI：完全恪守html5+css3+js，干净纯洁
设备api：采用业界主流Phonegap/Cordova
后端：标准协议，支持所有主流技术和平台
（java、node、php、.net等）

向导、模板：简单定义，即可轻松制作向导和模板
主题、样式：海量bootstrap资源引入和定制
UI组件：纯H5+CSS3，轻松引入第三方UI组件
插件：轻松对接即时通讯、推送、支付等各类插件
后端：轻松调用后端组件和api，并实现可视化

各种应用打包：无任何限制和费用，打包多种应用
（Android apk，ios ipa、微信和其他轻应用）
各种打包模式：快捷打包、远程服务打包、原生环境打包，
给你所有的打包方式和方便性

我们可以使用WeX5平台开发出安卓、苹果手机App，也可以开发出基于微信的项目，非常的方便。

前端开发页面类似于BeX5的开发页面，可以对问答题、单选题、多选题、判断题进行控制显示，涵盖了大多数的调查问卷格式，可以应用于多个行业。

看下在线调查的前端js代码：

define(function(require) {var $ = require("jquery");var justep = require("$UI/system/lib/justep");var Baas = justep.Baas;var Model = function() {this.callParent();this._userID = "";this._userNickName = "";this._userAdrress = "";this._longtitude = "";this._latitude = "";};// 获取页面索引Model.prototype.MyGetIndex = function(event) {return this.comp("data1").getRowIndex(this.comp("data1").getCurrentRow()) + 1;};Model.prototype.modelParamsReceive = function(event) {var paperID = this.getContext().getRequestParameter("paperID");var data1 = this.comp("data1");var surveyData = this.comp("surveyData");surveyData.setFilter("surveyFilter0", "fPaperID = '" + paperID + "' and fPerID = '" + this.getContext().getRequestParameter("openID") + "'");surveyData.refreshData();if (surveyData.getCount() > 0 && surveyData.getFirstRow().val("fSState") == "已完成") {this.setPropReadonly();};Baas.sendRequest({"url" : "/riskMonitor/riskMonitor","action" : "queryQuestion","async" : false,"params" : {paperID : paperID,openID : this.getContext().getRequestParameter("openID")},"success" : function(data) {data1.loadData(data);data1.refreshData();},"error" : function(msg) {justep.Util.hint("获取调查问题失败", {"type" : "danger"});}});};// 转换动态图片URLModel.prototype.transURL = function(picture, rowID) {if (!picture)return null;var src = null;if (picture !== null && picture !== "" && picture !== "[]") {var imageJson = eval("(" + picture + ")");var realFileName = imageJson[0].realFileName;var storeFileName = imageJson[0].storeFileName;var operateType = "browse";var url = '/baas/justep/attachment/simpleFileStore?realFileName=' + realFileName + '&storeFileName=' + storeFileName + '&ownerID=' + rowID + '&operateType=' + operateType;src = require.toUrl(url);}return src;};Model.prototype.setPropReadonly = function(event) {this.comp("button1").set({disabled : true});this.comp("textarea1").set({disabled : true});this.comp("checkboxGroup1").set({disabled : true});this.comp("radioGroup1").set({disabled : true});};Model.prototype.getWeixinUser = function(event) {// 获取url上的code参数 - 微信授权code，用于获取微信用户信息var weixinCode = this.getContext().getRequestParameter("code");var self = this;if (weixinCode !== "") {justep.Baas.sendRequest({"url" : "/riskMonitor/weixin","action" : "userinfo","async" : false,"params" : {code : weixinCode},"success" : function(weixinUser) {self._userID = weixinUser.openid;self._userNickName = weixinUser.nickname;},"error" : function(msg) {justep.Util.hint("获取用户信息失败", {"type" : "danger"});}});}};// 提交问卷Model.prototype.button1Click = function(event) {// 需将参与调查的人员信息插入到survey表中。回答的内容插入到details表中// 提交调查问卷var surveyData = this.comp("surveyData");var detailData = this.comp("detailData");var data1 = this.comp("data1");var self = this;// 插入回答此问卷人的信息var surveyID = justep.UUID.createUUID();var openID = this.getContext().getRequestParameter("openID");var nickName = this.getContext().getRequestParameter("nickName");var surveyType = this.getContext().getRequestParameter("surveyType");// 如果openID为空，默认是临时用户if (openID === "") {openID = "temp_" + justep.UUID.createUUID();}if (nickName === "") {nickName = "temp";}var surveyRows = surveyData.newData({index : 0,defaultValues : [ {"fID" : surveyID,"fPaperID" : this.getContext().getRequestParameter("paperID"),"fPerID" : openID,"fPerName" : nickName,"fSState" : "已完成","fFinishTime" : justep.Date.toString(new Date(), justep.Date.STANDART_FORMAT),"fAddress" : this._userAddress,"flongitude" : this._longtitude,"fLatitude" : this._latitude} ]});var detailRows = null;var success = function(resultData) {var tempdefaultValues = [];// 开始插入答卷人答卷答案data1.each(function(param) {var tempAnswerJson = {"fID" : justep.UUID.createUUID(),"fSurveyID" : surveyID,"fQuestionID" : param.row.val("fID"),"fAnswer" : param.row.val("fAnswer")};tempdefaultValues.push(tempAnswerJson);});detailData.newData({index : 0,defaultValues : tempdefaultValues,});detailRows = detailData.saveData({"onSuccess" : function(resultData) {// justep.Util.hint("交卷成功！");if (surveyType == "qrcode") {justep.Util.hint("提交成功！");if (self.wxApi) {self.wxApi.exec().done(function(wx) {wx.closeWindow();});}} else {justep.Shell.showPage(require.toUrl("./paper.w?_userID=" + self.getContext().getRequestParameter("openID") + "&_userNickName="+ self.getContext().getRequestParameter("nickName")));}},"onError" : function(msg) {detailData.deleteData(detailRows);justep.Baas.showError(msg);}});};var error = function(msg) {// 保存失败后清除数据surveyData.deleteData(surveyRows);justep.Baas.showError(msg);};surveyData.saveData({"onSuccess" : success,"onError" : error});// }, this);};Model.prototype.data1IndexChanged = function(event) {var rowID = event.source.getCurrentRowID();var itemsData = this.comp("itemsData");itemsData.setFilter("itemFilter0", "fQuestionID = '" + rowID + "'");itemsData.refreshData();};// 设置微信标题Model.prototype.modelModelConstruct = function(event) {document.title = this.getContext().getRequestParameter("paperName");};Model.prototype.modelLoad = function(event) {if (justep.Browser.isWeChat) {this.wxApi = new navigator.WxApi("wxcc420846eb481632");}// var self = this;// // 获取url上的code参数 - 微信授权code，用于获取微信用户信息// var weixinCode = this.getContext().getRequestParameter("openID");// // 判断运行环境是否在X5移动客户端中，如果在移动客户端中，则当deviceready后取手机设备uuid作为用户唯一标识// if (weixinCode !== "") {// if (justep.Browser.isWeChat) {// self.wxApi = new navigator.WxApi("wxcc420846eb481632");// }// }};return Model;
});

四、WeX5平台介绍

wex5平台是北京起步公司开发的面向移动应用的开源平台

定位：开发面向消费者和公众的开放应用系统
适用：一般app、电商app、客服app、会员app、微店微商等
前端：安卓app/苹果app/微信服务号/PC web app
后端：后端数据处理组件，对接各主流技术平台
费用：完全开源，彻底免费，无任何限制

关于该平台的详细介绍，请参见官网： http://www.wex5.com/

五、总结

1.选择一个好的平台非常的重要，可以减轻开发的压力，对于后期的维护成本也可以控制。

2.该微信调查问卷可以应用于多个行业，方便获取用户对于某个产品的看法，以分析出对市场有利的价值信息。

3.农业养殖是个未来的大趋势，随着国家对农业的重视，将来这块的市场将会越来越大，欢迎有需要的朋友联系我们，我们目前积累了大量的农业项目，包括养殖行业的风险评估平台、农产品的溯源系统，可以方便的管控农产品流入市场的监管。联系QQ：764510182。

基于WeX5平台开发微信公众号中的在线问卷调查相关推荐

springboot 微信太阳码_WxJava基于Spring Boot开发微信公众号手机注册码
WxJava基于Spring Boot开发微信公众号手机注册码 Szx • 2019 年 05 月 18 日第一步先下载官方Demo https://github.com/binarywang/we ...
起步平台 WeX5 集成百度echarts实现微信公众号中折线图颜色交错显示
前端时间做了一个基于微信公众号的问卷调查.数据填报的项目,在里面涉及了一些图表的分析展示,本来以为很简单的一个功能,却着实让我折腾了好长一段时间,到处查找资料.翻看API也没有找到解决办法,真的想说, ...
Shopro商城,基于Fastadmin和Uniapp进行开发的多平台（微信公众号、微信小程序、H5网页、Android-App、IOS-App）购物商城
Shopro商城基于Fastadmin和Uniapp进行开发的多平台(微信公众号.微信小程序.H5网页.Android-App.IOS-App)购物商城,拥有强大的店铺装修.小程序直播.自定义模板. ...
Java开发微信公众号（二）---开启开发者模式，接入微信公众平台开发
接入微信公众平台开发,开发者需要按照如下步骤完成: 1.填写服务器配置 2.验证服务器地址的有效性 3.依据接口文档实现业务逻辑资料准备: 1.一个可以访问的外网,即80的访问端口,因为微信公众号接 ...
php 微信开发菜单,微信公众号中个性化菜单的开发实例
微信公众号中个性化菜单的开发实例个性化菜单让公众号的不同用户群体看到不一样的自定义菜单.该接口开放给已认证订阅号和已认证服务号,个性化菜单要求用户的微信客户端版本在iPhone6.2.2,Andro ...
Vue 开发在微信公众号中如何文件下载
通常我们调用下载接口时,我们需要根据后端提供的接口返回信息进行相应的处理操作. 1.接口返回文件路径(部分). window.open('http://192.168.22.246:8080'+ f ...
C# 开发微信公众号现金红包发送，解决IP地址非你在商户平台设置的可用IP地址和”未能创建 SSL/TLS 安全通道“ 问题
C# 开发微信公众号现金红包发送,解决"IP地址非你在商户平台设置的可用IP地址"和"未能创建 SSL/TLS 安全通道" 问题近期在做涉及一个微信公众号微信 ...
教你如何用node.js开发微信公众号（一）
内容简介本文章简单介绍了如何用node.js开发微信公众号.主要内容包括微信公众平台的配置,signature的验证,以及用node.js去处理用户主动发起的行为. 准备工作开发前需要安装好nod ...
python微信公众号翻译功能怎么用_Watson使用指南（七）在微信公众号中实现识图作诗功能...
本文章主要是写一下这个项目开发的过程及之间遇到的问题,作为记录,也希望以此为契机认识志同道合的朋友,一起学习交流. 目录: 概述环境准备及相关账号申请部署Python Flask应用到Bluemi ...

基于WeX5平台开发微信公众号中的在线问卷调查

基于WeX5平台开发微信公众号中的在线问卷调查相关推荐

最新文章

热门文章