小程序组件开发遇到一个组件内嵌两个组件,而这两个子组件所使用的数据来自于同一个API,如下图所示. 如果这时候两个子组件各自导入同一个接口就会显得多余.另外的办法是由父组件导入接口数据,再从父组件将接口数据传入子组件,这样只需要导入一次接口文件即可. 在父组件中获取接口数据 通过在父组件中通过wx.request方法得到所需要的接口数据,然后存储在自己定义的对象中,之后再导入子组件,实现代码示例如下 //父组件js import { getTasksData } from '../../serv

1. 自定义组件 类似Vue或react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 1.1 创建自定义组件 类似于页面, 一个自定义组件由json wxml wxss js 4个文件组成 可以在微信开发者工具中快速创建组件的文档结构 在文件夹内 components/myHeader, 创建组件 名为myHeader 1.1.1 声明组件 首先需要在组件的 json文件中进行自定义组件声明 myHeader.json { "component": true, } 1.

编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ① 只提供Header部分以及容器部分 ② 容器部分的HTML结构由业务层提供 ③ 容器部分对应样式由业务层提供 我们如果要在小程序中实现这类组件,意味着我们需要往小程序中动态插入WXML结构,我们这里先做个demo,试试往动态插入WXML是不是可行 this.setData({'wxml': `

ylbtech-小程序-文章:微信小程序常见的UI框架/组件库总结 1.返回顶部 1. 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 1:WeUI  小程序–使用教程 https://weui.io/ 官方介绍:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.小程序开发中最常用到的一款框架,受广大

想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 1:WeUI 小程序–使用教程 https://weui.io/ 官方介绍:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.小程序开发中最常用到的一款框架,受广大开发人员的欢迎. 2:美团小程序框架mpvue Github:https://github

第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情页面 第7章 开始制作电影资讯页面 第8章 更多电影及电影搜索页面的实现 第9章 构建电影详情页面 第10章 Form表单类组件与Map地图组件 第11章 扩展内容ES6在小程序中的使用与微信小程序后台账号配置 第12章 0.15.152900 版本重要API.功能讲解 微信小程序入门与实战 常用组

问题 在基于mpvue+Vant Weapp组件库实战过程中,问题越来越多.网络上所谓的"坑"总结,仅仅不过是其开发中所遭所遇之"坑"而已--估计后面的"坑"还多着呢!根据本人粗浅分析,这些"坑"与微信官方格式有密切关系.另一方面,只有"不会导致内存泄漏"的坑,广大开发人员应该还是会体谅的. 言归正传,今天在使用card组件显示价格时出现问题了.问题的最初来由是我想把官方提供的H5版本转换成小程序版本,参考

1. 常见组件 重点讲解小程序中常用的布局组件 1.1 view 代替 原来的div标签 <!-- pages/index/index.wxml --> <view hover-class="h-class"> 点击我试试 </view> /* pages/index/index.wxss */ .h-class{ color: green; } 1.2 text 文本标签 只能嵌套text 长按文字可以复制 (只有该标签有这个功能) 可以对空格 回

微信小程序开发:学习笔记[9]——本地数据缓存 快速开始 说明 本地数据缓存是小程序存储在当前设备上硬盘上的数据,本地数据缓存有非常多的用途,我们可以利用本地数据缓存来存储用户在小程序上产生的操作,在用户关闭小程序重新打开时可以恢复之前的状态.我们还可以利用本地缓存一些服务端非实时的数据提高小程序获取数据的速度,在特定的场景下可以提高页面的渲染速度,减少用户的等待时间. 读写本地数据缓存 小程序提供了读写本地数据缓存的方法: 通过wx.getStorage/wx.getStorageSync读取

[WePY小程序框架实战一]-创建项目 [WePY小程序框架实战二]-页面结构 父子组件传值 静态传值 静态传值为父组件向子组件传递常量数据,因此只能传递String字符串类型. 父组件 (parent.wpy) <view> <child name="leinov"></child> </view> 子组件(child.wpy) <template lang="wxml"> <view> {{

由于本人最近在开发小程序项目,期间对小程序有花点时间去研究,同时也找了网上大牛的一些案例,在这里分享部分自定义组件,部分代码是copy大牛案例的,有对小程序有兴趣的伙伴拿走,不谢! 源码下载地址:https://github.com/Jacky-MYD/WeChat-assembly.git 下面直接看组件的效果,代码我就不说了,有兴趣的可以直接下载源码研究: 1.个人认为比较完美的自定义Toast组件,效果如下: 2.抽屉层组件,类似于日期选择的功能,效果如下: 3.三级市联动组件,个人觉得官

picker组件时一个从底部弹起的可滚动的选择器(嵌入页面滚动器组件picker-view查看https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker-view.html),支持5种选择器 : 普通选择器.多列.时间.日期和省市区 , 通过mode区分 , 默认是普通选择器 (分别对应的mode值为selector,multiSelector,time,date和region) 例如 : <picker mode='selector'

前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己的业务逻辑,可以看做一个独立的page页面.简单来说,如果只是展示,使用template就足够了,如果涉及到的业务逻辑交互比较多,那就最好使用component组件了. 一. template模板: 1. 模板创建: 建议单独创建template目录,在template目录中创建管理模板文件. 由于

前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本次主要分享下小程序自定义组件的一点思路,小程序官方提供的框架比较简陋,原始,可复用较差,没有实现自定义组件的功能,这让很多使用vue ,react前端开发非常难受.网上存在各种吐槽,也有分享实现自定义组件的方法,但是要么过于复杂,要么是微信小程序升级之后就不兼容,反正是各种坑你没商量.在这分享下本人

如果你碰到的上述问题(本地调试ok,小程序上传体验版 各种莫名其妙的问题-卡死-组件属性失效-$apply()不起作用) 您需要关闭 微信开发者工具中: 1.微信开发者工具-->项目-->关闭ES6转ES5. 重要:漏掉此项会运行报错. 2.微信开发者工具-->项目-->关闭上传代码时样式自动补全. 重要:某些情况下漏掉此项也会运行报错. 3.微信开发者工具-->项目-->关闭代码压缩上传. 重要:开启后,会导致真机computed, props.sync 等等属性失效

类似于页面,自定义组件拥有自己的 wxml 模版和 wxss 样式. 官方链接 组件化,反过来理解,写重复的页面,方法,写第二遍就烦了,抽取出来就是组件化,可以理解为公用的方法 对于通用的数据,最先想到或者理应接触的是template,但是template有个缺点,那就是只是页面效果,不会有对应的js操作. 微信小程序组件化,为什么要有自定义组件呢每个页面有对应的js(JavaScript),json(配置config),wxml(html),wxss(css)还差什么不挺好的嘛,为什么需要自定

加入缓存提升用户体验 思路:先从缓存中寻找数据或者从服务器中获取数据写入缓存中 优点:减少网络访问次数,提升用户体验 解决缓存带来的问题 问题:比如原先是不喜欢的在点击喜欢的时候,跳到下一期刊后返回来再次点击会报错.原因是点击不喜欢后服务器端更新了,但加入缓存后返回来的时候期刊依然是缓存中的,所以会出现请求错误. 解决:单独请求获取喜欢的状态,在控件上不使用缓存中的数据 ES6模板字符串和扩展运算符的应用 模板字符串 作用,增强代码可读性 console.log(a+'456');//代码可读性

前言: 与微信小程序不同,支付宝小程序的富文本组件并不能直接支持html代码,如: 如上,支付宝小程序的富文本组件只支持数组类型,html代码需要使用 mini-html-parser 转换,具体用法后文详细说明. mini-html-parser2: 1. 插件安装: 小程序开发者工具左侧文件列表界面空白处单击右键——在终端中打开: 2.输入以下代码安装插件: npm install mini-html-parser2 --save 安装完成后文件列表中就多了node_modules目录了:

微信小程序没找到构建npm或者没找到node_modules目录解决方法如下: 按照微信小程序提供的文档npm install是不行的,直接提示没找到可构建的npm包. 1.直接安装:npm init就可以啦 2.接着npm install你的引入包命令(比如npm i vant-weapp -S --production),然后点击微信开发工具中的工具栏目下的构建npm,就会出现 例子:比如引入vant weapp: 直接 npm i vant-weapp -S --production 可以

微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/master/custom-tabbar 首先创建一个底部导航栏组件,名为:navBar <view class='tabbar'> <view wx:if='{{_auth >= item.auth}}' class='tabbar-item' wx:for='{{tabbarList}

最近做微信小程序时,用到小程序的原生组件camera时,踩到一个bug. 在给camera设置样式position:absolute;绝对定位后,IOS调用camera原生组件拍照后退不出来. 不使用绝对定位即可.