微信小程序知识点总结

微信小程序知识点总结

4.12

小程序的页面结构：

1. app 主体：
   app.json (小程序配置文件）
   | 特点：| 最后一项配置不要逗号，所有的配置标点符号为英文|
   | pages：| 哪个页面被配置，哪个页面就是首页要放到最前面|
   | window：| 窗口的配置|
   app.js (主业务逻辑）
   app.wxss (主样式css）
2. pages 页面：
   index 首页
   | index.js（首页的业务逻辑）| data:首页的数据 |
   | index.json（首页配置）| 覆盖app.json的window配置|
   | index.wxml （首页的页面结构）| < text >横排文本;< view >竖排内容；< image >图片显示 |
   | index.wxss（首页的css外观样式）| image {width：50排序；height：50px；}|
   logs 日志
3. utils 工具
4. 模板语法：让业务逻辑和业务结构联系起来
   渲染文本
   | {{msg}} | 渲染显示index.js里面的data的msg数据 |
   | {{2+3}} | 做简单的javascript运算|
   | {{msg.length}} | 获取msg字符长度|

4.19

css选择器

5. 标签选择器
   标签名< view >{ } | 选择的范围比较广，要慎用
6. 类选择器
   < view class=“title”> | .title{ } | 比较常用
7. id选择器
   < view id=“time”>| #time{ } | 比较精确
8. 多类选择器
   分开写法：
   |< view class=“orange bold”>要运动，变强壮< /view >| .orange{ } .bold{ } |
   合并写法：
   | .orange.bold{ } | 选择的元素同时拥有这两个类 |
9. 后代选择器
   | < view class=“parent”>
   < text class=“son”>我是宝贝< /text >
   < text >没人理睬< /text >
   < /view > | .parent.son{ } |子元素会继承父元素的文字属性 |

css文本属性

10. font-size：文字大小
11. font-weight：文字粗细“100最细；400正常；900最粗”
12. font-style：文字样式“italic 斜体；normal 正常”
13. color：文字颜色“英文单词 red；16进制#f0f0f0；rgb（0,0,0)黑色 / rgb（255,255，255）白色”

段落属性

1. line-height：行高 “第一行文字的基线与第二行文本基线的距离”“1.5：1.5倍行高 / 32px：32像素”
2. text-align：文本对齐方式 “left左对齐 / right右对齐 / center居中对齐”
3. text-indent：首行缩进 “2em 首行缩进2字符”
4. text-decoration：文本装饰 “none 没有 / overline上划线 / line-through删除线 / underline下划线”

css中的单位

1. rpx：把一个手机的宽度看做750rpx
2. px：像素
3. 百分比：30%…

小程序模板语法

1. 文本渲染：{{msg}}

2. 条件渲染
   | data:{isLog:true} |
   |< view wx:if="{{isLog}}">欢迎回来，主人< /view > |
   | < view wx:else="{{is:Log}}">请登录< /view > |

3. 列表渲染
   | data:{list:[“java”,“python”,“小程序”]} |
   | < view wx:for="{{list}}" wx:key="{{index}}" >{{item}}< /view > |

4. 事件绑定
   | < view bindtap=“tapHd” data-item="我喜欢你”> |
   | tapHd(e){
   //获取事件的参数
   let item = e.currentTarget.dataset.item;
   wx.showToast({title:item,icon:“none”})
   } |

4.26

小程序

1. 表单的双向绑定
   | < input value="{{msg}}" bindinput=“inputHd”> |
   | inputHd(e){
   this.setData({msg:e.detail.value})
   } |
   | e.detail.value:表单的值 |

2. list 数据添加
   | < input value=“{{msg}}” bindconfirm=“confirmHd”> |
   | var list = this.data.list;
   list.unshift(this.data.msg)
   // unshift把数据添加到list数组最前面
   this.setData({list}) |

3. list 数据删除
   | < text data-index="{index}}" bindtap=“delHd”>x< /text >
   | delHd(e){
   var index = e.currentTarget.dataset.index；
   //获取到参数
   var.list = this.data.list;
   //获取列表
   list.splice(index,1);
   //从数组list删除index对应的元素this.setData({ist})
   //更新数据
   } |

css

4. display
   | block:块元素 | 垂直排列、宽默认100% 、可以设置宽高 |
   | inline:行元素 | 水平排列、宽默认文字内容宽、设置宽高不启用 |
   | inline- block:行内块元素 | 是块元素、可以水平排列 |

5. border
   | 简写 | border: 1px solid red; |
   | 单独设置 | border-bottom:1 px solid red; |
   | border-style:边框样式 | none、solid实线、dotted点、dashed虚线 |
   | border-radius:边框圆角 | 2个值对角线圆角、4个值左上顺时针、当元素是正方向，设置圆角的值是宽度1半，正好就绘制一个正圆 |

6. box-shadow：0:x偏移;3px:y偏移;5px:模糊;#ccc:颜色;inset:内阴影

7. padding:内边距：文本(子元素)到边框的距离
   | padding:10px 四周 |
   | padding: 10px 20px;上下内边距10左右内边距20 |
   | padding:10px 20px 30px 40px ;上右下左 |
   | 单独设置方向：padding-top:20px;padding-right:30px;padding-left:10px;padding bottom:15px |

8. margin:外边距：边框到别的边框的距离(任何元素不管写不写有没有颜色，都是存在边框的）
   | margin:30px; 四周30px |
   | marign:10px 30px.上下10 左右30 |
   | margin:10px 20px 30px 40px 上右下左 |
   | 块元素居中:1. 元素具有宽度width:220px;2.元素左右外边距为自动 auto |

5.10

小程序

1. 网络请求
   wx.reauest({
   url:" 请求的地址"，
   success(res){
   res请求成功后返回的数据
   }
   }）

2. 下拉刷新
   | 1.页面json配置:“enablePullDownRefresh”:true,允许下拉刷新
   “backgroundTextStyle”: "dark"背景文字颜色(加载提示颜色) |
   | 2.执行:onPullDownRefresh: function(){this.getJoks();} |
   | 3.停止下拉刷新:x.stopPullDownRefresh0; |

3. 上拉触底
   | onReachBottom: function () {
   this.getloks(2);
   } |

4. 数组合并
   | A.concat(B)、A+B |
   | B.concat(A)、B+A |

5. 本地存取
   | 存：wx.setStorageSync(’ page’, that.data.page) |
   | 取：wx.getStorageSync(‘page’) |

flex弹性布局

1. 概念：容器display：flex、子项目
2. 容器属性
   | flex-direction布局方向：row | row-reverse | column | column-reverse |
   | flex-wrap是否换行：nowrap | wrap | wrap-reverse |
   | justify-content主轴对齐方式：flex-start | center | flex end |space between | space-aroundalign-items |
   | align-items辅轴对齐方式：stretch | flex-start |center |flex-end |
   | align-content多轴对齐方式：flex-start | center | flex-end |space-between | space-around |

5.17

小程序页面跳转

1. navigator标签
   | 基本< navigator url="">名称< /navigator > |
   | 重定向< navigator url=" open type=“redirect”> |
   | 底部栏切换< navigator url=" " open-type=“switchTab”> |
   | 返回< navigator open-type=“navigateBack”>返回 < /navigator> |
   | 小程序切换< navigator open-type=“navigateBack”>切换< /navigator> |

2. js跳转
   | 基本页面wx.navigateTo{url}) |
   | 重定向wx.redirectTo({url}) |
   | 底部栏wx.switchTab({url}) |
   | 返回wx.navigateBack() |

3. 配置app.json、配置tabBar
   | {color: 颜色
   selectedColor:选 中文字颜色
   list:[
   {}
   ]} |
   | list:{
   “pagePath”:页面地址,
   “text’”:“标签名”,
   “iconPath”: “图标地址”,
   “selectedlconPath”: "选中图标地址”
   } |

小程序的生命周期

4. onLoad页面加载
   | options页面的参数 |
   | 传递参数url:xxxx?name=mumu&age=18 |
   | 在onLoad里面执行request请求 |

5. onShow页面显示

6. onReady页面渲染完毕

7. onHide页面隐藏

8. onUnload页面卸载

小程序页面的缓存

1. A->B->C：A切换到B页面A页面会缓存B切换到C页面C页面会缓存，总共能缓存5层页面，当执行返回的时候C页面会onUnload销毁，B页面会执行，onShow 显示
2. 如果是用redirect切换。A->B：A会直接销毁， (不能返回)

flex弹性布局项目属性

3. order排序：默认为0，数字越小排列越靠前
4. flex-grow放大：当有多余的空间放大的倍数：0不放大，1自动宽，2占用多余空间2倍
5. flex-shirk缩小：注意结合flex-wrap:no-wrap，默认是0，1自动缩小，2缩小2倍
6. flex-basis基础宽：放大缩小前设置元素的宽

5.24



5.31

页面跳转传参

1. < navigator url=“xxxx?id=docid”>
2. onLoad (options) {// options.id就是传递过来的参数}

条件渲染应用

3. v-if="{表达式}}”
   如果表达式为真，则当前元素渲染，否则则隐藏

4. wx：if

5. wx：else

定位

6. 固定定位：参照元素:屏幕的四个角
   偏移值：left: 50rpx;bottom:50rpx 偏移参照元素的左下角；right: 50rpx; top:50rpx;偏移参照元素的右上角

7. 绝对：参照点: 写过position:relative,absolute,fixed 的父辈元素

8. 相对：参照点是自己
   | 概念：把一元素定位到页面中的某个地方 |
   | 特点：可能会使多个元素重叠在一起 |

层级: z-index

9. 只对定位元素起效
10. 值越大，越被显示在最上面

html转换为微信标签

11. 通过< rich-text >nodes="html内容”
12. wxPrase插件实现

动态的设置页面的标题

1. wx.setNavigationBarTitle({
   title: res.data.title
   })