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

  • 全国海域潮汐表查询微信小程序详情教程及代码已关闭评论
  • 49 次浏览
  • A+
所属分类:Web前端
摘要

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

最近在做一个全国海域潮汐表查询,可以为赶海钓鱼爱好者提供涨潮退潮时间表及潮高信息。
下面教大家怎么做一个这样的小程序。
主要功能,根据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>