技术支持-鼎维重庆网站建设专家,足球直播网站怎么做的,移动互联网开发实验报告,用jsp源码做网站准备工作#xff08;Hbuilder#xff09;
1.下载hbuilder#xff0c;插件使用Vue3的uni-app项目
2.需要安装编译器 3.下载微信开发者工具
4.点击运行-微信开发者工具
5.打开微信开发者工具的服务端口 效果图 准备工作#xff08;VScode#xff09;
插件
uni-cr…准备工作Hbuilder
1.下载hbuilder插件使用Vue3的uni-app项目
2.需要安装编译器 3.下载微信开发者工具
4.点击运行-微信开发者工具
5.打开微信开发者工具的服务端口 效果图 准备工作VScode
插件
uni-create-view uni-helper uniapp小程序扩展 page.json添加路由修改底层导航栏背景色
添加路由
pages: [ //pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages{path: pages/index/index,style: {navigationBarTitleText: 首页}},{path : pages/my/my,style : {navigationBarTitleText: 我的}}]
修改背景颜色
globalStyle: {navigationBarTextStyle: black,navigationBarTitleText: uni-app,navigationBarBackgroundColor: #F8F8F8,backgroundColor: #F8F8F8}
添加导航栏至少两个
tabBar: {list: [{pagePath: pages/index/index,text: 首页},{pagePath: pages/my/my,text: 我的}]},
manifest.json添加AppID
添加AppID 轮播图实现
templateswiper classbanner indicator-dots circular :autoplayfalseswiper-item v-foritem in pictures :keyitem.idimage taponPreviewImage(item.url) :srcitem.url/image/swiper-item/swiper
/templatescriptexport default {data() {return {title: Hello,pictures: [{id: 1,url: ../../static/uploads/goods_preview_1.jpg},{id: 2,url: ../../static/uploads/goods_preview_2.jpg},{id: 3,url: ../../static/uploads/goods_preview_3.jpg},{id: 4,url: ../../static/uploads/goods_preview_4.jpg},{id: 5,url: ../../static/uploads/goods_preview_5.jpg},]}},onLoad() {},methods: {onPreviewImage(url) {// console(url);wx.previewImage({urls: this.pictures.map(v v.url),current: url})}}}
/scriptstyle.banner,.banner image {width: 750rpx;height: 750rpx;}.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
/style
