微信小程序开发 -页面布局介绍- 附简单小程序实例(底部)

小程序实例

关于移动端分辨率

  • 将不同尺寸的设计图,按照一定的比例,完美的显示在页面之中

pt

  • 逻辑分辨率
  • 和屏幕的物理尺寸有关
  • 长度和视觉单位

px

  • 物理分辨率
  • 不是长度相关的单位
  • 1px就是一个像素点
  • 1 pt物理尺寸下有多像素点(px)

Reader

  • 求每一个pt下面包含了多少个px

PPI(DPI)

  • 利用分辨率什么的实用勾股定理算出的数值

关于rpx–小程序的自适应单位

  • 1个pt可以有一个px构成,也可以有2个,或者更多
  • iPhone6下2个px构成一个pt

如何做不同分辨率设备的自适应

  • 以iPhone6的物理像素750X1135为视觉稿进行设计,在小程序中实用rpx为单位
  • iPhone6 1px = 1rpx = 0.5pt

为什么实用iPhone6的物理分辨率来做设计

  • iPhone6 下 1px = 1rpx
  • iPhone6plus 1px = 0.6rpx
  • 小程序官方推荐使用iPhone6来进行设计
    并不是所有的单位都适用rpx

开启项目

  • 创建一个纯净的项目模板
  • 配置app.json创建目录
    • wxml是编写小程序的结构文件
    • div是在HTML中书写结构的文件
  • 小程序内的单位rpx
    • rpx与750px设计图是1 :1的 可以直接实用rpx来实现效果图的样式

制作项目启动页面

  • 使用display: flex;布局,快速完成页面排版
  • 在wxss中书写类名样式,无需在wxml文件中引入,直接添加类名即可实用效果
  • rpx能够适用于各种不同的机型分辨率,强烈建议使用
  • 修改样式,在app.wxss中设置全局样式
  • 设置启动页样式(按照psd设计图还原)
  • 页面默认的容器–pege(类似于html标签)
  • 配置页面导航栏顶端效果(修改json文件中的window配置)

使用Swiper组件构建轮播图

  • 修改swiper标签样式调整轮播图
  • 设置image图片大小
  • 自定义轮播整体样式,小点,时间,等

修改页面配置文件 .json

  • 因为页面配置文件只能修改window内的样式。所以在页面配置文件内不需要添加windo

构建新闻列表

  • 结构分析
  • 使用弹性盒子布局 display:flex
    • 纵向排列 flex-direction: column;
  • 如果控制两个元素的水平间距–》rpx 如果是垂直间距的可以使用px
  • 设置文字和图片的居中 vertical-align: middle;
  • 设置文字间距 letter-spacing: 2rpx;
js文件结构与Page页面的生命周期
数据绑定 {{}}
  • 小程序取消了dom节点,及其操作
  • 但是通过{{}} 可以绑定js文件内data对象内声明的变量
  • 小程序内的数据绑定,并不是双向数据绑定的
  • 小程序内需要使用this.setData({}) 对改变的变量重新复制,手动完成双向数据绑定
  • 使用block标签 包裹要循环的内容
    • block类似与一个括号,将内容包裹起来
  • 使用wx-for 循环创建新闻列表

    事件绑定
  • 绑定事件 bind || catch

    • 使用wx.navigateTo({}) wx.redirectTo({})方法 改变页面路径,完成跳转
      • wx.navigateTo 保留当前页面,跳转到应用内某个页面,可以返回当前页面
      • wx.redirectTo 关闭当前页面,跳转到应用内某个页面
  • bind 事件绑定不会阻止事件向上冒泡

  • catch 事件绑定可以阻止冒泡事件向上冒泡

进入GitHub查看简易demo

你可能感兴趣的:(微信开发)