Taro + React +Nest.js + MongoDB 实现一个简单的微信小程序

本文链接：https://blog.csdn.net/qq_48744162/article/details/126146780

Taro可以采用react来编写微信小程序，所以想玩一玩就采用Taro UI官方给的样例进行改进，

首先要安装好以上环境，以及我们的数据库，可以参照给出的官方文档进行安装，

安装好后就可以打开初始化项目

这是Taro的app.js,在Taro就是我们的入口文件，入口组件不会选内容

import React, { useEffect } from 'react'

// Taro 额外添加的 hooks 要从 '@tarojs/taro' 中引入
import { useDidShow, useDidHide } from '@tarojs/taro'
import 'taro-ui/dist/style/index.scss'

// 全局样式
import './app.css'




function App (props) {
  // 可以使用所有的 React Hooks
  useEffect(() => {})

  // 对应 onShow
  useDidShow(() => {})

  // 对应 onHide
  useDidHide(() => {})


  return (
    // 在入口组件不会渲染任何内容，但我们可以在这里做类似于状态管理的事情
    <>
    {props.children}
    </>
  )
}

export default App

一开始会渲染的是app.config.js里面的页面(这里是我以经写好的项目)，app.config.js对应我们的wx小程序原生开发的app.json

之后就是更开发React差不多，比如主页的代码

import React, { useEffect, useState } from 'react'
import { Image, Text, View } from '@tarojs/components'
import iconBasic from '../../assets/images/icon-list-basic.png'
import iconForm from '../../assets/images/icon-list-form.png'
import iconView from '../../assets/images/icon-list-view.png'
import logoImg from '../../assets/images/logo_taro.png'
import Taro, {
  useReady,
  useDidShow,
  useDidHide,
  // eslint-disable-next-line import/first
  usePullDownRefresh
  // eslint-disable-next-line import/first
} from '@tarojs/taro'
import './index.css'
// eslint-disable-next-line import/first
import { AtModal, AtModalAction, AtModalContent, AtModalHeader, AtButton } from "taro-ui";


function Index() {
  // 可以使用所有的 React Hooks
  const [show, setShow] = useState(false)
  const login = () => {
    Taro.login({
      success: function (res) {
        const { code } = res
        console.log('result' + code)
        Taro.request({
          url: `http://127.0.0.1:3000/getOpenId/${code}`,
          data: { code: code },
          header: {
            'content-type': 'json'
          },
          method: 'GET',
          success: function (res) {
            Taro.setStorageSync('openId', res.data.openid)
            setShow(false)
            console.log(res)
          },
          fail: function (res) {
            setShow(false)
            console.log(res)
          }
        })

      }

    })
  }
  useEffect(() => {
    let openid = Taro.getStorageSync('openId')
    console.log(openid)
    if (!openid) {
      setShow(true)
    }

  }, [])

  // 对应 onReady
  useReady(() => {
  })

  // 对应 onShow
  useDidShow(() => {
  })

  // 对应 onHide
  useDidHide(() => {
  })

  // Taro 对所有小程序页面生命周期都实现了对应的自定义 React Hooks 进行支持
  // 详情可查阅：【Hooks】
  usePullDownRefresh(() => {
  })

  const list = [
    {
      id: 'Show',
      title: '查看待做',
      content: '查看自己的待做事件',
      icon: iconBasic
    },
    {
      id: 'Add',
      title: '添加待做',
      content: '添加自己待做事件',
      icon: iconForm
    },
    {
      id: 'Finish',
      title: '查看完成',
      content: '查看自己完成的事件',
      icon: iconView
    }
  ]

  const goPage = (id) => {
    console.log(list)
    Taro.navigateTo({
      url: `/pages/${id.toLowerCase()}/index`
    }).then(r => console.log(r))


  }

  return (
    <View className='page page-index'>
      <View className='logo'>
        <Image src={logoImg} className='img' mode='widthFix' />
      </View>
      <View className='page-title'>To Do</View>
      <View className='module-list'>
        {list.map((item, index) => (
          <View
            className='module-list__item'
            key={index}
            data-id={item.id}
            data-name={item.title}
            data-list={item.subpages}
            onClick={() => goPage(item.id)}
          >
            <View className='module-list__icon'>
              <Image src={item.icon} className='img' mode='widthFix' />
            </View>
            <View className='module-list__info'>
              <View className='title'>{item.title}</View>
              <View className='content'>{item.content}</View>
            </View>
            <View className='module-list__arrow'>
              <Text className='at-icon at-icon-chevron-right' />
            </View>
          </View>
        ))}
      </View>

      <AtModal isOpened={show}>
        <AtModalHeader>授权登录</AtModalHeader>
        <AtModalContent>
          您还尚未授权，请授权后登录
        </AtModalContent>
        <AtModalAction>
          <AtButton onClick={() => { setShow(false) }}>取消</AtButton>

          <AtButton

            open-type='getU'
            onClick={login}
          >确定</AtButton>
        </AtModalAction>
      </AtModal>
    </View>
  )

}

export default Index

主页有个用户授权登录，之后我们的后端会获取到我们的openId