微信小程序开发笔记

更新时间:2020-11-12 15:48:04点击次数:361次
1.向容器添加背景色以显示问题
微信小程序整页设置风格问题
2.图像组件9种图片切割和4种缩放模式
如果将一个元素的宽度和高度分别设为340rpx和100%(iphone  6下为750rpx),那么冰淇淋图片的素材原始高度分别为600px和750px。
在实际项目中,我们经常需要面对原图尺寸与设计图中不同的情况(尤其是原图高度未知且不固定的情况,比如从网络上动态获取图片)。在这种情况下,我们必须放弃,或者放弃同等比例,或者剪去一部分画面。接受不完美,这也是编程中一个重要的心态,比如选择,需要看业务需求。
小程序的图像组件提供了四种缩放模式和九种裁剪模式来支持我们的选择。
MINA(MVVM):小程序页面设计的框架结构
MINA(MINA不是APP)是开发和使用微信小程序的框架
整个系统分为两部分:视图层和逻辑层。
MINA可以保持数据与视图同步,这很简单。修改数据时,逻辑层只需要修改数据,视图层也会相应更新。(通过this.setData同步数据)
3.页面的生命周期
页面的生命周期是怎样的?就像一个人的成长需要分为出生、童年、青年、中年、老年,一页纸从创作到卸载会经历以下五个循环:
加载。显示、渲染、隐藏、卸载
MINA框架提供了五个生命周期函数来监控这五个特定的生命周期,这样开发人员就可以在这些特定的时刻执行他们自己的代码逻辑。它们是:
OnLoad监控页面加载,一个页面只能被调用一次。
OnShow监控页面,每次打开页面时都会调用该页面
OnReady监控页面的第一次呈现,并且一个页面将只被调用一次,这意味着该页面已经准备好与视图层交互
在监视器页面上隐藏
卸载监视器页面卸载
您可以在page()方法中演示这些页面的生命周期
页面({
data:{},
onLoad:function(选项){
Console.log('onLoad:页已加载')
},
onShow:函数(){
Console.log('onShow函数已加载')
},
onReady:函数(){
Console.log('onReady函数已加载')
},
onHide:函数(){
Console.log('已加载内置功能')
},
onUnload:函数(){
Console.log('onUnload函数已加载')
{}
})
有两个函数,onHide和onUnload,需要执行一些API操作。例如,当页面通过标签栏、导航到方法切换页面时,或者当后台按钮被小程序切换时,会执行onHide功能;当页面执行重定向到或导航返回时,执行onUnload函数。
当然,我们也可以将任意数据和函数添加到这个Page方法的Object参数中,并在页面的函数中使用它来访问这些自定义数据或函数
你不需要马上完全理解下面的内容,但是后面会有帮助。
生存期
页面实例的生命周期
从上面的图示可以看出,
OnLoad、onShow和onReady按顺序执行
OnLoad和onReady在整个页面生命周期中只会执行一次(除非通过执行onnload来卸载此页面)
在一个生命周期中,待命和待命可以执行多次。
除了页面的第一次呈现之外,页面可能会被重新呈现几次,并且数据更新将导致页面被重新呈现。这里需要注意的是,applet只在第一次渲染完成后提供onReady的监控功能,并没有为以后的rendering提供相应的监控功能。因此onReady只用于监控“第一次渲染”的完成情况。
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息