web前端微信小程序

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>

总结：

1、wxss与css的相同与不同

1.1、相同

• 基本的语法是十分相似的，比如设置宽高，背景颜色
• 使用的选择器也是相似的，类选择器

1.2、不同

• 单位的变化，如css里面的px，在wxss里面使用rpx