企业实践之微信小程序开发知识点总结（部分）
企业实践之微信小程序开发知识点总结（部分）
一、第一节课内容
1、App（主体）
①app.json中”pages”（配置小程序的页面），哪个页面被配置到最前面哪个页面就是首页（即最先出现）图中”pages/logs/logs”在最前面，结果如图所示：
②app.json中”windows”是窗口的配置，“navigationBarBackgroundColor”:导航条颜色配置；“navigationBarTitleText”:导航条内容设置；“navigationBarTextStyle”: 导航文字颜色（white,black）,修改内容即结果如下图：
2、pages（页面）
①todo.wxml是首页面的页面结构;
是竖排内容：本地图片显示：
网络图片显示：
②todo.wxss是首页的css（外观样式）以image为例:
③todo.json中的配置会覆盖app.json的window配置
④todo.js是首页的业务逻辑，data（首页的数据）
⑤模板语法（让业务逻辑和业务结构联系起来）：{{}}渲染文本
{{msg}}渲染显示todo.jjs里面的data的msg数据：
{{msg.length}}获取msg字符的长度：
{{msg+’’}}连接字符：
{{5+7}}做简单的javascript运算：
二、第二节课内容
CSS选择器：
1、标签选择器
标签名：{} view{}(选择范围比较广，慎用！)
2、类选择器标签名：
.wxss中：.title{}(比较常用！)
3、id选择器（比较精确）
#time{color: gray;font-size: 12px;}
4、多类选择器
要运动 要强壮
两种书写方式：
分开：.orange .bold
合并 .orange.bold（）选择的元素同时拥有这两个类）
5、后代选择器
.parent.son{}
/子元素text会继承父元素view的文字样式/
/选择的元素 类名是son 必须是parent的子孙元素/
.parent .son{
color: aqua;
}
Css文本属性
1、font-size 文字大小
2、Font-weight 文字粗细（100最细 900最粗 400正常）
3、Font-style文字样式（italic 斜体 normal 正常）
4、Color 文字的颜色（英文单词表示；16进制表示；RGB形式表示；也可把鼠标放上去选择颜色）
段落属性
1、行高（linne-height）：第一行文字的基线与第二行文本的基线距离，也可以使用1.5代表1.5倍行高（32px） 倍数、像素、长度单位都可以用
2、文本对齐方式（text-align）:left （左对齐）；right（右对齐）；center（居中）
3、首行缩进（text-indent）:2em 首行向右缩进2个字符
4、文本装饰（text-decoration）：none 没有；overline 上划线；line-through 删除线；underline 下划线
例子：
小程序模板语法
1、文本渲染：{{msg}}
2、条件渲染：data:{islog:ture}
3、列表渲染：
list:[“学习小程序”,“python”,“java”,“mysql”]
4、事件绑定: typHd(0)
三、第三节课内容
小程序
1、表单双向绑定
bindinput=“inputHd”
2、list数据添加
3、list中数据的删除
CSS
1、Display
display：元素呈现的状态：
block块级元素 默认垂直排列（block块级元素默认宽是100%，可以手动设置宽和高！！！）； inline 行内元素默认水平排列（inline行内元素默认宽为内容的宽，设置宽高不启用！！！）；
Inline-block行内块元素，是块元素dankeyishuipingpailie；
默认情况下view是块元素 text是行内元素， 他们之间可以用display进行转换。
Block可以单独设置宽和高
Inline不可以设置
Inline-block可以设置
2、Border
Boder:粗细 样式 颜色；
Border.style（边框样式）：样式的选择;none/solid 实线/dotted 点/dashe 虚线
Border-bottom（下边框）
Border-radius（边框 圆角）：取一个值是指的是四个角；两个值是指左上和右下两个对角；四个值是指从左上角开始顺时针排列
Box-shaow（盒子阴影）：盒子阴影 x方向 y方向 模糊 颜色
Padding（内边距）：内边距:文本到边框的距离;
一个值即四周都是这个距离；
两个值指的是上下和左右；
四个值是从上部分开始顺时针
Margin（外边框）：
块元素居中：元素具有宽度，元素左右外边距为自动
四、第四节课内容
小程序
1、网络请求（wx.request）
Url:”请求的地址”；
Success(res){res请求成功后返回的数据}
2、下拉刷新
（1）页面json配置
“enablePullDownRefresh”:true, 允许下拉刷新
“backgroundTextStyle”:“dark” 背景文字颜色
（2）执行
（3）停止下拉刷新
（4）提示框
3、上拉触底
4、数组合并
5、本地存储
一、Flex弹性布局
1、开启弹性布局
2、flex-direction（布局方向）
3、flex-wrap（是否换行）
4、justify-content（主轴对齐方式）
5、align-items（辅轴对齐方式）
6、align-content（多轴对齐方式）
五、第五节课内容
小程序页面跳转
1、navigator 标签
（1）基本名称
（2）重定向<navigator url=”” open-type=”redirect”
（3）底部栏切换<navigator url=””open-type=”switchTab”
（4）返回返回
（5）小程序切换返回
2、JS跳转
（1）基本页面
（2）重定向
（3）底部栏
（4）返回
3、配置app.json（配置tabBar）
结果如下：
小程序的生命周期
1、onload页面加载
（1）传递参数
（2）js基础切换传递参数
2、Onshow页面显示
3、Onready页面渲染完毕
4、Onhide页面隐藏
5、Onunload页面卸载
小程序的页面缓存
1、A-B-C
A切换到B页面，A页面会缓存；B页面切换到C页面，C页面会缓存；总共能缓存5层页面
当执行反回的时候C页面会onunload销毁，B页面会执行onshow显示
2、如果是用redirect切换，A页面切换到B页面，A页面会直接销毁
flex弹性布局项目属性
1、order排序
默认为0 数字越小越靠前
2、flex-grow
占用多余空白空间的比例 1是默认 2是两倍 0是指有多余空间也不放大
3、flex-shrink（注意结合flex-warp=”no-warp”）
空间不够缩小比例 默认为0 1代表自动缩小 2为缩小的两倍
4、flex-basis
放大缩小前设置元素的宽
六、第六节课内容
一点资讯之图片显示
（1）没有图片
（2）一张图片
（3）三张图片
1、一点资讯之添加副标题（时间）
（1）没有图片的布局：
（2）一张图片的布局：
（3）三张图片的布局：
2、一点资讯之无限刷新（刷新按钮）
4、页面跳转传参
<navigator url=”xxxx”?id=youid>
onLoad(options){
//options.id就是传递过来的参数
}
5、条件渲染应用（通过wx:elif wx:else实现）
V-if=”{{表达式}如果表达式为真，则当前元素渲染，否则隐藏}
6、定位（把一元素定位到页面中的某个地方）
（1）固定定位
参照元素:屏幕的四个角
偏移值：left ：50rpx；bottom：50rpx；偏移参照元素的左下角
Right : 50rpx; top：50rpx; 偏移参照元素的右上角
（2）绝对
参照元素：写过position:relative,absolute,fixed的父辈元素
（3）相对
参照元素：自己
特点：可能会使多个元素重叠在一起
7、Html转换为微信标签
（1）通过 node=”html内容”
（2）wxPrase实现
8、层级（z-index）
（1）只对定位元素起效
（2）值越大，越被显示在最上面在最上面
9、动态地设置页面的标题
Wx.setNavigationBarTitle({
Title:res.data.title
})
注：该文章只是作者所学部分知识点的总结，部分内容格式可能不是很规范。