• 【uni-app】

    准备工作（Hbuilder）

    1.下载hbuilder，插件使用Vue3的uni-app项目

    2.需要安装编译器

    3.下载微信开发者工具 

    4.点击运行->微信开发者工具

    5.打开微信开发者工具的服务端口

    效果图

    准备工作（VScode）

    插件

    uni-create-view

    uni-helper

    uniapp小程序扩展 

    page.json（添加路由，修改底层导航栏，背景色）

    添加路由

    1. "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    2. 		{
    3. 			"path": "pages/index/index",
    4. 			"style": {
    5. 				"navigationBarTitleText": "首页"
    6. 			}
    7. 		}
    8. 	    ,{
    9.             "path" : "pages/my/my",
    10.             "style" :                                                                                    
    11.             {
    12.                 "navigationBarTitleText": "我的"
    13.             }
    14.             
    15.         }
    16.     ]

    修改背景颜色 

    1. "globalStyle": {
    2. 		"navigationBarTextStyle": "black",
    3. 		"navigationBarTitleText": "uni-app",
    4. 		"navigationBarBackgroundColor": "#F8F8F8",
    5. 		"backgroundColor": "#F8F8F8"
    6. 	}

    添加导航栏（至少两个）

    1. "tabBar": {
    2. 		"list": [
    3. 			{
    4. 				"pagePath": "pages/index/index","text": "首页"
    5. 			},{
    6. 				"pagePath": "pages/my/my","text": "我的"
    7. 			}
    8. 		]
    9. 	},

    manifest.json（添加AppID）

    添加AppID

    轮播图实现

    1. <template>
    2. 	<swiper class="banner" indicator-dots circular :autoplay="false">
    3. 		<swiper-item v-for="item in pictures" :key="item.id">
    4. 			<image @tap="onPreviewImage(item.url)" :src="item.url">image>
    5. 		swiper-item>
    6. 	swiper>
    7. template>
    8.  
    9. <script>
    10. 	export default {
    11. 		data() {
    12. 			return {
    13. 				title: 'Hello',
    14. 				pictures: [{
    15. 						id: '1',
    16. 						url: "../../static/uploads/goods_preview_1.jpg"
    17. 					},
    18. 					{
    19. 						id: '2',
    20. 						url: "../../static/uploads/goods_preview_2.jpg"
    21. 					},
    22. 					{
    23. 						id: '3',
    24. 						url: "../../static/uploads/goods_preview_3.jpg"
    25. 					},
    26. 					{
    27. 						id: '4',
    28. 						url: "../../static/uploads/goods_preview_4.jpg"
    29. 					},
    30. 					{
    31. 						id: '5',
    32. 						url: "../../static/uploads/goods_preview_5.jpg"
    33. 					},
    34. 				]
    35. 			}
    36. 		},
    37. 		onLoad() {
    38.  
    39. 		},
    40. 		methods: {
    41. 			onPreviewImage(url) {
    42. 				// console(url);
    43. 				wx.previewImage({
    44. 					urls: this.pictures.map(v => v.url),
    45. 					current: url
    46. 				})
    47. 			}
    48. 		}
    49. 	}
    50. script>
    51.  
    52. <style>
    53. 	.banner,
    54. 	.banner image {
    55. 		width: 750rpx;
    56. 		height: 750rpx;
    57. 	}
    58.  
    59. 	.content {
    60. 		display: flex;
    61. 		flex-direction: column;
    62. 		align-items: center;
    63. 		justify-content: center;
    64. 	}
    65.  
    66. 	.logo {
    67. 		height: 200rpx;
    68. 		width: 200rpx;
    69. 		margin-top: 200rpx;
    70. 		margin-left: auto;
    71. 		margin-right: auto;
    72. 		margin-bottom: 50rpx;
    73. 	}
    74.  
    75. 	.text-area {
    76. 		display: flex;
    77. 		justify-content: center;
    78. 	}
    79.  
    80. 	.title {
    81. 		font-size: 36rpx;
    82. 		color: #8f8f94;
    83. 	}
    84. style>

  • 相关阅读:
    Linux yum,vim详解
    微服务：服务拆分和远程调用
    计算机毕设（附源码）JAVA-SSM基于课程群的实验管理平台
    SQL Server安装
    技术成神之路：设计模式（一）单例模式
    Socket 服务端实例学习笔记
    Java项目在linux上部署步骤
    Java中transient关键字的详细总结
    LeetCode-538. Convert BST to Greater Tree [C++][Java]
    10-网络篇-DHCP获取的参数详解
  • 原文地址：https://blog.csdn.net/David_Hzy/article/details/132744648