本文实例讲述了微信小程序五子棋游戏AI实现方法。分享给大家供大家参考，具体如下： DEMO下载 五子棋AI篇DEMO 效果图原理 1. 将棋盘中能够胜利的五子连珠方法遍历一个数组； 2. 当AI持棋时，遍历棋盘中所有棋子的空位； 3. 如果用户落子该位置，给用户该位置的五连珠方式进行加分：1连10分，2连20分，3连40分，4连80分； 4. 如果AI落子该位置，给AI该位置的五连珠方式进行加分：1连15分，2连25分，3连45分，4连85分； 5. 最后对该位...
最近在学习小程序的编写，需要调用后端接口，经常要用到wx.request方法，所以就自己封装了一下，简化一下代码，如果能给大家提供帮助更好，我的项目后端是使用的Java SSM框架，wx.request的URL就是后端提供的接口。在封装的时候我在网上看了很多篇博客，90%以上的全都是直接在success回调函数中直接打印返回值console.log(res.data)这个当然是没有问题的，但是我们都知道微信小程序的数据是实现数据绑定的，这一点和Vue框架很像，而...
本文介绍了微信小程序实现仿微信聊天界面，分享给大家，具体如下： 下面先来看看效果为实现这样的效果，首先要解决两个问题： 1.点击输入框弹出软键盘后，将已有的少许聊天内容弹出，导致看不到的问题； 2.键盘弹出或收起时，聊天消息没有自动滚到最底部。 首先解决第二个问题，自动滚动到最底部，这很简单，这里提供三种方法（推荐第三种）：1.计算每条消息的最大高度，设置scroll-top=(单条msg最大高度 * msg条数)px。 2.用 将展...
最近在写一个列表功能，列表中有倒计时的效果，网上没有可用的素材，以下是本人自己写的，如有问题，希望大家指出。 先来看看基本的效果小程序中列表倒计时，类似活动倒计时列表，列表中有多个倒计时效果，且不冲突先把时间打印出来，放在data中，然后在写计时器；如果先写计时器，然后把打印出来的时间放在data就会报错，setData不支持这种操作。 数据文件（dates.js，返回的时间数据是剩余时间） var dates=[{dat:324235235},{da...
转发的意义 转发即是分享，分享带动了事物去中心化，实现网络化，最终走向云处理化通过微信平台，转发即是聊天流量时代，转发即是引流官方转发示例 onShareAppMessage(Object) 监听用户点击页面内转发按钮（<button> 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮 Object 参数说明：此事件需要 return 一个 Object，用于自定义转发...
本文实例为大家分享了微信小程序实现banner图轮播的具体代码，供大家参考，具体内容如下 效果图：indicator-active-color="#007aff"//修改选中图片圆点的颜色js: const app = getApp()Page({data: {//-----------模拟banner图-----------imgUrls: [/image/1545118381903.jpg,/image/1545118566631.jpg],circular: true,//是否显示画板指示点 indicatorDots: true,//选中点的颜色 //是否竖直 vertical: false,//是否自动切换 autopl...
本文实例为大家分享了微信小程序实现简单表格的具体代码，供大家参考，具体内容如下 效果图：wxml <view class="table"><view class="tr bg-w"><view class="th">SPB</view><view class="th">DPB</view><view class="th ">日期</view></view><block wx:for="{{listData}}" wx:key="{[code]}"><view class="tr" wx:if="{{index % 2 == 0}}"><view class="td">{{item.code}}</view><view class="td">{{item.text}}</view><view class...
本文实例为大家分享了微信小程序制作表格的具体代码。 微信小程序中没有专门的表格制作工具，不过使用列表渲染可以实现， 下面是我做的表格图片：方法如下： 在XXX.wxml中填写下面的代码 <view class="table"><view class="tr bg-w"><view class="th">参数</view><view class="th-2">内容</view></view><block wx:for="{{listData}}" wx:key="{[code]}"><view class="tr bg-g" wx:if="{{index % 2 == 0}}"><view class="td-1" sele...
本文实例为大家分享了微信小程序实现简易表格的具体代码，供大家参考，具体内容如下 由于需要开发小程序，前端又是自己弄，类似table的标签也没有，后来看到小程序文档中推荐使用flex布局，就把css中的flex布局学了一遍，效果还行，大家将就看一下 table.wxml <view class="table"><view class="tr bg-w"><view class="th">head1</view><view class="th">head2</view><view class="th ">head3</view></view><block wx:for="{{listD...
大家都知道微信小程序自身没有提供表格这个组件，但是今天的项目需求又出现了，所以只能模仿一个了。 效果图：代码挺简单方便的： wxml:<view class=history-table-wrap><view class="table"><view class="tr"><view class="th th1">日期</view><view class="th th2">时间</view><view class="th th3">伤害</view></view><view class="tr" wx:for="{{15}}"><view class="td td1">2018/02/12</view><view class="td td2">11:30</vie...
这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法，供大家参考，具体内容如下 效果如图：wxml: <view class="item" wx:for="{{data}}" wx:for-item="item" wx:for-index="idx" data-idx="{{idx}}" bindtap="chooseItem"><view class="choosebtn {{idx==currentidx&&choose==true?choosedbtn:choosenobtn}}"></view><text>{{idx==currentidx&&choose==true?text:textTwo}}</text> </view>wxss: .item {width: 100...
本文实例为大家分享了微信小程序实现左右列表联动的具体代码，供大家参考，具体内容如下 效果图：直接上代码： wxml界面: <view class=header> <text class=headerClass>分类</text> <text class=headerPin>/品牌</text> <view class="search"><image src=/images/搜索.png></image> <text>搜索商品</text> </view> </view> <view class=main><view class=left><scroll-view scroll-y="true" style="height: 1100rpx" scroll-i...
本文实例为大家分享了微信小程序实现联动选择器的具体代码，供大家参考，具体内容如下 picker 从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。 先来看看效果图：1、普通选择器 mode = selector（默认的） <view class=picker>普通选择器</view><!--value: value值表示选择了让的第几个，index===下标 从0开始rang：对应数据b...
本文实例为大家分享了小程序实现多列选择器的具体代码，供大家参考，具体内容如下 代码分两部分，先上wxml <view class="container"><form catchsubmit="formSubmit"><view class="form-card"><view class="weui-cell weui-cell_input"><view class="weui-cell__hd"><view class="weui-label">物种<span>*</span></view></view><view class="weui-cell__bd"><picker mode="multiSelector" bindchange="bindMultiPickerChange" bind...
本文实例为大家分享了微信小程序实现按钮颜色状态转换的具体代码，供大家参考，具体内容如下 效果图片： index.wmxl文件<block wx:for="{{pres}}"><view class=foot_tab data-id="{{index}}" style="{{index==id? color:rgb(91, 207, 97):color:#ddd}}" bindtap=changeColor><view class="icon"><icon class="iconfont {{item.img_type}}"></icon></view><view>{{item.text}}</view></view></block>index.js文件 var id; Page({dat...