/wxSapp

🚮🚮Garbage Classification Help Center WxMiniApp || taro框架开发

Primary LanguageTypeScript

垃圾分类小程序

taro typescript scss yarn

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

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

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

目前支持了微信小程序CI工具,一键发布,非常的舒适!!源码:我的微信小程序CI工具配置。可以看看这篇文章:微信小程序CI工具

Tips

  • Node.js
  • Taro-cli
  • React
  • TypeScript
  • Yarn
  • 微信小程序CI
  • 更多方案持续更新。。。

项目

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;
    }
    ......

微信小程序

vx备注 加群交流