小程序----前(taro3.x+taroUI3.0)后(express+mongodb)端通信

在上一篇文章中，已经把服务器搭建好了，这篇文章主要是阐述taro3.x集成taroUI以及与服务器通信

一、安装taroUI3.0

因为使用的是taro3.x版本，并不兼容taroUI的正式版（当前版本：2.3.4），所以得安装指定版本才行

yarn add taro-ui@beta

选择3.0以上版本安装。

npm安装流程：

npm view taro-ui versions

npm install taro-ui@3.0.0-alpha.10 --save

至此，已经安装好taroUI，可以根据官方文档进行配置和使用了。

注：在使用taroUI的AtTabBar组件时，需要在app.config.ts文件中配置tabBar属性

// app.config.ts
export default {
  pages: [
    'pages/home/index',
    'pages/my/index',
  ],
  tabBar: {
    custom: true,
    color: '#000000',
    selectedColor: '#f034c1',
    backgroundColor: '#ffffff',
    borderStyle: 'white',
    list: [
      {
        pagePath: 'pages/home/index',
        text: '首页',
      },
      {
        pagePath: 'pages/my/index',
        text: '我的',
      }
    ]
  },
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  }
}

然后在各个模块的主页面使用即可

// src/pages/home/index
import React from 'react';
import Taro from "@tarojs/taro";
import { View } from '@tarojs/components';
import { observer } from 'mobx-react';
import { AtButton, AtTabBar } from 'taro-ui';
import { useStores } from '../../hooks/use-stores';
import './index.scss'

export const Home = observer(() => {

  const { tabStore } = useStores();
  const { tabIndex } = tabStore;

  const handleClick = (value) => {
    if (value === 0) return;
    Taro.switchTab({
      url: "/pages/my/index"
    });
    tabStore.changeTab(value);
  }

  return (
    <View className='homeContainer'>
      <View>我是首页</View>
      <AtTabBar
        fixed
        tabList={[
          { title: '首页', iconType: 'home' },
          { title: '我的', iconType: 'user' }
        ]}
        onClick={handleClick}
        current={tabIndex}
      />
    </View>
  )
})

export default Home

二、配置services

在src目录下创建services文件夹，并创建api.ts、config.js文件

// src/services/api
import Taro from '@tarojs/taro'
import { HTTP_STATUS } from './status'
import { baseUrl } from './config'
import { logError } from '../utils/error'

export default {
  baseOptions(params, method = 'GET') {
    let { url, data } = params
    // let token = getApp().globalData.token
    // if (!token) login()
    console.log('params', params)
    let contentType = 'application/x-www-form-urlencoded'
    contentType = params.contentType || contentType
    type OptionType = {
      url: string,
      data?: object | string,
      method?: any,
      header: object,
      success: any,
      error: any,
      // xhrFields: object,
    }
    const option: OptionType = {
      url: baseUrl + url,
      data: data,
      method: method,
      // header: { 'content-type': contentType, 'token': token },
      header: { 'content-type': contentType },
      // xhrFields: { withCredentials: true },
      success(res) {
        if (res.statusCode === HTTP_STATUS.NOT_FOUND) {
          return logError('api', '请求资源不存在')
        } else if (res.statusCode === HTTP_STATUS.BAD_GATEWAY) {
          return logError('api', '服务端出现了问题')
        } else if (res.statusCode === HTTP_STATUS.FORBIDDEN) {
          return logError('api', '没有权限访问')
        } else if (res.statusCode === HTTP_STATUS.SUCCESS) {
          return res.data
        }
      },
      error(e) {
        logError('api', '请求接口出现问题', e)
      }
    }
    return Taro.request(option)
  },
  get(url, data?: object) {
    let option = { url, data }
    return this.baseOptions(option)
  },
  post: function (url, data?: object, contentType?: string) {
    let params = { url, data, contentType }
    return this.baseOptions(params, 'POST')
  },
  put(url, data?: object) {
    let option = { url, data }
    return this.baseOptions(option, 'PUT')
  },
  delete(url, data?: object) {
    let option = { url, data }
    return this.baseOptions(option, 'DELETE')
  }
}

// src/services/config
export const baseUrl = 'http://localhost:3000/';

在相关页面调用即可

// src/pages/home/index
// ......
import api from '../../services/api';

export const Home = observer(() => {

  // ......
  const getData = () => {
    api.get('products').then((res) => {
      productStore.productList = [...productStore.productList, ...res.data];
    })
  };

  return (
    <View className='homeContainer'>
      <AtButton type='primary' onClick={getData}>获取数据</AtButton>
      <View>获取的数据在这：{JSON.stringify(productStore.productList)}</View>
    </View>
  )
})

export default Home