微信小程序 icon怎么自定义图标

微信小程序 icon怎么自定义图标,第1张

首先,你的微信需要升级到最新版本。在最上方的搜索框里搜索“小程序示例”,会看到这个页面。 别犹豫,最上面的那个S形图标,点进去。此时,你已经成功的把小程序接入了自己的微信中。在微信的“发现”栏里,最后一项应该已经是小程序了。

最近正在做的一个小程序项目中需要用到一个可清除的输入框控件,为了在项目中使用方便以及方便其他项目直接使用,便封装了一个可清除的input自定义组件

组件需要达到的需求是:输入框内没有内容时,删除按钮隐藏;当输入框内有内容时,删除按钮显示,点击删除按钮则清空输入框内所有内容。并且还可以设置输入框整体样式以及输入框左侧图标。

明确了需求之后,就可以开始着手实现了。

首先,在目标目录下新建一个自定义组件

建好之后,我们需要来设计布局。根据需求来看,我们只需要三个组件:两个image和一个input。左边一个image提示图标,然后一个input输入框,最后一个image删除按钮。我们要把尽可能多的数据设置成可以修改的绑定数据,提高自定义组件的可扩展性。

最终确定的wxml布局文件如下:

然后,我们就要来设置组件的一些属性和监听方法了。小程序的组件属性列表是定义在.js文件的properties里的。把需要暴露出去并可以修改的属性都写在这里面。其语法示例如下:

我的属性列表如下:

完成了属性列表的编写之后,接下来我们需要为自定义组件添加监听事件。

事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件,引用组件的页面可以监听这些事件。

监听以及触发事件的语法是这样的:

这里我们需要设置的触发事件有,输入框的输入事件以及输入框的确认事件。通过 triggerEvent 方法指定事件名以及事件触发事件参数

以上就已经完成了这个可清除input组件的自定义开发了。现在来看怎么使用这个组件。

首先在需要使用此组件的页面.json文件中设置usingComponents属性来引入这个自定义组件

然后,我们就可以在页面中引用这个自定义组件了,引用的方式非常简单,通过我们在上一步设置的标签名称就可以引用了。

最终实现的效果图如下:

项目GitHub地址:

微信小程序酒店类模板

微信小程序捐款类模板

微信小程序的双标签模式是一种方便的多任务浏览模式。通过双标签模式,你可以在同一屏幕内同时打开两个不同的小程序,实现多任务浏览和 *** 作。

要使用微信小程序双标签模式,可以按照以下步骤进行 *** 作:

1. 打开微信并进入小程序界面。

2. 点击右上角的“+”号,选择第一个小程序并进入。

3. 在第一个小程序中,向上滑动屏幕,并点击“添加标签页”按钮(图标为“+”和“⦁”组成),再选择要打开的第二个小程序。

4. 此时,第二个小程序就会在新的标签页中打开,你可以在同一屏幕上同时浏览和 *** 作两个小程序了。

5. 如果需要关闭某个标签页,可以点击标签页上的“×”按钮来关闭。

需要注意的是,并不是所有的微信小程序都支持双标签模式。如果你发现在某些小程序中没有“添加标签页”按钮,则该小程序可能不支持双标签模式。同时,在双标签模式下,你需要注意你的设备屏幕大小和分辨率,以避免 *** 作不便或界面拥挤的情况发生。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/11387292.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-15
下一篇 2023-05-15

发表评论

登录后才能评论

评论列表(0条)

保存