引言： 近年來，隨著教育理念的提升，對學生綜合素質的教育越發重視，特別是越發重視學生的身體素質提升，各階段的升學考試也將體測納入考核範圍。學校也推出了各種體測鍛煉促進手段，今天為您介紹一個基於小程式的，線上AI體測訓練打卡、評測方案。 一、體測功能需求 根據相關學生體測標準，體測小程式需要具備以下功 ...
最近在做一個全國海域潮汐表查詢，可以為趕海釣魚愛好者提供漲潮退潮時間表及潮高信息。
下麵教大家怎麼做一個這樣的小程式。
主要功能，根據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>
