全國海域潮汐表查詢微信小程式詳情教程及代碼

来源:https://www.cnblogs.com/ayuday/p/18137382
-Advertisement-
Play Games

引言: 近年來,隨著教育理念的提升,對學生綜合素質的教育越發重視,特別是越發重視學生的身體素質提升,各階段的升學考試也將體測納入考核範圍。學校也推出了各種體測鍛煉促進手段,今天為您介紹一個基於小程式的,線上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>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 最近,群里聊到了一個很有意思的佈局效果。大致效果如下所示,希望使用 CSS 實現如下所示的佈局效果: 正常而言,我們的 HTML 結構大致是如下所示: <div class="g-container"> <div class="g-nav"> <ul> <li>Tab 1</li> <li>Tab ...
  • 一、前期轉杯 確保電腦上已安裝 node.js。 可通過命令 npm --version進行查詢,如果展示了版本號,則說明已安裝,若提示 npm 不是有內部或外部命令,也不是可運行的程式,則說明未安裝,可進入官網下載併進行安裝。 確保已安裝 Vue CLI。 可通過命令 vue --V 查看版本號, ...
  • Commonjs 什麼是 CommonJs CommonJs 是 js 模塊化的社區規範 模塊化產生的原因 隨著前端頁面複雜度的提升,依賴的第三方庫的增加,導致的 js 依賴混亂,全局變數的污染,和命名衝突 單個 js 文件內容太多,導致了維護困難,拆分成為多個文件又會發生第一點描述的問題 v8 引 ...
  • vue3 快速入門系列 - 組件通信 組件通信在開發中非常重要,通信就是你給我一點東西,我給你一點東西。 本篇將分析 vue3 中組件間的通信方式。 Tip:下文提到的絕大多數通信方式在 vue2 中都有,但是在寫法上有一些差異。 準備環境 在 vue3 基礎上進行。 新建三個組件:爺爺、父親、孩子 ...
  • Rubick —— 一款純綠色、效率、開源的桌面端工具箱軟體。軟體支持插件化的方式來安裝工作所需要的任何插件。插件是基於 npm 進行安裝和卸載,非常輕便。 ...
  • splice在英語中的意思是拼接,在實際的代碼使用中,splice就在數組中起到了一個拼接的作用 使用方法 splice(x,y,a,b,c,...) 其中x、y為數字,a、b、c為新添加的項,意思是從數組的第x項開始刪除y項,併在其中添加a、b、c...,其中x、y必填,abc可不填 圖像理解 現 ...
  • 前言 2018年剛入行前端時,公司使用的還是Angular。Angular什麼都好,就是寫代碼時的體驗老糟心了,改一個地方,按下保存之後,要等好幾秒刷新後才能看到效果,Webstorm無比好用的自動保存,對我來說反而像是一個負擔。然而2024年了,Angular已經更新了17版本,還是沒有解決這個問 ...
  • 這兩天為了重啟五年前基於 React Native(版本 0.59.9)開發的老項目,經過各種填坑查詢等操作,最終把它成功地運行起來了。 在這篇文章中,我將詳述那些遭遇的挑戰以及對應的解決方案,以期為同樣面臨此類困境的開發者提供寶貴的經驗參考。 這個項目涉及到的環境基本版本信息如下: react: ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...