小程序开发
文章平均质量分 71
极乐叔
极乐致力于为广大微信用户提升优质的微信小程序;为小程序开发者提供免费发布平台;为小程序爱好者提供研究平台。
旗下品牌:
极乐小程序商店:http://wxapp.dreawer.com
极乐小程序开发者联盟:http://www.wxapp-union.com
极乐大牛专栏:http://zhuanlan.zhihu.com/dreawer
展开
-
小程序和vue在这点上太相似了!
一、生命周期先贴两张图:vue生命周期小程序生命周期相比之下,小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。onLoad: 页面加载 一个页面只会调用一次,可以在onLoad中获取打开当前页面所调用的query参数。 onShow: 页面显示 每次打开页面都会调用一次。 onReady: 页面初次渲染完成 一个页面只会调用一次,代表页面已经准备妥当,可...原创 2021-07-07 13:55:56 · 1627 阅读 · 2 评论 -
分享哈啰出行小程序架构演进之路
今天跟大家分享一下哈啰出行支付宝小程序的架构演进之路。内容主要分四个部分。一是对支付宝小程序的简单介绍和我们的项目背景,二是我们遇到的问题和解决问题的思考,三是我们为了解决这些问题引出的哈啰小程序新架构,四是对未来的展望。一、小程序介绍及背景接触过支付宝小程序的同学可能不是太多,不过不要慌,你完全可以把支付宝小程序当成微信小程序,它们有非常相似的架构。都有一个大而全的IDE,如图,左中侧是一个类似 VS Code 的编辑器,右侧是小程序模拟器,顶部是配置和操作区域。通过这个IDE,开发者可以转载 2021-07-02 14:53:24 · 2222 阅读 · 0 评论 -
实现一个投票小程序全流程
因为最近想实践一下小程序的云开发能力,于是设计开发了一个简单的投票应用,欢迎感兴趣的一起学习交流。代码仓库https://github.com/luosijie/m...由于小程序【个人开发者】不开放【投票】类目,所以就不能在线预览了,我放几张应用的截图数据库设计总共用到了3个集合1. users (用户集合)基本上直接保存用用户的userInfo数据{ "_id":"023ce9555ff068de0314b5521c313ee6", "OPENID":.原创 2021-07-02 12:00:42 · 4872 阅读 · 3 评论 -
【小程序动画合集】10种小程序动画效果实现方法,文章太长建议收藏!
前言一提小程序与动画,首先想到的是什么?嗯,微信小程序独创了一套动画玩法,官方支持3种动画方案,分别是createAnimation、this.animate和CSS3动画。1.createAnimation与Animation创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。var animation = wx.createAnimation({ transformOrig...原创 2021-06-25 18:33:49 · 20880 阅读 · 2 评论 -
小程序列表数据加载优化,百万数据丝滑运行
某天闲着无聊想练一下手速,去上拉一个小程序项目中一个有1万多条商品数据的列表。在数据加载到1000多条后,是列表居然出现了白屏。看了一下控制台:‘Dom limit exceeded’,dom数超出了限制, 不知道微信是出于什么考虑,要限制页面的dom数量。一.小程序页面限制多少个wxml节点?写了个小dome做了个测试。 listData的数据结构为:listData:[ { isDisplay:true, itemList:[{ ..原创 2021-06-24 17:09:15 · 2463 阅读 · 0 评论 -
小程序学习历程(四):创建你的第一个项目
双击快捷方式,使用微信扫码登录(如:下图)。 登录成功后,我们将进入小程序开发工具的“创建项目”界面(如:下图)。 点击添加按钮,打开“创建小程序”对话窗口,默认项目名为:miniprogram-1(如:下图)。 这里有一个需要注意的地方:只有选中“不使用云服务”才能够选择开发语言,否则没有语言选项(如:下图)。 同时需要注意的是:小程序开发者的测试账号不能创建云开发项目,所以需要进行云开发的开发者,还是要注册一个正式账号。...原创 2021-03-30 10:22:10 · 286 阅读 · 0 评论 -
小程序学习历程(二):注册小程序测试号
该文适合还没有微信小程序开发者账号,以及有了开发者账号同时还想注册一个测试账号的读者。开发者测试账号推出的用意,主要是:方便我们在决定正式注册小程序账号之前,或者仅仅只是想体验一下小程序(或小游戏)的各种开发能力时,我们可以先申请一个小程序的测试账号进行体验;我们可以使用该帐号可以登录微信官方推出的《小程序开发者工具》,并创建和体验开发小程序项目。如果你想体验整个注册流程,请点击这里进行注册;这里出于简单起见,我们可以点击这里直接注册小程序开发者测试账号。如果你已经有...原创 2021-03-26 12:02:54 · 2187 阅读 · 0 评论 -
小程序学习历程(一):我们为什么要学习小程序?
自2017年微信推出《微信小程序》以来,阿里、百度、字节跳动等一众大佬平台相继也推出了自己的小程序体系。由于微信自身的强势社交属性,以及其对小程序的战略定位(连接人与服务)的前提下进行了持续的大力支持,所以到目前为止,微信小程序还是所有小程序中发展的最好的(截止2020年,市场保有量:500万套以上,年度GMV:1.6万亿)。当前,小程序已经成为企业、政府、商家等在推行线上线下一体化服务的必备选项,与现有的APP、网站等组成一个相互补充的线上服务矩阵,以便服务到不同场景中的用户;同时小程序也..原创 2021-03-26 11:59:20 · 227 阅读 · 2 评论 -
uni-app 使用前的调研和开发心得
背景之前的工时系统是原生的小程序实现,由于产品逻辑需要优化,代码混乱又仅限微信平台使用,公司致力于想给工时系统重构后支持多平台,并对外开放使用,使之成为一款真正的商业产品。经过前期调研后,uni-app对于多平台的支持最好,且易于上手,于是采用该框架对工时系统进行改造。uni-app介绍uni,读 you ni,是统一的意思。很多人以为小程序是微信先推出的,其实,DCloud才是这个行业的开创者。DCloud于2012年开始研发小程序技术,优化webview的功能和性能,并加入W3C和HTM转载 2021-01-12 20:18:20 · 1080 阅读 · 1 评论 -
使用mpx开发外卖小程序完整教程(附源码)
框架简介 Mpx 是滴滴开源的一款致力于提高小程序开发体验的增强型小程序框架,通过 Mpx ,我们能够最先进的 web 开发体验 (Vue + Webpack) 来开发生产性能深度优化的小程序,Mpx 具有以下一些优秀特性:数据响应特性 (watch/computed) 增强的模板语法(动态组件/样式绑定/类名绑定/内联事件函数/双向绑定等) 深度性能优化(原生自定义组件/基于依赖收集和数据变化的 setData) Webpack 编译 ( npm/循环依赖/Babel/ESLint/css转载 2021-01-12 11:22:22 · 2005 阅读 · 1 评论 -
5分钟实现微信云小程序支付功能(含源码)
只需要一个简单的云函数,就可以轻松的实现微信小程序支付功能1 先上效果图快速实现支付功能,有多快?有五连鞭这么快,不用搭建自己的服务器,不用买域名,不用备案域名,不用支持https。只需要一个简单的云函数,就可以轻松的实现微信小程序支付功能2 准备工作1,非个人小程序,个人小程序用不了支付(小程序appid)2,已经申请微信支付的商户号(商户id,商户秘钥)。3,小程序里关联你的商户号(小程序和商户号绑定)4,微信小程序开通云开发3 开干(1)初始化云开发环境.原创 2021-01-12 11:00:04 · 744 阅读 · 0 评论 -
小程序开发遇到的坑,知道下总是好的!
因为之前一直做的是pc端的开发,而且大部分是用的vue或者react技术栈。并且所做的web网页基本也都不需要兼容低版本浏览器,所以在开发过程中对于兼容的处理其实比较少的。然而当开始接触微信小程序原生开发之后,也开始遇到并解决了一些坑,有些是兼容性导致的,这里就简单记录下自己遇到并解决的坑,希望对你也有所帮助,不用在此浪费时间!text标签不要换行,view中如果也只有文本也不要换行这个问题真的是写div写的习惯了,特别喜欢把标签换行就像这样:<div> 中国<div>复原创 2020-12-25 17:32:01 · 350 阅读 · 0 评论 -
微信小程序实现各种特效实例
写在前面最近在负责一个微信小程序的前端以及前后端接口的对接的项目,整体上所有页面的布局我都已经搭建完成,里面有一些常用的特效,总结一下,希望对大家和我都能有所帮助实例1:滚动tab选项卡先看一下效果图吧,能够点击菜单或滑动页面切换,tab菜单部分可以实现左右滚动好了,看一下我的源码吧!<喜欢的话拿走不谢哟>1、wxml <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">原创 2020-12-01 10:37:02 · 3331 阅读 · 0 评论 -
微信小程序-微信支付
最近写了一个微信小程序的后端,微信支付(Java版)。在这里分享一下开发过程吧。首先我们要先去了解微信小程序支付开发的过程。这里说一下流程。微信小程序端获取到code,由微信小程序前端传code到后端,后端接收到code去调用微信官方接口换取openid。生成商户订单,即通过xml格式包含文档中必填的参数去调用统一下单接口(附下图),返回prepay_id.当然微信小程序需要二次签名,同样通过必填参数封装,返回给微信小程序端。(其中有很多坑,下文慢慢讲解)正文开始1、微信小程序前端获取原创 2020-11-23 11:30:30 · 585 阅读 · 1 评论 -
微信小程序-实现 tab-及多个列表选项切换
在小程序中实现tab选项切换是一个非常常见的效果,对于固定几个tab切换或许轻而易举,但若出现多个,对于有些新手,却不知道怎么控制您将阅读完本文后,将获取到两种方式实现tab切换效果,但凡以后遇到类似的需求,都可以实现(本文重点)实例效果具体实现代码微信 wxml 代码<view> <view class="tab-container"> <view class="default {{type=='expend'? 'expend-activ原创 2020-10-14 14:29:30 · 3395 阅读 · 0 评论 -
小程序开发 | 小程序密钥在哪获取?
在开发小程序的时候,小程序密钥是必须的,今天一起来了解小程序密钥在哪里获取:方法/步骤 首先我们用小程序的账号登录微信公众平台 点击开发 点击开发设置 然后就可以看到密钥 点击重置即可获得 密钥投入使用就不要重置了,会影响上线的项目 ...原创 2020-10-12 13:51:07 · 17196 阅读 · 1 评论 -
开发小程序,也许你并不需要第三方小程序框架
这里说的去除小程序框架其实并不严谨,因为小程序本身也算是一个框架,而且是一个功能更加完善的框架系统。在前端的概念中,我们一般说一个框架是指一个用来帮助开发者构建用户界面的框架,而小程序框架本身不仅仅包含了UI层的功能,还提供了API能力、服务端的能力,所以说小程序框架本身是一个比常规的前端框架更完善的东西,或者说是一个完善的构建应用系统。本文中所说的原生小程序与小程序框架的对比,均指与第三方小程序框架的对比。在小程序的世界里,原生小程序框架已经足够好,它就是那把给你雕刻小而美应用的雕刻刀,而不必要去寻找转载 2020-10-10 17:07:04 · 770 阅读 · 0 评论 -
微信小程序开发手记和大众点评实战系列
新手向!微信小程序开发手记系列:微信小程序开发手记《一》:项目的代码结构微信小程序开发手记《二》:属性display微信小程序开发手记《三》:backgroud和border属性微信小程序开发手记《四》:视图容器微信小程序开发手记《五》:组件微信小程序开发手记《六》:API大众点评实战系列:大众点评点餐-微信小程序开发经验《一》大众点评点餐小程序原创 2017-07-03 10:13:48 · 2588 阅读 · 0 评论 -
微信小程序开发 | 来自小程序开发者的实例教程
打造一款猜拳小程序打造一款猜拳小程序 go+websocket+redis+mysql《一》打造一款猜拳小程序 go+websocket+redis+mysql《二》打造一款猜拳小程序 go+websocket+redis+mysql《三》打造一款猜拳小程序 (go+websocket+redis+mysql+小程序前端)《四》 ...CTT团队实战教程原创 2017-07-13 11:54:05 · 711 阅读 · 0 评论 -
微信小程序 | 程序员开发实战系列文章④
远航1982微信小程序开发详解微信小程序开发详解 《一》开发准备,开发工具使用简介,工程目录结构 .微信小程序开发详解 《二》开发组件使用初步,配置微信小程序开发详解 《三》APP生命周期微信小程序开发详解 《四》页面生命周期和参数传递微信小程序开发详解 《五》布局基础Tong_T微信小程序项目总结微信小程序项目总结 《一》序言、准备工作、项原创 2017-07-20 14:37:51 · 1432 阅读 · 0 评论 -
微信小程序开发 | 来自小程序开发者的开发教程②
Wondgirl入门系列教程[Wondgirl] 入门系列教程 《一》上手简介[Wondgirl] 入门系列教程 《二》视图渲染[Wondgirl] 入门系列教程 《三》模板的使用、事件[Wondgirl] 入门系列教程 《四》生命周期Vincent:微信小程序实战教程Vincent:微信小程序实战教程 《一》小程序文件介绍Vincent:微原创 2017-07-17 14:38:44 · 450 阅读 · 0 评论 -
微信小程序 | 来自小程序开发者的开发教程③
程序员开发实战系列程序员开发实战系列 《一》注册、预览小程序程序员开发实战系列 《二》微信小程序架构篇程序员开发实战系列 《三》App()和Page()程序员开发实战系列 《四》视图层WXML绑定数据、模板、逻辑程序员开发实战系列 《五》视图层WXML:事件博卡君微信小程序开发教程微信小程序开发教程第 一章:微信小程序开发实操指南微信原创 2017-07-18 11:40:07 · 1080 阅读 · 0 评论 -
【教程】微信小程序入门
微信小程序入门基础知识Moustache:我的微信小程序入门踩坑之旅github精选:微信小程序入门简要教程微信小程序入门必须掌握的几个知识点ITDragon龙微信小程序入门微信小程序入门 《一》文章列表,UI框架微信小程序入门 《二》request请求微信小程序入门 《三》详情页面,上滑加载下拉刷新微信小程序入门 《四》本地缓存和搜原创 2017-07-19 11:49:07 · 2998 阅读 · 0 评论 -
微信小程序开发步骤讲解和实用小技巧
我把自己做小程序的过程稍作总结,还有一些实用技巧分享给大家。对初学者应该有用。文中提到的登录微信公众号后的功能,都是下图中的其中一个:文中提到的所有例子都在智能对话小程序里都有使用,代码详细解析见帖子 个人小程序实现自然语言对话工程查询完整代码解析1 注册 注册一个微信小程序公众号,包括账号注册和管理员信息登记,管理员信息登记很重要,因为管理员才有权限发布小程序转载 2017-08-03 12:18:00 · 6402 阅读 · 0 评论 -
微信小程序入门——增删改查+页面跳转+传值取值+布局样式
目标场景分类管理技术点读取分类列表点击某分类进入编辑页,操作编辑与删除点击列表页底部按钮,跳转添加,共用编辑页效果列表页jsvar Bmob = require('../../utils/bmob.js');var that;Page({ onLoad: functio原创 2017-08-04 14:35:51 · 7152 阅读 · 2 评论 -
世界杯来了!小程序赛事操作来一波~
NBA总决赛结束还没一周,马上世界杯就如期而至。大家在熬夜看球,而我关在小黑屋默默码字(可怜脸)。在体验到小程序的 方便快捷省内存 之后,前段时间的“骑勇大战”果断用了小程序观看。由于体验不错,又正在学习小程序知识,马上就想动手实践学习一下“腾讯体育”小程序的制作。到目前为止,只想说一句“选择是好的,过程是一言难尽的”,虽然还没全部完成,但也遇到不少问题,希望此分享可以给你带来帮助。效果图(干...转载 2018-06-20 15:09:18 · 2956 阅读 · 0 评论 -
微信小程序车牌键盘
项目背景公司要做一个停车场微信小程序,支持临时车预支付以及支付记录查询等功能,其中涉及车牌输入的功能,为了提升用户体验,避免繁琐的输入,决定自己写一个键盘。效果图如下省份简写键盘如下:省份简写键盘英文简写键盘如下:英文简写键盘源代码目录结构目录结构wxml文件内容<view wx:if="{{isShow}}" class="vehi...转载 2018-07-23 10:28:24 · 5068 阅读 · 4 评论 -
微信小程序语音聊天智能对话(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 · 7232 阅读 · 8 评论 -
两种方案开发小程序动画
在普通的网页开发中,动画效果可以通过css3来实现大部分需求,在小程序开发中同样可以使用 css3 ,同时也可以通过 api 方式来实现。指路: 小程序animatiom动画APIAPI解读小程序中,通过调用 api 来创建动画,需要先创建一个实例对象。这个对象通过 wx.createAnimation 返回, animation 的一系列属性都基于这个实例对象。创建这个对象...转载 2018-11-14 15:26:06 · 1754 阅读 · 0 评论 -
从0开始搭建微信小程序(前后端)的全过程
有段时间比较闲就尝试着做了一个微信小程序,一是为了锻炼自己独立部署一个前后端全链路系统的能力,二是想做一个自己都想用的小程序出来。方向是让用户可以集中获取优质的电影、音乐、书籍、游戏等信息的推荐,那什么是优质的信息呢?我这里假设的是排行榜里越靠前的信息就越是优质的信息,于是就做了一个这几类信息的排行榜小程序,当然排行的信息不是我随便瞎编的,数据来源主要是豆瓣以及其他一些排行网站,希望排行数据是权威...转载 2019-04-17 11:44:36 · 10951 阅读 · 2 评论 -
微信小程序开发 | 官方问答精选
SF问答精选《七》 多组件显示与隐藏如何实现、function中的...SF问答精选《六》canvas不显示问题SF问答精选《五》菜单内容左右联动、生命周期函数SF问答精选《四》eslint 配置使用 co function;apache 反向代理 ...问答《一百一十六》动态获得元素内容,点击关闭再点击...问答《一百一十五》禁止页面下拉上拉问答《一百一十四》安卓利用wx原创 2017-07-10 15:51:03 · 660 阅读 · 0 评论