- 博客(33)
- 收藏
- 关注
RSS订阅原创 微信小程序-自定义组件生命周期
组件实例创建完毕调用。定义在lifetimes对象里。不能在方法里面更改data对象里面的值，但是可以定义属性值。
2024-07-19 22:49:05
233
原创 微信小程序-组件通信
以checkbox为例子，自定义一个checkbox组件，定义properties属性的checked值，当父组件checked值为true，则默认勾选。父组件代码父组件将值传递到properties的checked属性，此时需要在JS中将checked的值赋给data中定义的isCheck才会使checkbox默认勾选。
2024-07-16 22:58:21
326
原创 微信小程序-自定义组件数据监听器observers
自定义组建的属性值在被使用组件里面传值的时候就会被监测到。这就导致在编译期间就会检测到自定义组件的properties值定义propertieslabel:{value:''监测//key监听的数据 value最新的数据//data的数据发生改变就会被检测到//监听属性值。
2024-07-04 23:24:27
583
原创 微信小程序-组件样式隔离
isolated是自定义组件.js的options对象字段styleIsolation的默认值，表示自定义组件和组件使用者之间的样式相互独立，互不影响。
2024-07-03 23:23:33
800
原创 微信小程序-插槽slot
在页面使用自定义组件的时候，如果在自定义组件里面写子组件，子组件的内容无法显示。如上面的文本内容是无法显示在自定义组件里面的。因为如果我们想要自定义组件的内容也可以显示需要一个占位符或者卡槽，把子节点的内容插进去。
2024-07-01 22:49:01
976
原创 微信小程序-自定义组件 properties
*** 组件的属性列表*///简写//全写label:{value:''},position:{)}
2024-06-27 23:18:33
525
原创 微信小程序-自定义组件checkbox
组件的.js文件里的data用来定义数据，methods用来定义方法。和页面不同的是，组件的.js文件里里面是Component方法，页面的.js文件使用Page方法。页面文件不需要在methods里面定义function，组件需要。/*** 组件的属性列表*/},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {update(){isCheck:!})})
2024-06-26 22:45:30
509
原创 微信小程序-scroll-view实现上拉加载和下拉刷新
scroll-view组件通过自身一些属性实现上拉加载的功能。lower-threshold=“100"属性表示距离底部多少px就会实现触发下拉加载的事件。类似于在.json文件里面配置"onReachBottomDistance”: 100bindscrolltolower="getMore"属性是监听下拉加载的所绑定的方法。enable-back-to-top属性设置为ture表示点击状态栏或者标题栏回到顶部位置。
2024-06-20 23:29:09
647
原创 微信小程序-上拉加载和下拉刷新
微信小程序的上拉加载使用onReachBottom()，写在.js文件里面的Page方法里面。onReachBottom()会监听微信小程序上拉操作。需要在.json文件里面配置"onReachBottomDistance"属性。如下面的代码，在距离底部50px的时候会触发到onReachBottom()
2024-06-19 23:03:34
681
原创 微信小程序-路由和页面跳转API
wx.navigateTo是通过编程实现页面跳转，和navigator组件组件中，open-type="navigate"属性类似，是保留当前页面跳转新的页面，不适用tabbar页面。类似组件。
2024-06-18 23:01:17
929
原创 微信小程序-API 本地存储
存储 ： wx.setStorageSync获取：wx.getStorageSync删除：wx.removeStorageSync清空：wx.clearStorageSync。
2024-06-17 23:02:11
522
原创 微信小程序-界面提示框和消息
小程序提供了wx.showLoading用来在加载界面的时候使用，比如果加载图片和数据的时候可以使用。常常和wx.hideLoading()配合使用，否则加载框一直存在。
2024-06-13 22:46:46
573
原创 微信小程序-API介绍和发起网络请求
小程序提供丰富的API，以方便使用微信的能力。例如获取用户信息，微信登录，微信支付等。小程序的API几乎都在wx对象下。例如wx.request()异步API支持callback和Promise两种调用方式1.当接口参数不包含success/fail/complete时候，默认返回Promise2.部分接口request，uploadFile本身有返回值，不支持promise风格的调用，它们的promisify需要开发者自行封装。
2024-06-12 22:45:07
734
原创 小程序-生命周期（2） 应用周期/页面周期
应用周期指的是小程序：启动->运行->销毁的整个过程。应用周期伴随一些函数来进行控制，这些函数卸载app.js里面的App方法里。分别由onLaunch， onShow，onHide一次进行。onLaunch：初始化的时候运行（冷启动）onShow：初始化准备好，展示页面的时候运行（热启动，后台切前台）onHide：前台切后台。
2024-06-11 22:33:45
759
原创 微信小程序-生命周期（1）
微信运行时，会定期检查最近使用的小程序是否有更新。如果有更新，下次程序启动时会同步更新，更新到最新版本再打开小程序。如果用户长时间不使用小程序会强制检查版本更新。：在启动前没有发现更新，小程序每次冷启动时，都会检查是否有更新版本。如果发现有更新版本将会异步下载代码包，在小程序下一次冷启动的时候使用。本次依旧用的旧的代码包。在异步更新的时候，想要用户使用新的代码包，可以使用wx.getUpdateManager()进行强制更新。
2024-06-06 22:57:31
602
原创 微信小程序-条件渲染
使用wx:if , wx:elif , wx:else进行条件渲染，当条件为true的时候显示，否则不显示。在.wxml里面进行条件渲染否则都会报错。
2024-06-05 22:37:13
433
原创 微信小程序-双向绑定
使用{{value}}可以把data里面定义的值绑定到页面属性上，但是页面属性的值变动，并不会改变定义的变量值。如果我们想要定义的变量值进行改变，我们就需要进行双向绑定。
2024-06-04 22:21:32
199
原创 微信小程序-声明和绑定事件
小程序页面使用的数据在Page（）方法里使用data对象进行声明定义定义好之后，使用{{}}进行绑定{{}}里面可以进行如下运算。
2024-06-02 23:22:31
544
原创 微信小程序-事件（event）
微信小程序使用bind方法绑定事件第一种方式：bind：事件名第二种方式：bind事件名（简写）事件处理函数写在.js文件的page方法里面下面介绍两种事件对象button和input可以在.wxml里面创建button和input组件其中input组件创建好之后没有边框，需要在.scss里面添加边框方便查看然后在.js文件里面写相应的函数逻辑，函数名和绑定的事件名必须一致，且必须写在page方法里面，每个函数都会自带一个event参数。
2024-06-01 23:12:47
715
原创 微信小程序-组件和样式（4）字体图标之阿里巴巴矢量图标库的使用
阿里巴巴矢量图表库的网址：阿里巴巴矢量图标库在搜索框输入我们需要的图标文本，比如首页/配送/时间等，就会搜索到各种文本图标：选中文本图标，点击购物车，选择项目：可以编辑首页项目，比如icon class的名称：点击生成在线链接，点击.css链接查看生成的CSS代码二.在微信小程序中使用阿里巴巴矢量图标库2.1 创建矢量图标库文件夹和文件注意：在引用之前需要在全局.scss文件里引用矢量.scss文件，使用@import关键字三.常见错误及解决办法官网解释，这种错误不影响小程序
2024-05-31 23:05:44
689
原创 微信小程序-样式和组件（3）navigator/scroll-view组件
scroll-x属性的值为ture，也可以只写属性scroll-x，默认值为true。在.wxml文件里面创建scroll-view组件，并在里面放着三个view。在.scss文件里面渲染scroll-view，通过class选择器。实现小程序横向和纵向的滚动。
2024-05-28 23:21:10
333
原创 微信小程序-样式和组件（2）image / text
image组件用来显示小程序的图片。可通过swiper组件和image组件结合实现图片轮播的效果。
2024-05-27 23:34:51
511
原创 微信小程序-样式和组件（1）
rpx是小程序的自适应单位，会根据不同的设备自适应缩放，建议使用iphone 6设备，因为iphone 6的宽度为375px，方便rpx和px的换算。在购物车页面.wxml新建一个view相当于html的div。在.wxss里面设置view的宽度占据屏幕的一半，此时我们就要使用375px。.wxml的代码-- 绘制盒子，宽度一半屏幕 -->小花花来喽.wxss的代码.box{
2024-05-26 23:59:40
334
原创 微信小程序-快捷键汇总
微信小程序开发工具是一个集成开发环境，支持开发、调试、预览、发布小程序的工具。开发者们在使用开发工具进行小程序的开发时，使用快捷键可以提高开发效率。
2024-05-26 22:37:12
712
原创 微信小程序-局部配置
小程序的页面配置也成为局部配置，每个页面都有自己的.json文件来对本页窗口进行配置。页面配置文件和全局配置文件中的window配置属性几乎一致。
2024-05-25 22:29:35
417
1
原创 微信小程序-全局配置
app.json: 小程序的全局属性和页面路由配置project.config.json：保存项目相关的配置信息和开发者的个人设置sitemap.json： 配置小程序是否可以被微信索引，提高小程序别微信引擎搜索的概率页面.json：配置当前页面的窗口，页面标题等。
2024-05-24 23:25:37
330
原创 微信小程序-编译调试
Wxml：小程序的页面调试，点击相应的节点，会反映到相应的小程序页面Console：小程序JS的运行的过程Network：可以调试网络请求AppData：可以查看当前页面的数据Storage：可以查看本地存储的数据。
2024-05-24 22:10:11
176
原创 微信小程序-文件目录介绍
page页面一共有四个文件cat.js : 页面逻辑cat.json ： 页面配置cat.wxml ： 页面结构cat.wxss ： 页面样式其中cat.js和cat.wxml是不可缺少的，因为wxml可以看作小程序的面，cat.js可以看作小程序的里，有里有面才完美。
2024-05-23 22:43:30
297
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人