위 챗 애플 릿 은 고 덕 맵 API 를 기반 으로 날씨 구성 요소(동적 효과)를 구현 합 니 다.
web프로젝트 를 참고 하여 수 동 으로 애플 릿 으로 옮 겨 사용 할 수 밖 에 없 었 다.현재 인터넷 커 뮤 니 티 에 공유 하여 필요 한 개발 자 를 돕 고 있 습 니 다.1.구성 요소 소개
1.1 구성 요소 효과 미리 보기 그림
애플 릿 구성 요 소 는 외부 스타일
colorui의 색 채 를 계승 하지만 실제 애니메이션 은 부모 노드 의color속성 에 따라 자동 으로 색 채 를 채 웁 니 다.colorui이 스타일 라 이브 러 리 를 도입 하지 않 더 라 도 이 구성 요소 참조 외 에color속성 이 있 는 블록 패키지 구성 요 소 를 정의 할 수 있 습 니 다.그림 과 같은 효 과 를 얻 을 수 있 습 니 다.
1.2 구조 형태
1.3 지원 하 는 애니메이션 효과
간단하게 소개 하면 애니메이션 은 세 부분 으로 구성 된다.
하 나 는
인 데 이 애니메이션 의 큰 구름 은 바로...두 번 째 는 ,예 를 들 어 첫 번 째 태양 과 세 번 째 중의 다 층 구름 이다.세 번 째 는 첫 번 째 빗물 과 두 번 째 천둥 같은 이다.조각 마다 있 고 하나만 보 여줄 수 있 습 니 다.자신의 수요 에 따라 스스로 이 몇 조각 을 조합 하여 대응 하 는 날씨 수 요 를 만족 시 킬 수 있다.주:뇌우 가 교차 하 는 효 과 를 실현 하려 면 두 개의 애니메이션 을 정의 해 야 합 니 다.하 나 는 천둥 이 고 하 나 는 비 입 니 다.그리고 타 이 머 를 통 해 애니메이션 의 왔다갔다 전환 을 해 야 합 니 다.완 성 된 것 이 있 으 면 댓 글 에 코드 를 남 길 수 있 습 니 다.저 는 이 루 기 가 귀 찮 습 니 다.하하.
2.구성 요소 사용
구성 요소 의 사용 은 위치 정 보 를 가 져 올 수 있 는 권한 을 부여 하고
app.json에서 권한 을 설정 해 야 합 니 다.
"permission": {
"scope.userLocation": {
"desc": " "
}
}app.json에 도입 합 니 다.
"usingComponents": {
"uweather":"animation/uweather/weather"
}사용자 정의 모드 기본 모드(도입
amap-wx.js,고 덕 지도 신청key,구체 적 인 절 차 는 참고 문서 첫 번 째 참조)
lifetimes:{
attached(){
if(this.properties.winfo == null){
this.setData({
amapPlugin: new amap.AMapWX({
key: this.data.key
})
},()=>{
//
this.getWeather()
})
}
}
},
사용자 정의 모드 에서 들 어 오 는 데 이 터 는 규정된 형식 에 따라 야 합 니 다(구성 요소 의 속성 값 도 스스로 수정 할 수 있 습 니 다)
예 를 들 어
page에서 설정 한 속성 은 다음 과 같다.
weather:' ',
winfo:{
province:' ',
city:' ',
temperature:' ',
weather:' ',
winddirection:' ',
windpower:' '
}wxml페이지 의 구성 요 소 는 다음 과 같 습 니 다.
<uweather
weather="{{weather}}"
winfo="{{winfo}}"
>
</uweather>
2.2 기본 모드
기본 모드 는 사용자 의 지리 적 위치 정보 권한 수 여 를 받 아야 합 니 다.
app.json에서 권한 수여 설정 과 구성 요 소 를 사용 하기 전에 권한 수여 정 보 를 검증 한 것 을 확인 하 십시오.구성 요소 의 생명 주 기 는 페이지 트 리 와 같은 구성 요소 가 설 치 될 때마다 해당 하 는 데이터 가 들 어 오 는 지 감청 합 니 다.없 으 면 해당 하 는 인 터 페 이 스 를 요청 하여 지도 정 보 를 가 져 옵 니 다.기본 적 인 방법 을 사용 하려 면 합 법 적 인
request도 메 인 이름과 신청 에 대응 하 는key을 개발 에 사용 하도록 설정 해 야 합 니 다.신청 절 차 는 참고 문 서 를 참조 하 십시오.기본 모드 에 서 는 매개 변 수 를 입력 하지 않 고 구성 요 소 를 직접 도입 하면 됩 니 다.
<uweather> </uweather>기본 적 인 방법의 날씨 반환 값 은 여러 가지 가 있 습 니 다.구체 적 으로 사용 하려 면 스스로 구성 요 소 를 수정 해 야 합 니 다.서로 다른 날씨 부터 해당 하 는 애니메이션 의 맵 을 완성 해 야 합 니 다.예 를 들 어 작은 비,중 우,큰비 가 모두
라 는 애니메이션 상 태 를 매 핑 할 수 있 습 니 다.아래 그림 은 고 덕 지도 날씨 API 의 일부 정보 입 니 다.모두 참고 문 서 를 참조 하 시기 바 랍 니 다.
4.구성 요소 코드
상세 한 구성 요소 가 프로젝트 에서 의 사용 구 조 는[오픈 소스 프로젝트]https://restapi.amap.com를 보 세 요.⭐，감사합니다.
uweather.js
// animation/uweather/rain.js
const amap = require('../../lib/amap-wx.js');
Component({
options: {
addGlobalClass: true,
multipleSlots: true
},
/**
*
*/
properties: {
weather:{
type:String,
value:'',
observer:function(n,o){
//
}
},
winfo:{
type:Object,
value:null,
observer:function(n,o){
//
this.setData({
obj:n
})
}
}
},
/**
*
*/
data: {
amapPlugin: null,
key: "6799b5f6f88d3d9fb52ac244855a8759",
obj:{},
},
lifetimes:{
attached(){
if(this.properties.winfo == null){
this.setData({
amapPlugin: new amap.AMapWX({
key: this.data.key
})
},()=>{
this.getWeather()
})
}
}
},
/**
*
*/
methods: {
//
getWeather:function(){
wx.showLoading({
title: ' ...'
})
// type： 。 live（ ）， forecast（ ）。
// city： adcode， 。 ， 。 ：440300，
// success(data) ： 。
// fail(info) ： 。
this.data.amapPlugin.getWeather({
success: (data) =>{
//
console.log(data)
wx.hideLoading()
this.setData({
obj:data.liveData,
})
if(this.properties.weather == ''){
this.setData({
weather:data.liveData.weather
})
}
},
fail: function (info) {
//
console.log(info)
}
})
},
}
})
<view class="padding-sm">
<view class="bg-gradual-blue padding radius shadow-blur" style="display: flex;flex-direction: row;">
<view style="width:50%;height:100%;color:#1A94E6;">
<view class="icon sun-shower " wx:if="{{weather == ' '}}">
<view class="cloud"></view>
<view class="sun"><view class="rays"></view></view>
<view class="rain"></view>
</view>
<view class="icon sun-shower " wx:if="{{weather == ' '}}">
<view class="cloud"></view>
<view class="sun"><view class="rays"></view></view>
</view>
<view class="icon thunder-storm" wx:if="{{weather == ' '}}">
<view class="cloud"></view>
<view class="lightning">
<view class="bolt"></view>
<view class="bolt"></view>
</view>
</view>
<view class="icon cloudy" wx:if="{{weather == ' '}}">
<view class="cloud"></view>
<view class="cloud"></view>
</view>
<view class="icon flurries" wx:if="{{weather == ' '}}">
<view class="cloud"></view>
<view class="snow">
<view class="flake"></view>
<view class="flake"></view>
</view>
</view>
<view class="icon sunny" wx:if="{{weather == ' '}}">
<view class="sun"><view class="rays"></view></view>
</view>
<view class="icon rainy" wx:if="{{weather == ' '}}"><view class="cloud"></view></view>
</view>
<!-- -->
<view style="width:50%;height:100%;">
<view class="title">
<view class="text-cut" style="margin-top:20rpx;">{{obj.province}}-{{obj.city}}</view>
<!--view class="text-cut"> :{{obj.humidity.data}}</view-->
<view class="text-cut" style="margin-top:20rpx;"> :{{obj.temperature}}℃</view>
<view class="text-cut" style="margin-top:20rpx;"> :{{obj.weather}}</view>
<view class="text-cut" style="margin-top:20rpx;">{{obj.winddirection}} {{obj.windpower}} </view>
</view>
</view>
</view>
</view>
body {
max-width: 42em;
padding: 2em;
margin: 0 auto;
color: #161616;
font-family: 'Roboto', sans-serif;
text-align: center;
background-color: currentColor;
}
h1 {
margin-bottom: 1.375em;
color: #fff;
font-weight: 100;
font-size: 2em;
text-transform: uppercase;
}
p,
a {
color: rgba(255,255,255,0.3);
font-size: small;
}
p { margin: 1.375rem 0; }
.icon {
position: relative;
display: inline-block;
width: 12em;
height: 10em;
font-size: 1em; /* control icon size here */
}
.cloud {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 3.6875em;
height: 3.6875em;
margin: -1.84375em;
background: currentColor;
border-radius: 50%;
box-shadow:
-2.1875em 0.6875em 0 -0.6875em,
2.0625em 0.9375em 0 -0.9375em,
0 0 0 0.375em #fff,
-2.1875em 0.6875em 0 -0.3125em #fff,
2.0625em 0.9375em 0 -0.5625em #fff;
}
.cloud:after {
content: '';
position: absolute;
bottom: 0;
left: -0.5em;
display: block;
width: 4.5625em;
height: 1em;
background: currentColor;
box-shadow: 0 0.4375em 0 -0.0625em #fff;
}
.cloud:nth-child(2) {
z-index: 0;
background: #fff;
box-shadow:
-2.1875em 0.6875em 0 -0.6875em #fff,
2.0625em 0.9375em 0 -0.9375em #fff,
0 0 0 0.375em #fff,
-2.1875em 0.6875em 0 -0.3125em #fff,
2.0625em 0.9375em 0 -0.5625em #fff;
opacity: 0.3;
transform: scale(0.5) translate(6em, -3em);
animation: cloud 4s linear infinite;
}
.cloud:nth-child(2):after { background: #fff; }
.sun {
position: absolute;
top: 50%;
left: 50%;
width: 2.5em;
height: 2.5em;
margin: -1.25em;
background: currentColor;
border-radius: 50%;
box-shadow: 0 0 0 0.375em #fff;
animation: spin 12s infinite linear;
}
.rays {
position: absolute;
top: -2em;
left: 50%;
display: block;
width: 0.375em;
height: 1.125em;
margin-left: -0.1875em;
background: #fff;
border-radius: 0.25em;
box-shadow: 0 5.375em #fff;
}
.rays:before,
.rays:after {
content: '';
position: absolute;
top: 0em;
left: 0em;
display: block;
width: 0.375em;
height: 1.125em;
transform: rotate(60deg);
transform-origin: 50% 3.25em;
background: #fff;
border-radius: 0.25em;
box-shadow: 0 5.375em #fff;
}
.rays:before {
transform: rotate(120deg);
}
.cloud + .sun {
margin: -2em 1em;
}
.rain,
.lightning,
.snow {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
width: 3.75em;
height: 3.75em;
margin: 0.375em 0 0 -2em;
background: currentColor;
}
.rain:after {
content: '';
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
width: 1.125em;
height: 1.125em;
margin: -1em 0 0 -0.25em;
background: #0cf;
border-radius: 100% 0 60% 50% / 60% 0 100% 50%;
box-shadow:
0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
-1.375em -0.125em 0 rgba(255,255,255,0.2);
transform: rotate(-28deg);
animation: rain 3s linear infinite;
}
.bolt {
position: absolute;
top: 50%;
left: 50%;
margin: -0.25em 0 0 -0.125em;
color: #fff;
opacity: 0.3;
animation: lightning 2s linear infinite;
}
.bolt:nth-child(2) {
width: 0.5em;
height: 0.25em;
margin: -1.75em 0 0 -1.875em;
transform: translate(2.5em, 2.25em);
opacity: 0.2;
animation: lightning 1.5s linear infinite;
}
.bolt:before,
.bolt:after {
content: '';
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
margin: -1.625em 0 0 -1.0125em;
border-top: 1.25em solid transparent;
border-right: 0.75em solid;
border-bottom: 0.75em solid;
border-left: 0.5em solid transparent;
transform: skewX(-10deg);
}
.bolt:after {
margin: -0.25em 0 0 -0.25em;
border-top: 0.75em solid;
border-right: 0.5em solid transparent;
border-bottom: 1.25em solid transparent;
border-left: 0.75em solid;
transform: skewX(-10deg);
}
.bolt:nth-child(2):before {
margin: -0.75em 0 0 -0.5em;
border-top: 0.625em solid transparent;
border-right: 0.375em solid;
border-bottom: 0.375em solid;
border-left: 0.25em solid transparent;
}
.bolt:nth-child(2):after {
margin: -0.125em 0 0 -0.125em;
border-top: 0.375em solid;
border-right: 0.25em solid transparent;
border-bottom: 0.625em solid transparent;
border-left: 0.375em solid;
}
.flake:before,
.flake:after {
content: '\2744';
position: absolute;
top: 50%;
left: 50%;
margin: -1.025em 0 0 -1.0125em;
color: #fff;
opacity: 0.2;
animation: spin 8s linear infinite reverse;
}
.flake:after {
margin: 0.125em 0 0 -1em;
font-size: 1.5em;
opacity: 0.4;
animation: spin 14s linear infinite;
}
.flake:nth-child(2):before {
margin: -0.5em 0 0 0.25em;
font-size: 1.25em;
opacity: 0.2;
animation: spin 10s linear infinite;
}
.flake:nth-child(2):after {
margin: 0.375em 0 0 0.125em;
font-size: 2em;
opacity: 0.4;
animation: spin 16s linear infinite reverse;
}
/* Animations */
@keyframes spin {
100% { transform: rotate(360deg); }
}
@keyframes cloud {
0% { opacity: 0; }
50% { opacity: 0.3; }
100% {
opacity: 0;
transform: scale(0.5) translate(-200%, -3em);
}
}
@keyframes rain {
0% {
background: #0cf;
box-shadow:
0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
-1.375em -0.125em 0 #0cf;
}
25% {
box-shadow:
0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
-0.875em 1.125em 0 -0.125em #0cf,
-1.375em -0.125em 0 rgba(255,255,255,0.2);
}
50% {
background: rgba(255,255,255,0.3);
box-shadow:
0.625em 0.875em 0 -0.125em #0cf,
-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
-1.375em -0.125em 0 rgba(255,255,255,0.2);
}
100% {
box-shadow:
0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
-1.375em -0.125em 0 #0cf;
}
}
@keyframes lightning {
45% {
color: #fff;
background: #fff;
opacity: 0.2;
}
50% {
color: #0cf;
background: #0cf;
opacity: 1;
}
55% {
color: #fff;
background: #fff;
opacity: 0.2;
}
}miniprogram/animation/uwather·Kindear/캠퍼스 애플 릿-코드 클 라 우 드-오픈 소스 중국(gitee.com)
입문 안내서-위 챗 애플 릿 SDK|고 덕 맵 API(amap.com)
날씨 조회-API 문서-개발 가이드-웹 서비스 API|고 덕 지도 API(amap.com)
위 챗 애플 릿 이 고 덕 지도 API 를 기반 으로 날씨 구성 요소(동적 효과)를 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 위 챗 애플 릿 이 날씨 구성 요 소 를 실현 하 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 을 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenSSL 생 성 ssl 인증서텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
