小程序到底有多火,看看目前推出的开源框架以及组件库就知道了。由于小程序开发的火爆,大家都在致力于探索如何更好的,更加高效的开发小程序,以至于很多公司都贡献了小程序开源框架和组件库。
mpvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。使用 mpvue 开发小程序,你将在小程序技术体系的基础上获取到这样一些能力:
彻底的组件化开发能力:提高代码复用性
完整的 Vue.js 开发体验
方便的 Vuex 数据管理方案:方便构建复杂应用
快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload
支持使用 npm 外部依赖
使用 Vue.js 命令行工具 vue-cli 快速初始化项目
H5 代码转换编译成小程序目标代码的能力
Github:https://github.com/Meituan-Dianping/mpvue
官网:http://mpvue.com/
Tina.js 一款轻巧的渐进式微信小程序框架。
特性: 轻盈小巧。 极易上手,保留 MINA (微信小程序官方框架) 的大部分 api 设计;无论你有无小程序开发经验,都可以轻松过渡上手。 渐进增强,既有状态管理器,也有路由增强,还可以自己编写插件。
Tina.js 开源框架地址:https://github.com/tinajs/tina
Taro 是由京东 - 凹凸实验室打造的一套遵循 react 语法规范的多端统一开发框架。我要没记错的话,是最近刚刚开源的。
使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、App 端等)运行的代码。同时 Taro 还提供开箱即用的语法检测和自动补全等功能,有效地提升了开发体验和开发效率。
官网:http://taro.aotu.io/
GitHub: http://github.com/nervjs/taro
WePY 是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions 的引入都是为了能让开发小程序项目变得更加简单,高效。
特性:
类 Vue 开发风格
支持自定义组件开发
支持引入 NPM 包
支持 Promise
支持 ES2015 + 特性,如 Async Functions
支持多种编译器,Less/Sass/Styus、babel/Typescript、Pug
支持多种插件处理,文件压缩,图片压缩,内容替换等
支持 Sourcemap,ESLint 等
小程序细节优化,如请求列队,事件优化等
Github :https://github.com/Tencent/wepy
官网:https://tencent.github.io/wepy
weweb 是一个兼容小程序语法的前端框架,你可以用小程序的写法,来写 web 应用。如果你已经有小程序了,通过它你可以将你的小程序运行在浏览器中。
特性: 跨平台,一套代码多端运行(小程序、h5、未来直接打包成安卓、ios app 也不是梦) 自带常用组件,完美继承了小程序内置组件 兼容小程序 rpx 语法,使页面更容易适配各种机型
GitHub:https://github.com/wdfe/weweb
Touch WX 是一套完全免费的微信小程序开发框架,包含丰富的 UI 控件用于官方组件的补充。特点如下:
1、组件扩充:
增加了 30 多种常用的组件用于官方组件的补充。
2、功能扩充:
兼容阿里的 iconfont 图标库,海量矢量图标随意使用;补充了常用样式库、支持 less 语法、支持全局配置主题色等
3、开发体验改善:
四文件方式改为单文件方式,通过 VSCode 编辑器 + 插件的方式开发,拥有 web 开发体验;
4、小程序转为 H5 应用:
可以与 H5 开发框架 Touch UI 工程相互转换,发布成 webApp。开发一套代码,拥有两套应用。
这套框架的原理是:
将 Touch WX 工程中所写的代码进行编译,直接输出为微信小程序工程原始代码。扩充的 30 多种组件,完全是基于小程序官方的自定义组件机制实现(row&col 除外)。
所以它支持小程序的全部语法,怎么开发小程序,就怎么开发 Touch WX。
不过因为是单文件的开发方式,在文件的代码结构上稍有不同。请注意这一点。
这样好处在于:
1、开发者迁移成本很小。
可以轻松的将已有的小程序移植为 Touch WX 工程,来使用它的扩展能力;
2、便于排查错误。
当遇到问题时,开发者也可以随时查看输出的小程序原始代码来定位问题所在。不会搞不清楚到底是框架问题还是自己代码的问题;
3、按需编译
由于小程序对体积有限制,在使用框架开发时,只有使用到的组件才会编译输出为小程序源码。没用到的不会输出。
4、不会对框架产生依赖。
GitHub:https://github.com/uileader/touchwx
官网:https://www.wetouch.net/wx.html
开发小程序的过程中踩的坑不可谓不多,而有些坑也实在是让人郁闷,不扒一扒难以平我心头之愤呐。
小程序的启动方式:冷启动和热启动,小程序冷启动时,会检查小程序是否有最新版本。如果有则将异步下载最新版本,但是仍将运行当前版本等到下一次冷启动时再运行最新版本。
最近在做小程序开发的时候,发现小程序老是报Do not have xxx handler in current page... 惊不惊喜,意不意外,这是什么原因引起的呢?下面就整排查错误的解决办法。
微信小程序-微信小程序可以通过API获取当前位置的经纬度,在微信小程序开发文档中可以找到这个API的使用示例,但是需要获取具体地址就需要使用到外部的API(此处用到的是腾讯的位置服务)
选择优秀的框架,能帮助我们节省开发时间,提高代码重用性,让开发变得更简单。下面就整理关于微信小程序的前端框架,推荐给大家。
小程序开放至今,许多公司企业已经开发出了自己的小程序。这篇文章主要整理分享:微信小程序UI组件、开发框架、实用库、开发工具、服务端、Demo等
这篇文章主要讲解微信小程序如何实现 侧边栏滑动 功能 ,首先实现的思路为:wxml页面结构分为2层:侧边栏菜单、正文部分;正文部分监听touchstart、touchmove、touchend触摸事件
微信小程序生命周期函数:onLoad: 页面加载。onShow: 页面显示每次打开页面都会调用一次。onReady: 页面初次渲染完成,onHide: 页面隐藏,onUnload: 页面卸载。在小程序中所有页面的路由全部由框架进行管理
三种办法实现小程序的动画效果: 每帧setData()、使用Animation实现旋转效果、使用keyfreams。在wxss中通过控制transform组件的属性,来实现旋转效果,我也是采用的这种方式,性能上面提示非常多
在小程序进行socket链接的时候发现:在1.7.0版本之前,一个微信小程序同时只能有一个 WebSocket 连接,而且在连接socket的时候,发现在还没有进行subscribe的情况下,就直接进行了广播,并且自动关闭了socket连接。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!