Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
---|---|---|---|---|---|---|---|---|---|---|
Mpx | 3,440 | 5 | 23 | 13 hours ago | 486 | November 22, 2023 | 34 | apache-2.0 | JavaScript | |
Mpx,一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架 | ||||||||||
Electron Vue Cloud Music | 2,189 | a year ago | 29 | mit | Vue | |||||
🚀Electron + Vue 仿网易云音乐windows客户端 | ||||||||||
Alova | 2,108 | 15 | 17 hours ago | 131 | November 24, 2023 | 11 | mit | TypeScript | ||
Request strategy library for MVVM libraries such as Vue.js, React.js and Svelte.js | ||||||||||
Vue Query | 1,019 | 18 | 7 months ago | 78 | September 18, 2022 | 10 | mit | TypeScript | ||
Hooks for fetching, caching and updating asynchronous data in Vue | ||||||||||
Ky Universal | 658 | 227 | 199 | 3 months ago | 18 | July 28, 2023 | 2 | mit | JavaScript | |
Use Ky in both Node.js and browsers | ||||||||||
Vue Json Excel | 617 | 52 | 59 | 2 years ago | 43 | October 05, 2020 | 66 | mit | Vue | |
Vue Video | 261 | 10 months ago | 2 | Vue | ||||||
vue + vue-router + vuex + (fetch->axios) | ||||||||||
Progressive Weather App | 210 | 6 years ago | 2 | Vue | ||||||
A local weather app that fetches weather forecast from Openweathermap.org. A Progressive Web App built with Vue.js. | ||||||||||
Nuxt Dev To Clone | 149 | 2 years ago | 4 | Vue | ||||||
Build DEV.TO clone with Nuxt.js and new `fetch` hook | ||||||||||
Buy All Steam Games | 143 | 5 months ago | 1 | mit | PHP | |||||
see how much does it cost to buy all steam games |
Mpx, 一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架。
欢迎访问https://mpxjs.cn,跟随我们提供的文档指南使用Mpx进行跨端小程序开发。
Mpx 2.9 版本正式发布,支持原子类、SSR和构建产物体积优化,更多详情查看这里,迁移指南查看这里,相关指南及 API 参考文档已更新。
Mpx是一款致力于提升小程序开发体验和用户体验的增强型小程序跨端框架,通过Mpx,我们能够以类Vue的开发体验高效优雅地构筑出高性能跨端小程序应用,在所有开放的小程序平台及web平台中运行。
Mpx具有以下功能特性:
# 安装mpx脚手架工具
npm i -g @mpxjs/cli
# 初始化项目
mpx create mpx-project
# 进入项目目录
cd mpx-project
# 安装依赖
npm i
# development
npm run serve
# production
npm run build
使用小程序开发者工具打开项目文件夹下dist中对应平台的文件夹即可预览效果。
<template>
<!--动态样式-->
<view class="container" wx:style="{{dynamicStyle}}">
<!--数据绑定-->
<view class="title">{{title}}</view>
<!--计算属性数据绑定-->
<view class="title">{{reversedTitle}}</view>
<view class="list">
<!--循环渲染,动态类名,事件处理内联传参-->
<view wx:for="{{list}}" wx:key="id" class="list-item" wx:class="{{ {active:item.active} }}"
bindtap="handleTap(index)">
<view>{{item.content}}</view>
<!--循环内部双向数据绑定-->
<input type="text" wx:model="{{list[index].content}}"/>
</view>
</view>
<!--自定义组件获取实例,双向绑定,自定义双向绑定属性及事件-->
<custom-input wx:ref="ci" wx:model="{{customInfo}}" wx:model-prop="info" wx:model-event="change"/>
<!--动态组件,is传入组件名字符串,可使用的组件需要在json中注册,全局注册也生效-->
<component is="{{current}}"></component>
<!--显示/隐藏dom-->
<view class="bottom" wx:show="{{showBottom}}">
<!--模板条件编译,__mpx_mode__为框架注入的环境变量,条件判断为false的模板不会生成到dist-->
<view wx:if="{{__mpx_mode__ === 'wx'}}">wx env</view>
<view wx:if="{{__mpx_mode__ === 'ali'}}">ali env</view>
</view>
</view>
</template>
<script>
import { createPage } from '@mpxjs/core'
createPage({
data: {
// 动态样式和类名也可以使用computed返回
dynamicStyle: {
fontSize: '16px',
color: 'red'
},
title: 'hello world',
list: [
{
content: '全军出击',
id: 0,
active: false
},
{
content: '猥琐发育,别浪',
id: 1,
active: false
}
],
customInfo: {
title: 'test',
content: 'test content'
},
current: 'com-a',
showBottom: false
},
computed: {
reversedTitle () {
return this.title.split('').reverse().join('')
}
},
watch: {
title: {
handler (val, oldVal) {
console.log(val, oldVal)
},
immediate: true
}
},
handleTap (index) {
// 处理函数直接通过参数获取当前点击的index,清晰简洁
this.list[index].active = !this.list[index].active
},
onReady () {
setTimeout(() => {
// 更新数据,同时关联的计算属性reversedTitle也会更新
this.title = '你好,世界'
// 此时动态组件会从com-a切换为com-b
this.current = 'com-b'
}, 1000)
}
})
</script>
<script type="application/json">
{
"usingComponents": {
"custom-input": "../components/custom-input",
"com-a": "../components/com-a",
"com-b": "../components/com-b"
}
}
</script>
<style lang="stylus">
.container
position absolute
width 100%
</style>
更多示例请查看官方示例项目
Mpx的核心设计思路为增强,不同于业内大部分小程序框架将web MVVM框架迁移到小程序中运行的做法,Mpx以小程序原生的语法和技术能力为基础,借鉴参考了主流的web技术设计对其进行了扩展与增强,并在此技术上实现了以微信增强语法为base的同构跨平台输出,该设计带来的好处如下:
框架太多坑,不如用原生
的顾虑;不管是增强输出还是跨平台输出,最终的dist代码可读性极强,便于调试排查;核心团队: hiyuki, Blackgan3, anotherso1a, CommanderXL, yandadaFreedom, wangxiaokou, OnlyProbie, pagnkelly, thuman, theniceangel, dolymood
外部贡献者:sky-admin, pkingwa, httpsxiao, lsycxyj, okxiaoliang4, tangminFE, codepan, zqjimlove, xuehebinglan, zhaoyiming0803, ctxrr, JanssenZhang, heiye9, lj0812, SuperHuangXu, twtylkmrh, NineSwordsMonster
微信小程序
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|---|
滴滴出行 | 出行广场 | 滴滴公交 | 滴滴金融 | 滴滴外卖 | 司机招募 | 小桔加油 |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
彗星英语 | 番薯借阅 | 疫查查应用 | 小桔养车 | 学而思直播课 | 小猴启蒙课 | 科创书店 |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
在武院 | 三股绳Lite | 学而思优选课 | 食享会 | 青铜安全医生 | 青铜安全培训 | 视穹云机械 |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
店有生意通 | 花小猪打车 | 橙心优选 | 小二押镖 | 顺鑫官方微商城 | 嘀嗒出行 | 汉行通Pro |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
交圈 | 青桔单车 | 滴滴顺风车 | 滴滴代驾 | 新桔代驾 | 标贝知音 |
其他平台小程序:
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
滴滴出行(支付宝) | 小桔充电(支付宝) | 唯品会(QQ) | 口袋证件照(百度) | 唯品会(百度) | 唯品会(字节) |
更多案例,若你也在使用Mpx框架开发小程序,并想分享给大家,请填在此issue中。
提供 微信群 / QQ群 两种交流方式
图片因github网络问题导致不可见的朋友可以点击该链接:https://s.didi.cn/rod