玩转微信小程序（第一天）

最新推荐文章于 2024-07-25 16:59:28 发布

sensen2580

最新推荐文章于 2024-07-25 16:59:28 发布

阅读量704

点赞数 19

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/sensen2580/article/details/140134740

版权

玩转微信小程序（第一天）

一，安装及创建小程序

1，注册微信小程序

如果你还没有微信公众平台的账号，请先进入微信小程序官网首页，点击 “立即注册” 按钮进行注册。

接着填写账号信息，需要注意的是，填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱，而且每个邮箱仅能申请一个小程序。

激活邮箱之后，选择主体类型为 “个人类型”，并按要求登记主体信息。

下载微信小程序地址按需下载即可

2，注册第一个项目

2.1新建一个小程序
在这里插入图片描述
2.2页面介绍

二，每一个文件代表着什么

2.1每一个界面都在默认生成的pages文件夹下。默认叫index.wxml

在这里插入图片描述

index.js 后续写动态效果代码的效果类似于Javascript

index.json 引用其它组件内容的配置文件位置

index.wxml 类似于html页面，就是写布局的

index.wxss 类似与写的css文件，写样式的地方

2.2新建页面在app.json中新建,在pages中新建

pages是文件默认生成位置

第一个字符串是要生成的文件夹名字

第二个字符串是要生成文件的名字

“pages”: [

“pages/index/index”,

“pages/news/news”,

“pages/case/case”,

“pages/login/login”

(3)新增首页选项卡 **注意：选项卡至少2个，至多5个图标选项卡不能是网络图片大小限制在81px*81px **

可以到iconfont官网去找小图标 https://www.iconfont.cn/

tabBar是一个可以在窗口的底部或顶部可以切换页面效果的值

pagePath 是页面路径，必须在 pages 中先定义

text是切换按钮上的文字

iconPath是图片路径icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片

selectedIconPath是被选中时的图片路径icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片

“tabBar”: {

“list”: [{

“pagePath”: “pages/index/index”,

“text”: “首页”,

“iconPath”: “/image/shouye.png”,

“selectedIconPath”: “/image/shouyea.png”

} ]

2.3今日完成效果图

在这里插入图片描述

三，今日复习内容

	<!--<style>
		.div1{
			border: 1px solid red;
			width: 200px;
			height: 200px;
		}
		
		/*display: inline-block 只想设置宽高不想换行时使用
		 
		 * display: block 想设置宽高想换行时使用
		 * */
		.span01{
			border: 1px solid red;
			width: 200px;
			height: 200px;
			display: inline-block;
		}
	</style>-->
	<!--外部样式-->
	<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
</head>
<body>
	<!--行级元素     div ul li p tr td h1-h6
		独占一行,可以设置宽高
		
	-->
	<!--内样式-->
	<div class="div1">
		
	</div>
	<!--行内样式-->
	<div style="border: 1px solid red;width: 200px;height: 200px;" >
		
	</div>
	
	<p>这是第一个p标签</p>
	<p>这是第二个p标签</p>
	<hr />
	
	<!--块级元素 a span
		默认情况下,元素并列显示
		不能设置宽和高
	-->
	<a>这是第一个a标签</a>
	<a>这是第二个a标签</a>
	
	<span class="span01">
		这是第一个span标签
	</span>
	
	<span >
		这是第二个span标签
	</span>