微信小程序知识点总结

目录

4.19笔记

  小程序

  css文本属性

  段落属性

 CSS单位

 4.26笔记

  小程序

  css

5月10笔记

  小程序

  CSS

  flex弹性布局

5月24笔记

  小程序页面跳转 

  小程序生命周期

  flex弹性布局项目属性

5月31笔记

  页面跳转传参

---

4.19笔记

  小程序

1.  小程序标签：view、text、image
2. 小程序的组成：js、css、xml、json

  css文本属性

1. font-size 文字大小
2. font-weight 文字粗细
3. font-style 文字样式
4. color 文字颜色

  段落属性

1. line-height 行高
2. text-align 文本对齐方式
3. text-indent 首页缩进
4. text-decoration 文本装饰

 CSS单位

1. rpx 手机宽度750rpx
2. px 像素
3. 百分比

 4.26笔记

  小程序

1.  表单的双向绑定 

   inputHd(e){

      this.setData({msg:e.detail.value})

   }

2. list数据添加

   var list = this.data.list;

   list.unshift(this.data.msg)

   // unshift 把数据添加到list数组最前面

   this.setData({list})

3. list数据删除

   x

   delHd(e){

   var index = e.currentTarget.dataset.index;

   // 获取到参数

   var list  = this.data.list;

   // 获取列表

   list.splice(index,1);

   //  从数组list删除index对应的元素

   this.setData({list})

   // 更新数据

   }

  css

1.     块元素display
       block
   块元素
           垂直排列
           宽默认100%
           可以设置宽高
       inline
   行元素
           水平排列
           宽默认文字内容宽
           设置宽高不启用
       inline-block
   行内块块元素
           是块元素，可以水平排列
2. border
       简写
           border：1px solid red;
       border-style
   边框样式
           none
   solid 实线
   dotted点
   dashed 虚线
       单独设置
           border-bottom:1px solid red;
3. border-radius
   边框-圆角
       2 个值  对角线圆角
       4 个值 左上 顺时针
       当元素是正方向，设置圆角的值是宽度1半，正好就绘制一个正圆
4. box-shadow
   盒子阴影
       0 3px 5px #ccc   inset
   x偏移  y偏移 模糊  颜色  内阴影
5. padding
   内边距
       文本（子元素）到边框的距离
       padding:10px 四周
       padding：10px 20px; 上下内边距10 左右内边距20
       padding:10px 20px 30px 40px  ; 上  右 下 左
       单独设置方向
           padding-left:10px
           padding-top:20px；
   padding-right:30px;
   padding-bottom:15px
6. margin
   外边距
       边框到别的边框的距离（ 任何元素不管写不写有没有颜色，都是存在边框的）
       margin:30px;  四周30
   marign:10px 30px  上下10px间距  左右30
       margin:10px 20px 30px 40px  上 右 下 左
       块元素居中
           1. 元素具有宽度  width:220px;
           2. 元素左右外边距为自动
               margin-left:auto;
   marign-right:auto;
               margin:10px auto;

5月10笔记

  小程序

1. 网络请求  wx.request({url:"请求地址"})，success（res）{res请求后返回的数据}
2. 下拉刷新 页面json配置 “enablepullDowenRefresh”:true
3. 上拉触底 允许下拉刷新  onPulldownRefresh:function(){ this.getjoks();}
4. 数组合并 A.concat(B)  A+B B.concat(A) B+A
5. 本地存储 

  CSS

1. display元素类型
2. 边框属性 border
3. 内边距 padding
4. 外边距 margin
5. 圆角 border-radius
6. 背景 background-color:
7. 盒子阴影 box-shadow:0

  flex弹性布局

1. 概念：容器display：flex
2. 容器属性：布局方向：flex-direction  是否换行：flex-wrap  主轴对齐方式：justify-content  辅轴对齐方式：align-iteams

5月24笔记

  小程序页面跳转 

1.  navigator标签 
2. js跳转 基本页面wx.navigateTo{{url}}
3. 重定向 wx.redirectTo(url)
4. 底部栏 wx.switchTab(url)
5. wx.navigateBack() 返回

  小程序生命周期

1. onLoad 页面加载
2. onShow 页面显示
3. onReady 页面渲染完毕
4. onHide 页面隐藏
5. onUnload 页面卸载

  flex弹性布局项目属性

1.  order 排序 默认为0 越小越靠前
2. flex-grow 放大
3. flex-shirk 缩小
4. flex-basis 基础宽

5月31笔记

  页面跳转传参

1. onload(options.id){"参数"}
2. 条件渲染应用 v-if“”{{表达式}}“    wx：else if wx：else
3. 定位：固定定位   绝对定位  相对定位
4. 层级：z-index
5. html转换微信标签 ①通过    ②wxPrase插件实现
6. 动态的设置页面标题 wx。setNavigationBarTitle{{title：res.data.title}}