微信小程序
huangzhin
我爱前端
展开
-
微信小程序实现车牌键盘
一、效果图二、代码plateNumKeyboard.wxml<view class="pages"> <view class="box"> <view class='box-top'> <text>请输入车牌号:</text> </view> <view class="plate-input-body"> <view class="plat原创 2021-04-02 16:42:00 · 648 阅读 · 0 评论 -
微信小程序实现横屏手写签名
1.关键配置:"pageOrientation":"landscape" ---- 配置该页面横屏展示2.效果图:3.代码:wxml<view class="container"> <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bin..原创 2021-03-26 16:28:21 · 2009 阅读 · 6 评论 -
微信小程序下拉刷新在真机上不回缩问题的解决方法
别忘了写wx.stopPullDownRefresh()噢onPullDownRefresh:function(){ //...... wx.stopPullDownRefresh(); //停止下拉刷新 },原创 2021-03-25 11:54:24 · 390 阅读 · 0 评论 -
微信小程序 父子组件传值通信
一、父组件传值给子组件1. 在父组件中引用子组件1.1 在父组件json中导入子组件1.2 在子组件的json中,把自己定义为子组件2. 在父组件中,子组件的引用处,绑定一个属性( text ),并传递想要给子组件的值( parentParam )3. 在子组件中的js中使用 properties 获取值,这样就可以在子组件中用 this.data.text ...原创 2019-11-28 15:20:57 · 354 阅读 · 0 评论 -
微信小程序页面跳转如何传递对象参数
前情:首先我们有这么一种需求,就是我在一个列表中点击了某个item,跳转到详情界面,那么我就需要把item的实体数据从列表页面传递到详情页面,那么我们来看看微信小程序给我们提供的API:先看api:这里大家可以清楚看到api中说到的如何传递参数,其实它这里指的参数仅仅是一些普通的数据类型具体分析:这里我们要传递的实体是object类型,那么我们需要先把实体转...原创 2019-11-12 15:34:31 · 5723 阅读 · 2 评论 -
微信小程序生命周期、页面生命周期、组件生命周期
1. 生命周期 App(全局)位置:项目根目录app.js文件App({ onLaunch (options) { // console.log('小程序初始化') }, onShow(options) { console.log('监听小程序启动或切前台') }, onHide() { console.log('监听小程序切后台'...原创 2019-11-06 15:40:06 · 3222 阅读 · 0 评论 -
搜索功能的实现----微信小程序
一、搜索功能的需求描述:数据:教师名字列表的数组1、搜索文本为空时,展示所有教师列表2、输入搜索文本,展示与搜索文本匹配的教师列表二、搜索功能的算法描述:1、声明一个数组存放搜索结果,2、判断搜索文本是否为空,为空则直接设置结果数组赋值为全部教师列表的数组3、若搜索文本不为空,先将搜索结果数组设置为空数组,遍历教师列表数组,利用indexOf函数判断每...原创 2019-11-03 15:18:04 · 1169 阅读 · 1 评论 -
微信小程序开发总结(持续更新中~)
前言:在公司实习做小程序开发一段时间了,该文将会总结我在开发小程序过程中遇到的一些问题,并给出解决方案~一、ios 底部margin无效:问题描述:ios仅在底部需要撑开一定间距时,使用margin-bottom失效解决方案:不用margin来实现底部空白,直接多一个空白的view(设置好高度即可)不用padding的原因是padding在撑开间距的同时也会伴随容器自带...原创 2019-09-18 10:39:30 · 251 阅读 · 0 评论 -
小程序和vue.js的区别(持续更新中~)
一、生命周期:1、小程序:onLoad----监听页面加载:一个页面只会调用一次,可以在onLoad中获取当前页面从上一级页面带过来的参数(通过options)。onReady----监听页面初次渲染完成:一个页面只会调用一次,代表当前页面已经准备妥当,可以和视图层进行交互。对界面的设置如 wx.setNavigationBarTitle请在 onReady之后设置。详见生...原创 2019-08-10 23:57:57 · 803 阅读 · 4 评论 -
textarea还剩余字数统计----微信小程序
前言:不管做什么类型的项目,几乎都会碰到评论框,评论往往都会有最大字数限制,这时为了提高用户体验,我们往往需要告诉用户已输入字数。嘻嘻,还不会的同志们花两分钟看一下~## 一、先奉上效果图:二、简介实现思路:1、在textarea中绑定bindinput事件。2、通过var value = e.detail.value;获取textarea的值。3、通过 var len = pa...原创 2019-08-10 22:57:46 · 2183 阅读 · 3 评论 -
微信小程序开发事件:catch---或bind---的区别(如bindtap和catchtap)
一、事件的概念:1、微信官方给出的事件的解释是:事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息,如 id, dataset, touches。2、那我们如何使用事件呢?简单来说就是将事件绑定到组件上面,例如:bindtap和catchtap都属于点击事...原创 2019-08-10 22:09:09 · 2011 阅读 · 0 评论 -
微信小程序之页面生命周期函数
// pages/test2/test2.jsPage({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 * 一个页面只会调用一次,可以在onLoad中获取当前页面从上一级页面带过来的参数 */ onLoad: function (options) { }, /** * ...原创 2019-07-28 21:26:54 · 1802 阅读 · 0 评论 -
5分钟搞定微信小程序搜索功能
一、废话不多说,先看效果:附赠一个时间选择器:看了效果图,当然要看看如何敲代码实现了~二、代码附上:1、目录结构2、全部代码:app.js//app.jsApp({ globalData: { trainBeginCity: '杭州', trainEndCity: '北京' }})app.json{ "pages":[ "p...原创 2019-07-31 22:08:02 · 4430 阅读 · 0 评论 -
微信小程序之页面跳转路由
一、简介:微信小程序一共有五个页面跳转路由:1、wx.switchTab(Object object)----跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面2、wx.reLaunch(Object object)----关闭所有页面,打开到应用内的某个页面3、wx.redirectTo(Object object)----关闭当前页面,跳转到应用内的某个页面。但是不允许跳...原创 2019-07-25 23:34:10 · 7916 阅读 · 3 评论 -
微信开发者工具-调试器
微信开发者工具-调试器调试器常用的 6 大功能模块有:Console、Sources、Network、Appdata、Storage、WxmlConsoleConsole有两大功能:1)开发者可以在此输入和调试代码2)小程序的错误输出,会显示在此处SourcesSources 用于显示当前项目的脚本文件,同浏览器开发不同,微信小程序框架会对脚本文件进行编译的工作,所以在 Sou...原创 2019-07-23 19:56:48 · 9458 阅读 · 0 评论 -
微信小程序----文字滚动(跑马灯)
wxml:<view>显示完后再显示:</view><view class="example"> <view class="box"> <view class="text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;"> ...原创 2019-07-23 19:02:29 · 2859 阅读 · 1 评论