评论

如何实现一个性格测试类小程序?

群里好些人在说测试类小程序比较火,还有一定的盈利模式:激励视频or微信支付收割智商税。 废话不多说,直接源码分享,如果觉得有帮助请点个赞或者评论一起交流

群里好些人在说测试类小程序比较火,还有一定的盈利模式:激励视频or微信支付收割智商税。

废话不多说,直接源码分享,如果觉得有帮助请点个赞或者评论一起交流

产品介绍:

首页

进来首页默认展示一个top评测内容供用户直接操作评测。

开始评测

点击选项进行选择并request下个选择项。底部配以广告为展示增加曝光(不建议加广告,因为停留也就1s,这里只是是测试)


评测结束

合理的加上激励视频,美滋滋

END

增加分享功能,引流、传播

重点来了哦 核心代码

qml

    
    <view class="mb">
    <scroll-view class="tableView" scroll-into-view='{{intoView}}'>


        <block qq:if='{{startTest}}'>
            <block qq:if='{{showResult}}'>
                <view class="resultClass">
                    <view class="cells">
                        <view class='title'>测试结果:{{testResultData.title}}</view>
                        <image mode='widthFix' src="{{testResultData.photo}}"></image>
                        <view class="info">{{testResultData.info}}</view>
                        <button open-type='share' class='share'>分享给好友</button>
                    </view>
                </view>
            </block>
            <block qq:else>


                <view class="top" qq:if="data">
                    <view class='title'>{{data.title}}</view>
                    <view catchtap="jumpToNext" data-model="{{item}}" class="cell" wx:for='{{data.list}}' ac>
                        <view class="left">{{index+1}}</view>
                        <view class="right">{{item.title}}
                            <radio class="kkk" color='orange'></radio>
                        </view>
                    </view>
                    <ad class='addd' unit-id='xxxx'></ad>
                </view>
            </block>
        </block>
        <block qq:else>
            <view class="item" id='s0' qq:if="result">
                <view class="subTitle" qq:if='result.userSee>0'>已有{{result.userSee}}W人做过该测试</view>
                <image mode='widthFix' src="{{result.photo}}"></image>
                <view class="info">{{result.info}}</view>
                <view class="goTest" qq:if='{{result}}' catchtap="gogogo">开始测试</view>
                <view class="tips">- 本小程序仅供娱乐 - </view>
            </view>
        </block>


        <view class="otherTitle">更多推荐</view>
        <view qq:for='{{list}}' qq:for-index="idx">


            <view class="cell {{idx==0?'cell0':''}}" catchtap="jumpToTest" data-model="{{item}}">
                <image class="leftImag" mode='aspectFill' src="{{item.photo}}"></image>
                <view class="right">
                    <view class="title">{{item.title}}</view>
                    <view class="info">已有{{item.userSee}}W人测试</view>
                </view>
                <image class="rightImag" src="../../images/right.png" mode="" />
            </view>
            <view qq:if='{{(idx%10==0&&idx!=0)}}'>
                <ad type='card' unit-id='xxxxxxx'></ad>
            </view>


        </view>
        </scroll-view>
</view>



                
            



css 样式

Page{
      background-color: #121212;
}
.mb {
    background-color: #121212;
min-height: 3800rpx;
}
.tableView {
  margin: 20rpx;  
  background-color: #121212;
  color: #ccc;
  width: 710rpx;
}


.cell {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding-bottom: 10rpx;
  padding-top: 10rpx;
  /* border-radius: 20rpx; */
  background-color: #393e46;
  /* margin-bottom: 10rpx; */
  margin-left: 20rpx;
  margin-right: 20rpx;


}
.cell0 {
  border-top-left-radius: 0rpx;
  border-top-right-radius: 0rpx;
}
.cell .right {
  width: 470rpx;
  padding-left: 10rpx;
  padding-right: 20rpx;
  position: relative;
}
.cell .leftImag {
  height: 150rpx;
  width: 150rpx;
  margin-left: 20rpx;
  border-radius: 20rpx;
}
.cell .title {
  font-size: 28rpx;
  margin-top: 10rpx;
  padding-right: 45rpx;
}
.cell .info {
  font-size: 23rpx;
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  word-wrap: break-word;
  position: absolute;
  bottom: 10rpx;
}
.cell .rightImag {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  top: 50%;
  right: 20rpx;
  margin-top: -20rpx;
}
.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 20rpx;
  margin-right: 20rpx;
  padding-bottom: 20rpx;
  border-radius: 20rpx;
  background-color: #393e46;
  margin-bottom: 40rpx;
  padding-top: 20rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;


}
.item .tips{
  font-size: 18rpx;
  color: #98989D;
}
.item .title {
  font-size: 28rpx;
  font-weight: 700;
  margin-bottom: 20rpx;
}
.item image {
  width: 100%;
  height: 350rpx;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
}
.item .info {
  font-size: 28rpx;
}
.item .subTitle {
  font-size: 20rpx;
  margin-bottom: 20rpx
}
.goTest {
  font-size: 32rpx;
  font-weight: 800;
  height: 80rpx;
  width: 60%;
  border-radius: 10rpx;
  background-color: #FF9F0A;
  color: white;
  line-height: 80rpx;
  text-align: center;
  margin-top: 50rpx;
  margin-bottom: 20rpx;
}
.otherTitle {
  font-size: 30rpx;
  font-weight: 800;
  padding-left: 20rpx;
  background-color: #393e46;
  height: 80rpx;
  line-height: 80rpx;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
}
.top {
  display: flex;
  flex-direction: column;
  min-height: 800rpx;
  border-radius: 20rpx;
  padding-top: 20rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  background-color: #393e46;
  position: relative;
  padding-bottom:250rpx;
}
.addd {
  position: absolute;
  bottom: 0;
}


.top .title {
  font-size: 28rpx;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
}
.top .cell {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}
.top .right {
  width: 650rpx;
  background-color: #222831;
  min-height: 80rpx;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  position: relative;
  padding: 10rpx;
  padding-right: 50rpx;
}
.top .kkk {
  position: absolute;
  right: 10rpx;
}
.top .left {
  background-color: #FF9F0A;
  color: white;
  font-size: 24rpx;
  width: 80rpx;
  text-align: center;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.resultClass {
  display: flex;
  flex-direction: column;
  border-radius: 20rpx;
  background-color: #393e46;
  margin-left: 20rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}



.resultClass .cells {
  margin:50rpx


}
.resultClass .cells .title {
  font-size: 28rpx;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20rpx;
}
.resultClass .cells .info {
  font-size: 28rpx;
  margin-bottom: 20rpx;
  margin-top: 20rpx;
}
.cells image {
  border-radius: 20rpx;
  width:580rpx;
}
.resultClass .share {


  font-size: 32rpx;
  font-weight: 800;
  height: 80rpx;
  width: 60%;
  border-radius: 10rpx;
  background-color: #FF9F0A;
  color: white;
  line-height: 80rpx;
  text-align: center;
  margin-top: 50rpx;
  margin-bottom: 20rpx;
}
.add {
  margin-left: 20rpx;
  margin-right: 20rpx;
}

js文件

// pages/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [],
    result:null,
    id : 89,
    num:1,
    data:null,
    startTest:false,
    intoView:'s0',
    showResult:false,
    testResultData:null,
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if(options.id){
      this.setData({
        id:options.id
      })
    }
    this.loadNewData()
    this.loadDetail()
  
   
  },
  getResultData(id,name){
    qq.showNavigationBarLoading();
    const that = this
  qq.request({
        url: 'xxx',
        method: 'POST',
        data: {
          id: id,
          name:name
        },
        success: (res => {
            res.data.result.photo = that.changeImage(res.data.result.photo)
            res.data.result.userSee = Math.ceil(Math.random()*10) + 10
          that.setData({
            showResult:true,
            testResultData:res.data.result
          })
          qq.hideNavigationBarLoading();
        }),
      fail:(e=>{
          qq.hideNavigationBarLoading();
      })
      })
  },
  loadDetail(){
    qq.showNavigationBarLoading();
    const that = this
    qq.request({
      url: 'xxxxx' + that.data.id,
      method: 'POST',
      data: {
        num: that.data.num,
        kid: that.data.id
      },
      success: (res => {
          res.data.result.userSee = Math.ceil(Math.random()*10) + 10
        that.setData({
          data: res.data.result,
        })
        qq.hideNavigationBarLoading();
      }),
      fail:(e=>{
          qq.hideNavigationBarLoading();
      })
    })
  },
  changeImage(img){
    return img
  },
  loadNewData(){
    const that = this
    qq.showNavigationBarLoading();
    qq.request({
      url: 'xxxx',
      data: {
        id: that.data.id
      },
      success: (res => {
        qq.hideNavigationBarLoading();
        that.setData({
          list: res.data.list,
          result:res.data.result
        })
         qq.setNavigationBarTitle({
          title:res.data.result.title
        })
      })
    })
  },


  gogogo(){
    this.setData({
          result:null,
          num:1,
          startTest:true,
          intoView:'s0',
    })
    this.loadDetail()
  },


  jumpToNext(e) {
  const that = this
    if (e.currentTarget.dataset.model.result) {
      qq.showModal({
        title: '恭喜你测试已结束,快查看结果吧',
        'confirmText': '查看结果',
        success(res) {
          if(res.cancel){
            return
          }
          let videoAd = qq.createRewardedVideoAd({
            adUnitId: 'xxxxxx'
          }) 
          videoAd.onError(function (res) {
          }) 
          videoAd.onLoad(function (res) {
          }) 
          videoAd.onClose(function (res) {
            if (res && res.isEnded) {
                  that.getResultData(that.data.id,e.currentTarget.dataset.model.result)
            }else {
              qq.showModal({
                title: '只有完整看完视频才能够查看哦',
                'confirmText': '我知道了',
              })
            }
          }) 
          videoAd.load().then(() => {
            console.log('激励视频加载成功');
            videoAd.show().then(() => {
              console.log('激励视频 广告显示成功')
            }).catch(err => {
                  that.getResultData(that.data.id,e.currentTarget.dataset.model.result)
            })
          }).catch(err => {
            console.log('激励视频加载失败');
          })
          
        }
      })
    } else {
      that.setData({
            result:null,
            num:e.currentTarget.dataset.model.goAskNum,
            startTest:true,
      })
      that.loadDetail()
    }
  },
  jumpToTest (e) {
    this.setData({
          list: [],
          result:null,
          id:e.currentTarget.dataset.model.id,
          num:1,
          startTest:false,
          showResult:false,
          testResultData:null,
    })
    this.loadNewData()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
return {
      title: this.data.result.title,
      desc: this.data.result.info,
      path: '/pages/index/index?id=' + this.data.id, // ?后面的参数会在转发页面打开时传入onLoad方法
      success () {
      },
      fail () {
      }
    }
  }
})
最后一次编辑于  2020-04-29  
点赞 0
收藏
评论

3 个评论

  • wang li
    wang li
    2020-05-03

    不开源不想看

    2020-05-03
    赞同
    回复 1
    • Naruto
      Naruto
      2020-05-06
      这还不算开源?你想直接run?
      2020-05-06
      回复
  • 小肥羊
    小肥羊
    2020-04-30

    收好的源码呢??

    2020-04-30
    赞同
    回复 3
    • Naruto
      Naruto
      2020-04-30
      源码不都贴了Emmmmm
      2020-04-30
      回复
    • 小肥羊
      小肥羊
      2020-04-30回复Naruto
      差评,哈哈哈哈哈哈哈
      2020-04-30
      回复
    • Naruto
      Naruto
      2020-04-30回复小肥羊
      ....
      2020-04-30
      回复
  • Admin²⁰²¹
    Admin²⁰²¹
    2020-04-29

    这代码能git上去一份么。

    这UI不错。可圈可点的地方不少。

    感谢分享。

    2020-04-29
    赞同
    回复 1
    • Naruto
      Naruto
      2020-04-30
      Thanks♪(・ω・)ノ
      2020-04-30
      回复
登录 后发表内容