All Projects → YanceyOfficial → natsuha-weather

YanceyOfficial / natsuha-weather

Licence: MIT license
Natsuha Weather for WeChat Mini Program.

Programming Languages

typescript
32286 projects
SCSS
7915 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to natsuha-weather

patrick-wechat
⭐️🐟 questionnaire wechat app built with taro, taro-ui and heart. 微信问卷小程序
Stars: ✭ 74 (+124.24%)
Mutual labels:  wechat-mini-program, taro
Taro-ParserRichText
适用于 Taro 的小程序富文本组件
Stars: ✭ 32 (-3.03%)
Mutual labels:  wechat-mini-program, taro
elf-taro
Taro 小程序 脚手架 (Taro 3 + Dva + Typescript + Immer) - 内置 Redux 计数器, 异步数据请求 与 腾讯小程序地图 demo
Stars: ✭ 61 (+84.85%)
Mutual labels:  wechat-mini-program, taro
taro3-vue3-template
一个基于 Taro3 和 Vue3 框架微信小程序模版。 核心技术采用Taro3、Vue3、TypeScript、NutUi、Vux4/Pinia、VueUse
Stars: ✭ 115 (+248.48%)
Mutual labels:  wechat-mini-program, taro
Fresh Weather
新鲜天气:使用小程序·云开发的小程序
Stars: ✭ 291 (+781.82%)
Mutual labels:  weather, wechat-mini-program
Taro Ui
一款基于 Taro 框架开发的多端 UI 组件库
Stars: ✭ 3,806 (+11433.33%)
Mutual labels:  wechat-mini-program, taro
classmate-map
🧭 一款设计精美、体验优良的地图信息展示小程序,一个更有意思的同学录,可以在小程序中查看班级同学的毕业去向以及地域分布,多联(蹭)系(饭)。
Stars: ✭ 79 (+139.39%)
Mutual labels:  wechat-mini-program, taro
mpxday
mpxday是基于mpx开发的天气预报微信小程序
Stars: ✭ 3 (-90.91%)
Mutual labels:  weather, wechat-mini-program
taro-template
可用于生产环境的taro项目模版,技术栈:taro + taro-ui + typescript + dva / mobx + sass,无需过多关注项目配置,预置功能包括但不限于页面/组件/store/service模版一键生成/编译自动生成路由列表和组件入口/代码规范强制检查/请求拦截封装/小程序CI等,实现多端项目的高效快速开发。目前已有1.x / 2.x / 3.x 版本。
Stars: ✭ 59 (+78.79%)
Mutual labels:  mobx, taro
Taro
开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
Stars: ✭ 30,230 (+91506.06%)
Mutual labels:  wechat-mini-program, taro
Quietweather
☀️ Develop a weather wechat mini program application in two days - 两天撸一个天气应用微信小程序
Stars: ✭ 677 (+1951.52%)
Mutual labels:  weather, wechat-mini-program
taro-ts-mobx-boilerplate
Taro 脚手架 Typescript/ Mobx / icon font / Jest
Stars: ✭ 12 (-63.64%)
Mutual labels:  mobx, taro
react-native-taopiaopiao
react-native 构建全栈淘票票
Stars: ✭ 30 (-9.09%)
Mutual labels:  mobx
ui
We reinvent the UI for taro3+
Stars: ✭ 48 (+45.45%)
Mutual labels:  taro
weather
基于MVP的安卓天气demo
Stars: ✭ 49 (+48.48%)
Mutual labels:  weather
veact
Mutable state enhancer library for React based on @vuejs
Stars: ✭ 62 (+87.88%)
Mutual labels:  mobx
react-mobx-router
Create React App with React Router 4 and MobX + Internationalization
Stars: ✭ 90 (+172.73%)
Mutual labels:  mobx
temps-lite
A smart, good-looking little app which tries to speak your language the way you are used to.
Stars: ✭ 40 (+21.21%)
Mutual labels:  weather
react-weather-app
An attempt to make an ultimate weather app. In ReactJS, with React hooks and context.
Stars: ✭ 39 (+18.18%)
Mutual labels:  weather
React
This repository contains all the material for the HackYourFuture module "React.js: Building dynamic UIs with modern JavaScript"
Stars: ✭ 243 (+636.36%)
Mutual labels:  mobx

☁️ Natsuha Weather

Codacy Badge License: MIT Version Node PRs Welcome FOSSA Status

Introduction

Natsuha is a weather app that created with Taro and Yahoo Weather API for WeChat Mini Program. Now the stable version(v3.0.0) is released, welcome to experience and star.

Natsuha Weather

effects image

Features

  • Pull down to refresh
  • Swtich temperature between Fahrenheit and Celsius
  • Display the weather condition by hour
  • Display the weather condition by day
  • Display the wind direction and speed
  • Display the sun and moon
  • Display the precipitation forecast
  • Search weather information by city name

Available Scripts

yarn global add @tarojs/cli

Firstly you should install the @tarojs/cli globally.

yarn install

Install dependencies.

yarn dev:weapp

Runs the app in the development mode. Open the developer tools of WeChat to view it. The app will be deployed if you make edits. You will also see any lint errors in the console.

yarn build:weapp

Builds the app for production to the dist folder. It correctly bundles the app in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. The app is ready to be deployed!

Privacy

The following files are not uploaded to GitHub because of private key, you must create them manually.

getWoeid

You need apply a key in Yahoo Weather API at first.

yahoo key

Then create a file index.js in functions/getWoeid, and insert the following codes with your keys.

/* eslint-disable */

const cloud = require('wx-server-sdk');
const OAuth = require('oauth');

cloud.init();

const header = {
  'Yahoo-App-Id': YOUR_APP_ID,
};

const request = new OAuth.OAuth(
  null,
  null,
  YOUR_CLIENT_ID,
  YOUR_CLIENT_SECRET,
  '1.0',
  null,
  'HMAC-SHA1',
  null,
  header,
);

exports.main = async (event, context) =>
  new Promise((resolve, reject) => {
    const lat = event.lat;
    const lon = event.lon;
    const lang = event.lang;
    request.get(
      `https://weather-ydn-yql.media.yahoo.com/forecastrss?lang=${lang}&format=json&lat=${lat}&lon=${lon}`,
      null,
      null,
      (err, data, result) => {
        resolve(data);
      },
    );
  });

TODOs

  • Support multiple languages
  • Optimize performance
  • Optimize image loading
  • Support Test
  • Move the search component to a new page
  • Drag and Drop
  • Display multi city by swipe

Change Logs

v3.0.0

Update elements of Yahoo Wether API. (2020-08-30)

v2.0.0

Upgrage Taro to v2.0.6 and code optimization. (2020-03-14)

v1.0.4

Upgrage Taro to v1.3.12 and fix bugs. (2019-08-10)

v1.0.3

Fix bug of Wind Component. (2019-04-18)

v1.0.2

Add Serach Component. (2019-03-11)

v1.0.1

Optimization code. (2019-03-07)

v1.0.0

Publish the first version. (2019-03-01)

License

Natsuha Weather is MIT licensed.

FOSSA Status

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].