自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 『教程』微信小游戏开发(教程+Demo+跳坑)canvas

社区里有一群canvas爱好者,比jsh5css,安静的小智,jeffer等同学他们在canvas方面都有着自己的学习心得和见解。但是极乐叔发现在小程序开发学习过程中还是有很多小伙伴折戟在canvas上,为此我们在社区首页教程内专门开了一个canvas学习栏目,但是觉得仍然不够,canvas在全网的知识还是太少,所以今天集中一下全网的资料,方便以后遇到问题的同学,能够从中找到可能的参考。假

2017-12-13 14:39:16 35949 3

原创 微信小程序:商城系列专辑(开发指南+精品Demo)

商城开发指南:微信小程序商城模块 | 链接使用zanui开发小程序微商城(模板组件的开发规范)| 链接ecshop商城开发:用户信息的获取和缓存,地址信息的缓存 | 链接微信小程序商城 - 基于ecshop插件接口文件 | 链接基于vue, react, node.js, go开发的微商城 | 链接移动小商城:基于node,包含前后台 | 链

2017-06-12 12:45:46 8279 1

原创 微信小程序联盟:官方文档+精品教程+demo集合(12月更新……)

1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=14764346775993:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html4:

2017-06-09 17:48:27 4325

转载 小程序多平台同构方案分析-kbone 与 remax

当前国内小程序平台众多,微信小程序、支付宝小程序、头条小程序、以及未来还会出现的新小程序平台,所以为了解决一套代码可以在多个小程序平台上运行,出现了多种方案来解决,京东的 Taro、蚂蚁的 Remax、微信的 Kbone,各有特点,主要归为两种类型,编译时与运行时适配两种。此文介绍国内主流小程序的架构,以及通过运行时适配可达到一套小程序代码运行在多个小程序平台上的方案,主要介绍 kbone 与...

2019-11-14 16:22:25 823

转载 小程序 setData 修改 data 中数组内不定对象的数据

小程序setData 修改 data 中数组内不定对象的数据普通变量的 setData()在某些时候,我们的小程序中存在的不只是像下面这样的简单的变量:变量值这种形式data: { name: 'Kyle', age: 28, mail: 'kylebing@163.com'}这种形式的数据,在需要修改的时候,只需要如下形式修改就可以了...

2019-11-06 17:03:20 249

转载 小程序的双线程模型

官方文档给出的双线程模型:小程序的宿主环境微信客户端提供双线程去执行wxml,wxss,js文件。双线程模型1.上述的渲染层上面运行着wxml文件,渲染层使用是的webview线程进行渲染(一个程序会有多个页面,也就会有多个view线程进行运作)2.js文件是运行在逻辑层,逻辑层的js是通过jscore进行运行的。通过双线程界面的渲染过程是怎样的?wxml与D...

2019-11-06 16:44:26 215

转载 小程序识别身份证,银行卡,营业执照,驾照

最近老是有同学问我小程序ocr识别的问题,就趁机研究了下,实现了小程序识别身份证,银行卡,驾照,营业执照,图片文字的功能。今天来给大家讲讲详细的实现流程。先画一张流程图出来第一次看到这个流程图,可能有点萌,什么云开发,云函数。。。。不要着急,我们接下来会一步步带大家实现。先看下我们的页面和效果图。功能其实很简单,就是我们点对应的按钮后,去拍照或者去相册选择对应的图片。然...

2019-10-31 17:29:06 1722 6

转载 小程序模块曝光埋点方法

作者:w_西城我们在处理模块曝光埋点时,需要根据页面滚动的位置判断模块是否可见(被曝光)。Web 上传统方法是增加页面 scroll 监听事件,根据滚动位置与模块位置进行对比判断,小程序上也可以使用这种方法,但现在有更便捷优雅的替代方案 —— IntersectionObserver 对象。IntersectionObserver 对象IntersectionObserver...

2019-10-25 17:35:03 375

转载 小程序如何自主实现拦截器

在一些框架中发现会提供一个很实用的功能:拦截器(interceptor)。例如要实现这个需求:小程序每次获取到定位后都存到 globalData 里:wx.getLocation({ // .. success(res) { getApp().globalData.location = res // ... }})如果每一处使用 wx.getLocatio...

2019-10-23 15:39:20 720

转载 小程序 input 数据双向绑定

我们都知道 vue 中可以使用 modal 来实现 input 内容数据的双向绑定。小程序好像没有提供相应的方法支持,就需要我们自己写了。原理很简单,在input上先绑定需要取值的变量,如这个变量名是name,然后再定义一个用于指向变量名的属性data-modal这个属性值设置为name,在input的绑定方法中将这个属性值取出,就会知道这个input绑定了哪个变量...

2019-10-22 15:09:46 453

转载 小程序登录、支付(小程序、H5)请求加密方法

本文档 当中所用到的: const $request = this.request const post = $request.call('passport/wxLogin',data) post.then(res=>{}).catch() 是自己封装的请求方法,如axios,参考时可自行更改复制代码1、js生成接口请求参数签名加密定义规则:对所有发起请求的参...

2019-10-22 15:05:03 391 1

转载 小程序数据通信方法大全

大家好,我是skinner,这是我的第7篇分享序本文论述的是子或孙向父传递数据的情况,自下而上相信大家平时在小程序开发中肯定遇到过页面或者组件之间的数据通信问题,那小程序数据通信都有哪些方式呢?如何选择合适的通信方式呢?这就是本文要讨论的重点。关系划分在讨论都有哪些数据通信方式之前,我们先来定义一下,小程序页面、组件之间都有哪些关系。我总结了一下,大概分为以下3类:...

2019-04-17 11:51:35 393 2

转载 小程序视频旋转的相关问题

背景最近在开发小程序时遇到个需求,就是在小程序页面中嵌入一个广告视频,客户给的视频时横屏播放的,但是ui显示却要求是竖屏播放,在这里记录一下实现这个效果的踩坑全过程css transform旋转video组件最初没有想很多,直接使用transform: rotate(90deg); transform-origin: 0 100%;将视频直接旋转了90°,在安卓机上测试是也确实是旋转了...

2019-04-17 11:46:36 686

转载 从0开始搭建微信小程序(前后端)的全过程

有段时间比较闲就尝试着做了一个微信小程序,一是为了锻炼自己独立部署一个前后端全链路系统的能力,二是想做一个自己都想用的小程序出来。方向是让用户可以集中获取优质的电影、音乐、书籍、游戏等信息的推荐,那什么是优质的信息呢?我这里假设的是排行榜里越靠前的信息就越是优质的信息,于是就做了一个这几类信息的排行榜小程序,当然排行的信息不是我随便瞎编的,数据来源主要是豆瓣以及其他一些排行网站,希望排行数据是权威...

2019-04-17 11:44:36 1598 1

转载 小程序分享模块超级详解

导语:在小程序项目开发中,分享能力几乎是每个项目必备的要求,但原生的分享能力比较有限,不够灵活,今天就我们就一起来研究下,如何在现有基础上,增强小程序分享的能力,使信息传递更加直观、灵活。示例项目地址:github.com/ycvcb123/sh…本文目录:小程序分享基础 API 介绍 基于 canvas 动态绘制分享图片 canvas 对不同来源图片的处理(本地图片, 网络图片...

2019-04-11 11:52:50 425 1

转载 小程序运营攻略《二》:如何注册小程序

今天,小编将手把手教大家如何注册一个小程序。小程序目前的开放注册范围个人、企业、政府、媒体、其他组织均可成为小程序的注册主体。申请注册小程序共有两种方式:方式一步骤一:登录微信公众平台(http://mp.weixin.qq.com/),单击右上角的“立即注册”。步骤二:点击“立即注册”之后,进入如下页面,选择“小程序”模块。...

2019-03-13 17:27:20 392

转载 小程序运营攻略《一》:基础知识

1、小程序的定义小程序是一种不需要下载即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一搜即可打开应用,也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题,应用无处不在,随时可用,但又无需安装2、小程序的特性触手可及:不需下载安装即可使用无处不在:线上线下多场景用完即走:走了还会回来3、小程序的功能有哪些?a.提供小程序页概念:支持分享当前信息,例如分享某股票...

2019-03-13 17:00:58 377

转载 PHP实现微信小程序用户授权的工具类

事先准备工作1.申请一个小程序,申请地址:传送门2.仔细阅读小程序的用户授权登陆官方文档:《用户授权登陆的流程》3.仔细阅读微信用户数据解密的相关文档:《用户数据解密说明文档》4.在小程序后台配置好相应的后端请求地址,路径是:开发---->开发设置,如图5.小程序如果需要做多个小程序的打通,还需要在微信开放平台绑定到开发者账号下面, 如果不需要union_i...

2019-03-05 15:11:14 793

转载 小程序touchmove事件中setData优化过程

出现场景:在做一个小球跟随手指移动的效果时候,由于在touchmove事件中频繁调用setData改变小球的位移实现,在开发工具和IOS平台还算流畅,但在安卓机下手机预览出现极其卡顿的交互,简直是不堪入目。可微信web开发者工具打开 片段代码https://developers.weixin.qq.com/s/B9UHyvmo7t6t问题根源:setData每秒调用高达50左右...

2019-03-04 11:29:22 4348

转载 从前端程序员的视角看小程序的稳定性保障

当我们谈业务稳定性的时候,通常是指后端工程师从架构的角度来看的,例如限流和降级、流量调度、业务开关、容量压测等,但监控也是整个业务稳定性建设中不可或缺的一环,例如对业务和前端的监控,以保证出现问题的时候,可以第一时间找到根因所在。今天,我们就结合小程序的场景,来看看如何做好小程序的监控。 本文转载至InfoQ大前端技术号「前端之巅」,作者慕扉,阿里巴巴高级前端工程师。 小程...

2019-03-01 11:34:33 631

转载 小程序的奇技淫巧之 computed 计算属性

小程序的出身,基于安全和管控的考虑,使用了双线程的设计,同时对于 DOM 操作、动态创建 DOM 这些都隔离了。在写代码的时候,模版语法不支持函数计算等,computed 的方法就显得十分重要了。 自定义组件 小程序的自定义组件涉及功能很多,这篇只针对computed展开来讲。 computed比较适合较复杂逻辑的计算,同时在小程序无法在模板里使用method...

2019-02-28 14:16:09 9343

转载 【合辑】深入理解小程序

大家坐稳,我要开始装逼了。说好要讲小程序系列,替埋头苦干低调做事的开发哥哥们多讲讲小程序的故事吧。《小程序自定义组件知多少》《理解小程序的安全与管控》《解剖小程序的 setData》《关于小程序的基础库》《小程序页面管理与跳转》《小程序的底层框架》《小程序的诞生》《认识小程序云开发》小程序与 WebViewWebView 的飞速发展随着公众号的出现和繁荣,WebView 的使用频率...

2019-02-26 12:08:54 173

转载 微信小程序 | 接入阿里云监控

喜大奔普,微信小程序可接入 ARMS 前端监控啦。阿里云监控可统计JS错误率,访问速度,API请求成功率,PU/PV,页面访问量,API链路追踪,地理分布,设备型号系统版本等等,还可自定义统计内容,很是方便。虽然官方文档写得很清楚,但不同框架和不同环境下的选择不同,本文供大家参考,少走弯路,快速接入。参考官方文档:https://help.aliyun.com/document_de...

2019-02-26 11:53:34 357

原创 这套学习资料,能够满足所有互联网人的工作和学习需求!

临近年关,对于大部分互联网从业人员来说,都到了最忙的时候。在临近新春的时间,大家还要苦逼的忙着撸代码、测BUG、做产品设计、写文追热点,还要设计宣传海报,搞活动做用户回馈……就连产品、运营、开发等部门之间“神仙打架”的现象也并没有因为年终将至而减少。而在你疲于应对部门之间相互沟通的时候,你有没有想过,如果有一套资料,不仅能够帮助你提升自己的专业知识,同时还能对产品、运营、设计的知识能够更深入的...

2019-01-21 11:06:17 351

转载 两种方案开发小程序动画

在普通的网页开发中,动画效果可以通过css3来实现大部分需求,在小程序开发中同样可以使用 css3 ,同时也可以通过 api 方式来实现。指路: 小程序animatiom动画APIAPI解读小程序中,通过调用 api 来创建动画,需要先创建一个实例对象。这个对象通过 wx.createAnimation 返回, animation 的一系列属性都基于这个实例对象。创建这个对象...

2018-11-14 15:26:06 1115

转载 小程序计算器

此计算器支持点击“=”后在计算,这样可以算出如2+3*4这种运算符高的在后的运算。 界面搭建功能按钮,因为样式等比较统一,所以使用wx:for循环来进行布局,每一个按键使用view控件。 wxml文件代码<!--index.wxml--><!-- 整体 --><view class='body'> <!-- 底部的按钮 ...

2018-10-30 10:33:58 459 1

转载 小程序主体迁移流程和介绍

一、小程序迁移是什么?小程序迁移”是指微信公众平台提供的,协助小程序帐号开发者将其小程序项下业务交由其他开发者的小程序承接、运营的功能和服务。迁移完成后,小程序的运营权限、主体信息将发生变化。二、小程序迁移流程  三、小程序迁移注意要点1、小程序原主体若已开通微信支付功能,迁移生效前须与原主体商户号进行解绑;若绑定支付服务商,暂不支持迁移。如需了解更多,请点击此处。2、...

2018-10-17 12:00:30 4314

转载 小程序计算器

此计算器支持点击“=”后在计算,这样可以算出如2+3*4这种运算符高的在后的运算。   界面搭建功能按钮,因为样式等比较统一,所以使用wx:for循环来进行布局,每一个按键使用view控件。 wxml文件代码<!--index.wxml--><!-- 整体 --><view class='body'> <!-- ...

2018-10-17 11:58:45 7462 1

转载 用Promise实现小程序接口链式调用

一、前言作者平时使用`mpvue`开发小程序,所以下面讲到的方法都是基于`mpvue`而言的,当然本质上原生小程序语法同样适用。 大家都知道,小程序的接口都是采用回调的方式,这样如果代码逻辑复杂了,将会导致代码难以阅读。今天就通过`ES6`的`Promise`函数,来稍微改造一下小程序接口,让我们的代码实现链式调用,便于阅读。 二、核心代码在utils目录下新建文件WXP....

2018-10-15 14:11:44 1262

转载 小程序中JSON文件中全局和子页面的字段window配置'

相信有过实际小程序开发的人,都不陌生主程序app.json和子页面的XX.json文件中window字段的配置。 如果全局都是用app.json的一个样式,那么你就可以忽略掉此文。但是你想个性化单独设置各个页面的window字段,那么问题来了,你会发现:严格按照小程序官方的window格式来设置,就是不生效,查官方文档也没有解决办法,反正我是没找到 。。。 怎么以上问题呢,毕竟...

2018-09-30 11:03:37 1308

转载 在微信小程序中渲染HTML内容

大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题。但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢?解决方案wxParse小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「 wxParse 」的库。它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来。...

2018-09-20 12:00:45 3931

原创 微信小程序之callout自定义气泡

最近闲着踩踩地图的坑,一脚下去差点没从坑里爬起来,然后由于某个原因,去研究了微信小程序里面地图callout 这个属性callout呢,是在标记的点上面显示 一个 气泡,作为提示用最后展示下 效果 可以展示 顶部气泡以及监听被点击。  废话不多说,直接上代码 wxml<map id="map" scale="{{scale}}" bindcontrolt...

2018-09-13 17:13:16 9742

转载 小程序(图片选择Dome)

使用微信小程序来实现一个图片选择器的功能,可以添加图片,可以删除图片,可以大图浏览选中的图片。 效果图下面说一下实现思路1.首先实现页面的布局整体图片选择使用一个view控件,前面选中的图片为一个block根据选择图片的数量来显示多少个,后面的选择图片按钮为一个view。选中图片上面的删除按钮,使用绝对定位和相对定位来处理。添加图片,删除图片,点击选中图片查看大图等添加一个...

2018-09-07 16:59:31 621

原创 微信小程序语音聊天智能对话(demo)

项目中用到了 olami sdk把录音或者文字转化为用户可以理解的json字符串。效果图重要jS代码: //手指按下时 语音转文字 voiceToChar:function(){ var urls = app.globalData.slikToCharUrl; var voiceFilePath = that.data.filePath; if(voiceFilePat...

2018-09-06 14:32:35 3714 4

原创 小程序远程图片资源按需预加载

最近做H5开发遇到个问题,为了防止页面打开时,出现大图加载缓慢的情况,写了一个图片资源管理器,今天顺便实现了一下小程序版。 特别说明一下,小程序由于资源包大小限制,很多图片资源会存放到CND图片服务器上,为了实现小程序初始化时按需加载远程图片资源,实现了以下加载器,希望能解决部分小程序新人开发者预加载图片的苦恼。 特别强调:本加载器为初级版本,暂未研究其他实现方式,当前实现方式...

2018-09-04 15:30:53 2775

转载 微信小程序UI规范

微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的,旨在微信生态类建立有号、高效、一致的用户体验的同时,最大程度顺应和支持各业务需求设计,实现用户与程序的共赢。一、有好礼貌为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序哎设计时应该注意减少无关的设计元素对用户目标干扰,礼貌地向用户展示程序...

2018-09-01 17:31:15 936

原创 轻松生成小程序分享海报

小程序海报组件https://github.com/jasondu/wx...需求小程序分享到朋友圈只能使用小程序码海报来实现,生成小程序码的方式有两种,一种是使用后端方式,一种是使用小程序自带的canvas生成;后端的方式开发难度大,由于生成图片耗用内存比较大对服务端也是不小的压力;所以使用小程序的canvas是一个不错的选择,但由于canvas水比较深,坑比较多,还有不同海报需要重...

2018-08-29 16:28:56 3397

转载 简易微信小程序签到功能

一、效果图点击签到后二、数据库用一张数据表存用户签到的信息,每次用户签到都会往表中添加一条记录了用户id和签到日期的数据,如下图三、后端后端写两个接口,一个用于查询用户今日是否签到和签到记录总数,一个用于添加用户签到信息到数据库。这里用的是python的flask框架。(1)查询用户签到信息接口:@app.route('/get_sign/<user...

2018-08-24 12:09:58 16417 1

原创 如何在小程序wxml文件中编写js代码

当我们创建页面时  发现有个.wxs文件 发现有个.wxs文件,关于wxs文件如何使用呢?WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。wxs可以说就是为了满足能在页面中使用js存在的,在wxml页面中,只能在插值{{ }}中写简单的js表达式,而不能调用方法,例如直接在wxml页面中直接保留数据的小数点的后两位。...

2018-08-22 13:59:16 8011

转载 微信小程序-仿微信朋友圈

自学小程序已有2个月,经手的项目及demo也已经让我快速入门当前最火热的语言之一,小程序确实有着移动APP不可比拟的优势,开发快,上线快,迭代也快......本篇简书文章只为给大家讲解思路及怎么处理,有任何不当之处,欢迎大家指出!!! 结构解析:  剖析图1、不管是拿到何种需求,我们第一步骤不是直接撸起袖子就写代码,而是先把结构弄清楚,把UI拆分成N多小模块。① ...

2018-08-17 14:40:47 8144 4

提示
确定要删除当前文章?
取消 删除