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. 小程序的宿主环境包含的内容
- 通信模式
- 运行机制
- 组件
- 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. 常用的基础内容组件
- text (只有此组件支持长按选中效果)
2022年7月:(user-select)
<view>
手机号 支持长按选中效果
<text user-select>10841043241</text>
</view>
- 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. 查看小程序运营数据的两种方式
小程序后台