原文链接：https://mp.weixin.qq.com/s/p6OMCbTHOYGJsjGOINpYvQ
1
概述
微信最近有很多火爆的小程序。成语猜猜看算得上前十火爆的了。今天我们就分享这样的小教程。希望对大家有所帮助。
快去拿个小板凳，坐等跟多更新
注意：如若需要请联系微信geekxz
wxml
<!--pages/content/index.wxml-->
<view style='position: relative;'>
<view class='container'>
<view class='ads'>
<text>【您已获得一个红包，打开支付宝即可领取】</text>
</view>
<view class='c-display'>
<view class='display-others'></view>
<view class='display-content'>
<image class="content-img" src='{{curImgUrl}}'></image>
</view>
<view class='display-opts'>
<button class='btn-alert' bindtap='onPrompt' size='mini'>
提示
</button>
<button open-type="share" class='btn-share' size='mini'>
分享
</button>
</view>
</view>
<view class='c-opts'>
<view class='opts-others'></view>
<view class='opts-content' bindtap='onSelected'>
<block wx:key='this' wx:for="{{selectedContent}}" wx:for-item="item">
<view class="content-input" id='result_{{item.index}}' data-id='{{item.index}}' data-content='{{item.content}}'>
<text data-id='{{item.index}}' data-content='{{item.content}}'>{{item.content}}</text>
</view>
</block>
</view>
<view class='opts-score'></view>
</view>
<view class='c-select' bindtap='onSelect'>
<block wx:for="{{selectContent}}" wx:for-index="i" wx:for-item="content" wx:key="this">
<view class='select-index' data-content='{{content}}' id='select_{{i}}'>
<text data-content='{{content}}'>{{content}}</text>
</view>
</block>
</view>
</view>
<!--弹窗 -->
<dialog is-show="{{isComplete}}" is-pass="{{isTrue}}" bindonNext="generateNewData"/>
</view>
js
// pages/content/index.js
var allSelected = require('../../utils/data.js')
Page({
/**
* 页面的初始数据
*/
data: {
selectContent: [],
selectedContent: [
{ "index": 0, "content": "" },
{ "index": 1, "content": "" },
{ "index": 2, "content": "" },
{ "index": 3, "content": "" },
],
pics: [
"1.jpeg", "2.jpeg", "3.png", "4.png", "5.jpg", "6.jpg", "7.jpeg"
],
correctTexts: ["马到成功", "三心二意", "千里之外", "一箭双雕", "不明觉厉", "鸡同鸭讲", "胆小如鼠"],
basePath: "/resources/",
sorted: [],
curImgUrl: "",
curCorrectText: "",
allSelected: allSelected.mtData().list,
isTrue: false,
isComplete: false,
},
/**
* 提示
*/
onPrompt: function () {
for (let i = 0; i < this.data.selectedContent.length; i++) {
if (this.data.selectedContent[i].content == "") {
this.data.selectedContent[i].content = this.data.curCorrectText[i];
break;
}
}
this.updateState();
},
/**
* 随机生成文字
*/
generateText: function () {
//清除上一次数据
if (this.data.selectContent.length > 0) {
this.data.selectContent.splice(0, this.data.selectContent.length);
}
for (let i = 0; i < this.data.curCorrectText.length; i++) {
this.data.selectContent.push(this.data.curCorrectText[i]);
}
let start = Math.floor(Math.random() * 500);
for (let i = 0; i < 32 - this.data.curCorrectText.length; i++) {
let index = (start + i) % this.data.allSelected.length;
this.data.selectContent.push(this.data.allSelected[index]);
}
this.data.selectContent.sort(this.randomSort);
},
/**
* 获取新数据
*/
generateNewData() {
if (this.data.sorted.length <= 0) {
console.log("通关...");
return;
}
for (let i = 0; i < this.data.selectedContent.length; i++) {
this.data.selectedContent[i].content = "";
}
let index = this.data.sorted.shift();
this.data.curImgUrl = this.data.basePath + this.data.pics[index];
this.data.curCorrectText = this.data.correctTexts[index];
this.generateText();
//更新数据
this.setData({
curImgUrl: this.data.curImgUrl,
curCorrectText: this.data.curCorrectText,
selectContent: this.data.selectContent,
selectedContent: this.data.selectedContent
});
},
/**
* check是否结果
*/
checkResult: function () {
for (let i = 0; i < this.data.selectedContent.length; i++) {
if (this.data.selectedContent[i].content != this.data.curCorrectText[i]) {
return false;
}
}
return true;
},
/**
* 是否作答完毕
*/
isCompleted: function () {
for (let i = 0; i < this.data.selectedContent.length; i++) {
if (this.data.selectedContent[i].content == "") {
return false;
}
}
return true;
},
/**
* 作答
*/
onSelect: function (event) {
let content = event.target.dataset.content;
if (!content || this.isCompleted()) {
return;
}
for (let i = 0; i < this.data.selectedContent.length; i++) {
if (this.data.selectedContent[i].content == "") {
this.data.selectedContent[i].content = content;
break;
}
}
this.updateState();
},
/**
* 更新作答状态
*/
updateState() {
this.setData({ selectedContent: this.data.selectedContent });
this.data.isComplete = this.isCompleted();
if (this.data.isComplete) {
this.data.isTrue = this.checkResult();
this.setData({ isTrue: this.data.isTrue });
}
this.setData({ isComplete: this.data.isComplete });
},
/**
* 修改答案
*/
onSelected: function (event) {
let content = event.target.dataset.content;
let index = event.target.dataset.id;
if (content != "") {
this.data.selectedContent[index].content = "";
this.setData({ selectedContent: this.data.selectedContent });
}
},
/**
* 随机排序
*/
randomSort: function (a, b) {
return Math.random() > 0.5 ? -1 : 1;
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//生成随机排序辅助数组
for (let i = 0; i < this.data.pics.length; i++) {
this.data.sorted.push(i);
}
this.data.sorted.sort(this.randomSort);
this.generateNewData();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
/* pages/content/index.wxss */
page {
background-color: #f7be86;
}
.container {
background-color: #f7be86;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
box-sizing: border-box;
}
.ads {
margin-top: 20rpx;
font-size: 22rpx;
color: red;
font-weight: bold;
}
.c-display {
background-color: #9d6137;
width: 95%;
margin: 30rpx 0;
height: 400rpx;
display: flex;
flex-direction: row;
align-items: center;
border-radius: 16rpx;
}
/*视图操作栏 */
.display-opts {
width: 30%;
height: 100%;
font-size: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.btn-alert {
padding: 10rpx;
border-width: 4rpx;
border-radius: 10rpx;
color: white;
background-color: #fcb545;
}
.btn-share {
padding: 10rpx;
border-width: 4rpx;
border-radius: 10rpx;
color: #259f3d;
background-color: #9bff14;
}
/*视图图片显示区 */
.display-content {
width: 60%;
display: flex;
flex-direction: row;
justify-content: center;
}
.content-img {
width: 100%;
max-height: 350rpx;
}
.display-others {
width: 10%;
}
.c-opts {
width: 100%;
/* margin-top: 20rpx; */
display: flex;
flex-direction: row;
}
.opts-others {
width: 20%;
}
.opts-content {
width: 60%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.opts-score {
width: 20%;
}
.content-input {
display: flex;
align-items: center;
justify-content: center;
font-size: 40rpx;
color: white;
border-radius: 10rpx;
width: 80rpx;
height: 80rpx;
background-color: #852200;
}
.c-select {
margin-top: 70rpx;
width: 100%;
height: 400rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.select-index {
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: #852200;
margin: 10rpx 10rpx;
width: 66rpx;
height: 66rpx;
background-color: #fce6be;
border-radius: 8rpx;
}
以上代码为效果为 图一
注意路径问题
文末福利：
福利一：前端，Java，产品经理，微信小程序，Python等100G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程。
【领取方法】
关注 【编程微刊】微信公众号：
回复【小程序demo】一键领取130个微信小程序源码demo资源。
回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集100G资源大放送。