微信小程序（json文件作用、WXML模板、宿主环境、通信模型、运行机制、常用组件、宿主API、协同工作和发布）

简介

黑马程序员视频学习记录

视频链接：黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战

---

---

---

———— json文件的作用 ————

1. app.json

2. project.config.json

3. sitemap.json

4. 页面.json配置文件

5. 新建页面

6. 修改首页

———— WXML模板 ————

1. WXML和HTML的区别

2. WXSS和CSS的区别

3. JS逻辑交互

———— 宿主环境 ————

1. 简介

2. 小程序的宿主环境

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

———— 通信模型 ————

1. 通信的主体

2. 小程序的通信模型

———— 运行机制 ————

1. 小程序启动的过程

2. 页面的渲染过程

———— 常用视图容器类组件 ————

• 组件分类

1. 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: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightskyblue;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}

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

2. 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: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightskyblue;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}

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

3. swiper和swiper-item

<!-- 轮播图的结构 -->
<swiper class="swiper-container">
  <!-- 第一个轮播图 -->
  <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-container{
  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: lightpink;
}

4. swiper

<!-- 轮播图的结构 -->
<swiper class="swiper-container" 
        indicator-dots 
        indicator-color="white" 
        indicator-active-color="gray" 
        autoplay interval="2000" 
        circular>
  <!-- 第一个轮播图 -->
  <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>

———— 常用基础内容组件 ————

1. text

<view>
  长按选中
  <text selectable>18161811111</text>
</view>

2. rich-text

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

———— 其他常用组件 ————

1. button

<!-- 通过 type 指定按钮类型 -->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

<!--  size="mini" 小尺寸按钮-->
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>

<!-- plain 镂空按钮 -->
<button size="mini" plain>普通按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

2 . image

<!-- image 图片组件 -->
<image></image> 
<image src="/images/1.png" mode="heightFix"></image>

———— 小程序的宿主环境API ————

1. 概述

2. 分类

———— 协同工作和发布 ————

1. 协同工作

2. 项目成员组织结构

3. 开发流程

4. 小程序成员管理

5. 成员权限

6. 开发者的权限说明

7. 增加项目成员的体验成员

8. 程序的版本

9. 发布上线

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

11. 运营数据

———— 总结 ————