小程序学习笔记2

一只犹豫的忧郁的鱿鱼
752 阅读6分钟

# 路漫漫其修远兮，吾必将上下求索

一、代码组成

代码主要由主体和页面构成。

1.1 主体部分

主体部分由 app.js 、 app.json 和 app.wxss 三个文件组成。

  • app.js 内部编写的变量和方法，属于全局的，任何一个页面都可以访问到。可以监听并处理小程序的生命周期、声明全局变量。页面的js后缀文件可以通过 let app = getApp() 获取其实例，调用其中定义的方法和变量，但不可以调用生命周期的方法

  • app.json 文件是全局配置。内部比较重要的配置：

    • entryPagePath 小程序的初始页面；
    • pages 配置小程序的组成页面；
    • window 状态栏、标题栏、导航条、窗口背景颜色；
    • tabBar Tab栏的样式和对应的页面。

  • app.wxss 公共样式表，可以在其他.wxss文件中直接使用

1.2 页面部分

pages 文件夹里是各个页面，每个界面都是由 .wxml 、.wxss 、.js 和 .json 四个文件组成，四个文件必须是相同的名字和路径。当然 pages 中的子文件夹可以按照页面创建，也可以按照业务逻辑创建

  • wxml 后缀的文件是视图文件，用于编写UI的，只能使用微信的组件库。
  • wxss 后缀的文件是样式表。
    • 样式中的尺寸单位是rpx，是根据750的尺寸相对适应的；
    • 外联样式表时需要使用 @import 的方式，如 @import "外联样式文件相对路径" ，在模板（template）中会使用到;
    • 主体中 app.wxss 中的样式用于全局，每个页面均可以使用。而 wxss 后缀的文件只作用于当前页面，如果和 app.wxss 重名会覆盖。
  • js 后缀的文件是页面的脚本代码。
  • json 后缀的文件是页面的配置文件，与 app.json 不同的是它只能编写 window 的数据，不做任何编写，则使用 app.json 配置项；有做配置，则使用页面配置数据。

1.3 Utils部分

utils 文件夹中包含一些公共的代码抽取的js文件，作为工具类方便使用。通过 module.exports={} 对外暴露参数和方法。

//使用方法：
const constant = require('./constant.js')

二、架构框架

小程序采用的是 MVVM 的架构框架。
把视图UI和业务逻辑隔离开。
由数据驱动UI，视图通过事件影响业务逻辑。

stateDiagram-v2
data:对象
view: 视图
listener:事件
listener --> data
view --> listener
data --> view
  • 数据流向是单向的(视图变化不会影响对象状态)
  • 用户触发事件不仅要考虑当前UI元素更新，还会通过当前元素更新其他视图。
  • 视图上的数据都必须用过事件传递给对象，就是说用户操作视图，才能获取到数据，并更新对象状态

三、生命周期

3.1 小程序生命周期

  • 用户首次打开小程序，触发 onLaunch（全局只触发一次）。
  • 小程序初始化完成后，触发onShow方法，监听小程序显示。
  • 小程序从前台进入后台，触发 onHide方法。
  • 小程序从后台进入前台显示，触发 onShow方法。
  • 小程序后台运行一定时间，或系统资源占用过高，会被销毁。
  • 小程序出错，触发onError

前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台

App({
  //小程序初始化(全局只触发一次)
  onLaunch: function() {},
  //小程序显示
  onShow: function() {},
  //小程序隐藏
  onHide: function() {},
   //小程序错误
  onError: function(msg) {},
})

3.2 页面生命周期

  • 小程序注册完成后，加载页面，触发onLoad方法。
  • 页面载入后触发onShow方法，显示页面。
  • 首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。
  • 当小程序后台运行或跳转到其他页面时，触发onHide方法。
  • 当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。
  • 当使用重定向方法wx.redirectTo()或关闭当前页返回上一页wx.navigateBack()，触发onUnload
Page({
  //加载,只会调用一次
  onLoad: function(options) {},
  //渲染,只会调用一次
  onReady: function() {},
  //显示,每次打开都会调用一次
  onShow: function() {},
  //隐藏,当navigateTo或底部tab切换时调用
  onHide: function() {},
  //卸载,当redirectTo或navigateBack的时候调用
  onUnload: function() {},
})

3.3 小程序和页面生命周期相互影响

  • 小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。
  • 当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。
  • 当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法

四、注意点

  • 系统Tab按钮可以在顶部或者底部，数量为[2,5];
  • TabBar上的ICON大小限制为40KB;
  • 小程序同时只能打开5个页面；
  • 小程序的wx.request请求最开始最大并发数是10个（之前是5）；
  • setData()方法单次数据不能超过1MB；
  • setStroage()本地缓存最大为10MB；

五、路由

微信路由接口有三个，分别是wx.redirectTo、wx.navigateTo和wx.switchTab

小程序三种页面跳转API 的区别在于：

  • wx.navigateTo 不会将旧页面出栈，会将新页面入栈。(栈内元素个数增加，栈内元素5个时，不能再跳转)
  • wx.redirectTo 会将栈顶的旧页面出栈，再将需要跳转到的页面入栈（栈内元素个数不变）；
  • wx.navigateBack(n) 则是将页面栈最后n个元素出栈。

六、数据通信

  • 使用全局变量；
  • 使用本地缓存；
  • URL传递拼接；

七、乱七八糟的疑惑

小程序支持svg和webp文件吗

  • 不支持webp，iOS系统本身不支持webp文件；
  • image的src放远程svg可以，background-image里也可以。

小程序页内支持长按保存图片或分享图片吗

  • 不支持

样式表不支持级联选择器

  • WXSS支持以.开始的类选择器

wx.navigateTo无法打开页面

  • 从项目初期就避免多层级的交互方式，或者使用wx.redirectTo

八、结束

这次尝试小程序主要原因一是公司分配了小程序需求，二是为了接触其他语言，知晓自己缺少什么，什么地方需要去加强学习的，在整个项目的完成过程中，其实感觉到了不同语言的差异还是蛮大的，

希望自己把项目做完的时候，能有所提升，不要仅仅趋于入门新的语言，做好了新项目就结束了，需要不忘初心的不断学习！！！！！

avatar
文章
阅读
粉丝