简介
黑马程序员视频学习记录
视频链接:黑马程序员前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战
文章目录
- 简介
- ———— 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
- 2. scroll-view
- 3. swiper和swiper-item
- 4. swiper
- ———— 常用基础内容组件 ————
- 1. text
- 2. rich-text
- ———— 其他常用组件 ————
- 1. button
- 2 . image
- ———— 小程序的宿主环境API ————
- 1. 概述
- 2. 分类
- ———— 协同工作和发布 ————
- 1. 协同工作
- 2. 项目成员组织结构
- 3. 开发流程
- 4. 小程序成员管理
- 5. 成员权限
- 6. 开发者的权限说明
- 7. 增加项目成员的体验成员
- 8. 程序的版本
- 9. 发布上线
- 10. 基于小程序码进行推广
- 11. 运营数据
- ———— 总结 ————
———— json文件的作用 ————
![image-20230312163713179](https://i-blog.csdnimg.cn/blog_migrate/cb073d2d0e70256266fb610af326b12a.png)
1. app.json
![image-20230312163903890](https://i-blog.csdnimg.cn/blog_migrate/646d980ea05b6102a9656c723c8e390c.png)
2. project.config.json
![image-20230312164034871](https://i-blog.csdnimg.cn/blog_migrate/1824fd7aa24b16ee5435819ab1ed0bfb.png)
3. sitemap.json
![image-20230312164353605](https://i-blog.csdnimg.cn/blog_migrate/7fdc9b3bb3bafb250f9b096a5b89acf0.png)
4. 页面.json配置文件
![image-20230312164636333](https://i-blog.csdnimg.cn/blog_migrate/c5a38d16ec671c491cb89e415ce3255e.png)
5. 新建页面
![image-20230312165341334](https://i-blog.csdnimg.cn/blog_migrate/90de29f8fceac8e9dbade263576866a7.png)
6. 修改首页
![image-20230312165429552](https://i-blog.csdnimg.cn/blog_migrate/7d98d540d9b0c9685d046096016e63b8.png)
———— WXML模板 ————
1. WXML和HTML的区别
![image-20230312165540272](https://i-blog.csdnimg.cn/blog_migrate/d613381948f6166b02a53482dbecf52a.png)
2. WXSS和CSS的区别
![image-20230312165756525](https://i-blog.csdnimg.cn/blog_migrate/eaa582315b47080a946b49f9cbf706ed.png)
3. JS逻辑交互
![image-20230312165932610](https://i-blog.csdnimg.cn/blog_migrate/b0d431524f2c9a5478cd15c991545ae0.png)
———— 宿主环境 ————
1. 简介
![image-20230312170014677](https://i-blog.csdnimg.cn/blog_migrate/38d412485ddab8a91c76769154fdb1ea.png)
2. 小程序的宿主环境
3. 小程序宿主环境包含的内容
![image-20230312170116487](https://i-blog.csdnimg.cn/blog_migrate/64be727bc0b11b244fc4b2d139ba2d7e.png)
———— 通信模型 ————
1. 通信的主体
![image-20230312170153228](https://i-blog.csdnimg.cn/blog_migrate/1fc7a2ed9dae33899179b77536464017.png)
2. 小程序的通信模型
![image-20230312170230471](https://i-blog.csdnimg.cn/blog_migrate/0e89be961a78473058dfc645a1482b52.png)
———— 运行机制 ————
1. 小程序启动的过程
![image-20230312170328680](https://i-blog.csdnimg.cn/blog_migrate/956d817e6a3aed1f9e4313560f5a37b7.png)
2. 页面的渲染过程
![image-20230312170356493](https://i-blog.csdnimg.cn/blog_migrate/c3f0ff1f61a6f46452f1f45821378aa7.png)
———— 常用视图容器类组件 ————
- 组件分类
![image-20230312170450560](https://i-blog.csdnimg.cn/blog_migrate/21594947b60fb378a2d5a42cc4a5dcc7.png)
![image-20230312170535573](https://i-blog.csdnimg.cn/blog_migrate/c2db83ab7e70b15ec27b679cc913a70c.png)
1. view
![image-20230312170557544](https://i-blog.csdnimg.cn/blog_migrate/30b04d9940ff8b300bd8b1d2217424a3.png)
<!--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
![image-20230312171156387](https://i-blog.csdnimg.cn/blog_migrate/a9ce3d4158e45197fe120aadb086c8c4.png)
<!--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
![image-20230312171530025](https://i-blog.csdnimg.cn/blog_migrate/9a8bcd311282018736320087cc13028f.png)
<!-- 轮播图的结构 -->
<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
![image-20230312172240958](https://i-blog.csdnimg.cn/blog_migrate/e1e5db33a567d23f82a2834237cc1e2d.png)
<!-- 轮播图的结构 -->
<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>
———— 常用基础内容组件 ————
![image-20230312172941745](https://i-blog.csdnimg.cn/blog_migrate/7bd3bc2eb99a602fd0af20d839fc8d35.png)
1. text
<view>
长按选中
<text selectable>18161811111</text>
</view>
2. rich-text
<rich-text nodes="<h1 style='color: red;'>标题</h1>"></rich-text>
———— 其他常用组件 ————
![image-20230312173516341](https://i-blog.csdnimg.cn/blog_migrate/ddb9fc38356a833e6323f4b17520e7a7.png)
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-20230312174640553](https://i-blog.csdnimg.cn/blog_migrate/9742a82a4d6878e84f6f9407367f9eb6.png)
<!-- image 图片组件 -->
<image></image>
<image src="/images/1.png" mode="heightFix"></image>
———— 小程序的宿主环境API ————
1. 概述
![image-20230312174941494](https://i-blog.csdnimg.cn/blog_migrate/8ee2f8ec706f0cab24bf885d324d26e3.png)
2. 分类
![image-20230312175102453](https://i-blog.csdnimg.cn/blog_migrate/b1d0a63c58ab8ed14d33d1b16b589c4a.png)
———— 协同工作和发布 ————
1. 协同工作
![image-20230312175246060](https://i-blog.csdnimg.cn/blog_migrate/a87759527f3efe02f43678c738e7bebd.png)
2. 项目成员组织结构
![image-20230312175311677](https://i-blog.csdnimg.cn/blog_migrate/50c4d94073a8ec5dbe73bee3d3c0f0a4.png)
3. 开发流程
![image-20230312175327409](https://i-blog.csdnimg.cn/blog_migrate/d5e0ddb5086dc5a08bb880a3486ebb4f.png)
4. 小程序成员管理
![image-20230312175457165](https://i-blog.csdnimg.cn/blog_migrate/b9bd9d798551fa5edee3ad20b1caa85f.png)
5. 成员权限
![image-20230312175530544](https://i-blog.csdnimg.cn/blog_migrate/c250c8fad367099cecd791163a248e13.png)
6. 开发者的权限说明
![image-20230312175552830](https://i-blog.csdnimg.cn/blog_migrate/f619bd75c9eae2fdd0ca65fd4cc7648b.png)
7. 增加项目成员的体验成员
![image-20230312175727686](https://i-blog.csdnimg.cn/blog_migrate/7bce1ba238a55e6526c098147d3cd080.png)
8. 程序的版本
![image-20230312175759385](https://i-blog.csdnimg.cn/blog_migrate/0d140ec95ed03d43870d99fad93f190b.png)
![image-20230312175806438](https://i-blog.csdnimg.cn/blog_migrate/ef4ac550d9eb636ed2aa372a90dc233a.png)
9. 发布上线
![image-20230312175841853](https://i-blog.csdnimg.cn/blog_migrate/33793b00260f41f0259173002c30dd30.png)
![image-20230312175906920](https://i-blog.csdnimg.cn/blog_migrate/e5c0ac2e3c81602502b3dc1902df50ae.png)
![image-20230312175920456](https://i-blog.csdnimg.cn/blog_migrate/611bb53933a2c23f2b39886e12e010a7.png)
![image-20230312175942632](https://i-blog.csdnimg.cn/blog_migrate/2852dd9079fbda40d5ee59cf1587eb89.png)
![image-20230312175952999](https://i-blog.csdnimg.cn/blog_migrate/bd5781e3bf53af61bde30ef0704a940e.png)
10. 基于小程序码进行推广
![image-20230312180318505](https://i-blog.csdnimg.cn/blog_migrate/6bab8c4109c2fe916253a23f81a4125e.png)
11. 运营数据
![image-20230312180647449](https://i-blog.csdnimg.cn/blog_migrate/7fd71542c3f9dfb778e41587b72ca5f0.png)
———— 总结 ————
![image-20230312181012496](https://i-blog.csdnimg.cn/blog_migrate/1ad02fbcc6fbabd76bc2fa8a4ecb463e.png)