创建一个全新的项目:
然后在配置一下,微信小程序的 AppId,直接去之前的项目中拷贝一下即可,找到之前项目的 manifest.json
文件,然后选择微信小程序配置,复制一下即可:
<template>
<view>
<view>我是view组件</view>
</view>
</template>
<script>
// index.vue
export default {}
</script>
<template>
<view>
<text>我是text组件</text>
</view>
</template>
<script>
// index.vue
export default {}
</script>
<template>
<view>
<button type="default">default button</button>
<button type="primary">primary button</button>
<button type="warn">warn button</button>
</view>
</template>
<script>
// index.vue
export default {}
</script>
注意点:
不推荐
,因为 HTML 元素 UniApp 是没有做适配的,可能在不同平台上运行会出现未知问题来看一下注意点的第一点,
运行在不同平台上会自动转换成对应平台的组件
,在演示 button 组件的时候我们编写了<button type="primary">primary button</button>
这么一行代码,但是在 H5 运行显示的是蓝色
<template>
<view>
<!--
图片素材大家自行去替换自己的
-->
<!--
相对路径
-->
<image src="../../static/01.jpg"/>
<!--
绝对路径
-->
<image src="@/static/01.jpg"/>
</view>
</template>
<script>
// index.vue
export default {}
</script>
<template>
<view>
<scroll-view class="scrollViewByThis" scroll-y="true">
<view>A</view>
<view>A</view>
<view>A</view>
<view>A</view>
<view>A</view>
<view>A</view>
<view>A</view>
<view>A</view>
<view>A</view>
<view>A</view>
</scroll-view>
</view>
</template>
<script>
// index.vue
export default {}
</script>
<style lang="scss" scoped>
.scrollViewByThis {
width: 100%;
height: 150rpx;
border: 1px solid red;
}
</style>
注意点:
<template>
<view>
<swiper>
<swiper-item>
<view>A</view>
</swiper-item>
<swiper-item>
<view>B</view>
</swiper-item>
<swiper-item>
<view>C</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
// index.vue
export default {}
</script>
indicator-dots
属性来控制的,给 swiper 组件添加 indicator-dots
属性即可<template>
<view>
<swiper indicator-dots="true">
<swiper-item>
<view>A</view>
</swiper-item>
<swiper-item>
<view>B</view>
</swiper-item>
<swiper-item>
<view>C</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
// index.vue
export default {}
</script>
大家好我是 BNTang, 一个热爱分享的技术的开发者,如果大家觉得我的文章对你有帮助的话,可以关注我的公众号 JavaBoyL
,我会在公众号中分享一些IT技术和一些个人的见解,谢谢大家的支持。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。