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
  //   })
  // }
})

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

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