微信小程序Day1学习笔记

1. 小程序代码的构成

此笔记参考b站 黑马程序员微信小程序开发视频

1.1 json配置文件的作用

1.2 app.json 文件

全局配置，默认有四个。

1.3 project.config.json 文件

1.4 sitemap.json 文件

“action”:可以填写allow、disallow（所有页面不允许被搜索）

1.5 页面的 .json配置文件

页面配置 与 全局配置（app.json）有冲突时，json文件中同个标签的内容会根据页面的json配置为主。

2. 新建小程序页面

1 修改项目页面

2. WXML模板

1 什么是wxml

wxml 是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的HTML。

2. wxml和html的区别

3. 什么是wxss

wxss（weixin style sheets）是一套样式语言，用于描述wxml的组件样式，类似于网页开发中的css。

4. wxss和css的区别

3. 小程序中 .js文件的分类 (JS逻辑交互)

3.小程序的宿主环境

1. 宿主环境（host environment）

程序运行所必需的依赖环境

2. 小程序的宿主环境

= 手机微信

3. 小程序的宿主环境包含的内容

1. 通信模式
2. 运行机制
3. 组件
4. API

1. 通信的主体

2. 通信模型

3. 运行机制（小程序启动的过程）

4. 运行机制（页面渲染的过程）

4. 组件

1. 小程序中的组件分类

2. 常用的视图容器类组件

3. view组件的基本使用

横向布局 flex

wxml

<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

wxss

.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightskyblue;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}

.container1 {
  display: flex;
  justify-content: space-around;
}

4. scroll-view组件的基本使用

scroll-x 允许横向滚动
scroll-y 允许纵向滚动

只加上scroll-y是拉动不了的，还需要在wxss中改变容器的宽高

<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

改变容器高度，即可实现拖动效果

.container1 {
  border: 1px solid red;
  width: 100px;
  height: 120px;
}

5. swiper 和swiper-item 组件的基本使用

<!--轮播图结构-->
<swiper>
<!--第一个轮播图-->
<swiper-item>
  <view class="item">A</view>
</swiper-item>
<!--第二个轮播图-->
<swiper-item>
  <view class="item">B</view>
</swiper-item>
<!--第三个轮播图-->
<swiper-item>
  <view class="item">C</view>
</swiper-item>
</swiper>

没有样式前，是往左滑动可以看到下一个内容

.swiper-containers {
  height: 150px;
}

.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item {
  background-color: lightgreen;
}
swiper-item:nth-child(2) .item {
  background-color: lightskyblue;
}
swiper-item:nth-child(3) .item {
  background-color: lightcoral;
}

6. swiper 组件的常用属性

circul 循环滑动。。

7. 常用的基础内容组件

1. text （只有此组件支持长按选中效果）
   2022年7月：（user-select）
   

<view>
  手机号 支持长按选中效果
  <text user-select>10841043241</text>
</view>

2. rich-text
   

nodes 属性节点

<rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>

8. 其他常用组件

button

type选择按钮类型
size选择按钮尺寸
plain 镂空按钮

image

src 指向图片路径

mode属性：图片宽高
默认scaleToFill

5. API

小程序中的api是由宿主环境提供的，通过这些丰富的小程序api，开发者可以方便的调用微信提供的能力。例如：获取用户信息，本地存储，支付功能等。

API三大分类

6.协同工作

1.了解权限管理需求

2.了解项目成员的组织结构

3.小程序的开发流程

7. 小程序成员管理

1. 成员管理的两个方面

2. 不同项目成员对应的权限

3. 开发者的权限说明

4. 添加项目成员和体验成员

小程序官方网址

8. 小程序的版本

1. 软件开发过程中的不同版本

2. 小程序的版本

9. 小程序发布到上线的整体步骤

开发者工具：上传代码 -> 提交审核 -> 发布

1. 上传代码

2. 在后台查看上传之后的版本

3. 提交审核

4. 发布

5. 基于小程序码进行推广

介绍也有更改次数限制

6. 查看小程序运营数据的两种方式

小程序后台

小程序数据助手

10.起步总结