全国海域潮汐表查询微信小程序详情教程及代码

这篇具有很好参考价值的文章主要介绍了全国海域潮汐表查询微信小程序详情教程及代码。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近在做一个全国海域潮汐表查询,可以为赶海钓鱼爱好者提供涨潮退潮时间表及潮高信息。
下面教大家怎么做一个这样的小程序。
主要功能,根据IP定位地理位置,自动查询出省份或城市的港口,进入后预测7天内港口潮汐表查询。
步骤:
1.采集全部国海域港口数据。
2.采集对应的港口数据每天潮汐表数据。
3.用百度echarts.js图表显示潮汐信息。


扫码看效果:

全国海域潮汐表查询微信小程序详情教程及代码

 小程序代码:

<!--pages/index/index.wxml-->
<t-navbar class="custom-navbar"  title="爱潮汐表网" />
  <view style="{{navBarHeight}}"></view>

<view class="location-box">
  <t-icon name="location" size="36rpx" class="location"/> 
  <view class="mycity">当前定位城市:{{location}}</view>
</view>
<scroll-view scroll-y="true" scroll-into-view="{{toView}}">  
  <view class="province-list" id="{{item.pinyin}}" wx:for="{{list}}" wx:key="item"  wx:for-item="item">  
    <view class="province">{{item.province}}</view>  
    <view class="port-list">  
      <view class="port-name" wx:for="{{item.port}}" wx:for-item="v" wx:key="id" wx:for-index="index" data-id="{{v.id}}" bindtap="goPort">  
        {{v.city}} - {{v.port_name}}
      </view>  
    </view>  
  </view>  
</scroll-view>  

<view class="index-box">  
    <view class="province {{toView==item.pinyin ? 'current': ''}}" wx:for="{{indexList}}" wx:for-item="item" wx:key="index" bindtap="choiceProvince"  data-index="{{item.pinyin}}">  
      {{item.name}}  
    </view>  
</view>  

潮汐图表页面代码:

<!--pages/port/port.wxml-->

<navigation defaultSetting="{{navigationSetting}}"></navigation>

<t-tabs class="bigger" theme="tag" space-evenly="{{false}}"  value="{{tab_day}}" bind:click="onTabsChange">
    <t-tab-panel wx:for="{{day_list}}" wx:key="date" wx:for-index="idx" wx:for-item="item" label="{{item.date}}" value="{{item.day}}" />
</t-tabs>

<view style="height: 36px" />

<view class="page-title">
{{day}}
<block wx:if="day_name">{{day_name}}</block>
 <view class="strong">{{port.port_name}}</view>潮汐表</view>
<view class="page-desc">
当前潮高: <view class="tide-now">{{tide.now_tide.tide}}cm </view>
全天最高: <view class="tide-max">{{tide.min_max_tide.max_tide.tide}}cm </view>({{tide.min_max_tide.max_tide.time}}) 
最低:<view class="tide-min">{{tide.min_max_tide.min_tide.tide}}cm</view>({{tide.min_max_tide.min_tide.time}})
</view>

<view class="tide-box">
  <view class="container">
    <ec-canvas id="mychart-dom-line" type="2d" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
  </view>
</view>

<view class="page-desc">
  潮高基准面:在平均海平面下 {{port.tide_datum}} CM
</view>

<view class="block port-list">
  <t-tag wx:for="{{ports}}" wx:key="id" wx:for-index="id" wx:for-item="item" class="margin-16 port-name" variant="outline" theme="primary" bind:click="tagClick" data-id="{{item.id}}">{{item.port_name}}潮汐表</t-tag>
</view>

 文章来源地址https://www.toymoban.com/news/detail-853207.html

到了这里,关于全国海域潮汐表查询微信小程序详情教程及代码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序学习】网易云音乐歌曲详情页代码实现

    这里记录一下做网易云小程序的音乐播放详情页面的代码。 音乐播放界面的主要的重点有几个:   1、磁盘和摇杆的旋转效果,这里运用了css的动画属性   2、音乐播放和暂停,下一首/上一首等播放效果的实现   3、进度条的样式和控制   4、和上一页音乐推荐列表页通信,利

    2024年02月09日
    浏览(46)
  • 微信小程序商城开发-商品详情页跳转购物车

    微信小程序商城开发中商品详情页中购物车页面的跳转(仅限于tabbar页面的跳转)   点击商品详情页中的购物车图标跳转不到tabbar及导航栏中的购物车页面,总是报错 微信小程序开发需要跳转tabbar页面的话,有固定的跳转方式,不是开发中所有的跳转方式都适用于tabbar跳转

    2024年02月17日
    浏览(59)
  • Python实战:通过微信小程序,获取Manner Coffee全国门店信息

    有公众号读者在后台提问,想要上海 manner 门店信息。 首先常规思路,先去 manner 官网找数据入口,发现只有门店的名称,没有其他信息,字段比较单薄。 其次,官网的门店数据没有及时更新,一些新开的店没有录入。 换个思路,去 MannerCoffee 点单小程序找一下数据,小程序

    2024年02月20日
    浏览(71)
  • 微信小程序分类图片通过id跳转到详情页,不同分类实现定向跳转

    微信小程序分类图片通过id跳转到详情页,不同分类实现定向跳转 1.实现循环展示排列 inde.wxml index.wxss index.js 页面展示 2.跳转到大分类页面 class.wxml class.js 结果:

    2024年02月11日
    浏览(59)
  • 【微信小程序】客服系统,客服聊天发送商品详情,快捷发送链接和图文消息,附代码和流程

    遇到一个新需求,需要做一个客服聊天的功能能够发送链接和图文消息,先在小程序后台做一个配置,首先在后台添加客服 然后客服按钮编写,功能实现 小程序客服创建 按钮编写可以参考微信开放文档 客服按钮, button 的 open-type 要设置为 contact

    2024年02月10日
    浏览(72)
  • 微信小程序-控制文本的显示及隐藏(当文字超出两行时,设置为可点击并进入查看详情页面)

    1、微信小程序文本展开、收起功能 2、微信小程序文字超过行后隐藏并且显示省略号 显示消息内容,超出两行部分隐藏。当有隐藏内容时,该卡片设为可点击,进入消息详情页面。 1、wxml 2、wxss 3、.js

    2024年02月13日
    浏览(58)
  • uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子详情实现

    锋哥原创的uniapp微信小程序投票系统实战: uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibili uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )共计21条视频,包括:uniapp微信小程序投票系统实

    2024年01月16日
    浏览(73)
  • 微信小程序—天气预报查询

    前不久用安卓做了个天气预报,麻烦的要死,故想体验一下微信小程序开发(其实没有可比性) 发现了一个免费的天气接口 天气接口api 地址:http://wthrcdn.etouch.cn/weather_mini?city=城市名称 (1)index.wxml文件 (2)index.wxss文件 (3)index.js文件 主要是实现三个动作 一个是初始化加

    2024年02月12日
    浏览(49)
  • 北京实时公交查询微信小程序

    实现效果 源代码 实践报告 摘要 概述 题目的背景及研究意义 本系统主要研究内容 系统需求分析 公交路线查询模块需求分析 附近公交站点信息查看模块需求分析 公交实时信息查看模块需求分析 实时公交查询系统设计 界面设计 业务流程设计 实时公交查询系统实现 公交路线

    2024年01月20日
    浏览(57)
  • 微信小程序之天气查询小案例

    本次小项目是关于微信小程序-动态查询天气(墨迹天气Api) 此次案例分为以下几个准备方面: 一.准备方面: (1)如何发起请求?查看文档:RequestTask | 微信开放文档 (2)如何获取定位信息?查看文档:wx.getLocation(Object object) | 微信开放文档 (3)如何控制页面来实现数据实时渲染?查看文档:

    2024年02月11日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包