uniapp的配置和使用

已于 2024-02-08 00:01:49 修改
阅读量2.8k 收藏 11
点赞数 14
文章标签： uni-app 小程序
于 2024-02-08 00:01:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74924621/article/details/136074586
版权

①安装环境和编辑器

注册小程序账号

微信开发者工具下载

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>

最终效果：

别问我，我什么都不知道
关注
  • 14
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uni-app - 修改默认端口，H5 项目控制台运行出来的 IP 地址的默认端口号（H5 项目运行后控制台，修改项目运行到内置浏览器默认 8080 端口号）
王佳斌
11-28 7112
uni-app 运行到H5 修改默认端口号，uni-app如何修改默认端口，uni-app修改默认端口，uni-app本地运行修改调试已上线微信H5项目，请问在UNIAPP的H5运行调试时候的IP是否可以自己设置固定，uni-app 开发环境,如何设置 h5 服务器的端口，uni-app 如何修改默认端，uni-app 修改默认端口，uni-app指定端口号，uni-app - 修改 H5 项目控制台运行出来的 IP 地址的默认端口号（H5 项目运行后控制台，修改项目运行到内置浏览器默认 8080 端口号）
uniapp生产和开发环境配置
01-28
uniapp生产和开发环境配置
uniapp分包配置，页面配置
11-29
uniapp分包配置，页面配置，导航配置
Uni-app接口入门及进阶使用指南
最新发布
Nekoneee的博客
05-20 1158
Uni-app是一个跨平台开发框架，可以同时开发Android、iOS、H5、小程序等应用。使用Vue.js作为开发语言，开发者可以快速上手。支持一套代码多端运行，大幅提高开发效率。提供丰富的组件和插件，便于开发者实现功能。统一的开发、调试和打包流程，简化开发流程。在本文中，我们详细介绍了Uni-app接口的入门和进阶使用，涵盖了网络请求、数据处理、进阶功能和调试优化等方面。希望这篇文章能够对您的Uni-app开发有所帮助。
uni-app指定端口号
浩星
01-28 8261
前言： uni-app资料整理之修改默认端口号为指定端口号。 修改办法： 1、打开项目中的 manifest.json 文件 2、点击h5 设置，修改端口 3、重启服务，很重要
uniapp+springboot 前后端分离 接口配置
m0_62923660的博客
02-01 816
1、在controller包的同级新建config包，之后在config包里新建CorsConfig.java文件录入代码如下。1、打开uniapp项目在pages同级创建api文件，在文件里新建api.js文件，输入一下代码。1、新建utils目录，在utils文件里新建request.js 输入代码如下。3、在utils文件夹同级目录下新建config.js文件输入代码如下erer。2、再次在utils项目里新建util.js文件，输入代码如下。二、springboot 配置。一、uniapp配置。
uni-app的安装配置
m0_53912016的博客
03-25 2783
或者直接点击Ctrl和+ 可以扩大字体也是调字体。创建 uni-app 项目。如下所示就可以调字体大小了。点击工具–设置–常规配置。
uniApp：环境搭建及配置
孤安先生的博客，作者主站正在重构中，敬请期待！
07-02 5865
项目结构说明pages 目录所有的页面的存放目录static 目录静态资源目录unpackage 目录打包文件，存放各个平台的打包文件App.vue项目根组件，页面的入口文件main.js项目入口文件，主要作用是初始化 vue 实例并使用需要的插件配置打包的文件，指定应用的名称、图标、权限等pages.json设置项目页面的存放路径和窗口外观uni.scssuni-app 内置常用的变量页面文件遵循Vue 单文件组件（SFC）规范。组件标签靠近小程序规范，详见。
Vue | UniApp - 本地开启https
小熊
10-31 2628
此方法以webpack为示例，vite配置方法可能不同，但该教程有效解决https访问项目。
小程序-uni-app：uni-app-base项目基础配置及使用 / uni-app+vue3+ts+vite+vscode
snowball的博客
06-08 1万+
小程序 uniapp开发 vue3 ts pnpm 开发 全记录
uni-app 修改默认端口
热门推荐
weixin_43865866的博客
11-05 1万+
uni-app 默认端口为8080,与tomcat的默认端口冲突。 解决方案一（临时方法）、先启动tomcat，再启动uni-app此时uni-app的端口自动修改为8081。 解决方案二、打开manifest.json，选择H5配置，设置端口即可。 ...
uniapp配置开发测试环境
05-04
uniapp配置开发测试环境 uniapp配置开发测试环境
适用 uniapp 小程序使用的 jsencrypt 文件
10-24
uniapp 小程序中 npm 下载 jsencrypt 或者引用包，会因为小程序和h5由于元素的不同出现报错，因此需要更改 jsencrypt 文件去使用
uniapp微信小程序使用echarts
03-27
ECharts的配置项非常丰富，包括图表类型（如柱状图、折线图、饼图等）、数据系列（series）、坐标轴（xAxis和yAxis）、标题（title）、图例（legend）等。你可以根据需求自定义这些配置项，实现各种复杂的数据可视化...
uni-app系列（四）：uni-app 如何修改默认端口
Mr_chen的博客
09-04 7429
????摘要 今天分享下 —— uni-app 如何修改默认端口 的一些基本知识，欢迎关注！ ????分享 uni-app 默认端口为 8080，与 tomcat 的默认端口冲突。 解决方案一：不推荐 先启动 tomcat，再启动 uni-app 端口会自动修改为 8081 。 解决方案二： 打开项目—>打开 manifest.json 文件，选择h5配置，设置端口就可以了。 ????最后 更多参考精彩博文请看这里：《陈永佳的博客》 喜欢博主的小伙伴可以加个关注、点个赞哦，持续更新
uni-app 超详细教程（一）（从菜鸟到大佬）
很多时候犯错都是在不知情的情况下发生的
06-23 1万+
pages.json ：文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等manifest.json ：文件是应用的配置文件，用于指定应用的名称、图标、权限等。App.vue：是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。main.js：是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。uni.scss：文件的用途是为了方便整体控制应用的风格。
uni-app 运行到H5 修改默认端口号（vscode）
苏木的博客
02-21 2686
uni-app 运行到H5 修改默认端口号（vscode） 背景： 在官方文档中没有给出端口相关的H5配置的信息 1、修改配置文件mainfest.json "h5" : { "devServer" : { "port" : 10118, "https" : false } } 在mainfest.json添加以上配置即可； ...
Uni-App基础介绍及环境配置
weixin_45816463的博客
05-26 3438
随着移动互联网发展迅速，应用程序的需求也越来越多元化。为了满足此需求，跨平台开发工具应运而生。Uniapp作为一款基于Vue.js框架的跨平台开发工具，可以帮助开发者快速地开发出高质量的应用程序，同时也可以提高开发效率和降低开发成本。在学习Uniapp的过程中，我深刻感受到它的强大和便捷，特别是在开发小程序和H5应用方面，Uniapp的优势更加明显。在这篇文章中，我将分享我在学习Uniapp过程中的心得和体会，希望能够对其他开发者有所启发和帮助。（图片源自：网络）
geecg-uniapp 源码下载运行 修改端口号 修改tabBar 修改展示数据（1）
weixin_68266812的博客
10-08 833
jeecg-uniapp: JEECG BOOT APP 移动解决方案，采用uniapp框架，一份代码多终端适配，同时支持APP、小程序、H5！实现了与JeecgBoot平台完美对接的移动解决方案！目前已经实现登录、用户信息、通讯录、公告、移动首页、九宫格等基础功能。(gitee.com)（2）因为他封装了 先找到http请求位置 一级一级找 然后进行接口修改 都改完运行即可。（1）要是没有env 需要创建一个替换成后端接口。
uniapp 配置代理
08-02
Uniapp是一款跨平台开发框架，可以快速构建多端应用程序。在Uniapp中配置代理可以实现跨域访问或访问外部API接口等操作。配置代理的方法如下： 1. 在Uniapp项目的根目录下找到vue.config.js文件（如果没有则需要手动创建）。 2. 在vue.config.js文件中添加以下代码来配置代理： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://example.com', // 代理的目标地址 changeOrigin: true, // 是否改变请求头中的Origin字段 pathRewrite: { '^/api': '' // 将请求路径中的/api替换为空字符串 } } } } } ``` 3. 上述配置中，我们将以`/api`开头的请求代理到`http://example.com`这个目标地址。`changeOrigin`选项用于控制是否改变请求头中的Origin字段，如果目标地址是一个跨域地址，需要将其设置为true。 4. 如果需要添加自定义请求头，可以在配置中添加`headers`属性，如下所示： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://example.com', changeOrigin: true, headers: { 'X-Requested-With': 'XMLHttpRequest' // 添加自定义请求头 } } } } } ``` 5. 配置完成后，保存文件并重新启动Uniapp应用程序。可以使用axios或其他HTTP库发起请求来测试代理是否生效。 以上是在Uniapp中配置代理的方法，通过配置代理可以实现跨域访问或访问外部API接口等操作。[1][2][3]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值