一个大四学长分享自己的web前端学习路线--小程序篇(3/3)

简介: 小程序文件类型分别有:样式(WSCC)、骨架(WXML)、业务(js)、配置(json)。但是注意的是:其实小程序开发虽然和web开发方式差不多,但是底层的原理根本不一样。

一、📃 基础知识

1.1  📝了解什么是小程序文件类型

  小程序文件类型分别有:样式(WSCC)、骨架(WXML)、业务(js)、配置(json)。但是注意的是:其实小程序开发虽然和web开发方式差不多,但是底层的原理根本不一样。小程序可以有多个page页面,全局文件名是不能乱改的。我们可以参考一下的两个原理模式图:

2345_image_file_copy_312.jpg

1.2  📝学会behavior行为

   这个行为存在的问题是:组件对于这种需要重复的属性data甚至方法,有没有提供什么可复用的机制呢?一种类似mode的class继承。解决的问题:组价的复用就是通过behavior即行为,就是给多个组件定义共同的行为,我们在组件的classic文件夹下面建一个classic-beh.js文件,behavior({})和我们的组件很类似,关键字不同而已。

   实现:我们把重复的东西复制进来(这里是吧图片和文字放进来)behavior是一个构造器,里面可可以定义属性data方法甚至生命周期函数,我们需要有一个变量来接收他。

let classicbeh-Behavior({
   propertles:{
  img:String,
  title:String
}
})
export {classicbeh}
//component/classicbeh/movie/index.js
import {classicbeh}from '../classicbeh.js'
Component({
   //组件属性列表
behaviors:[classicbeh],
propertles:{
}
})

 作用:虽然目前只有两个属性,但是其实可以方便我们以后的改进,如果这些改进的是可复用的话,我们就直接写behavior,不需要一个个改动。另外来说,单一的项目业务有限,体现不了behavior的作用,如果我们是多个项目甚至自己的组件库,抽象了公用特性的behavior就可以应用到当中去。

 注意:behavior这种就是面向对象的继承(支持多继承)的思想,而我们ES6写的那个class只能支持单继承〈大多数语言也是如此)Python就是多继承(相对复杂了,要考虑的东西就很多了,包括同名的问题,继承多个具体是继承哪一个)。

behavior覆盖规则:

组件中定义的属性会覆盖行为中的同名属性(子类覆盖父类的属性)组件中定义的属性会覆盖继承的所有行为中的同名属性

组件没有属性,多个行为的属性由最后一个行为的属性决定组件的屈性。方法和数据也大抵如此

特例:生命周期函数不会发生覆盖,依次执行行为和组件的生命周期函数!

1.2  📝wx:了解if和hidden的区别

wx: if是惰性的如果一开始是flase就什么也不做,当第一次变真才会开始局部渲染。

而hidden就比较实诚,始终会渲染。所以需要频繁切换选择hidden比较好,如果是一加载就很少去改变的选择wx: if比较好,当然,理论上是这样的

每次执行wx: if都会去执行一次完整的生命周期(就隐藏显示改变的时候就重新渲染)。

而hidden是初始化后就直接控制显示隐藏(仅仅是加一个样式隐藏显示,没有重新渲染)。

二、📃 高级知识

2.1  📝小程序渲染层与逻辑层交互原理

2.1.1网页和小程序的区别

渲染层和逻辑层,网页上分别对应hticss与js (小程序就wrsswXml与js了),而网页上两者是互斥的,就是说我渲染界面就不会执行脚本,我执行脚本就不会渲染页面,所以开发的时候很容易遇到因为其脚本需要加载较长时间导致网页失去响应(因为单线程js》。小程序的话两者是分开的,分别运行在不同的线程中!(因为融合了两个技术,并非纯粹的web技术,我想应该是多线程! )

2345_image_file_copy_313.jpg

2.1.2渲染层和逻辑层的关系

native是系统层(微信客户端),两者交互要通过系统层,并非直接交互,同时可以通过整个微信客户端与第三方服务器交互。渲染层里面就是一个个页面麻,而逻辑层是一个个脚本和AP什/么的,如小程序里面的AP方法是注册整个程序,而Page方法是注册当前的页面,geApp()则是获取app的实例对象,getCurrentPages ()获取当前的页面栈!两个层交互就是通过native系统层,可以通过里面的jsBridge调用微信能力什么的。

 我们看看两个层具体怎么交互,其实我在渲染层触发一个事件后,是先到系统层的,再由系统层传给我们的逻辑层,在逻辑层完成业务逻辑的处理,操作完后的数据先返回系统层,再由系统层传递给我们的渲染层完成显示!所以小程序很忌讳频繁操作setData,因为会频繁的通过系统层操作((就一套流程走下来),很容易卡死小程序,所以对于不需要在页面展示的数据我们一般不定义在data中,避免走一套流程浪费资源。

2345_image_file_copy_315.jpg2345_image_file_copy_316.jpg

2.2  📝小程序运行机制与更新机制

2.2.1 运行机制相关定义

  1. 冷启动:用户第一次打开小程序或小程序被官方销毁我们打开也相当于第一次打开;
  2. 热启动:用户打开过,在一定时间内再次打开其实并不是重新打开仅仅是在后台拿到前台而已。
  3. 前台:小程序运行的时候就是前台;
  4. 后台:我们点击小程序上面的圆圈退出小程序,这个时候是挂载后台;
  5. 销毁:小程序在进入后台后悔存活五分钟,五分钟后被微信销毁,另一种情况的话,笑成废墟占用了太多系统资源会被系统/微信收回。

2.2.2 更新机制

更新实现:小程序初始化完成就会触发这个app中的onLaunch,我们可以在这里封装一个检查版本的方法。 更新实现:小程序初始化完成就会触发这个应用程序中的on Launch,我们可以在这里封装一个检查版本的方法。

  我们可以调用微言自带的检直更拼管理器,通过首理器的方法检夏更新,如果有更新我门就调用更新完成的方法,并且给用户提示是否更新,如果是,我们就重启并目应用更新,这个也是有方法的,通过调用该方法就可以更新版本!

2.3  📝小程序性能与体验优化

 渲染耗时长可以查看渲染区域,进行合理的缩减;脚本的话要看看逻辑是不是写错了,优化一下﹔网络请求是要等待的,等待过长也不好;不再使用的代码(如以前的样式)应该删除;资源请求有http (采用明文进行传输容易被募改,不推荐)和https(比较安全,推荐)﹔不可能访问的页面如dem就可以删掉了,平白添加包的体积而无用;

 定时器是全局的,记得手动销毁(特别是页面跳转时)﹔点击态参考我们的navigatoro那里,采用了hover-class解决;惯性滚动会让人感觉比较流畅,ios添加相应代码,安卓自己有;异常和正常是为了不影响正常的交互;请求耗时那个可以加一个showloading,修改服务器的一些逻辑;图片请求数量可以通过使用字体图标提高加载速度。

2.4  📝了解setData工作原理

  执行表现: setData里面的回调函数是异步的,遵循事件队列(可以把它看成promise,执行完一个宏任务再说),当然我们可以马上在his.data取到设置的值(因为同步啊! ) 执行表现:setData里面的回调函数是异步的,遵循事件队列(可以把它看成承诺,执行完一个宏任务再说),当然我们可以马上在他的.Data取到设置的值(因为同步啊!)

  修改对象中的属性:关于修改对急某个属性值是怎么搞,当然不能直接对象:(要改的届性:值}这样子会重新指向一个新的对象,覆盖原本的对象。所以如果只是修改其中某个属性的值应该是[‘对象.属性’]:值取修改,就不会影响原本的其它属性。 修改对象中的属性:关于修改对急某个属性值是怎么搞,当然不能直接对象:(要改的届性:值}这样子会重新指向一个新的对象,覆盖原本的对象.所以如果只是修改其中某个属性的值应该是[‘对象.属性‘]:值取修改,就不会影响原本的其它属性.

changeAge(){
   this.setData({
   testObj:{
   age:34
}
})
}
changeAge(){
this.setData({
['testObj,age']:34
})

2.5  📝了解场景值scence的作用也应用场景

   定义:场景值就是描述用户怎么进入小程序(6O多种),具体的场景值列表看看文档效可以了,常见者如101通过发现那里进入、1011扫描二维玛进入;1035公众号进入。106Ap分享的消息卡片。 定义:场景值就是描述用户怎么进入小程序(6O多种),具体的场景值列表看看文档效可以了,常见者如101通过发现那里进入、1011扫描二维玛进入;1035公众号进入.106 Ap分享的消息卡片。

作用:这些场晨值一个作用的是作为用中行的遇点(记是用户行为,提明用户行为分析数据)另一个作用进行分流。

2.6  📝了解页面收录sitemap.json的作用和使用的方法

定义:19年3月未出的,有了它可以方便我们通道过程敲的内容进行搜索(就不仅是小程字各字和简介了)相当于优化了搜莱引擎。前往微信公众平台配晋小程京信息,认是开自次最没置的,别人推索就会搜索到我们了。 定义:19年3月未出的,有了它可以方便我们通道过程敲的内容进行搜索(就不仅是小程字各字和简介了)相当于优化了搜莱引擎.前往微信公众平台配晋小程京信息,认是开自次最没置的,别人搜索就会搜索到我们了.

  前往微信公众平台配置小程序信息,默认是开启收录设置的,别人搜索就会搜索到我们了。 前往微信公众平台配置小程序信息,默认是开启收录设置的,别人搜索就会搜索到我们了.

我们在项目里设置一下,最外面是一个阿接,dec是内容简介,nle是规则对应一个数组,里国每个对象相当于一个规.(sctioni没置允许被案引与否,page表示收入索引的界面)被索引界国会在consol里国有是示.如果我们不想某个页面被收录怎么办?很简单,设置为disallow,然后是不想被收录的页面即可! 我们在项目里设置一下,最外面是一个阿接,Dec是内容简介,NLE是规则对应一个数组,里国每个对象相当于一个规.如果我们不想某个页面被收录怎么办?很简单,设置为不允许,然后是不想被收录的页面即可!

三、📃 性能优化

3.1滚动触底再去加载新数据

问题1∶要是我们滑动的巨快,它发送请求拿到的会是一样的内容,就太快了,没有拿到的时候就已经下一次滑动了,连续执行了几次相同的请求。出现重复数据要是我们滑动的巨快,它发送清求拿到的会是一样的内容,就太快了,没有拿到的时候就已经下一次滑动了,连续执行了几次相同的请求,出现重复数据。

解决:本质就是用户同时发服务器发送了两次请求,我们应该限制一下,一次只发送一个请求,要发下一次要等这一次搞定才行,使用可以利用锁。

问题2∶我们会发现如果我们所有的数据都加载完了,我们要是还是触底的话,还是会一直发送请求的,虽然没有数据了。.。所以这就是向服务器发送无效的请求,是浪费服务器的性能.

解决:难点就是怎么去判断,有两种法,一种是榜辑返巨tora的值是否等于动门的数组的长度,以此可以解去。另一种是匙刻列例的接强我扪门的cocx组合后成期组是至北空蛛制)断,为如果超了,我的顿数激统空了6,,这个忖的能么cne.两种方法各有缺陷和好处,tota是比较严谨的但是不能保证我们的AP)也有总记录数。利用数组的话可以不需要total,,但是太绝对了,万一请求错误的就会判断为没有数据还能加载了。

目录
打赏
0
0
0
0
63
分享
相关文章
|
8天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
68 6
2022年前端学习路线(个人认为)
本文提供了一条前端工程师的学习路径,分为三个阶段。第一阶段(1-2个月)重点掌握HTML、CSS、JavaScript及H5+CSS3,目标是能够构建基本的静态网页。第二阶段(2-3个月)深入Node.js、Git、Webpack及相关工具和规范,提升项目管理和构建能力。第三阶段(4-6个月)专注于Vue、React、Angular等主流框架,以及uni-app和微信小程序的开发,旨在实现跨平台应用的开发能力。每个阶段都有详细的课程推荐,帮助初学者逐步成长为合格的前端工程师。
41 1
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
27 0

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
    90
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    14
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    2
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    44
  • 5
    详解智能编码在前端研发的创新应用
    16
  • 6
    巧用通义灵码,提升前端研发效率
    30
  • 7
    智能编码在前端研发的创新应用
    40
  • 8
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
    23
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    8
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
    6
  • 1
    Burp Suite Professional 2025.2 (macOS, Linux, Windows) - Web 应用安全、测试和扫描
    25
  • 2
    AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
    19
  • 3
    【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
    54
  • 4
    部署使用 CHAT-NEXT-WEB 基于 Deepseek
    333
  • 5
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 6
    java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
    40
  • 7
    零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
    28
  • 8
    【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
    20
  • 9
    FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
    53
  • 10
    springSecurity学习之springSecurity过滤web请求
    60
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等