The wxsapp from gruiyuan

wxsapp's Introduction

垃圾分类小程序

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

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

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

目前支持了微信小程序CI工具，一键发布，非常的舒适！！我的微信小程序CI工具配置。可以看看这篇文章介绍：微信小程序CI工具

运行开发

npm install

// 小程序运行
npm run dev:weapp

// 小程序发布
npm run upload-wx

小程序二维码

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

Recommend Projects