MBTI职业性格测试小程序

前两天看了一个贴子写职业性格的，于是心血来潮也想测一测。在百度上一搜，找到一个测试网站，然后一道一道答题，答完93道题之后，让我付费，瞬间想骂人。

越想越气，然后就搜索职业性格测试试题，果然有好朋友分享到网上，于是我就灵机一动花了半天时间写了个微信小程序。

数据模型来源于网络，是个人微信账号开发的，免费的，大家感兴趣可以测测看看，不是商业用途哈，仅用于学习哈

index.wxml：

<!--index.wxml-->
<view class="container"><view class="usermotto" wx:if="{{nowindex==0}}"><view bindtap="showHelp" class="title"><text style="color:red">(免费)</text>MBTI职业性格测试 <icon class="icon-box-img" type="info" size="26"></icon></view><view>迈尔斯-布里格斯类型指标</view><view style="line-height: 40rpx;font-size: 26rpx;color:cornflowerblue">世界五百强中，有 80% 的企业，使用 MBTI 性格测试。它是全球著名、权威与实用的职业性格测试工具之一。</view><view>共93题</view><button class="bgbt" bindtap="doNext">开始</button><view class="showlastresult" bindtap="showResult" wx:if="{{oldmbtiresult}}"  >查看上次测试结果</view></view><view wx:elif="{{nowindex<=93}}" ><view wx:if="nowinfo" class="testinfo"><view class="title"><text>{{nowindex}}.</text><text>{{nowinfo.content}}</text></view><view class="{{nowinfo.checkinfo[0]?'ra rselect':'ra'}}" data-ide='0' bindtap="doClick">A：{{nowinfo.result[0]}}</view><view class="{{nowinfo.checkinfo[1]?'ra rselect':'ra'}}"  data-ide='1'  bindtap="doClick">B：{{nowinfo.result[1]}}</view><view ><view wx:if="{{debug}}" class="table"><view class="col">E</view><view class="col">I</view><view class="col">S</view><view class="col">N</view><view class="col">T</view><view class="col">F</view><view class="col">J</view><view class="col">P</view><view wx:for="{{nowinfo.score[0]}}"  wx:for-index= "mindex" class="col bg{{mindex}}"><text class="se" wx:if="{{item==1}}">○</text><text class="se" wx:else></text></view><view wx:for="{{nowinfo.score[1]}}"  wx:for-index= "mindex" class="col bg{{mindex}}"><text class="se" wx:if="{{item==1}}">○</text><text class="se" wx:else></text></view></view></view></view><button type="primary" style="margin-top: 100rpx;font-size: 50rpx;" class="donext" bindtap="doNext" disabled="{{!(nowinfo.checkinfo[0]||nowinfo.checkinfo[1])}}"><text wx:if="nowindex<93">下一题</text><text wx:else>查看结果</text></button></view><view wx:else><view wx:if="{{oldmbtiresult}}"><view class="resultbig">您的测试结果为：{{oldmbtiresult.mbti}}</view><view class="table" wx:if="{{debug}}"><view class="col">E</view><view class="col">I</view><view class="col">S</view><view class="col">N</view><view class="col">T</view><view class="col">F</view><view class="col">J</view><view class="col">P</view><view wx:for="{{oldmbtiresult.mbtiscore}}" class="col" ><text class="seshow" >{{item}}</text></view></view><view><text class="result" decode="{{true}}"><text class="par" wx:for="{{mbtisource.resultlist[oldmbtiresult.mbtiindex].desc}}"><text class="title">{{item.title}}</text>{{item.content}}</text></text></view></view></view>
</view><view wx:if="{{oldmbtiresult&&nowindex>93}}" class="view-fix-bottom" ><view class="col2"><button class="btshare" open-type="share"  style="width: 90%;margin-right: 0;overflow: hidden;">分享</button></view><view class="col2" bindtap="doAgain"><button class="btagin"  style="width: 90%;margin-left:0;overflow: hidden;">再测一次</button></view></view><modal id="helpInfo" hidden="{{ishideHelp}}" title="指导语"confirm-text="关闭"   cancle-text="取消"bindcancel="closeHelp"  bindconfirm="closeHelp" ><scroll-view style="width:100%;height:{{height-180}}px;margin:0;" scroll-x='false' scroll-y='true'><view style="padding:0 30rpx;"><text class="result" decode="{{true}}">1、参加测试的人员请务必诚实、独立地回答问题，只有如此，才能得到有效的结果。\r\n 2、测试结果展示的是你的性格倾向，而不是你的知识、技能、经验。 \r\n3、MBTI提供的性格类型描述仅供测试者确定自己的性格类型之用，每一种性格特征都有其价值和优点，也有缺点和需要注意的地方。清楚地了解自己的性格优劣势，有利于更好地发挥自己的特长，而尽可能的在为人处事中避免自己性格中的劣势，更好地和他人相处，更好地作重要的决策。\r\n4、本测试分为四部分，共93题；需时约18分钟。所有题目没有对错之分，请根据自己的实际情况选择。\r\n只要你是认真、真实地填写了测试问卷，那么通常情况下你都能得到一个确实和你的性格相匹配的类型。\r\n5、本小程序免费使用，数据模型来源为互联网。本程序开发源于作者想做一次性格测试，结果网络上基本上都要收费，所以无奈之下自己开发一个。\r\n希望你能从中或多或少地获得一些有益的信息。</text></view></scroll-view></modal>

index.js:

// index.js
// 获取应用实例
const app = getApp()
var jsonsource=require("../../source/jsonsource")Page({data: {motto: 'Hello World',mbtisource:null,nowindex:0,debug:false,userreq:[],oldmbtiresult:null,nowinfo:null,height:600,ishideHelp:true},showHelp(){this.setData({ishideHelp:false})},closeHelp(){this.setData({ishideHelp:true})},onLoad() {this.initSource();var rt= wx.getStorageSync('oldmbtiresult');if(rt){this.setData({oldmbtiresult:rt});}wx.getSystemInfo({success: (res) => {this.setData({height: (res.windowHeight - 20)})}})},onShareAppMessage() {var _this=this;var title="快来测试一下你的职业性格吧！";if(_this.data.oldmbtiresult){title="我的职业性格是：【"+ _this.data.oldmbtiresult.mbti+"】，你也来测测吧！";}//console.log(title);return {title: title,path: '/pages/index/index', imageUrl:"/source/share.png",success: function(res){// 转发成功之后的回调if(res.errMsg == 'shareAppMessage:ok'){}},fail: function(){// 转发失败之后的回调if(res.errMsg == 'shareAppMessage:fail cancel'){// 用户取消转发}else if(res.errMsg == 'shareAppMessage:fail'){// 转发失败，其中 detail message 为详细失败信息}}}},onShareTimeline(){var _this=this;var title="快来测试一下你的职业性格吧！";if(_this.data.oldmbtiresult){title="我的职业性格是：【"+ _this.data.oldmbtiresult.mbti+"】，你也来测测吧！";}return {title: title,imageUrl:"/source/share.png",}},doAgain(){this.setData({nowindex:0}); },showResult(){this.setData({nowindex:94}); },initSource(){try{this.setData({mbtisource:jsonsource.mbtisource,nowindex:0}); }catch(err){console.log(err)}},doNext(){if(this.data.nowindex!=0&&this.data.nowindex<=93){var userreq=this.data.userreq;if(this.data.nowinfo["checkinfo"][0]){userreq.push(this.data.nowinfo["score"][0])}else if(this.data.nowinfo["checkinfo"][1]){userreq.push(this.data.nowinfo["score"][1])}}if(this.data.nowindex<93){var nowindex=(this.data.nowindex+1);var nowss=this.data.mbtisource.infolist[nowindex-1];var nowinfo=nowss;nowinfo["checkinfo"]=[false,false];this.setData({nowindex:nowindex,nowinfo:nowinfo});}else if(this.data.nowindex=93){var nowindex=(this.data.nowindex+1);this.setData({nowindex:nowindex,nowinfo:null});var cscore=[0,0,0,0,0,0,0,0];var mbti=["E","I","S","N","T","F","J","P"];var use=this.data.userreq;for(var i=0;i<use.length;i++){for(var j=0;j<cscore.length;j++){cscore[j]+=use[i][j];}}var result="";for(var i=0;i<4;i++){var a=i*2;var b=i*2+1;if(cscore[a]>cscore[b]){result+=mbti[a];}else{result+=mbti[b];}}var mbtiindex=0;for(var i=0;i<this.data.mbtisource.resultlist.length;i++){if(this.data.mbtisource.resultlist[i].name==result){mbtiindex=i;break;}}var userscore={mbtiscore:cscore,mbti:result,mbtiindex:mbtiindex};this.setData({oldmbtiresult:userscore});wx.setStorageSync('oldmbtiresult', userscore);//console.log(userscore);}//console.log(this.data.nowindex)},doClick(e){var ide=e.currentTarget.dataset.ide;if(ide==0){this.setData({"nowinfo.checkinfo":[true,false]})}else{this.setData({"nowinfo.checkinfo":[false,true]})}// console.log(this.data.nowinfo);}// getUserProfile(e) {//   // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗//   wx.getUserProfile({//     desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写//     success: (res) => {//       console.log(res)//       this.setData({//         userInfo: res.userInfo,//         hasUserInfo: true//       })//     }//   })// },// getUserInfo(e) {//   // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息//   console.log(e)//   this.setData({//     userInfo: e.detail.userInfo,//     hasUserInfo: true//   })// }
})

代码简单，希望对您有帮助！

声明：数据来源于网络，侵删！！！！