Taro框架下nutui小demo

关于Taro

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

页面效果

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

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


<script setup>
import {baseUrl} from "../../util/BaseUtil";
import {onBeforeMount,onMounted, ref} from &＃39;vue&＃39;;
import Taro from &＃39;&＃64;tarojs/taro&＃39;;const searchValue &＃61; ref(&＃39;&＃39;);
const swipers &＃61; ref([]);
const bigTypeList &＃61; ref([]);
const hotProductList &＃61; ref([]);/*** 跳转到search页面*/
const search &＃61; () &＃61;> {Taro.navigateTo({url: &＃39;/pages/search/search?value&＃61;&＃39; &＃43; searchValue.value})
}/*** 获取轮播商品信息* &＃64;returns {Promise}*/
async function getSwiperList() {const response &＃61; await Taro.request({url: baseUrl &＃43; &＃39;/product/findSwiper&＃39;,header: {&＃39;content-type&＃39;: &＃39;application/json&＃39; // 默认值}});let list &＃61; response.data.result;list.forEach(item &＃61;> {item.url &＃61; baseUrl &＃43; &＃39;/image/swiper/&＃39; &＃43; item.swiperPic;});swipers.value &＃61; list;
}....onBeforeMount(async () &＃61;> {Taro.showLoading({title: &＃39;加载中&＃39;,});await getSwiperList();await getBigTypeList();await getHotProductList();Taro.hideLoading();
});
</script>


体验

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

注意事项

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

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