Tate Blog

iOS Developer

0%

小程序

Posted on In

初识

作为一个移动端iOS开发，小程序也是有必要学习的，学好小程序的基本流程，会发现跟iOS原生开发很多都相似的，比如每个界面都有它的生命周期，数据绑定，响应事件等等，而且微信团队把它封装得非常易用，只要看文档，补充下CSS的知识就可以上手开发。

CSS布局知识

clssname .clssname

1
2
3
4
5
.clssname .clssname{
  float:left;
  height: 100rpx;
  line-height: 100rpx;
}

代表 clssname 里的clssname样式更改

clssname view

1
2
3
4
.clssname view{
  flex:1;
  color:white;
}

代表 clssname 里所有的view样式更改

float 浮动布局

主要让只能竖着排列，变成横着排列，还可以不占位，如果清除浮动就会占位了

  1. 可以写固定高度
  2. 清浮动 clear:none/left,right,both
  3. 当前浮动元素后面补一个盒子，不设置宽高，clear:both
  4. overflow:hidden，让浮动元素计算高度

float

溢出属性

1、溢出属性（容器的）

说明：

overflow：visible/hidden(隐藏)/scroll/auto(自动)/inherit

visible:默认值，溢出内容会显示在元素之外

hidden:溢出内容隐藏

scroll:滚动，溢出内容以滚动方式显示

auto：如果有溢出会添加滚动条，没有溢出正常系显示

inherit:规定应该遵从父元素继承overflow属性的值。

overflow-x:X轴溢出

overflow-y:Y轴溢出

2、空余空间

说明：

white-space:normal/nowrap/pre/pre-wrap/pre-line/inherit该属性用来设置如何处理元素内的空白

normal:默认值，空白会被浏览器忽略

nowrap:文本不会换行，文本会在同一行上继续显示，只要遇到换行标签br/为止

3、省略号显示

说明：

text-overflow:clip/ellipsis

clip:默认值，不显示省略号…
ellipsis:显示省略号…

当单行文本溢出显示省略号需要同时设置以下声明：

  1. 容器宽度：width:200px

  2. 强制文本在一行内显示：white-space:nowrap

  3. 溢出内容为隐藏：overflow:hidden

  4. 溢出文本显示省略号：text-overflow:ellipsis

定位属性（position）

定位 position
个数 书写语法 说明 文档流 偏移位置（top left right bottom）时候的参照物 层叠顺序（z-index）
1 position：static； 默认值 默认 默认 z-index属性是不带单位的，并且可以给负值，没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；
2 position：absolute； 绝对定位 脱离 A）当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏B）有父元素且父元素有定位，父元素
3 position：relative； 相对定位 不脱离 自己的初始位置
4 position：fixed； 固定定位 脱离 浏览器的当前窗口
5 position: sticky; 粘性定位 可以做吸顶效果，粘性定位是css3.0新增加的，兼容不好

浮动与定位属性的区别

1
2
3
4
5
6
7
8
.box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;

            /* position: absolute; */
        }

float文字环绕

1
2
3
4
5
6
7
.box1{
            width: 200px;
            height: 200px;
            background-color: red;
           /*  float: left;*/
            position: absolute; 
        }

position

float: 半脱离，文字环绕
absolute: 全脱离，不会出现文字环绕效果

dispaly弹性布局

弹性盒是一种新的布局方式， 特别适合移动端布局

影响：

  1. 子元素默认横向排列 
  2. 行内元素， 变成了块级元素 
  3. 只有一个元素的时候， margin:auto 自动居中

未完待续。。。

微信授权流程

  1. 判断本地存储是否有手机号信息，如果有直接加入

  2. 没有手机号，判断是否有token信息，如果有，引导调整手机号绑定

  3. 没有token授权信息， 我们引导用户授权页面

  4. 获取授权代码：

    1
    2
    3
    4
    5
    6
    7
    8
    handleAuth(){
        wx.getUserProfile({
          desc: '用于完善会员资料',
          success: (res) => {
            console.log(res.userInfo)
          }
        })
      }