- 博客(24)
- 收藏
- 关注
RSS订阅原创 微信小程序学习-分包预下载
预下载分包的行为，会在进入指定的页面时触发。分包预下载指的是：在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。同一个分包中的页面享有共同的预下载大小限制2M。1.什么是分包预下载。2.配置分包的预下载。3.分包预下载的限制。
2024-08-14 16:46:27
751
原创 微信小程序学习-独立分包
独立分包本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而单独运行。独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源。（2）而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。（3）独立分包和普通分包之间，不能相互引用私有资源。（4）特别注意：独立分包中不能引用主包内的公共资源。（2）独立分包可以在不下载主包的情况下，独立运行。（2）独立分包之间，不能相互引用私有资源。（1）主包无法引用独立分包内的私有资源。2.独立分包和普通分包的区别。
2024-08-14 16:30:50
431
原创 微信小程序学习-普通分包
分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次启动的下载时间。（1）小程序会按 subpackages 的配置进行分包，subpackages 之外的目录将被打包到主包中。（1）在小程序启动时，默认会下载主包并启动主包内页面，tabBar页面需要放到主包中。（1）整个小程序所有分包大小不超过16M（主包+所有分包）（3）分包可以引用主包内的公共资源。
2024-08-14 16:04:29
338
原创 微信小程序学习-全局数据共享
在小程序中，可以使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有：Vuex、Redux、MobX等。（2）mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用。（1）mobx-miniprogram 用来创建 Store 实例对象。2.小程序中的全局数据共享方案。
2024-08-14 15:13:48
302
原创 微信小程序学习-npm包
API Promise化，指的是通过额外的配置，将官方提供的、基于回调函数的异步API，升级改造为基础Promise的异步API，从而提高代码的可读性、维护性，避免回调地狱的问题。目前，小程序中已经支持使用npm安装第三方包，从而来提高小程序的开发效率。在app.wxss中，写入CSS变量，即可对全局生效。（3）小程序对于vant组件库定制全局主题样式。（1）不支持依赖于Node.js内置库的包。（2）不支持依赖于浏览器内置对象的包。（3）不支持依赖于C++插件的包。1.小程序对npm的支持和限制。
2024-08-14 10:40:09
332
原创 微信小程序学习-Behavior
每个 behaviors 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。behaviors 是小程序中，用于实现组件间代码共享的特性，类似于 Vue.js 中的 “mixins”。每个组件可以引用多个 behaviors，behaviors 也可以引用其它的 behaviors。（2）同名的属性 properties 或 方法 methods。4.behavior 中所有可用的节点。2.behaviors 的工作方式。1.什么是 behaviors。
2024-08-13 11:47:46
403
原创 微信小程序学习-组件(纯数据字段、生命周期、插槽)
在Component构造器的options节点中，指定pureDataPattern为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段。有些情况下，某些data中的字段既不会展示的页面上，也不会传递给其他组件，仅仅在当前组件内部使用。在小程序组件中，最重要的生命周期函数有3个，分别是created、attached、detached。通常在这个生命周期函数中，只应该用于给组件的this添加一些自定义的属性。退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数。
2024-08-13 10:34:51
294
原创 微信小程序学习-组件
默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过styleIsolation修改组件的样式隔离选项，用法如下。由于 data 数据和 properties 属性在本质上没有任何区别，因此 properties 属性的值也可以用于页面渲染，或使用 setData 为 properties 中的属性重新赋值。从表面来看，组件和页面都是由.js、.json、.wxml 和 .wxss 这四个文件组成的。（3）侦听对象属性的变化。
2024-08-12 19:36:55
248
原创 微信小程序学习-WXS
wxml中无法调用页面的.js中定义的函数，但是，wxml中可以调用wxs中定义的函数，因此，小程序中的wxs的典型应用场景就是“过滤器”。wxs（WeiXin Script）是小程序独有的一套脚本语言，结合WXML，可以构建出页面的结构。不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc...在ios设备上，小程序内的wxs会比JavaScript代码快2～20倍。（1）本质上，wxs和JavaScript是两种不同的语言。wxs不能调用js中定义的函数。
2024-08-12 15:55:37
417
原创 微信小程序学习-页面事件
当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，所以需要手动隐藏loading效果。backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light。在页面的.js文件中，通过 onPullDownRefresh 函数即可监听当前页面的下拉刷新事件。下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面的数据。backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值。
2024-08-12 11:07:58
1731
原创 微信小程序学习-页面导航
在页面上声明一个<navigator>导航组件，通过点击<navigator>组件实现页面的跳转。参数与路径之间使用?参数键与参数值用 = 相连。调用小程序的导航API，实现页面的跳转。不同参数用 & 分隔。3.在onLoad中接收导航参数。（1）声明式导航跳转。（2）声明式导航传参。（1）编程式导航跳转。（2）编程式导航传参。
2024-08-12 10:36:41
171
原创 微信小程序学习-数据请求
（2）AJAX技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起Ajax请求”，而是叫做“发起网络数据请求”。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。配置步骤：登录微信小程序管理后台-开发-开发管理-服务器域名-修改request合法域名。微信开发者工具详情按钮-本地设置-勾选不校验合法域名（仅限开发与调试阶段使用）（2）必须将接口的域名添加到信任列表中。（1）只能请求HTTPS类型的接口。
2024-08-11 21:15:04
342
原创 微信小程序学习-全局配置
tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：底部tabBar和顶部tabBar。小程序根目录下的app.json文件是小程序的全局配置文件。（2）window 全局设置小程序窗口的外观。（3）tabBar 设置小程序底部的 tabBar 效果。（1）pages 记录当前小程序所有页面的存放路径。（4）style 是否启用新版的组件样式。1.全局配置文件及常用的配置项。
2024-08-11 20:07:19
209
原创 微信小程序学习-WXSS模版样式
rpx的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即：当前屏幕的总宽度为750rpx）WXSS具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。WXSS是一套样式语言，用于美化WXML组件样式，类似于网页开发中的CSS。rpx是微信小程序独有的，用来解决屏幕适配的尺寸单位。@import "要导入的样式文件路径"每个页面组件.wxss中定义的样式。app.wxss中定义的样式。
2024-08-11 16:29:28
230
原创 微信小程序学习-WXML模版语法
type、target（实际触发事件的组件）、currentTarget（实际绑定事件的组件）、detail。input bindinput或bind:input 文本框的输入事件。（1）wx:if wx:elif wx:else 控制元素的显示与隐藏。（5）在事件处理函数中为data中的数据赋值。（2）hidden 控制元素的显示与隐藏。（2）绑定数据-Mustache语法。（4）bindtap的语法格式。（2）小程序中常用的事件。（3）事件对象的属性列表。
2024-08-11 16:08:00
234
原创 小程序学习-宿主环境
swiper indicator-dots属性，显示面板指示点 indicator-color 知识点颜色 indicator-active-color 当前选中的知识点颜色 autoplay 是否自动切换 interval 自动切换时间间隔 circular 是否采用衔接滑动。手机微信是小程序的宿主环境。小程序借助宿主环境提供的能力，可以完成许多网页无法完成的功能，例如：微信扫码、微信支付、微信登录、地理定位、etc...3.执行页面的.js文件，调用Page()函数创建页面实例。
2024-08-11 11:25:03
476
原创 小程序学习-页面
3.WXML（WeiXin Markup Language）小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的HTML。4.WXSS（WeiXin Style Sheets）是一套样式语言，用于描述WXML的组件样式，类似于网页开发中的CSS。调整app.json-pages数组中的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面，当作项目的首页进行渲染。WXSS在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算。（2）提供了全局的样式和局部样式。
2024-08-11 08:28:52
291
原创 微信小程序学习-小程序的基本组成结构
2>根目录中的 project.config.json和project.private.config.json 配置文件，用来记录我们对小程序开发工具所做的个性化配置。小程序中也不例外：通过不同的.json配置文件，可以对小程序项目进行不同级别的配置。根目录中的 sitemap.json 配置文件用来配置小程序页面是否允许被微信索引。每个文件夹中的.json配置文件,对当前页面的窗口、外观进行个性化设置。.json 当前页面的配置文件，配置窗口的外观、表现等。
2024-08-10 23:00:18
318
原创 微信小程序学习-小程序简介
点击+号创建项目 - 输入项目名称/项目路径（必须是一个空文件夹，否则创建不成功）/APPID/开发模式/后端服务（不使用云服务）/选择Javascript - 确定。（1）微信公众平台网址>立即注册>小程序>填写信息（账号信息/邮箱激活/信息登记 主体类型-个人）> 登录之后 点击开发-开发管理-获取APPID。由于运行环境的不同，所以在小程序中，无法调用DOM和BOM的API。菜单栏 帮助-开发者文档 设置-外观设置/代理设置/快捷键 工具-构建npm。设置-代理-不使用代理。
2024-08-10 20:45:12
249
原创 Vue项目打包优化之减小包体积
1.在config.js文件中进行响应的配置// 需要排除的包对象let externals = {}// 需要配置的 CDN 链接let CDN = { css: [], js: [] }// 判断是否是生产环境const isProduction = process.env.NODE_ENV === 'production'// 如果是生产环境，需要执行以下逻辑if (isProduction) { externals = { /** * extern
2022-02-13 18:36:08
1120
原创 Vue过滤器
作用：文本格式化，例如 时间/后台返回的一些数值使用方式：Mustache语法插值{{ message | capitalize }}v-bind 表达式<div v-bind:id="rawId | formatId"></div>定义：（1）局部定义// 局部定义 选项中进行定义// 这里的 filters 是Vue构造器中的一个选项 它的值是一个对象 // capitalize 是 filters 对象中的一个方法 这里ES6.
2021-08-16 13:40:03
277
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人