创建细节

index/index.js

  1. import Menu from './components/menu/index'
  2. import './index.scss'
  3. render(){
  4. return(
  5.   <Menu />
  6. )}

index 文件夹下创建一个 component 文件夹，用于存放组件。因为以后可能会有多个组件，component创建一个menu文件夹。
menu/index.js

  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Text, Image } from '@tarojs/components'
  3. import './index.scss'
  5. const data = [
  6.   {url: 'http://placekitten.com/g/64/64',title: 'Make Up'},
  7.   {url: 'http://placekitten.com/g/200/300',title: 'Make Up'},
  8.   {url: 'http://placekitten.com/g/200/300',title: 'Make Up'},
  9.   {url: 'http://placekitten.com/200/300',title: 'Make Up'}]
  11. export default class Menu extends Component {
  12.   render() {
  13.     return (
  14.       <View className='at-row menu'>
  15.       {data.map(item => (
  16.           <View className='at-col'>
  17.             <Image className='small' src={item.url} mode='widthFix' />
  18.             <Text className='sm'>{item.title}</Text>
  19.           </View>))}
  20.       </View>)}}

menu/index.scss
import未引入全局，只是引用的需要的 scss 组件

  1. @import '~taro-ui/dist/style/components/flex.scss';
  2. .menu {
  3.     .small {
  4.         border-radius: 5%;
  5.         width: 98%;
  6.         max-height: 150rpx;}
  7.     .sm {
  8.         margin: auto;
  9.         width: 100%;
  10.         height: 10%;
  11.         font-size: 18rpx;
  12.         text-align: center;}}

注意：创建的和手动在UI的 index/index.js 以及 index/index.scss 创建的是一样的，但手动写是写死了，再次修改需要修改UI。组件就不同了，当以后修改的时候，只需要修改组件就可以了，十分方便，不会影响UI的布局，写死的时候很可能需要重新设定，还可能会改乱布局。如果写死了，以后调用数据是十分不利的。

具体问题

由于taro-ui 小程序可以引入全局组件，在component内是不必再次引入的，但是执行后发现没有出现想要的结果，通过对 dist 拷贝的 component 文件夹查找分析， at-row和 at-col 没有起作用， @import “~taro-ui/dist/style/index.scss”; 放在app.scss 没有起作用，放在 menu/index.scss 可以。这里出现了两种情况：
一、taro-ui全局引用没有出错，小程序的component组件不允许这样操作
二、小程序的component允许这样使用，taro-ui 全局引用出了错。 具体是哪个原因，不得而知

@import “~taro-ui/dist/style/index.scss”; 由于是全局的组件包，太大了，寻找了一个 flex/layout 布局的类似包 @import ‘~taro-ui/dist/style/components/flex.scss’; ，也可以实现同样的效果。