Taro框架下 nutui小demo

关于Taro

taro主要便于我们一套代码实现多端适配(当然，只有h5、微信小程序、支付宝小程序这几个意义重大)

页面效果

这里我简单做了一个微信小程序的商城首页，采用vue3实现，废话不多说，先商城

    <view style="background-color: #fa2c19">
      <nut-searchbar v-model="searchValue" style="padding-bottom: 5px;background-color: #fa2c19 " @search="search">
        <template v-slot:leftin>
          <nut-icon size="14" name="search2"></nut-icon>
        </template>
      </nut-searchbar>
    </view>

<script setup>
import {baseUrl} from "../../util/BaseUtil";
import {onBeforeMount,onMounted, ref} from 'vue';
import Taro from '@tarojs/taro';

const searchValue = ref('');
const swipers = ref([]);
const bigTypeList = ref([]);
const hotProductList = ref([]);

/**
 * 跳转到search页面
 */
const search = () => {
  Taro.navigateTo({
    url: '/pages/search/search?value=' + searchValue.value
  })
}

/**
 * 获取轮播商品信息
 * @returns {Promise<void>}
 */
async function getSwiperList() {
  const response = await Taro.request({
    url: baseUrl + '/product/findSwiper',
    header: {
      'content-type': 'application/json' // 默认值
    }
  });
  let list = response.data.result;
  list.forEach(item => {
    item.url = baseUrl + '/image/swiper/' + item.swiperPic;
  });
  swipers.value = list;
}

....

onBeforeMount(async () => {
  Taro.showLoading({
    title: '加载中',
  });
  await getSwiperList();
  await getBigTypeList();
  await getHotProductList();
  Taro.hideLoading();
});
</script>

体验

总的来说，nutui微信小程序端的效果差强人意，好多组件在小程序上只是简单的实现了 ui效果，例如tabbar，只能继续使用原生提供的，一些组件在调试器上表现正常，但是部署之后真机环境上，渲染效果很差，这里首受限于篇幅，就不一一列举了。其实凹凸实验室还有一个专门正对小程序的ui框架taroui,应该比nutui强，后续会再试试水。

注意事项

• taro页面设计
  
  taro默认页面宽度给的是375，会按照实际设备响应式缩放，可以更加实际项目修改；比如宽度给75px,则占屏幕宽度五分之一，注意这里的px会按照设备的不同自动转换为rpx或者rm，不是真实的物理像素，如果想要使用真是的像素，大写即可,比如PX或者Px,这个比较重要，对于自定义页面样式、布局特别重要。

• api
  用法和原生的微信小程序差不多，比如原生网络请求 wx.request,taro则是Taro.request,用的时候查文档即可