群里好些人在说测试类小程序比较火,还有一定的盈利模式:激励视频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 () {
}
}
}
})
不开源不想看
请问这种类型小程序类目选什么?
请问小程序类目选什么?
请问一下那些测试的题目从哪里找,怎么放进去呀
这种测试的题目和结果从哪里来的?
如何调节的 就是把这个源码复制到wxml文件里吗?
收好的源码呢??
这代码能git上去一份么。
这UI不错。可圈可点的地方不少。
感谢分享。