web前端微信小程序

最新推荐文章于 2024-09-03 11:51:27 发布

LHaoYan

最新推荐文章于 2024-09-03 11:51:27 发布

阅读量462

点赞数 2

文章标签：小程序

本文链接：https://blog.csdn.net/Gnemoah6/article/details/115706188

版权

web前端微信小程序

1、基础部分讲解

1.1 下载开发工具

1.1.1 微信开发文档

第一步进入开发文档： https://developers.weixin.qq.com/miniprogram/dev/framework/
第二步打开工具下载微信开发者工具稳定版

1.2 注册成为开发者

微信公众平台https://mp.weixin.qq.com/，进行注册账号

2、微信开发工具的了解

2.1 小程序项目的主要目录文件作用

以wxss为后缀名的文件主要是写一些样式的，自认为就像css功能一样，其中设置样式的优先级是（局部的大于全局的）
以wxml为后缀的文件是些内容的，个人理解为html相似
以json为后缀的主要是项目的配置文件，主要配置什么东西可以在官方文档查看https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
以js为后缀的主要是负责逻辑，和数据交互

2.2 新建页面

方式一：直接在页面进行操作
在这里插入图片描述

方式二：在app.json文件里面写入

"pages/test/test" //意思就是创建名字为test的页面

其中知识点：
在这里插入图片描述

2、flex布局

2.1、基础布局

水平布局

.lay{
  display: flex; //指定布局的方式
  flex-direction: row;//row是水平布局
  justify-content: center;//这两个属性的添加是居中
  align-items: center;
}

垂直居中

.lay{
  display: flex; //指定布局的方式
  flex-direction: column;//column是垂直布局
  justify-content: center;//这两个属性的添加是居中
  align-items: center;
}

代码练习
在这里插入图片描述

3、组件简单介绍

3.1、image组件的简单介绍

<image class="item-left" src="https://gimg2.baidu.com/image_search"></image>
//这里面src的使用和html中的src是一样的，都是指向的图片的地址

3.2、image中属性mode常用的几个值

3.2.1、值为 scaleToFill 时

缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
<image class="item-left" src="https://gimg2.baidu.com/image_search mode="scaleToFill""></image>

在这里插入图片描述

3.2.2、值为 aspectFit 时

缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
<image class="item-left" src="https://gimg2.baidu.com/image_search mode="aspectFit""></image>

在这里插入图片描述

3.2.3、值为 aspectFill 时（一般都用它）

缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
<image class="item-left" src="https://gimg2.baidu.com/image_search mode="aspectFill""></image>

在这里插入图片描述