小程序
像费曼%
这个作者很懒,什么都没留下…
展开
-
关于小程序TabBar跳转页面跟TabBar标签栏的icon不对应的分析(debug)
在写代码时,出现wx.switchTab跳转页面后,但对应的TabBar栏目下的active的小图标却跟要跳转的页面不对应,查了资料是因为wx.switchTab跳转时不会刷新页面,导致数据和页面不同步。解决的办法是,将需要用到的数据全局共享,而不是仅仅定义在一个页面。...原创 2022-08-02 10:57:09 · 631 阅读 · 0 评论 -
小程序组件总结
总结原创 2022-08-02 00:06:50 · 58 阅读 · 0 评论 -
小程序--独立分包&分包预下载
独立分包本质上也是分包,只不过它比较清晰,可以独立于主包和其他分包而独立运行。4.独立分包的配置方法(“independent"true)6.1分包预下载指的是在进入小程序的某个页面时,,从而提升进入后续分包页面时的启动速度。由框架自动预下载可能需要的分包。2.独立分包和普通分包的区别。,在app.json中,使用。共同的预下载大小限额为2M。会在进入指定的页面时触发。preloadRule节。3.独立分包的应用场景。6.3分包预下载的限制。同一个分包中的页面享有。6.2配置分包预下载。...原创 2022-08-01 10:26:02 · 236 阅读 · 0 评论 -
小程序--分包
非tabBar页面可以按照功能的不同,划分为不同的分包之后,进行按需下载。subpackages之外的目录将被打包到主包中。,在构建时打包成不同的分包,用户在使用时。tabBar页面需要放到主包中。优化小程序首次启动的下载时间。当用户进入分包内某个页面时,客户端会把对应分包下载下来。都被打包到了一起,导致。4.分包后项目的构成。在小程序启动时,默认会。,下载完成后在进行展示。3.分包前项目的构成。分包前,小程序项目中。8.如何查看包的体积。...原创 2022-08-01 00:09:23 · 490 阅读 · 0 评论 -
小程序-全局数据共享
全局数据共享(又叫状态管理)是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有Vuex、Redux、Mobx等。可使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享。把Store中的共享数据或方法,绑定到组件或页面中使用。5.将store中的成员绑定到页面中。注意Mobx相关的包安装后,记得。6.将store成员绑定到组件中。2.小程序中的全局数据共享方案。4.创建Mobx的Store实例。在组件中使用Store中的成员。...原创 2022-07-30 17:27:06 · 664 阅读 · 1 评论 -
小程序npm包--API Promise化
在小程序中,实现APIPromise化主要依赖于miniprogram-api-promise这个第三方的npm包。APIPromise化,指的是通过额外的配置,将官方提供的、基于回调函数的异步API,的异步API,从3.而提高代码的可读性、维护性、避免回调地狱的问题。缺点容易造成回调地狱的问题,代码的可读性、维护性差!4.调用Promise化之后的异步API。1.基于回调函数的异步API的缺点。2.什么是APIPromise化。升级改造为基于Promise化。3.实现Promise化。...原创 2022-07-29 22:23:54 · 380 阅读 · 0 评论 -
小程序使用npm包定制全局样式
2.定制全局主题样式。原创 2022-07-29 21:40:29 · 129 阅读 · 0 评论 -
小程序使用npm包
VantWeapp是有赞前端团队开源的一套小程序UI组件库,助力开发者快速搭建小程序应用。它所使用的是MIT开源许可协议,对商业使用比较友好。安装完Vant组件库之后,可以在app.json的usingComponent节点中引入需要的组件,即可在wxml直接使用组件。目前,小程序中已经支持使用npm安装第三方包,从而来提高小程序的开发效率。1.小程序对npm的支持与限制。2.什么是VantWeapp。根据官方文档安装步骤安装即可。3.安装Vant组件库。4.使用Vant组件。...原创 2022-07-29 18:03:13 · 564 阅读 · 0 评论 -
小程序组件的总结
小程序组件的总结原创 2022-07-29 17:03:26 · 54 阅读 · 0 评论 -
自定义组件-behaviors
3.2在组件中,使用require()方法导入需要的behavior,挂载后即可访问behavior中的数据或方法,实例代码(在组件.js页面)3.1调用Behavior(Objectobject)方法即可创建一个共享的behavior实例对象,供所有的组件使用。组件引用它时,它的属性、数据和方法会被合并到组件中。behaviors是小程序中,用于实现组件间代码共享的特性,类似于Vue.js中的‘mixins’每个组件可以引用多个behavior,behavior也可以引用其他behavior。...原创 2022-07-29 17:00:53 · 319 阅读 · 0 评论 -
React--组件通讯
组件是独立且封闭的单元,默认情况下,只能使用自己的数据。在组件化过程中,我们将一个完整的功能拆分为多个组价,以更好的完成整个应用的功能。而在这个过程中,多个组件不可避免地要共享某些数据。为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通,这个过程就是。思路利用回调函数,父组件提供回调,子组件调用,将要传递的数据作为回调函数的参数。props的作用接收传递给组件的数据。4.1父组件传递数据给子组件。3.组件props的特点。4.2子组件传递给父组件。2.组件的props。...原创 2022-07-27 19:54:57 · 60 阅读 · 0 评论 -
自定义组件--父子组件之间的通信
可在父组件里调用this.selectComponent("class或id选择器"),获取子组件的实例对象,从而直接访问子组件的任意数据和方法。父组件还可以通过this.selecteComponent()获取子组件实例对象。属性绑定用于实现父向子传值,而且只能传递普通类型的数据,无法将方法传递给子组件。用于父组件向子组件指定属性设置数据,仅能设置json兼容的数据。用于子组件向父组件传递数据,可以传递任意数据。这样就可以直接访问子组件中的任意数据和方法。1.父子组件之间通信的3种方式。...原创 2022-07-26 23:59:22 · 203 阅读 · 0 评论 -
自定义组件--插槽
1.在自定义组件的wxml结构中,可以提供一个节点(插槽),用于承载组件使用者的wxml结构。可以在组件.wxml中使用多个标签,以不同的name来区分不同的插槽。1.2在小程序中,默认每个自定义组件中只允许使用一个进行占位,这种。在小程序的自定义组件中,需要使用插槽时,可以在组件的js文件中启用。来将节点插入到不同的中。带有多个插槽的自定义组件。...原创 2022-07-26 21:42:45 · 353 阅读 · 0 评论 -
自定义组件--纯数据字段&组件的生命周期
1.1 概念:纯数据字段指的是那些不用于界面渲染的data字段应用场景:在有些情况下,某些data中的字段既不会展示在界面上,也不会传递给其他组件,仅仅在当前组件内部使用,带有这种特性的data字段适合被设置为纯数据字段 好处:纯数据字段有助于提升页面更新的性能(不懂怎样提升页面的更新性能)1.2 使用规则在构造器的options节点中,指定pureDataPattern为一个正则表达式,字段名符合这个正则表达的字段成为纯数据字段 2.1组件全部可用的生命周期函数 2.2lifetimes节点在小程序原创 2022-07-26 14:12:35 · 284 阅读 · 0 评论 -
自定义组件--数据监听器
1.数据监听器是用来监听和响应任何属性和数据段的变化,从而执行特定的操作。它的作用类似于Vue中的watch监听器。5.如果某个对象中需要被监听的属性太多,为了方便,可以使用通配符“**”来监听对象中所有属性的变化。3.数据监听器支持监听对象中。2.数据监听器的基本用法。...原创 2022-07-26 10:22:18 · 192 阅读 · 1 评论 -
小程序自定义组件-数据,方法和属性
由于data数据和properties属性在本质上没有任何区别,因此properties属性的值也可以用于页面渲染,或使用setData为properties中的属性赋值。在小程序组件中,properties是组件的对外属性,用来接收外界传递到组件中的数据,实例代码如下(使count数值最大为10)在小程序的组件中,properties属性和data数据的用法相同,它们都是。5.用setData修改properties的值。4.data和properties的区别。3.properties属性。...原创 2022-07-25 18:34:53 · 464 阅读 · 0 评论 -
自定义组件--样式
默认情况下,自定义组件的样式隔离特性能够防止组件内外样式互相不干扰的问题,可以通过styleIsolation修改组件的样式隔离选项,页面wxss样式将影响到自定义组件。3.修改组件的样式隔离选项。...原创 2022-07-25 16:50:05 · 179 阅读 · 0 评论 -
小程序创建组件
从表面看,组件和页面都是由.js.json.wxml.wxss这四个文件组成。1.3全局应用(在app.json文件中配置)根据组件的使用频率和范围,选择合适的方式。1.4全局引用vs局部应用。1.5组件和页面的区别。原创 2022-07-22 10:42:29 · 244 阅读 · 0 评论 -
小程序navigator无法跳转(debug)
将"shoplist"页面提前到tabBar页面下,神奇的一幕出现了,页面可以跳转了。我也不知道原理是什么,知道的小伙伴可以在评论区留下你们的思考。在排查网上列举出来的可能出现错误的原因后,如果还出现错误时,请往下看。debug有时候真的很痛苦,而且控制台也不报错!...原创 2022-07-21 09:59:26 · 191 阅读 · 0 评论 -
小程序:wsx脚本
wxml文件中的标签,必须提供module属性,用来指定当前wxs模块的名称,方便在wxml中访问模块中的成员。wxml无法调用.js的函数,但可以调用wxs中定义的函数。因此小程序中wxs的典型应用场景是“3.1内联wxs代码可以编写在wxml文件中的标签内。2.wxs与JavaScript的关系。1.wxs的应用场景。...原创 2022-07-19 21:24:08 · 393 阅读 · 0 评论 -
小程序:生命周期
生命周期函数的作用允许程序员在特定的时间点,执行某些特定的操作。例如页面刚加载时,可以在onLoad生命周期函数中初始化页面的数据。生命周期是指一个对象从创建--》运行--》--》销毁的整个阶段,强调的是一个时间段。生命周期函数是指小程序框架提供的内置函数,会伴随着生命周期,页面的生命周期范围比较小,应用程序的生命周期比较大。中间小程序运行的过程,就是小程序的生命周期。生命周期函数强调的是时间点。生命周期强调的是时间段,2.1生命周期函数的分类。2.什么是生命周期函数。...原创 2022-07-19 20:06:26 · 66 阅读 · 0 评论 -
微信小程序自定义编译模式
因为每次编译页面都自动跳转到首页,如果需要在首页之外的页面编译则会显得很麻烦。原创 2022-07-19 19:36:16 · 402 阅读 · 0 评论 -
微信小程序自定义编译模式
因为每次编译页面都自动跳转到首页,如果需要在首页之外的页面编译则会显得很麻烦。原创 2022-07-19 19:35:14 · 192 阅读 · 0 评论 -
Day3小程序页面上拉触底事件
上拉触底事件是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。在onReachBottom中判断isloading的值,从而对数据请求进行节流控制。添加loading提示效果在–》帮助–》开发者文档–》API。在getColors()方法中修改isloading的值。在data中定义loading节流阀。1.2监听页面的上拉触底事件。②在页面加载时获取初始数据。①定义获取随机颜色的方法。1.什么是上拉触底事件。对上拉触底进行节流处理。...原创 2022-07-19 19:14:29 · 426 阅读 · 0 评论 -
小程序Day3yemian导航&下拉刷新
调用wx.navigateTo(Objectobject)方法,可以跳转到非tabBar页面,其中Object参数对象的属性列表如上(同上表格)调用wx.switchTab(Objectobject)方法,可以跳转到tabBar页面,其中Object参数对象的属性列表如下。如果要回退到上一页或多级页面,则需要调用wx.navigateBack()方法,其中Object参数对象的属性列表如上(同上表格)通过声明式导航传参或编程式导航传参所携带的参数,可以直接在。1.1声明式导航导航到tabBar页面。...原创 2022-07-15 22:12:19 · 232 阅读 · 0 评论 -
小程序Day2
鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有设备的屏幕,在宽度上等分为750份(即当前屏幕的总宽度为750rpx)。类似Vue列表渲染中的key,小程序在实现列表渲染时,也建议渲染出来的列表项指定唯一的key值,从而提高渲染的效率。小程序在不同设备上运行时,会自动把rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。小程序中,app.json中的window节点,可以全局配置小程序中每个页面的窗口变现。小程序根据目录下的app.json文件是小程序的全局配置文件。...原创 2022-07-15 17:51:15 · 143 阅读 · 0 评论 -
小程序Day1
1.已在前面的文章介绍过,这里不再赘述2.API(1)事件监听API特点:以on开头,用来监听某些事件的触发举例:wx.onWindowResize(function callback)监听尺寸变化的事件(2)同步API特点1:以Sync结尾的API都是同步API特点2:同步API的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常举例:wx.setStoragrSync(‘key’,‘value’)向本地存储中写入内容(3)异步API特点:类似于JQuery中的¥(美元符号.原创 2022-05-16 22:18:58 · 52 阅读 · 0 评论 -
小程序组件-button&image
button组件<!--button组件内容--><!--type指定按钮颜色类型--><button type="primary">点击</button><button type="warn">警告</button><button>普通按钮</button><!--size指定按钮的大小--><button type="primary" size="mini">点击&l原创 2022-05-16 21:30:06 · 180 阅读 · 0 评论