微信小程序知识点总结

CSS

css选择器

标签选择器

标签名{}  view{}     选择的范围比较广，要慎用！

类选择器

<view class="tittle">  .tittle{}      比较常用

id选择器

<view class="time">   #time{}      比较精确

多类选择器

分开写法：<view class="orange bold">要运动</view>
         .orange{}
         .bold{}
合并写法：.orange .bold{} 选择的元素同时拥有这两个类

后代选择器

<view class="parent">
<text class="son">儿子</text>
<text>没人理睬</text>
</view>
.parent .son{}   子元素会继承父元素的文字属性

css文本属性和段落属性

单位：

 rpx 手机宽度一般为750rpx
 px像素 电脑屏幕宽1920px
 百分百

文本属性

1. font-size 文字大小
2. font-weight 文字粗细：100最细、900最粗、400正常，取值范围100-900
3. font-style 文字样式：italic斜体、normal正常
4. color 文字颜色：英文单词（red,blue,orange)、16进制（#000000黑色,#ffffff白色）、rgb (rgb(0,0,0)黑色、rgb(255,255,255)白色）

段落属性

1. line-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下划线

css布局

普通布局

1. display
   inline; 行元素,横向显示 默认文字内容宽 设置宽高不启用
   block; 块元素，垂直排列 100% 可设置宽高
   inline-block；行内块元素，可水平排列
2. border：1px solid red;
   样式：（none无 solid实线 dotted点 dashed虚线）
   单独设置：border-bottom: 1px solid red;
3. border-radius：50px;
   圆角设置：一个值：四个角一致 俩值：对角 四个值：从左上角顺时针
4. box-shadow：0px 2px 8px #B9BCBF inset
   盒子阴影：X方向 Y方向 模糊 颜色 内阴影
5. padding：内边距，文本到边框的距离
   padding:10px; 四周
   padding:10px 20px; 上下10 左右20
   padding:10px 20px 30px 40px; 依次为上 右 下 左
   单独设置方向：padding-left padding-right padding-top padding-bottom
6. margin：外边距 边框到别的边框的的距离
   margin:10px; 四周
   margin:10px 20px; 上下10 左右20
   margin:10px 20px 30px 40px; 依次为上 右 下 左
   块元素居中：
   <1>元素具有宽度：width:100px;
   <2>元素左右外边距为自动：margin-left:auto; margin-right:auto; margin:10px auto;

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-around
   辅轴对齐方式align-items：stretch、flex-start、center、flex-end
   多轴对齐方式align-content：flex-start、center、flex-end、space-between、space-around

定位

概念：把一个元素定位到页面的某个地方
特点：可能会使多个元素重叠到一起

• 固定定位：参照元素：屏幕四个角
  偏移值：
  left:50rpx; bottom:50rpx偏移参照元素的左下角
  right:50rpx; top:50rpx偏移参照元素的右上角
• 绝对定位：参照点：写过的position:relactive,absolute,fixed的父辈元素
• 相对定位：参照点是自己

模板语法

1. 文本渲染

{{msg}}

2. 条件渲染

data:{isLog:true}
<view wx:if="{{isLog}}"欢迎回来</view>
<view wx:else="{{isLog}}"请登录</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"})
}

条件渲染应用

vx-if="{{表达式}}" 如果表达式为真，则当前元素渲染，否则隐藏
wx:el if
wx:else

更新视图与数据

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)
this.setData({list})

3. list数据删除

<text bindtap="deleteHD" data-index="{{index}}">*</text>
deleteHD(e){
    var index=e.currentTarget.dataset.index;//获取事件参数index值
    var list = this.data.list;//获取list数据
    list.splice(index,1);//从index删除一个
    this.setData({list})//更新列表
  }

网络请求

1. 网络请求

wx.request({
           url:“请求的地址”,
           success(res){
              res请求成功后返回的数据
           }
         })

2. 下拉刷新

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

3. 上拉触底

onReachBottom: function () {
    this.getJoks(2);
  },

4. 数组合并

  A.concat(B)
  A+B
  B.concat(A)
  B+A

5. 本地存储

存  wx.setStorageSync('page',that.data.page)
取  var page = wx.getStorageSync('page') 

页面跳转

1.navigator标签

• 基本

<navigator url="/pages/ / ">名称</navigator>

• 重定向

<navigator url="/pages/ / " open-type="redirect"> </navigator>

• 底部栏切换

<navigator url="/pages/ / " open-type="switchTab"></navigator>

• 返回

<navigator open-type= " navigateBack" > </navigator>

• 小程序切换

<navigator open-type= " navigateBack" > </navigator>

2. js跳转

• 基本页面 wx.navigateT{ur})
• 重定向 wx.redirectTo((url))
• 底部栏 wx.switchTab({url})
• 返回 wx.navigiateBack(url))

配置

"selectedColor": "#01baf2", 颜色
"color": *999999"，文字颜色
"list": [{}]
list最少2个 ,最多5个
list:{
"pagePath": "pages/index/index",
"text": "标签名"
"iconPath": "/images/t1.png".
"selectedIconPath": "/images/t1-h.png"
}

3. 页面跳转传参

<navigator url="xxxx?id=youid ">
onLoad(options){
//option.id 就是传递过来的参数
}

生命周期

• onLoad 页面加载
  options页面的参数，传递参数 url:xxx?name=gaowenfei&age=20，在onload里面执行request请求
• onShow 页面显示
• onReady 页面渲染完毕
• onHide 页面隐藏
• onUnload 页面卸载

页面缓存

• A->B->C A切换到B页面，A页面会缓存，B切换到C页面，B页面会缓存，总共能缓存5层页面
  当执行返回的时候，C页面会onUnlod 销毁，B页面会执行 onShow页面显示
• 如果是用redirect切换 A->B ，A会直接销毁（不能返回）

层级

z-index：只有定位元素起效；值越大，越被显示在最上面

HTML转换成微信标签

1. 通过 nodes=“html内容”
2. wxPrase插件显示

动态设置页面标题

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