Skip to content
🚮🚮Garbage Classification Help Center WxMiniApp
TypeScript CSS JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
img
src
.editorconfig
.eslintrc
.gitignore
global.d.ts
package.json
project.config.json
readme.md
tsconfig.json
yarn.lock

readme.md

垃圾分类小程序

taro typescript scss yarn

垃圾分类查询、垃圾分类小测验、天气预报等功能,后续会开启更多功能。

🚮垃圾分类查询API是调取的别人的,目前支持微信小程序和支付宝小程序。欢迎 👏👏Star!!

如果你之前没有开发过小程序,可以看看我的 个人小程序开发指南 这篇文章,欢迎交流!!

Tips

  • Taro-cli
  • TypeScript
  • Node.js
  • Yarn

项目

ts+react语法

// page/index.tsx
import { ComponentClass, TouchEvent } from 'react'
import Taro, { Component, Config } from '@tarojs/taro'
import { View, Icon, Input, Button } from '@tarojs/components'

import './index.scss'

interface Props {}
interface State {
    search: string,
    keywords: Array<string>,
    imgList: Array<string>,
    selectedSort: SelectedSort | null,
}

class Index extends Component <Props,State>   {
  config: Config = {
    navigationBarTitleText: '垃圾分类助手',
    navigationBarTextStyle: 'white',
    navigationBarBackgroundColor: '#2c7cf7'
  }

  constructor (props) {
    super(props)
    ......

scss语法

.index-container {
    padding: 50rpx 50rpx;
    background: #fff;

    & .img-container {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-around;
        margin-top: 40rpx;
    }

    & .inconImage {
        width: 220rpx;
        height: 220rpx;
        margin: 20rpx 40rpx 20rpx 40rpx;
    }
    ......

微信小程序

支付宝小程序

You can’t perform that action at this time.