Taro框架下 nutui小demo

RetreatLock

已于 2022-07-05 09:35:30 修改

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： taro 文章标签：微信小程序 vue

于 2022-04-15 01:20:30 首次发布

本文链接：https://blog.youkuaiyun.com/RetreatLock/article/details/124185576

taro 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了使用Taro进行多端适配，特别是针对微信小程序的开发。通过一个Vue3实现的商城首页实例，展示了Taro的使用方法，包括NutUI组件的使用和Taro.request的网络请求。同时，提到了NutUI在小程序端的显示问题，并提及了可能更好的UI框架TaroUI。文章还强调了Taro页面宽度设置和API使用注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于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,用的时候查文档即可