微信小程序学习笔记（哔哩哔哩教程）Day1

目录

项目的基本组成结构

微信小程序页面的组成部分

1. JSON配置文件的作业

2.app.json文件

3.project.config.json文件 ​编辑

4.sitemap.json文件

5.页面的.json配置文件

6.新增小程序页面

7.修改首页

小程序代码的构成-WXML模板

１.什么是WXML

2.WXML和HTML的区别

2.WXSS和CSS的区别

小程序代码构成--JS逻辑交互

1.小程序中的.js文件

2.小程序中.js文件的分类        ​编辑

小程序的宿主环境--宿主环境简介

1.什么是宿主环境

2.小程序的宿主环境

3.小程序宿主环境（手机微信）都包含的内容

小程序的宿主环境--通信模型

1.通信的主体

2.小程序的通信模型

小程序的宿主环境--运行机制

1.小程序启动的过程

2.页面渲染的过程

小程序的宿主环境--组件

1.小程序中组件的分类

2.常用的视图容器组件

3.view组件的基本使用

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

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

6.swiper 组件的常用属性

7.常用的基础内容组件

8.text组件的基本使用

9.rich-text组件的基本使用

10.其他常用组件

11.button按钮的基本使用

12.image组件的基本使用

13.image组件的mode属性

小程序的宿主环境--API

1.小程序API概述

协同工作和发布--协同工作

1.了解权限管理需求

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

3.小程序的开发流程

协同工作和发布--小程序成员管理

1.成员管理的两个方面

2.不同成员对应的权限

3.开发者的权限说明

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

协同工作和发布--小程序的版本

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

2.小程序的版本

协同工作和发布--发布上线

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

2.上传代码

3.在后台查看上传后的版本

4.提交审核

5.发布

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

协同工作和发布--运营数据

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

---

项目的基本组成结构

pages:用来存放所有小程序的页面 utils:用来存放工具性质的模块（例如：格式化时间的自定义模块） app.js：小程序项目的入口文件 app.json：小程序项目的全局配置文件 app.wxss：小程序项目的全局样式文件 project.config.json：项目的配置文件 sitemap.json：用来配置小程序及其页面是否允许被微信索引

微信小程序页面的组成部分

官方建议将所有小程序的页面放在pages目录中，以单独的文件夹存在，如图所示

1. JSON配置文件的作业

JSON是一种数据格式、在实际开发中、JSON总是以配置文件的形式 出现。小程序i项目中也不例外:通过不同的.jso配置文件，可以对小程序项目进行不同级别的配置。

小程序项目中有4种json配置文件，分别是： 1、项目根目录中的app.json配置文件 2、项目根目录中的project.config.json配置文件 3、项目根目录中的sitemap.json配置文件 4、每个页面文件夹中的.json配置文件

2.app.json文件

app.json是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。

3.project.config.json文件 

4.sitemap.json文件

5.页面的.json配置文件

6.新增小程序页面

7.修改首页

小程序代码的构成-WXML模板

１.什么是WXML

WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发的HTML.

2.WXML和HTML的区别

 

2.WXSS和CSS的区别

小程序代码构成--JS逻辑交互

1.小程序中的.js文件

一个项目仅仅提供方界面展示是不够的，在小程序中，我们通过.js文件来处理用户的操作。例如：响应用户的点击，获取用户的位置等等。

2.小程序中.js文件的分类        

小程序的宿主环境--宿主环境简介

1.什么是宿主环境

宿主环境（host environment）是指程序运行所必须的依赖环境。

2.小程序的宿主环境

手机微信是小程序的宿主环境

3.小程序宿主环境（手机微信）都包含的内容

1、通信模型 2、运行机制 3、组件 4、API

小程序的宿主环境--通信模型

1.通信的主体

小程序中通信的主体是渲染层和逻辑层：

2.小程序的通信模型

 

小程序的宿主环境--运行机制

1.小程序启动的过程

1、把小程序的代码包下载到本地 2、解析app.json全局配置文件 3、执行app.js小程序入口文件，调用App（）创建小程序实例 4、渲染小程序首页 5、小程序启动完成

2.页面渲染的过程

1、加载解析页面的.json配置文件 2、加载页面的.wxml模板和.wxss样式 3、执行页面的.js文件，调用Page()创建页面实例 4、页面渲染完成

小程序的宿主环境--组件

1.小程序中组件的分类

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快熟搭建出漂亮的页面结构。官方把小程序的组件分为9大类：

 

2.常用的视图容器组件

 

3.view组件的基本使用

display : flex 横向布局

 

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

滚动效果

<scroll-view class="xx" scroll-y>

scroll-y 这里表示允许容器纵向移动 </scroll-view>

需要在wxss上添加样式

 

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

 

6.swiper 组件的常用属性

 

7.常用的基础内容组件

1、text ·文本组件 ·类似于HTML中的span标签，是一个行内元素

2、rich-text · 富文本组件 ·支持把HTML字符串渲染为WXML结构

8.text组件的基本使用

通过text组件的selectab属性，实现长安选中文本内容的效果

 

9.rich-text组件的基本使用

通过 rich-text 组件的nodes属性节点，把 HTML字符串渲染为对应的UI结构：

商品详情页渲染等情况可以使用该组件 服务器返回HTML的标签等

 

10.其他常用组件

 

11.button按钮的基本使用

 

12.image组件的基本使用

 

13.image组件的mode属性

 

小程序的宿主环境--API

1.小程序API概述

 

协同工作和发布--协同工作

1.了解权限管理需求

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

3.小程序的开发流程

协同工作和发布--小程序成员管理

1.成员管理的两个方面

2.不同成员对应的权限

3.开发者的权限说明

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

协同工作和发布--小程序的版本

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

2.小程序的版本

协同工作和发布--发布上线

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

一个小程序的发布上线，一般经过上传代码->提交审核->发布这三个步骤。

2.上传代码

3.在后台查看上传后的版本

4.提交审核

5.发布

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

协同工作和发布--运营数据

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