devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp的配置和使用

作者：笔触狂放9 | 2024-02-16 02:23:54

赞

踩

uniapp的配置和使用

①安装环境和编辑器

注册小程序账号

微信开发者工具下载

uniapp 官网

HbuilderX 下载

首先先下载Hbuilder和微信开发者工具 （都是傻瓜式安装），然后注册小程序账号：

拿到appid：

②简单通过demo使用微信开发者工具和Hbuilder

打开Hbuilder创建一个项目：

简单配置一下：将第一步获得的appid输入在此

打开微信开发者工具进行配置：

 打开服务端口（不然项目无法通过微信开发者工具打开）：

 运行项目：

成功界面：

 在page右键新建页面，所需页面如图：

 

打开uniapp官网：

 

下载这两个组件：

 

创建默认样式：

global.css :

  1. *{
  2. 	box-sizing: border-box;
  3. }
  4. page{
  5. 	background-color: #f5f5f5;
  6. 	color: #333;
  7. }

在main.js引入：

import './static/css/global.css'

修改pages.json：

  1. {
  2. 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
  3. 		{
  4. 			"path": "pages/index/index",
  5. 			"style": {
  6. 				"navigationBarTitleText": "首页"//这里如果不写会采用项目名
  7. 			}
  8. 		},
  9. 		{
  10. 			"path" : "pages/category/category",
  11. 			"style" : 
  12. 			{
  13. 				"navigationBarTitleText" : "",
  14. 				"enablePullDownRefresh" : false
  15. 			}
  16. 		},
  17. 		{
  18. 			"path" : "pages/user/user",
  19. 			"style" : 
  20. 			{
  21. 				"navigationBarTitleText" : "",
  22. 				"enablePullDownRefresh" : false
  23. 			}
  24. 		}
  25. 	],
  26. 	"globalStyle": {
  27. 		"navigationBarTextStyle": "white",
  28. 		"navigationBarTitleText": "uni-app",//项目名
  29. 		"navigationBarBackgroundColor": "#3cb371",
  30. 		"backgroundColor": "#F8F8F8"
  31. 	},
  32. 	"uniIdRouter": {},
  33. 	"condition" : { //模式配置，仅开发期间生效
  34. 		"current": 0, //当前激活的模式(list 的索引项)
  35. 		"list": [
  36. 			{
  37. 				"name": "", //模式名称
  38. 				"path": "", //启动页面，必选
  39. 				"query": "" //启动参数，在页面的onLoad函数里面得到
  40. 			}
  41. 		]
  42. 	},
  43. 	"tabBar": {//配置导航栏
  44. 		"selectedColor": "#FFD700",
  45. 		"list": [
  46. 			{
  47. 				"pagePath": "pages/index/index",
  48. 				"iconPath": "static/logo.png",
  49. 				"selectedIconPath": "static/logo.png",
  50. 				"text": "首页"
  51. 			},
  52. 			{
  53. 				"pagePath": "pages/category/category",
  54. 				"iconPath": "static/logo.png",
  55. 				"selectedIconPath": "static/logo.png",
  56. 				"text": "分类"
  57. 			},
  58. 			{
  59. 				"pagePath": "pages/user/user",
  60. 				"iconPath": "static/logo.png",
  61. 				"selectedIconPath": "static/logo.png",
  62. 				"text": "我的"
  63. 			}
  64. 		]
  65. 	}
  66. }

index.vue:

  1. <template>
  2. 	<view>
  3. 		<view>
  4. 			<swiper circular autoplay :interval="3000" :duration="500" indicator-dots style="height: 350rpx;"
  5. 			  indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#3CB371">
  6. 			  <swiper-item v-for="item in imgs" :key="item" >
  7. 			    <image :src="item" alt="" mode="widthFix" style="width: 100%;" />
  8. 			  </swiper-item>
  9. 			</swiper>
  10. 		</view>
  11. 		<view style="margin: 10px;">
  12. 			<view style="padding: 5px;background-color: white;font-size: 12px;border-radius: 5px;display: flex;align-items: center;">
  13. 				<uni-icons type="sound" size="20"></uni-icons>
  14. 				<view>
  15. 					{{notice}}
  16. 				</view>
  17. 			</view>
  18. 		</view>
  19. 		<view style="background-color: white; margin: 5px 0; border-radius: 10px;">
  20. 		  <uni-row>
  21. 		    <uni-col :span="6">
  22. 		      <view class="grid-item-box">
  23. 		        <image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image>
  24. 		        <text style="font-size: 13px; margin-top: 5px;">时令水果</text>
  25. 		      </view>
  26. 		    </uni-col>
  27. 		    <uni-col :span="6">
  28. 		      <view class="grid-item-box">
  29. 		        <image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image>
  30. 		        <text style="font-size: 13px; margin-top: 5px;">品质肉禽</text>
  31. 		      </view>
  32. 		    </uni-col>
  33. 		    <uni-col :span="6">
  34. 		      <view class="grid-item-box">
  35. 		        <image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image>
  36. 		        <text style="font-size: 13px; margin-top: 5px;">新鲜水产</text>
  37. 		      </view>
  38. 		    </uni-col>
  39. 		    <uni-col :span="6">
  40. 		      <view class="grid-item-box">
  41. 		        <image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image>
  42. 		        <text style="font-size: 13px; margin-top: 5px;">蔬菜蛋品</text>
  43. 		      </view>
  44. 		    </uni-col>
  45. 		  </uni-row>
  46. 		</view>
  47. 		<view style="margin: 5px 0; font-size: 12px;">
  48. 		  <uni-row :gutter='10'>
  49. 		    <uni-col :span='12' v-for="item in goodsList" :key="item.name">
  50. 		      <view style="margin-bottom: 5px; background-color: white; padding: 10px; border-radius: 10px;">
  51. 		        <image :src="item.img" mode="widthFix" style="width: 100%;"></image>
  52. 		        <view class="lineEllipsis">{{ item.name }}</view>
  53. 		        <view style="color: red; margin-top: 5px; font-weight: bold; font-size: 14px;">￥{{ item.price }}</view>
  54. 		        <view style="text-align: right;"><uni-icons type="plus" size="25" style="color: #666;" @click="addCart(item)"></uni-icons></view>
  55. 		      </view>
  56. 		    </uni-col>
  57. 		  </uni-row>
  58. 		</view>
  59. 	</view>
  60. </template>
  61.  
  62. <script>
  63. 	export default {
  64. 		data() {
  65. 			return {
  66. 				imgs:[
  67. 					require('../../static/logo.png'),
  68. 				    require('../../static/logo.png'),
  69. 				    require('../../static/logo.png'),
  70. 				],
  71. 				notices: [
  72. 				  {content: "亲哥哥哥今晚电商直播真的很棒棒噢"},
  73. 				  {content: "啊真的是 uniapp有手就会啊"},
  74. 				  {content: "真的吗？这么easy？"},
  75. 				  {content: "不信你去看看青哥哥的教程呗"},
  76. 				],
  77. 				notice:'',
  78. 				goodsList: [
  79. 				  { name: '固伦天原 农家土鸡蛋现捡新鲜谷物虫草柴鸡蛋初生蛋简装 20枚装', price: 19.9,
  80. 				    img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/147254/20/37798/87316/6458689bF5bb085ce/f1177ea39ce03322.jpg' },
  81. 				  { name: '大口鲜 熟冻帝王蟹礼盒装 海鲜礼包 整只 3.2-3.6斤现货 海产礼盒', price: 79.9,
  82. 				    img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/210206/31/4285/246694/61614b6bE8e495865/1b801854736d9736.jpg' },
  83. 				  { name: '仙泉湖三去星洲红 500g*1条 净膛冷冻罗非鱼海鲜食材 刺少', price: 99.9,
  84. 				    img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/139489/10/25554/185007/61d68c23Eef30e5c7/86fac8623b27de32.jpg' },
  85. 				  { name: '洛川苹果80mm大果 净重4.2斤 陕西延安红富士新鲜时令生鲜水果', price: 19.9,
  86. 				    img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/206463/33/3190/152008/6155d86eE00924ef0/8e955e07ea8d1942.jpg' },
  87. 				  { name: '妙果樱广西青芒新鲜水果大青芒果当季时令生鲜芒果 3斤大果（单果250g+）', price: 29.9,
  88. 				    img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/142695/20/37414/69619/64b8d41bF0e06aea0/8961fde6fe2b619b.jpg' },
  89. 				]
  90.  
  91. 			}
  92. 		},
  93. 		onLoad() {
  94. 			this.loadnotince()
  95. 		},
  96. 		methods: {
  97. 			loadnotince(){
  98. 				let i=0
  99. 				this.notice=this.notices[0].content
  100. 				setInterval(()=>{
  101. 					this.notice=this.notices[i++].content
  102. 					if(i==this.notices.length){
  103. 						i=0
  104. 					}
  105. 				},5000)
  106. 			}
  107. 		}
  108. 	}
  109. </script>
  110.  
  111. <style>
  112. 	.content {
  113. 		display: flex;
  114. 		flex-direction: column;
  115. 		align-items: center;
  116. 		justify-content: center;
  117. 	}
  118.  
  119. 	.logo {
  120. 		height: 200rpx;
  121. 		width: 200rpx;
  122. 		margin-top: 200rpx;
  123. 		margin-left: auto;
  124. 		margin-right: auto;
  125. 		margin-bottom: 50rpx;
  126. 	}
  127.  
  128. 	.text-area {
  129. 		display: flex;
  130. 		justify-content: center;
  131. 	}
  132.  
  133. 	.title {
  134. 		font-size: 36rpx;
  135. 		color: #8f8f94;
  136. 	}
  137. 	.grid-item-box {
  138. 		display: flex;
  139. 		flex-direction: column;
  140. 		align-items: center;
  141. 		justify-content: center;
  142. 	},
  143. 	.lineEllipsis {
  144. 			word-break: break-all;
  145. 			text-overflow: ellipsis;
  146. 			display: -webkit-box;
  147. 			-webkit-box-orient: vertical;
  148. 			-webkit-line-clamp: 2;
  149. 			/* 超出几行省略 */
  150. 			overflow: hidden;
  151. 		}
  152. </style>

最终效果：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/89834
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号