小程序学习（一）

目录

1、认识小程序

1.1、小程序基本组成结构

1.3、JSON配置文件的作用

1.3.1、app.json文件

 1.3.2、project.config.json文件

 1.3.3、sitemap.json文件

 1.3.4、页面的.json配置文件

 1.4、新建小程序页面

 1.5、修改项目首页

 1.6、WXML

 1.6.1、WXML和HTML的区别

 1.7、WXSS

 1.7.1、WXSS和CSS的区别

 1.8、小程序中的.js文件

 1.8.1、小程序中的.js文件的分类

 1.9、小程序的宿主环境

1.9.1、宿主环境概念

1.9.2、小程序的宿主环境

2、小程序的宿主环境包含的内容

 2.1、通信的主体

 2.2、小程序的通信模型

 3、运行机制

3.1、小程序启动的过程

 3.2、页面渲染的过程

 4、小程序组件

4.1、小程序中组件的分类

4.2、常用的视图容器类组件

 4.3、view组件的基本使用

 4.4、scroll-view组件的基本使用

4.5、swiper和swiper-item组件的基本使用

 5、常用的基础内容组件

 5.1、text组件的基本使用

 5.2、rich-text组件的基本使用

5.3、其他常用组件

 5.3.1、button按钮的基本使用

5.3.2、image组件的基本使用 

 5.3.3、image组件的mode属性

 6、小程序API概述

 6.1、小程序API的3大分类

 7、协同工作

7.1、了解权限管理需求

 7.2、了解项目成员的组织结构​

 7.3、小程序的开发流程

 7.4、成员管理

7.4.1、成员管理的两个方面

 7.4.2、不同项目成员对应的权限

 7.4.3、开发者的权限说明

 7.4.4、添加项目成员和体验成员

8、小程序的版本

8.1、软件开发过程中的不同版本

 8.2、小程序版本

 9、小程序发布上线

9.1、整体步骤:

9.2、上传代码

 9.3、在后台查看上传之后的版本

 9.4、提交审核

 9.5、发布

 9.6、基于小程序进行推广

 10、运营数据

---

1、认识小程序

1.1、小程序基本组成结构

1.2、小程序页面的组成部分

1.3、JSON配置文件的作用

1.3.1、app.json文件

 1.3.2、project.config.json文件

 1.3.3、sitemap.json文件

 1.3.4、页面的.json配置文件

 

添加：   改变窗口外观

"navigationBarBackgroundColor":"#00b26a"

 

 1.4、新建小程序页面

 1.5、修改项目首页

 1.6、WXML

 1.6.1、WXML和HTML的区别

 1.7、WXSS

 1.7.1、WXSS和CSS的区别

 1.8、小程序中的.js文件

 1.8.1、小程序中的.js文件的分类

 1.9、小程序的宿主环境

1.9.1、宿主环境概念

1.9.2、小程序的宿主环境

手机微信是小程序的宿主环境，小程序并不是直接安装在手机的操作系统上的，而是基于微信的环境安装的,手机上没有安装微信，就无法安装小程序。

借助宿主环境提供的能力，可以完成许多平台网页无法完成的功能，例如：

微信扫码、微信支付、微信登录、地理定位，ETC

2、小程序的宿主环境包含的内容

 2.1、通信的主体

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

 2.2、小程序的通信模型

 3、运行机制

3.1、小程序启动的过程

 3.2、页面渲染的过程

 4、小程序组件

4.1、小程序中组件的分类

4.2、常用的视图容器类组件

 4.3、view组件的基本使用

<!--pages/list/list.wxml-->
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>

/* pages/list/list.wxss */
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightslategray;
}
.container1 view:nth-child(2){
  background-color:lightblue;
}
.container1 view:nth-child(3){
  background-color: lightcoral;
}
.container1{
  display: flex;
  justify-content: space-around
}

效果展示：横向分散布局

 4.4、scroll-view组件的基本使用

<!--pages/list/list.wxml-->
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

/* pages/list/list.wxss */
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightslategray;
}
.container1 view:nth-child(2){
  background-color:lightblue;
}
.container1 view:nth-child(3){
  background-color: lightcoral;
}
.container1{
  border: 1px solid red;
  height: 120px;
  width: 100px;
  
}

4.5、swiper和swiper-item组件的基本使用

 5、常用的基础内容组件

 5.1、text组件的基本使用

 5.2、rich-text组件的基本使用

5.3、其他常用组件

 5.3.1、button按钮的基本使用

5.3.2、image组件的基本使用 

 5.3.3、image组件的mode属性

 6、小程序API概述

 6.1、小程序API的3大分类

 7、协同工作

7.1、了解权限管理需求

 7.2、了解项目成员的组织结构

 7.3、小程序的开发流程

 7.4、成员管理

7.4.1、成员管理的两个方面

 7.4.2、不同项目成员对应的权限

 7.4.3、开发者的权限说明

 7.4.4、添加项目成员和体验成员

8、小程序的版本

8.1、软件开发过程中的不同版本

 8.2、小程序版本

 9、小程序发布上线

9.1、整体步骤:

9.2、上传代码

 9.3、在后台查看上传之后的版本

 9.4、提交审核

 9.5、发布

 9.6、基于小程序进行推广

 10、运营数据