미니 프로그램 개발 일기 예보-미니 프로그램 개발-php.cn

미니 프로그램 개발 일기 예보

Y2J

풀어 주다： 2017-05-08 10:16:33

원래의

2319명이 탐색했습니다.

이 글에서는 WeChat 애플릿을 사용하여 날씨 예보 기능을 개발하는 방법을 소개합니다.

1. 프로젝트 파일 목록

2. 미니 프로그램 구성

app.json 파일을 사용하여 WeChat 애플릿을 전체적으로 구성하고, 페이지 파일의 경로, 창 성능을 결정하고, 네트워크 시간 초과를 설정하고, 여러 탭을 설정하는 등의 작업을 수행합니다.

{  "pages":[    "pages/index/index"
  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "天气预报",    "navigationBarTextStyle":"black"
  },  "networkTimeout": {    "request": 10000
  },  "debug": true}

로그인 후 복사

프로젝트에는 페이지가 하나뿐이므로 하단 탭이 필요하지 않습니다. 또한 네트워크 요청 시간을 10초로 설정하고

디버그 모드를 활성화하세요.

3. 미니 프로그램 로직 레이어

먼저 common.js의 Get User's Current Geographic Location

인터페이스 를 사용하여 사용자의 좌표 주소를 가져오고 gcj02를 선택합니다. 좌표 유형. //
현재 위치 가져오기좌표

function getLocation(callback) {
    wx.getLocation({
        type: 'gcj02',
        success: function(res) {
            callback(true, res.latitude, res.longitude);
        },
        fail: function() {
            callback(false);
        }
    })
}

로그인 후 복사

Wx.getlocation이 성공적으로 호출된 후 좌표 정보가 콜백

함수에 반환됩니다. 실패하면 콜백 함수에 false를 전달합니다. 좌표를 얻은 후 Baidu 인터페이스
를 사용하여 날씨를 쿼리합니다. 해당 쿼리 코드는 아래와 같습니다.

function getWeather(latitude, longitude, callback) {    var ak = "";//换成自己的ak,不要用方倍工作室的
    var url = "https://api.map.baidu.com/telematics/v3/weather?location=" + longitude + "," + latitude + "&output=json&ak=" + ak;
    wx.request({
        url: url,
        success: function(res){
            console.log(res);
            callback(res.data);            
        }
    });
}

로그인 후 복사

위 코드에서 먼저 Baidu 인터페이스의 ak를 정의한 다음 매개변수 연결을 통해 URL의 다른 부분을 구성합니다. 그런 다음 wx.request를 호출하여 일기 예보 데이터를 요청합니다.

다음으로 위의 인터페이스를 결합하여 애플리케이션 계층에 대한 인터페이스를 구성합니다.

function loadWeatherData(callback) {
    getLocation(function(success, latitude, longitude){  
        getWeather(latitude, longitude, function(weatherData){
            callback(weatherData);   
        });
    });
}

로그인 후 복사

마지막으로 module.exports를 통해 인터페이스가 외부 세계에 노출됩니다. 코드는 아래와 같습니다.

module.exports = {
    loadWeatherData: loadWeatherData
}

로그인 후 복사

4. 미니 프로그램 페이지 및

보기

페이지 파일에서

require를 사용하여 공개 코드를 소개합니다. 코드는 아래와 같습니다.

//index.jsvar common = require('common.js')

Page({
    data: {
        weather: {}
    },
    onLoad: function () {        var that = this;
        common.loadWeatherData(function(data){
            that.setData({
                weather: data
            });
        });    
    }
})

로그인 후 복사

페이지의 Page 기능에서 데이터는 날씨의 초기화 데이터로 정의되며, 이는 JSON 형식으로 로직 레이어에서 렌더링 레이어로 전송됩니다. onLoad 메소드에서는 공통적으로 loadWeatherData 메소드를 사용하여 날씨 데이터를 얻어 UI에 설정하고, setData 메소드를 사용하여 얻은 데이터를 데이터 레이어에 설정합니다.

페이지의 인터페이스 구현에서 해당 코드는 다음과 같습니다.

<!--index.wxml--><view class="container">  
  <view class="header">
      <view class="title">{{weather.results[0].currentCity}}</view>
      <view class="desc">{{weather.date}}</view>
  </view>

  <view class="menu-list">
      <view class="menu-item" wx:for="{{weather.results[0].weather_data}}" wx:key="*this">
        <view class="menu-item-main">
          <text class="menu-item-name">{{item.date}} {{item.weather}} {{item.wind}} {{item.temperature}}</text>
          <image class="menu-item-arrow" src="{{item.dayPictureUrl}}"></image>
        </view>
      </view>
  </view></view>

로그인 후 복사

가장 바깥쪽 레이어는 페이지 헤더와 페이지 목록을 각각 저장하는 데 사용되는 두 개의 하위 뷰를 포함하는 클래스 컨테이너가 있는 뷰입니다. 도시 이름과 시간은 페이지 헤더에 저장됩니다. 페이지 목록은 지난 며칠 동안의 기상 조건을 저장하는 데 사용됩니다.

페이지의 스타일시트 구현은 다음과 같습니다.

.header {
  padding: 30rpx;
  line-height: 1;
}.title {
  font-size: 52rpx;
}.desc {
  margin-top: 10rpx;
  color: #888888;
  font-size: 28rpx;
}.menu-list {
  display: flex;
  flex-direction: column;
  background-color: #fbf9fe;
  margin-top: 10rpx;
}.menu-item {
  color: #000000;
  display: flex;
  background-color: #fff;
  margin: 10rpx 30rpx;
  flex-direction: column;
}.menu-item-main {
  display: flex;
  padding: 40rpx;
  border-radius: 10rpx;
  align-items: center;
  font-size: 32rpx;
  justify-content: space-between;
}.menu-item-arrow {
  width: 96rpx;
  height: 96rpx;
  transition: 400ms;
}

로그인 후 복사

위 페이지 파일과 스타일 시트는 모두 공식 WeChat 데모에서 옮겨온 것입니다.

날씨 예보 애플릿의 최종 효과는 그림에 나와 있습니다.