flying meng的菜鸟居

本文代码来源于笔者开源的组件库中的 atinput 组件。组件支持@功能，直接引入，方便开发。欢迎star！

这里尤其需要注意的是：获取图片区域信息时用的 API 只能获取“当前元素距离屏幕顶部的距离”。如果你在使用笔者的组件库，并且遇到了“当前组件并不是一开始就在页面上出现而是动态展示”的场景，那么您也可以通过参数将这个“偏差”传入组件。因为拖动排序，所以我们不仅需要计算当前元素的偏移，还需要计算元素偏移后和“路过元素”的位置关系 —— 临界点判断。第二种方案在笔者的功能库中也有组件：yImg。然后是子元素的宽高和padding也是动态的，没事，我们会在初始化时动态的获取它 —— 顺便添加一些我们需要的数据。

微信小程序分为“视图层”和“逻辑层”。视图层是在 webview 中渲染，逻辑层则用 JavaScriptCore 来渲染。其中视图层可以有多个，但逻辑层则只有一个。小程序中视图层负责页面渲染，逻辑层负责逻辑处理、状态管理、请求和接口调用。逻辑层和视图层的通信是通过微信的 JSBridge 实现的。逻辑层数据变化通过 JSB 通知到视图层，触发视图层更新；当视图层触发事件则继续通过 JSB 将事件通知到逻辑层做处理。WeixinJSB 在开发者工具、IOS 和 Android 的实现机制不同。在调用 Na

图片上传组件是一个组件库目前来看必不可少的功能了。笔者近日给自己开源的toy工具库也添加了这一功能。相比原生和大部分组件库来说，它不仅支持长按提示删除，还能够支持图片的拖拽排序，很是nice！（也是为了毕设时身边同学能够更快上手小程序，更加将中心侧重于逻辑和设计😜）GitHub地址：https://github.com/1314mxc/yunUI#img，欢迎使用、查看和star！小程序专栏地址（所有的组件设计也都在里面）：小程序的浪潮·初探本文我将继续介绍组件的设计思路：首先来看效果对于

canvas动画，又叫“粒子系统”，是HTML5新增的为页面添加多样化效果的绝佳实践。正巧最近做的一个天气类微信小程序紧接尾声，寻思着首页展示温度等信息的地方似乎少了点什么。到Android自带的天气预报上看了下，恍然大悟。于是结合前一段时间钻研的canvas为其添加雨雪粒子效果。小程序中的“绘图”API小程序的绘图 API 虽然也叫canvas，但跟 HTML5 的 Canvas 本质上有很大区别的，其原因是小程序的绘图（Canvas）是客户端实现的 Native UI 组件，而不是普通的 H5

微信小程序中关乎“授权”的，抛开各路“牛鬼蛇神”不谈，大体上也就两种：位置授权用户信息授权切记的是：在微信一直打着的“用户至上”的旗号下，几乎一切用户相关的应用都需要用户手动授权！所以必须要有提示的。位置授权昨天完成了微信小程序项目的最后一点内容，里面我加了个“点击自动定位”的功能，请求的是高德地图的web API，但是需要传经纬度，于是我一开始是这样写的：wx.getLocation({ type: 'gcj02', success: function(res) { va

自从上一篇文章：微信小程序自定义日历组件及flex布局最后一行对齐问题分析 出来以后，有人私聊我说能不能从头分析一下我开源的自定义组件？一直没时间。这不，最近项目中有个需求是 省市区三级联动 ，我就顺便从组件库中的第一个 「扩展日期-时间（点此直接至GitHub）」picker组件开始说一下这两个功能的实现。简单说一下“自定义日期-时间组件”它的背景是项目的第一版当时发现微信小程序内置的日期组件：picker只能精确到某一天（年月日），但是我们很多时候需要年月日时分甚至是年月日时分秒（如结束时间/发布

最近为我开源的小项目：微信小程序扩展自定义组件库（点击去GitHub） 增加了一个新组件 —— 日历组件。在编写过程中，因为大家都知道，日历组件是有固定行数和每一行的固定列数的（即使当前方块内没有值），所以结合小程序“数据优先”的特点，最合适的布局方式一定是flex了！说一下大致思路（布局上），笔者将整个组件分为两部分：分别是头部的当前日期（年月）显示，以及左右两侧的切换按钮当前切换月份的日期显示头部的布局自不多说：一个 display:flex; 加上 align-items:center;

最近看到微信小程序的保存/下载文件API，不禁一乐：官方在文档中说的有点简单啊...正巧遇到了一些使用问题，在这里慢慢给大家分享出来：

今天，就想和各位说说微信小程序中的【臂膀】——wx-key。毫无疑问，wx-key在微信小程序中可谓是“大出风头”，这一点尤其在for循环中体现出来。但wx-key的作用，你真的了解吗？事实上，作为“唯一标识”，微信小程序也极力提倡在一些组件中使用我们先来写一个简单的list列表：//wxml<block wx:for="{{arr}}"> <view>{{item}}</view></block>//js-datadata:{

于传统网页开发中的标签页切换效果不同的是，小程序的标签页切换更接近原生APP的交互体验！也就是可以通过左右滑动页面进行切换，类似于网页开发中的焦点图切换的效果。——这当然是通过微信小程序强大的组件和API实现的。目前为止，笔者知道的可以“完美”实现这一功能的，有两种方式。1、Swiper组件方式实现如图顶部的3个标签页标题用数字0、1、2来表示——这也代表绑定后页面的位置。当用户向左滑...

背景不得不提一句：微信小程序的：获取用户信息的机制改了（早就改了）。或许是不想让开发者对用户“随意”造成困扰——毕竟有的用户上来只是为了“逛一圈”。于是增加了“只有触发button才能弹窗”的功能。新版-微信授权机制<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">授权</button>//...

wxs文件 —— 可用于专门写（组件化）（通用）Js代码。像HTML中引用js（文件）一样，wxs代码同样既可以写在单独文件中，也可以写在wxml文件中，可直接掉用比如：处理服务器返回数据中的“\”如果将wxs代码单独文件书写，我们可以用如下方式引入文件：<wxs src="文件相对路径" module="util" />abc.wxsvar format=functi...

本文是总结的一点经验之谈啥是data-key微信小程序推出 data- 属性——自定义属性，为了更好的进行数据传递。总结来说，data-key="{{...}}" 是往data中传数据（有后端的话是要给后端的），而data-key="..." 是从data（有后端的话是从后端先传给data接收）传到wxml页面中怎么接收data-*的值如下：<view bindtap="SetD...

说起小程序的图片预览，不仅心力交瘁…其中不仅有我不认真阅读文档的错误，还有一些未知因素（呵呵）新版小程序，增加了wx.previewImage，这是个API，很NB。先看看 小程序官方文档 中是怎么说的：wx.previewImage({ current: url, urls: Array[] })准确的说：API里有两个值：urls里是个数组——里面放所...

小程序的本地缓存不得不说是小程序的一大亮点，在一定程度上缓解了服务器请求的压力，大大提高了性能，且因为其在移动端运行的特点，保存在本地也相比网页更安全。

说起这两个属性，就不得不说一个事：事件对象小程序官方文档中说：当事件被触发时，处理函数会响应。传入event对象，通过event对象可以获取事件触发时候的一些信息，包括时间戳、detail等。因为小程序内的事件绑定都是在 WXML 中实现的，所以传递参数只能通过 WXML 上面的属性值来传递，例如下面的代码中，indexDetail 处理函数需要接收生活指数的名称和详情，来弹出弹层提示，这时...

这几天看了小程序的文档中关于优化的部分，小程序内其实对页面已经做了预加载优化——这也是小程序的宗旨：“更快、更轻”。但其实即使这样，也没有办法完全挡住一个页面中n多个函数的使用（尤其是没有营养的废函数）…合理使用小程序事件小程序的响应式由视图层对事件进行监听，时间处理函数是通过视图层传递到逻辑层处理的。大量无用的事件绑定会大大增加视图层和逻辑层的通信，从而降低其他数据传输的响应时间，造成页面...

昨天在看自己写的小程序项目，无意中打开了CSDN APP，突然间觉得，我去，如果在小程序中加个“签到”功能，岂不美哉！（好吧，其实是昨天买的书没到货，然后闲着无事，就想起了大明湖畔的“签到”）但是吧，又不想写和服务器交互的，本着“简单点”的原则，我想起了曾经的挚爱—— 本地存储 。先说说相关注意吧：其一就是 storage中只能存放字符串！我去，昨晚大部分时间都是在搞这个。以前一直认为存放...

一直觉得，小程序与Vue有着神似之风。这一点在我第一天开始接触小程序时就这么认为，或者说，任何前端相关的语言，不管是node.js、Vue、angular、小程序，都和js有着千丝万缕的联系。而最让我“着迷”的，莫过于曾让我夜夜辗转反侧的“ 数据传递（数据绑定） ”了。趁着一次偶然提起，将其记录下来。