- wx:for 倒序问题
我有个物流信息查询,是通过快递100的,获取快递100的js代码如下: getExpressInfo: function (nu, cb) { wx.request({ url: 'https://www.kuaidi100.com/query', data: { 'type': 'EMS', 'order': '1', 'postid': nu }, header: { 'content-type': 'application/json' }, success: function (res) { cb(res.data); } }) } wxml代码: <view class="expressinfo" wx:for="{{expressInfo.data}}"> <ul> <li>{{item.time}}</li> <li>{{item.context}}</li> </ul> </view> 现在快递100返回的物流信息是按照时间,从大到小排序,现在我想从小到大排序,请问快递100接口有倒序这个参数么?或者说这个wx:for有倒序这个玩法么?麻烦大家告诉了
2018-10-15 - 小程序如何实现倒序渲染列表?
小程序如何实现倒序渲染列表?有个地方需要用到
2017-08-17 - 自定义组件绑定怎么事件函数?不是点击事件
需求: 自定义组件中定义了倒计时,如果时间到则触发绑定的函数 需解答: 如何在调用这个组件的时候给他绑定上一个函数?properties也不能传函数。如何才能做到?
2019-01-15 - 小程序图片临时路径时效性是多久?
我把手机拍摄的或者选择的图片生成的临时路径放到缓存后,由于过久没登陆,图片不显示,就像问下图片临时路径的时效性是多久?
2020-06-03 - wxfile://tmp.jpg显示问题
使用<image src="{{item.imageTemp}}" /> 其中:imageTemp="wxfile://tmp_8723twd7632gdfauygd762gd2gd.jpg" 图片不显示,原来imageTemp="http://tmp/wx3523f.jpeg"则正常; 这个临时本地文件,是通过 wx.cloud.downloadFile({....下载到本地, 在开发工具中就是imageTemp="http://tmp/wx3523f.jpeg" 而在苹果手机微信中,就是这样了imageTemp="wxfile://tmp_8723twd7632gdfauygd762gd2gd.jpg" 不知我说清楚了没有!
2019-06-19 - 微信小程序:自定义组件的数据传递
本文转载思否社区 微信小程序:自定义组件的数据传递 https://segmentfault.com/a/1190000014474289 ~~ 由于这篇文章质量非常高,且在我另一篇社区文章的参考列表里面。 学习自定义组件系列? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000ca0f395cc58cbda5bb20425b413 一、前言如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来。(如果仅仅只需要复用UI可使用template) 下面介绍父子组件的数据传递方法,以及一个简单的组件和一个复杂的组件示例。 【由于刚开始写这篇文章的时候我还算是一个小程序的新手,自己看着官方文档研究并整理归纳的,有很多不足以及错误的地方。在经过一年的沉淀以后(虽然这一年我主要在写vue而不是小程序),我决定重新整理这篇浏览量比较大的文章,以免新手因我的文章走了弯路。】 二、父子组件传递数据的方法1.父组件向子组件传递数据parent.wxml parent.js data: { name: 'Peggy', age: 25 } child.js properties: { name: { type: String, value: '小明' }, age: Number } 父组件向子组件传值以属性的形式,子组件以properties接收,并可指定数据类型type以及默认值value。 在wxml里可直接以{{name}}的形式使用,而在js中以this.properties.name获取。 2.子组件向父组件传值child.js methods: { changeName() { this.triggerEvent('changeName', { name: '李四' }) } } parent.wxml parent.js changeName(event) { console.log(event.detail) // { name: '李四' } } 子组件向父组件传递数据使用this.triggerEvent方法,这个方法接受3个参数: this.triggerEvent('myevent', myEventDetail, myEventOption); myevent为方法名, myEventDetail是传到组件外的数据, myEventOption为是否冒泡的选项,有三个参数可以设置: bubbles 默认false 事件是否冒泡 composed 默认false 事件是否可以穿越组件边界 capturePhase 默认false 事件是否拥有捕获阶段 在父组件监听事件bindchangeName="changeName",在changeName方法里有一个event参数,可以从event.detail里拿到组件内部传出来的值。 三、简单的组件(计数器)[图片] 1. 组件功能介绍这个组件常见于外卖软件中,用于记录想要购买的商品的数量。初始化的时候只有一个加号,点击加号以后出现数字和减号,并最后将数字传到组件外供外部使用。 2. 创建组件首先在根目录创建components文件夹(推荐),然后创建num-controller文件夹(我取的组件名字),在这个文件夹上点击右键新建一个component,名字为index。 [图片] /components/num-controller/index.wxml {{num}} 这段代码就是加减两个按钮和一个数字。 /components/num-controller/index.json { "component": true, "usingComponents": {} } 这个文件在创建component的时候会自动写入这段代码。 /components/num-controller/index.js Component({ /** * 组件的属性列表 */ properties: { nameId: { type: String }, num: { type: Number, value: 0 }, int: { type: Number, value: 1 }, min: { type: Number, value: 0 } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { numChange() { this.triggerEvent('numChange', { num: this.properties.num, nameId: this.properties.nameId }) }, add() { this.setData({ num: this.properties.num + this.properties.int }) this.numChange() }, sub() { this.setData({ num: this.properties.num - this.properties.int }) this.numChange() } } }) 在组件内部我定义了4个属性,properties是父组件传给子组件的属性。 nameId用来标识子组件的唯一性,如果在父组件内有多个计数器,子组件想把改变的数据传给父组件时可以用到; num代表计数器中的数字,默认为0; int代表加减一次改变多少,默认为1; min代表计数器的最小值,等于这个值时减号会消失,默认为0。 同时在子组件内定义了两个方法: add点击加号触发,首先改变子组件内部的数字,同时触发numChange方法将改变的数字传到组件外部; sub点击减号触发,首先改变子组件内部的数字,同时触发numChange方法将改变的数字传到组件外部。 3. 引入组件假如我要在index.wxml里引入组件: index.json { "usingComponents": { "num-controller": "/components/num-controller/num-controller" } } 想在页面中使用组件必须在json文件里注册组件。 index.js Page({ data: { num1: 0, num2: 10, num3: 100 }, numChange(event) { const {num, nameId} = event.detail this.setData({ [nameId]: num }) } }) data里的num1, num2, num3是从组件外传入的num,在numChange方法里用event.detail可以拿到组件内部通过this.triggerEvent传出来的数据,然后根据业务需求做逻辑修改。 四、复杂的组件(筛选面板)[图片] 这是一个二级菜单,点击左边(一级)会改变右边(二级)的展示。 1. 创建组件并引入组件内部: /components/filter-panel/index.wxml ... ... /components/filter-panel/index.json { "component": true, "usingComponents": {} } 组件外部: 假如我要在index.wxml里引入组件: index.json { "usingComponents": { "filter-panel": "/components/filter-panel/index" } } 这样就成功引入组件啦~(说真的组件化做好了非常舒服,后期会省很多力气) 2.组件与外部的数据传递(1) 固定数据渲染组件外部: index.wxml index.js data: { list: [ ['附近', '地铁站'], [['不限', '1km', '2km', '3km'], ['江汉路', '积玉桥', '洪山广场', '楚河汉街', '光谷广场']] ], active: [0, 0] }, 组件内部: /components/filter-panel/index.js Component({ /** * 组件的属性列表 */ properties: { list: Array, active: Array }, /** * 组件的方法列表 */ methods: { ... } }) 如果想从组件外向组件内传递数据,直接在外部引用时以属性的方式传入。 这里我传入了2个属性: list是二级选择面板渲染的数据。 active是用户选择的选项数据。 到这里组件已经可以正常展示了,但是点击显示选中项还未实现。 (2) 可变数据渲染控制组件active项的是外部的数据active: [0, 0],通过组件以属性的形式传到了内部。 /components/filter-panel/index.wxml {{item}} {{item}} /components/filter-panel/index.js Component({ /** * 组件的属性列表 */ properties: { list: Array, active: Array }, /** * 组件的方法列表 */ methods: { changeLevel() { this.triggerEvent('changeLevel', { level1: this.properties.active[0], level2: this.properties.active[1] }) }, changeLevel1(event) { const index = event.target.dataset.index this.setData({ active: [index, 0] }) this.changeLevel() }, changeLevel2(event) { const level2 = 'active[1]' const index = event.target.dataset.index this.setData({ [level2]: index }) this.changeLevel() } } }) (3) 组件内数据传到外部在这个组件内我定义了changeLevel这个方法,每次点击一级菜单或二级菜单的时候我就用过this.triggerEvent方法把active的值传到组件外部以供使用。 /components/filter-panel/index.js methods: { changeLevel() { this.triggerEvent('changeLevel', { level1: this.properties.active[0], level2: this.properties.active[1] }) }, changeLevel1(event) { const index = event.target.dataset.index this.setData({ active: [index, 0] }) this.changeLevel() }, changeLevel2(event) { const level2 = 'active[1]' const index = event.target.dataset.index this.setData({ [level2]: index }) this.changeLevel() } } 五、总结这个项目里倒是没用用到组件间的数据传递,所以只是组件和外部的传递,还算是比较简单,但是一定要思考清楚数据的变化状态。
2020-12-08 - 每天一个小程序知识点-自定义组件
原标题 学习自定义组件系列,难度指数★★★★★ 自定义组件算是小程序开发里面难度最高的一个知识点,在阅读本文之前,请看看下面红字提示 本文面向对象为具有一定小程序开发基础的同学,其实对我来讲,学习自定义组件,也是反复折腾了好几天,每一次学习都有不同的感悟和收获,特别是近期有个二开项目中,到处到是自定义组件,才硬着头皮啃下这块骨头 今天又开始学习自定义组件 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 希望通过本次学习,可以回答下面几个问题,并能在小程序项目中初步掌握自定义组件的创建和使用 1)自定义组件的属性、内部数据、自定义方法; 2)自定义组件的生命周期; 3)自定义组件与调用页面如何通信; 4)自定义组件的属性和内部数据有何区别; 5)如何理解自定义组件中的纯数据字段; 由于我对自定义组件的生命周期和组件间通信与事件这块比较陌生,这两块是我今天重点学习的 关于生命周期的几点,我单独拎出来 1)定义生命周期方法 生命周期方法可以直接定义在 Component 构造器的第一级参数中。 自小程序基础库版本 2.2.3 起,组件的的生命周期也可以在 lifetimes 字段内进行声明(这是推荐的方式,其优先级最高)。 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html 2)组件间通信 组件间的基本通信方式有以下几种。 WXML 数据绑定:用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容数据(自基础库版本 2.0.9 开始,还可以在数据中包含函数)。具体在 组件模板和样式 章节中介绍。 事件:用于子组件向父组件传递数据,可以传递任意数据。 如果以上两种方式不足以满足需要,父组件还可以通过 this.selectComponent 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。 学习这一点需要重点消化下面的关于事件的知识点 组件间通信与事件 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html 事件 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html 组件事件处理函数 https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html 下面这句话要重点理解下 自定义组件可以触发任意的事件,引用组件的页面可以监听这些事件 1 本文参考以下文章 1)自定义组件公测说明及入门介绍? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/00028abbd342f0c014868e37f57809 2)自定义组件? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/0006e8c236cd10d499b6217a351c09 3)https://developers.weixin.qq.com/ebook?action=get_post_info&volumn=1&lang=zh_CN&book=miniprogram&docid=000846df9a03909b0086a50025180a 4)微信小程序:自定义组件的数据传递 https://segmentfault.com/a/1190000014474289 5)小程序自定义组件,父组件如何向子组件传递参数,以及如何传递一个对象,导入代码片段一试便知? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/00086eb5294e0894b63a8898e56013 6)小程序-实现自定义组件以及自定义组件间的通信 https://juejin.cn/post/6889218680975491085 第四篇文章我担心由于不可抗拒原因而不能访问,我转发到社区了,具体见下文 微信小程序:自定义组件的数据传递? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/0000c0cfa587b81dd05b04f205b813 奉上官方的代码片段可以辅助我们更好的理解组件和页面之间的同学 https://developers.weixin.qq.com/s/X314zqmp70mx 通过下面四张截图基本理解的比较透彻了 截图一 [图片] 截图二 [图片] 截图三 [图片] 截图四 [图片] 本文总结 自定义组件的事件这里太绕了 祝各位学有所得
2020-12-08 - 为什么小程序自定义组件中定义变量之后用this访问不到,而page却可以?
Component({ customValue:0,//这里定义变量,因为不想每次访问的时候用this.data.***的形式 data:{}, methods:{}, lifetimes:{ attached(){ console.log(this.customValue); //undefined } } }) 求大佬解惑,感谢!
2022-05-26 - 微信小程序--页面与组件之间如何进行信息传递和函数调用
微信小程序–页面与组件之间如何进行信息传递和函数调用 这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如何调用页面内的函数 1.页面如何向组件传数据 最常用,最规范的方式,设置数据监听器[代码]observer[代码]。 假设在页面内引入了组件[代码]sc[代码] [代码]"usingComponents": { "sc":"" } [代码] 想要配置一个监听器用来监听页面中数据[代码]list[代码]的变化,组件在页面中的写法如下: [代码]<sc list="{{list}}" > </sc> [代码] [代码]组件中的监听器写法如下,当页面中的`list`值每次发生变化,都会触发`observer`监听器,打印出变化值。 [代码] [代码]properties: { list:{ type:Array, observer: function (newVal, oldVal){ console.log(newVal) } } } [代码] 同理,除了动态传值以外,这种方式也可以直接传入静态值,即不需要调用[代码]obeserver[代码]监听器。在组件中可以直接使用[代码]this.properties.*[代码]来获取[代码]properties[代码]中的各个值(*代表各个属性值的名称)。 2.组件如何向页面传数据 既然组件可以设置监听器用来监听页面数据变化,用来达到数据传递的效果,页面同样可以使用监听器,来监听组件触发的信息传送。 仍然以上面的组件为例,如何向页面中传送信息? 在页面中配置组件监听器 [代码]ComponentListener(e){ let info = e.detail; } [代码] 组件选择事件并绑定该监听器 [代码]<sc bind:listener="ComponentListener" > </sc> [代码] 从组件中往页面传入输入只需要在组件中触发对应事件,[代码]e.detail[代码]就是传过去的数据 [代码] this.triggerEvent('listener',{func,tid}); [代码] 3.页面如何调用组件内的函数 假设我们引入并使用了一个组件[代码]comment-bottom[代码],组件内有函数[代码]handleCloseInput[代码],需要在某个逻辑中触发。 想要使用组件内的函数,必须为组件配置一个唯一[代码]id[代码],这样就可以在页面中通过[代码]dom[代码]操作选中组件并调用组件中的函数。 [代码]<comment-bottom id="commentBottom"></comment-bottom> [代码] 组件中的函数在页面中的调用逻辑如下: [代码]this.commentBottom = this.selectComponent("#commentBottom"); this.commentBottom.handleCloseInput(); [代码] 4.组件如何调用页面内的函数 上面向页面传数据的方式,实际上就是调用了页面中的函数。我们可以这样理解该逻辑,将该用法理解为一个函数映射。 [代码]<component bind:componentfunc="pagefun"></component> [代码] 当使用[代码]trigger[代码]触发[代码]componentfunc[代码]时,通过[代码]bind:[代码]这个函数映射关系,就会触发页面中的[代码]pagefunc[代码]。 其次,调用页面内的函数,还可以通过页面栈的方式,组件并不占用页面的栈空间,因此在组件中使用[代码]getCurrentPages[代码]就可以获得对应页面的数据和方法。 [代码]var allpages = getCurrentPages();//获取全部页面数据 var nowpage = allpages[allpages.length - 1].data;//获取当前页面的数据。 var nowpage = allpages[allpages.length - 1];//获取页面,包括数据和方法 [代码] 这部分内容出自我的一篇文章,我会把地址放在参考文件中。 结语: 组件和组件之间的数据传递和组件与页面之间并没有太大区别,组件中也可以嵌套组件。 觉得ok请点下关注 参考文件 微信小程序开发技巧总结 (一)-- 数据传递和存储
2020-12-28