率土抽卡助手 微信小程序开发

news2024/11/17 11:50:39

欢迎使用 微信率土抽卡助手

你好！率土抽卡助手是包含全赛季土地难度表、开荒阵容、武将阵容、主城守军阵容推荐、内政、荣誉值计算、拆迁队、队伍克制、沃土坐标、鱼塘坐标、武将寻访技巧、行军外观判断队伍、T0阵容、战法拆解、卡包抽取等全功能小程序。可在微信游览小程序。

1.为什么要写这样一款小程序呢

本人是率土忠实粉丝，在玩率土的过程中，发现无法预判下一次出现半价保底、免费保底的位置，所以开发了这样一款小程序：

  1. 抽卡统计、推测保底位置功能 ，将会带来全新的体验；
  2. 全地图鱼塘、沃土、名胜坐标，让你更方面；
  3. 武警寻访 功能，让你更容易寻访出五星；
  4. T0阵容 推荐，让你更快的组队；
  5. 开荒阵容、阵容转型模块，让你丝滑转型；

2.小程序主页Alt

3.小程序主页代码

index.wxml

<!-- 顶图 -->
<!-- <view>
<image style="height: 100px; width: 94%;margin:3%" src="/images/icon/stzb.png"></image>
</view> -->
<!-- 中间的格子 -->
<!-- <view>
  <view class='function_container'>
    <view class='function_item' wx:for="{{functions}}" wx:for-index="idx" wx:for-item="function" bindtap="goOtherPage" data-url="{{function.url}}">
        <image class='function_img' src='{{function.pic_url}}'/> 
        <view class='function_name'>{{function.name}}</view>
    </view>
  </view>
</view>  -->

<!-- 页面中间的几个分类  height:486rpx-->
<scroll-view scroll-y class="scrollPage">
    <image src='/images/icon/stzb.png' mode='widthFix' class='png' style='width:100%;height: 21%;'></image>
    <view class='nav-list'>
        <navigator open-type="navigate" hover-class='none' url="{{item.url}}" class="nav-li bg-{{item.color}}" wx:for="{{elements}}" wx:key="id">
            <view class="nav-title">{{item.title}}</view>
            <view class="nav-name">{{item.name}}</view>
            <text class='cuIcon-{{item.icon}}'></text>
        </navigator>
    </view>





    <!-- 打赏作者栏；判断是否显示出来 -->
    <!-- <view>
    <view class='nav-list' wx:if="{{showDaShangZuoZhe}}">
      <navigator open-type="navigate" hover-class='none' url="{{item.url}}" class="nav-li bg-{{item.color}}" wx:for="{{elements3}}" style="width: 99%;" wx:key>
        <view class="nav-title">{{item.title}}</view>
        <view class="nav-name">{{item.name}}</view>
        <text class='cuIcon-{{item.icon}}'></text>
      </navigator>
    </view>
  </view> -->

    <!-- banner广告 -->
    <ad unit-id="adunit-XXX"></ad>
    <view style="margin-top: 3%;"></view>
    <!-- 分割层标签 -->
    <view class='cu-tabbar-height'></view>

    <view class="padding bg-white" wx:for="{{elements2}}" wx:key="id">
        <view class="flex  p-xs margin-bottom-sm mb-sm " bindtap="goOtherPage2" data-url='{{item.url}}'>
            <view class="flex-twice  padding-sm margin-xs radius bg-black">

                <view class="flex solid-bottom padding justify-between">
                    <view>
                        <text class='cuIcon-{{item.icon}}'></text>
                        <text class="text lines-white">{{item.title}}</text>
                    </view>
                    <view>
                        <text class='cuIcon-right'></text>
                    </view>
                </view>
            </view>
        </view>
    </view>



    <view style="top: 2%;;margin: 2%;">
        <view class="padding">
            <button open-type="contact" class="cu-btn block bg-black margin-tb-sm lg light" style="width: 40%;margin-bottom: 1%;">
                <text style="margin-left:2%">在线客服</text>
            </button>
        </view>
    </view>

    <view style="top: 2%;;margin: 2%;">
        <view class="padding">
            <button open-type="share" class="cu-btn block bg-black margin-tb-sm lg light" style="width: 40%;margin-bottom: 1%;">
                <text style="margin-left:2%">分享盟友</text>
            </button>
        </view>
    </view>

</scroll-view>



<!-- 页面最底下的横条 -->
<!-- <view class="padding bg-white" style="margin:-200px" wx:for="{{elements2}}" wx:key>
    <view class="flex  p-xs margin-bottom-sm mb-sm " bindtap="goOtherPage2" data-url='{{item.url}}'>
        <view class="flex-twice bg-grey padding-sm margin-xs radius bg-gradual-blue">
          <text class='cuIcon-{{item.icon}}'></text>
        <text class="text line-yellow"  style="margin-left:3%">{{item.title}}</text>
        </view>
    </view>
</view> -->

<!-- 页面最底下的横条 -->
<!-- <view class="padding bg-white">
        <view class="flex  p-xs margin-bottom-sm mb-sm">
            <view class="flex-twice bg-grey padding-sm margin-xs radius"></view>
        </view>
    </view> -->

index.wxss


.container {
  height: 650px;
}
.slide-image{
  display: block;
  height: 280rpx;
  width:100%
}
.function_container{
  display:flex;
  flex-wrap: wrap;
  width:100%;
}
.function_item{
  color: white;
  width:30%;
  margin: 1.5%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-size:12px;
  box-sizing:border-box;
  padding-bottom:10px;
  padding-top:10px;
  /* box-shadow: 0px 0px 20px 10px rgba(0, 255, 115, 0.5) inset; */
  
   --borderWidth: 2px;
   background: #1D1F20;
   position: relative;
   border-radius: var(--borderWidth);
}
/* 边框特效 */
.function_item:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}

.function_img{
  width:100%;
  height:80px;
  margin-top: -10px;

}
.function_name{
  padding-top:10px;
  
}

.more-box {
  border-top-right-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  background-color: #fcbd71;
  padding: 5% 30rpx;
  font-size: 30rpx;
  margin: 20rpx;
  color: white;
  margin-top: -35%;
}


/* 最底下横条 */
.margin-xs {
  margin: 10px;
  margin-top: 0px;
}
.padding-sm {
	padding: 10px;
}
.radius {
	border-radius: 6px;
}


/* 在线客服 */
/* .row {
  display: flex;
  align-items: center;
  padding: 36rpx 10rpx;
  font-size: 30rpx;
  font-weight: inherit;
  background-color: rgba(0, 0, 0, 0);
  border-bottom: 1rpx solid #f1f1f1;
}

.row::after {
  border: none;
} */

/* .text {
  margin-left: 15rpx;
  color: #636262;
} */

index.ts

const app13 = getApp()
Page({
  data: {
    functions: [
      {
        "name": "土地难度表",
        "pic_url": '/images/icon/tuDiIcon.jpg',
        'url': '/pages/catalogue/catalogue',
      },
      {
        "name": "武将专题",
        "pic_url": '/images/icon/wuJiangIcon.jpg',
        'url': '/pages/study/study',
      },
      {
        "name": "战法专题",
        "pic_url": '/images/icon/zhanFaIcon.jpg',
        'url': '/pages/study2/study2',
      },
      {
        "name": "武器专题",
        "pic_url": '/images/icon/wuQiIcon.jpg',
        'url': '/pages/study3/study3',
      },
      {
        "name": "阵容推荐",
        "pic_url": '/images/icon/1.png',
        'url': '/pages/catalogue/catalogue',
      },
      {
        "name": "火车票",
        "pic_url": '/images/icon/1.png',
        'url': '/pages/catalogue/catalogue',
      },
    ],
    options: {
      addGlobalClass: true,
    },
    StatusBar: app13.globalData.StatusBar,
    CustomBar: app13.globalData.CustomBar,
    elements: [{
      id:1,
      title: '土地难度',
      name: 'Land difficulty',
      color: 'cyan',
      icon: 'news',
      url: '/pages/catalogue/catalogue'
    },
    {
      id:2,
      title: '开荒阵容',
      name: 'Opening lineup',
      color: 'red',
      icon: 'activity',
      url: '/pages/kaiHuangZhenRong/kaiHuangZhenRong'
    },
    {
      id:3,
      title: '武将专题',
      name: 'military generals',
      color: 'blue',
      icon: 'colorlens',
      url: '/pages/study/study'
    }, {
      id:4,
      title: '战法专题',
      name: 'Topic of War',
      color: 'purple',
      icon: 'font',
      url: '/pages/study2/study2'
    },
    {
      id:5,
      title: '武器专题',
      name: 'Topic on Arms',
      color: 'mauve',
      icon: 'wenzi',
      url: '/pages/study3/study3'
    },
    {
      id:6,
      title: '武将阵容',
      name: 'Military general',
      color: 'olive',
      icon: 'footprint',
      url: '/pages/zhenRongTuiJian/zhenRongTuiJian'
    },
    {
      id:7,
      title: '95保底卡池',
      name: '95 card pool',
      color: 'yellow',
      icon: 'activity',
      url: '/pages/kaChi/kaChi'
    },
    {
      id:8,
      title: '主城守军',
      name: 'the main city',
      color: 'brown',
      icon: 'home',
      url: '/pages/zhuChengShouJun/zhuChengShouJun'
    }, {
      id:9,
      title: "内政",
      name: 'internal affairs',
      color: 'orange',
      icon: 'focus',
      url: "/pages/neiZhengTuiJian/neiZhengTuiJian",
    }, {
      id:10,
      title: "荣誉值",
      name: 'Honor Value',
      color: 'cyan',
      icon: 'crown',
      url: "/pages/rongYuZhi/rongYuZhi",
    }, {
      id:11,
      title: "拆迁队",
      name: 'demolition crew',
      color: 'olive',
      icon: 'repair',
      url: "/pages/chaiQianDui/chaiQianDui",
    },{
      id:13,
      title: "队伍克制",
      name: 'Team restraint',
      color: 'red',
      icon: 'warn',
      url: "/pages/duiWuKeZhiGuanXi/duiWuKeZhiGuanXi",
    },{
      id:12,
      title: "藏宝阁",
      name: 'Treasure House',
      color: 'blue',
      icon: 'search',
      url: "/pages/cangBaoGe/cangBaoGe",
    },
    ],
    elements2: [
      {
        id:1,
        title: "沃土坐标",
        color: 'brown',
        icon: 'evaluate',
        url: "/pages/jiuZhouWoTu/jiuZhouWoTu",
      }, {
        id:1,
        title: "鱼塘坐标",
        color: 'brown',
        icon: 'evaluate',
        url: "/pages/yuTang/yuTang",
      },{
        id:4,
        title: "名胜坐标",
        color: 'brown',
        icon: 'evaluate',
        url: "/pages/mingShengZuoBiao/mingShengZuoBiao",
      },{
        id:2,
        title: "队伍篇",
        color: 'brown',
        icon: 'evaluate',
        url: "/pages/duiWuPian/duiWuPian",
      }, {
        id:3,
        title: "武将寻访",
        color: 'brown',
        icon: 'evaluate',
        url: "/pages/wuJiangXunFang/wuJiangXunFang",
      },{
        id:4,
        title: "行军外观",
        color: 'brown',
        icon: 'evaluate',
        url: "/pages/xingJunWaiGuan/xingJunWaiGuan",
      },  {
        id:5,
        title: "T0武将阵容",
        color: 'brown',
        icon: 'evaluate',
        url: '/pages/baDaHeXinWuJiang/baDaHeXinWuJiang'
      }, {
        id:6,
        title: "名将卡包爆率",
        color: 'brown',
        icon: 'evaluate',
        url: "/pages/MingJiangKaBaoGaiLv/MingJiangKaBaoGaiLv",
      }, {
        id:7,
        title: "全赛季武将战法拆解表",
        color: 'brown',
        icon: 'evaluate',
        url: "/pages/chaiJieZhanFaZhiYin/chaiJieZhanFaZhiYin",
      },
      {
        id:8,
        title: "征服割据卡包抽卡建议与分析",
        color: 'brown',
        icon: 'evaluate',
        url: "/pages/zhengFuGeJuKaBaoFenXi/zhengFuGeJuKaBaoFenXi",
      },
    ],

    // elements3: [{
    //   title: "支持创作",
    //   name: 'shopping mall',
    //   color: 'gradual-purple',
    //   icon: 'like',
    //   url: "/pages/daShangZuoZhe/daShangZuoZhe",
    // },
    // ],
    showDaShangZuoZhe:false,

  },

  // 从用户在抽卡记录页面填的值，确定是否显示 打赏作者页
//   该函数已经弃用，因为审核不过
  showDaShangZuoZhe(){
    //强制显示该页面
    this.setData({
      showDaShangZuoZhe:true,
    })
    return;
    var chouKa = wx.getStorageSync('chouKa');
    var temp=0;
    for(let i=0;i<chouKa.length;i++){
      if(chouKa[i]['color']=='blue'){
        temp=temp+1;
      }
      if(chouKa[i]['color']=='gray'){
        return;
      }
      if(temp>12){
        this.setData({
          showDaShangZuoZhe:true,
        })
      }
    }
  },


  onLoad() {
    this.showDaShangZuoZhe();
  },



  // 去其他配置页面
  goOtherPage: function (option: any) {
    console.log("details 已被调用" + option.currentTarget.dataset.url);
    wx.redirectTo({
      url: option.currentTarget.dataset.url
      // url:'/pages/details/details'
    })
  },
  // 去其他配置页面
  goOtherPage2: function (option: any) {
    console.log("details 已被调用" + option.currentTarget.dataset.url);
    wx.navigateTo({
      url: option.currentTarget.dataset.url　　// 页面 B
    })
  },
  isCard(e: any) {
    this.setData({
      isCard: e.detail.value
    })
  },

})

4.寄语

欢迎在程序中更好的了解，这里因为代码量太庞大，只是放了一个首页，后续会在github和国内gitee上传源代码，供大家学习参考。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/804304.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

机器人状态估计：robot_localization 功能包简介与安装

机器人状态估计：robot_localization 功能包简介与安装

机器人状态估计&#xff1a;robot_localization 功能包简介与参数配置 前言功能包简介安装使用ubuntu软件源安装使用源码安装 前言 移动机器人的状态估计需要用到很多传感器&#xff0c;因为对单一的传感器来讲&#xff0c;都存在各自的优缺点&#xff0c;所以需要一种多传感器…
阅读更多...
Linux下CMake开发

Linux下CMake开发

CMake编译和运行C文件 编写CMakeLists.txt # 声明要求的 cmake 最低版本 cmake_minimum_required( VERSION 3.1 )# 声明一个 cmake 工程 project( pro )# 设置编译模式 set( CMAKE_BUILD_TYPE "Release" )#添加OPENCV库 #指定OpenCV版本&#xff0c;代码如下 #find…
阅读更多...
vue2+wangEditor5富文本编辑器（图片视频自定义上传七牛云/服务器）

vue2+wangEditor5富文本编辑器（图片视频自定义上传七牛云/服务器）

1、安装使用 安装 yarn add wangeditor/editor # 或者 npm install wangeditor/editor --save yarn add wangeditor/editor-for-vue # 或者 npm install wangeditor/editor-for-vue --save在main.js中引入样式 import wangeditor/editor/dist/css/style.css在使用编辑器的页…
阅读更多...
压缩算法的原理丨基因型vcf文件为什么压缩后发生了什么？

压缩算法的原理丨基因型vcf文件为什么压缩后发生了什么？

压缩算法的本质 最近碰到一个神奇的现象&#xff0c;一份大小为16GB的xx.vcf.gz文件&#xff0c;解压之后体积变为600GB的vcf文件&#xff0c;为什么一份文件经过压缩后体积缩小了这么多&#xff1f; (work) [bio notes 21:29:40 ~/work/20230726/data]$ ls -lh总用量 620GB-…
阅读更多...
mac m1安装Centos9

mac m1安装Centos9

先看结果&#xff08;在mac M1 安装centos8 安装不成功的原因大部分是没有找到正确的系统&#xff09; 由于Cnetos8 停服&#xff0c;现有mac m1 上能够按照的Centos8 并非由官方发布&#xff0c;因此寻找官方发布的能够在mac m1上安装的centos版本。 在YouTuBe上找到一个视频…
阅读更多...
华为产品测评官－开发者之声 +【小白的CodeArts产品体验（Devops实践）】

华为产品测评官－开发者之声 +【小白的CodeArts产品体验（Devops实践）】

关于使用华为云Codearts产品中产品优点以及实践中出现的问题 一、Devops简介二、产品的优点1. 直观化的思维导图2. 迭代详情3. 合理的项目工作流程4. 合理的分支请求5. 可视化的代码问题统计图6. 报告的完整性7.流水线视图 三、实践中的小坑第一个小坑第二个小坑第三个小坑&…
阅读更多...
点击按钮横向滚动左右滚动

点击按钮横向滚动左右滚动

展示 原理 隐藏超过部分&#xff0c;通过设置元素左侧的滚动距离&#xff0c;使元素向右向左滚动 1.scrollLeft&#xff1a;元素左侧已滚动的距离&#xff0c;即位于元素左边界与元素中当前可见内容的最左端之间的距离 2.scrollWidth:元素的整体宽度&#xff0c;包括由于溢出…
阅读更多...
现代C++中的从头开始深度学习：激活函数

现代C++中的从头开始深度学习：激活函数

一、说明 让我们通过在C中实现激活函数来获得乐趣。人工神经网络是生物启发模型的一个例子。在人工神经网络中&#xff0c;称为神经元的处理单元被分组在计算层中&#xff0c;通常用于执行模式识别任务。 在这个模型中&#xff0c;我们通常更喜欢控制每一层的输出以服从一些约束…
阅读更多...
详解python中的垃圾回收机制

详解python中的垃圾回收机制

目录 什么是垃圾回收机制 垃圾回收的工作流程 为什么要进行垃圾回收 详解python中的垃圾回收机制 总结 什么是垃圾回收机制 垃圾回收&#xff08;Garbage Collection&#xff09;是一种自动内存管理机制&#xff0c;用于检测和释放不再被程序使用的内存资源&#xff0c;以…
阅读更多...
【数据结构】实验十一：图

【数据结构】实验十一：图

实验十一 图 一、实验目的与要求 1&#xff09;掌握图的存储表示与操作实现。 2&#xff09;掌握图的连通性及其应用。 二、 实验内容 1.用邻接表存储一个图形结构&#xff0c;并计算每个顶点的度。 2. 采用深度和广度优先搜索算法&#xff0c;遍历上述这张图&#xff0c;…
阅读更多...
CSS之允许点击穿透

CSS之允许点击穿透

一、pointer-events 属性用于设置元素是否对鼠标事件做出反应。 二、属性值 三、如果设置点击穿透效果&#xff0c;使用 pointer-events:none; 设置作用元素即可 .your-classname {pointer-events:none; }
阅读更多...
23款奔驰S400豪华型升级后排电动腿托系统，提升后排乘坐舒适性

23款奔驰S400豪华型升级后排电动腿托系统，提升后排乘坐舒适性

奔驰S400L后排座椅是不带腿托和脚托的&#xff0c;也没有一键躺平功能&#xff0c;相对于奔驰S级高配车型上配置的右边老板位座椅&#xff0c;舒适性就差强了一些。
阅读更多...
AX88179A千兆网卡芯片，支持switch联网

AX88179A千兆网卡芯片，支持switch联网

AX88179是世界上第一个USB 3.0&#xff0c;千兆以太网控制器&#xff0c;它在单一芯片上集成了USB 3.0 PHY和10/100/1000Mbps千兆以太网MAC / PHY。AX88179是最新此外ASIX的USB-到-LAN产品组合&#xff0c;提供一个小的形式因素的解决方案和插头-和-打法可用性&#xff0c;使嵌…
阅读更多...
重学C++系列之模板

重学C++系列之模板

一、什么模板 模板的引入跟泛型编程有关&#xff0c;泛型编程指编写和编译时&#xff0c;对于参数的类型是一个不确定的类型&#xff0c;直到程序运行时&#xff0c;才能确定真正的类型。而泛型编程的实现主要通过函数模板和类模板。 二、模板有几种 模板有两种&#xff0c;函…
阅读更多...
无涯教程-jQuery - hide( )方法函数

无涯教程-jQuery - hide( )方法函数

如果显示了 hide()方法&#xff0c;它们只是隐藏每个匹配元素集。此方法还有另一种形式&#xff0c;可以控制动画的速度。 hide( ) - 语法 selector.hide( ); hide( ) - 示例 以下是一个简单的示例&#xff0c;简单说明了此方法的用法- <html><head><title…
阅读更多...
软件测试人员一定要会的用例设计思路

软件测试人员一定要会的用例设计思路

职场新人对测试用例的困惑无非有以下几点 1、什么是测试用例&#xff0c;为什么要写测试用例&#xff1f; 2、不知道怎么写&#xff0c;写了也不知道写的是否完整。 一、什么是测试用例&#xff1f; 百科的释义&#xff1a; 测试用例是对一项特定的软件产品进行测试任务的…
阅读更多...
day45-Netflix Mobile Navigation（左边侧边栏动态导航）

day45-Netflix Mobile Navigation（左边侧边栏动态导航）

50 天学习 50 个项目 - HTMLCSS and JavaScript day45-Netflix Mobile Navigation&#xff08;左边侧边栏动态导航&#xff09; 效果 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name&…
阅读更多...
pinia在vue3中的使用

pinia在vue3中的使用

总结&#xff1a; 在store文件夹中建一个pinia的文件userStore.js 1.要想使用pinia必须先引入defineStore 这里我们使用es6的模块化语法导出的 import { defineStore } from pinia 2.然后使用export const useUserStore defineStore(user,{}) defineStore 方法有两个参数&…
阅读更多...
NAT协议（网络地址转换协议）详解

NAT协议（网络地址转换协议）详解

NAT协议&#xff08;网络地址转换协议&#xff09;详解 为什么需要NATNAT的实现方式静态NAT动态NATNAPT NAT技术的优缺点优点缺点 NAT协议是将IP数据报头中的IP地址转换为另外一个IP地址的过程&#xff0c;主要用于实现私有网络访问公有网络的功能。这种通过使用少量的IP地址代…
阅读更多...
机器视觉系统组成，你知道多少？

机器视觉系统组成，你知道多少？

机器视觉系统是一个复杂而高效的技术体系&#xff0c;它的组成主要包括以下几个核心部件&#xff1a; 相机和镜头&#xff1a;相机是机器视觉系统的眼睛&#xff0c;用于捕捉被测物的图像。镜头是相机的重要组成部分&#xff0c;它可以调节焦距、光圈和通光量&#xff0c;帮助获…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023