uniapp的配置和使用

news/2024/7/20 3:01:42 标签: uni-app, 小程序

①安装环境和编辑器

注册小程序账号

微信开发者工具下载

uniapp 官网

HbuilderX 下载

首先先下载Hbuilder和微信开发者工具 (都是傻瓜式安装),然后注册小程序账号:

拿到appid:

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

打开Hbuilder创建一个项目:

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

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

 打开服务端口(不然项目无法通过微信开发者工具打开):

 运行项目:

成功界面:

 在page右键新建页面,所需页面如图:

 

打开uniapp官网:

 

下载这两个组件:

 

创建默认样式:

global.css :

*{
	box-sizing: border-box;
}
page{
	background-color: #f5f5f5;
	color: #333;
}

在main.js引入:

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

修改pages.json:

{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"//这里如果不写会采用项目名
			}
		},
		{
			"path" : "pages/category/category",
			"style" : 
			{
				"navigationBarTitleText" : "",
				"enablePullDownRefresh" : false
			}
		},
		{
			"path" : "pages/user/user",
			"style" : 
			{
				"navigationBarTitleText" : "",
				"enablePullDownRefresh" : false
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni-app",//项目名
		"navigationBarBackgroundColor": "#3cb371",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {},
	"condition" : { //模式配置,仅开发期间生效
		"current": 0, //当前激活的模式(list 的索引项)
		"list": [
			{
				"name": "", //模式名称
				"path": "", //启动页面,必选
				"query": "" //启动参数,在页面的onLoad函数里面得到
			}
		]
	},
	"tabBar": {//配置导航栏
		"selectedColor": "#FFD700",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/category/category",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png",
				"text": "分类"
			},
			{
				"pagePath": "pages/user/user",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png",
				"text": "我的"
			}
		]
	}
}

index.vue:

<template>
	<view>
		<view>
			<swiper circular autoplay :interval="3000" :duration="500" indicator-dots style="height: 350rpx;"
			  indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#3CB371">
			  <swiper-item v-for="item in imgs" :key="item" >
			    <image :src="item" alt="" mode="widthFix" style="width: 100%;" />
			  </swiper-item>
			</swiper>
		</view>
		<view style="margin: 10px;">
			<view style="padding: 5px;background-color: white;font-size: 12px;border-radius: 5px;display: flex;align-items: center;">
				<uni-icons type="sound" size="20"></uni-icons>
				<view>
					{{notice}}
				</view>
			</view>
		</view>
		<view style="background-color: white; margin: 5px 0; border-radius: 10px;">
		  <uni-row>
		    <uni-col :span="6">
		      <view class="grid-item-box">
		        <image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image>
		        <text style="font-size: 13px; margin-top: 5px;">时令水果</text>
		      </view>
		    </uni-col>
		    <uni-col :span="6">
		      <view class="grid-item-box">
		        <image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image>
		        <text style="font-size: 13px; margin-top: 5px;">品质肉禽</text>
		      </view>
		    </uni-col>
		    <uni-col :span="6">
		      <view class="grid-item-box">
		        <image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image>
		        <text style="font-size: 13px; margin-top: 5px;">新鲜水产</text>
		      </view>
		    </uni-col>
		    <uni-col :span="6">
		      <view class="grid-item-box">
		        <image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image>
		        <text style="font-size: 13px; margin-top: 5px;">蔬菜蛋品</text>
		      </view>
		    </uni-col>
		  </uni-row>
		</view>
		<view style="margin: 5px 0; font-size: 12px;">
		  <uni-row :gutter='10'>
		    <uni-col :span='12' v-for="item in goodsList" :key="item.name">
		      <view style="margin-bottom: 5px; background-color: white; padding: 10px; border-radius: 10px;">
		        <image :src="item.img" mode="widthFix" style="width: 100%;"></image>
		        <view class="lineEllipsis">{{ item.name }}</view>
		        <view style="color: red; margin-top: 5px; font-weight: bold; font-size: 14px;">¥{{ item.price }}</view>
		        <view style="text-align: right;"><uni-icons type="plus" size="25" style="color: #666;" @click="addCart(item)"></uni-icons></view>
		      </view>
		    </uni-col>
		  </uni-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgs:[
					require('../../static/logo.png'),
				    require('../../static/logo.png'),
				    require('../../static/logo.png'),
				],
				notices: [
				  {content: "亲哥哥哥今晚电商直播真的很棒棒噢"},
				  {content: "啊真的是 uniapp有手就会啊"},
				  {content: "真的吗?这么easy?"},
				  {content: "不信你去看看青哥哥的教程呗"},
				],
				notice:'',
				goodsList: [
				  { name: '固伦天原 农家土鸡蛋现捡新鲜谷物虫草柴鸡蛋初生蛋简装 20枚装', price: 19.9,
				    img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/147254/20/37798/87316/6458689bF5bb085ce/f1177ea39ce03322.jpg' },
				  { name: '大口鲜 熟冻帝王蟹礼盒装 海鲜礼包 整只 3.2-3.6斤现货 海产礼盒', price: 79.9,
				    img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/210206/31/4285/246694/61614b6bE8e495865/1b801854736d9736.jpg' },
				  { name: '仙泉湖三去星洲红 500g*1条 净膛冷冻罗非鱼海鲜食材 刺少', price: 99.9,
				    img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/139489/10/25554/185007/61d68c23Eef30e5c7/86fac8623b27de32.jpg' },
				  { name: '洛川苹果80mm大果 净重4.2斤 陕西延安红富士新鲜时令生鲜水果', price: 19.9,
				    img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/206463/33/3190/152008/6155d86eE00924ef0/8e955e07ea8d1942.jpg' },
				  { name: '妙果樱广西青芒新鲜水果大青芒果当季时令生鲜芒果 3斤大果(单果250g+)', price: 29.9,
				    img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/142695/20/37414/69619/64b8d41bF0e06aea0/8961fde6fe2b619b.jpg' },
				]

			}
		},
		onLoad() {
			this.loadnotince()
		},
		methods: {
			loadnotince(){
				let i=0
				this.notice=this.notices[0].content
				setInterval(()=>{
					this.notice=this.notices[i++].content
					if(i==this.notices.length){
						i=0
					}
				},5000)
			}
		}
	}
</script>

<style>
	.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;
	}
	.grid-item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	},
	.lineEllipsis {
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			/* 超出几行省略 */
			overflow: hidden;
		}
</style>

最终效果:


http://www.niftyadmin.cn/n/5371159.html

相关文章

数据结构与算法-链表(力扣附链接)

之前我们对C语言进行了一定的学习&#xff0c;有了一些基础之后&#xff0c;我们就可以学习一些比较基础的数据结构算法题了。这部分的知识对于我们编程的深入学习非常有用&#xff0c;对于一些基本的算法&#xff0c;我们学习之后&#xff0c;就可以参加一些编程比赛了&#x…

编译原理实验3——自下而上的SLR1语法分析实现(包含画DFA转换图、建表、查表)

文章目录 实验目的实现流程定义DFA状态实现代码运行结果测试1测试2测试3 总结 实验目的 实现自下而上的SLR1语法分析&#xff0c;画出DFA图 实现流程 定义DFA状态 class DFA:def __init__(self, id_, item_, next_ids_):self.id_ id_ # 编号self.item_ item_ # productio…

python智慧养老系统—养老信息服务平台vue

本论文中实现的智慧养老系统-养老信息服务平台将以管理员和用户的日常信息维护工作为主&#xff0c;主要涵盖了系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;养老资讯管理&#xff0c;养生有道管理&#xff0c;养老机构管理&#xff0c;系统管理等功能&#x…

Vivado -RAM

ip_ram 定义了一个名为ip_ram的模块&#xff0c;该模块具有以下端口&#xff1a; sys_clk&#xff1a;系统时钟输入。 sys_rst_n&#xff1a;系统复位输入。 module ip_ram( input sys_clk, input sys_rst_n);wire ram_en ; wire ram_wea …

c实现链表

目录 c实现链表 链表的结构定义&#xff1a; 链表的结构操作&#xff1a; 1、初始化链表 2、销毁链表 3、插入结点 4、输出链表数据 5、查找链表数据 扩展 代码实现 c实现链表 链表的结构定义&#xff1a; /*** 链表结构定义 ***/ typedef struct Node {int data; //…

代码随想录算法训练营29期Day42|卡码网46,LeetCode 416

文档讲解&#xff1a;背包问题二维 背包问题一维 分割等和子集 46.整数拆分 题目链接&#xff1a;https://kamacoder.com/problempage.php?pid1046 思路&#xff1a; 在一维dp数组中&#xff0c;dp[j]表示&#xff1a;容量为j的背包&#xff0c;所背的物品价值可以最大为d…

ElasticSearch之search API

写在前面 本文看下查询相关内容&#xff0c;这也是我们在实际工作中接触的最多的&#xff0c;所以有必要好好学习下&#xff01; 1&#xff1a;查询的分类 主要分为如下2类&#xff1a; 1:基于get查询参数的URI search 2&#xff1a;基于post body的request body search&am…

基于Java超市管理系统设计与实现(源码+部署文档)

博主介绍&#xff1a; ✌至今服务客户已经1000、专注于Java技术领域、项目定制、技术答疑、开发工具、毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精彩专栏 推荐订阅 &#x1f447;&#x1f3fb; 不然下次找不到 Java项目精品实…