程序员经验分享-hwhale

小程序Mpx框架入门

2023-05-16

文章目录

  • 简介
  • 一、Mpx的特点
    • 1.使用原因
    • 2.设计思路
    • 3.与其他框架的区别
  • 二、安装使用
    • 1.相关命令
    • 2.项目创建演示
  • 三、Mpx在vscode中的相关插件
  • 四、学习Mpx框架开发
    • 1.Mpx具有的功能特性
    • 2.学习的资源
  • 总结

简介

Mpx是一款致力于提高小程序开发体验和开发效率的增强型小程序框架，附带完善的周边生态，提供了类似Vue的开发体验。通过Mpx，我们能够高效优雅地开发出具有极致性能的优质小程序应用，并将其输出到各大小程序平台和web平台中运行。

一、Mpx的特点

1.使用原因

  • 原生小程序开发存在诸多缺陷
    比如：缺乏状态管理、数据响应能力，npm支持不完善等
  • 业内小程序框架解决了部分问题，但存在性能、易用性等问题

2.设计思路

  • 基于小程序本身的技术标准进行增强
    意味着Mpx框架完全支持小程序规范，坑少，可预期性好
  • 基于Mobx实现高效的数据响应
  • 基于Webpack实现基于依赖手机的优化编译

3.与其他框架的区别

在这里插入图片描述

  • 更专注，更专业
  • 更易用，坑更少

二、安装使用

前提：已安装了node和npm

1.相关命令

# 安装mpx脚手架工具
npm i -g @mpxjs/cli

# 初始化项目
mpx init mpx-project

# 进入项目目录
cd mpx-project

# 安装依赖
npm i

# development
npm run watch

# production
npm run build

2.项目创建演示

注意：需先安装mpx脚手架工具，在命令行工具或者终端上输入：npm i -g @mpxjs/cli，安装完后再输入Mpx -V，如下图出现版本号则说明已经安装成功。
在这里插入图片描述
以下演示创建项目：
初始化一个项目，一直回车即可
在这里插入图片描述
进入项目目录，并安装依赖
在这里插入图片描述
对项目进行开发
在这里插入图片描述
使用小程序开发者工具打开项目文件夹下dist中对应平台的文件夹即可预览效果。
在这里插入图片描述
Mpx框架的项目不要在开发者工具上编写代码，应该使用vscode等编辑工具来修改项目。项目使用vscode打开项目，然后就可以在src目录下的文件进行编写了。
在这里插入图片描述

三、Mpx在vscode中的相关插件

mpx
官方推荐的语法高亮插件

minapp
提供了MPX内 <template> 内的微信小程序语法提示

Vetur
这个插件是vue提供的vscode下的开发工具

Color Highlight
这个插件可以将我们Stylus内的颜色渲染出来（可选）

language-stylus
这个插件主要是为我使用的Stylus服务（可选）

四、学习Mpx框架开发

1.Mpx具有的功能特性

  • 数据响应 (赋值响应 / watch / computed)
  • 增强模板语法 (动态组件 / 样式绑定 / 类名绑定 / 内联事件函数 / 双向绑定 / refs)
  • 极致性能 (运行时性能优化 / 包体积优化 / 框架运行时体积14KB)
  • 高效强大的编译构建 (基于webpack / 兼容webpack生态 / 兼容原生小程序 / 完善支持npm
  • 场景下的分包输出 / 高效调试)
  • 单文件组件开发
  • 渐进接入 / 原生组件支持
  • 状态管理 (Vuex规范 / 支持多实例Store)
  • 跨团队开发 (packages)
  • 逻辑复用 (mixins)
  • 周边能力支持 (fetch / api增强 / mock / webview-bridge)
  • 脚手架支持
  • 多平台增强 (支持在微信、支付宝、百度、qq、头条小程序平台中进行增强开发)
  • 跨平台编译 (支持以微信为base，将一套代码转换输出到支付宝、百度、qq、头条小程序
  • 平台和web平台中运行)
  • TypeScript支持 (基于ThisType实现了完善的类型推导)
  • I18n国际化
  • 单元测试支持 (即将到来)
  • 快应用输出 (即将到来)

2.学习的资源

官方文档
慕课网：零基础入门 mpx 小程序框架
官方的示例项目：todoMVC

总结

小程序Mpx框架是一个类似于Vue开发的框架，因此真正学习它之前，应该先去学习小程序的原生开发和Vue框架。在原生小程序和Vue框架的基础上只需要理解Mpx框架本身的一些特性，学习起来效果会更好。Mpx框架作为小程序增强型框架，一套代码可以生成多个平台的小程序，因此掌握Mpx框架可以提高我们开发小程序的效率。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

小程序Mpx框架入门 的相关文章

  • ssh 登录失败

    SSH远程登录失败 xff0c 提示 Password authentication failed The authenticity of host 39 10 3 25 201 10 3 25 201 39 can 39 t be est

  • 【Vue】集成HTTP库Axios

    安装 进入vue项目目录 npm install axios 64 0 21 0 save 版本 简单使用 在一个页面中通过axios发送请求拿到后端数据 Home vue span class token function import

  • 【Nginx】mac快速安装使用

    效果图 安装 查找 brew search nginx 可用版本 使用 brew install nginx 安装nginx 查看brew列表 span class token punctuation span base span clas

  • 【Vue】vue3数据绑定

    文章目录 Vue2分析当前应用环境类型项目代码结构vue3取代生命周期函数的应用 vue3响应式ref xff08 xff09 数据绑定响应式reactive xff08 xff09 数据绑定比较两者 Vue2 分析当前应用环境 企业老项目

  • 【Java】SpringBoot整合多数据源JdbcTemplate、Mybatis、Jpa

    SpringBoot 整合 JdbcTemplate 多数据源 pom span class token comment lt 引入阿里的数据源 gt span span class token tag span class token t

  • 【Vue】集成Vuex存储

    导入 官网https vuex vuejs org zh installation html E7 9B B4 E6 8E A5 E4 B8 8B E8 BD BD cdn E5 BC 95 E7 94 A8 安装 npm install

  • element-plus日历(Calendar)动态渲染+避坑指南

    效果图 实战代码 span class token operator lt span template span class token operator gt span span class token operator lt span

  • 【opencv3】PnP测距（完整流程附C++代码）

    概述 我们只要获得特征点的世界坐标 xff08 三维坐标 xff09 2D坐标 xff08 像素坐标 xff09 相机内参矩阵 相机畸变参数矩阵以上四个参数即可以解得相机与标志物之间的外参 xff08 旋转矩阵R 平移矩阵T xff09 x

  • 【opencv3】鼠标框选矩形并显示当前像素点坐标和矩形中心点坐标C++

    实现目标 xff08 1 xff09 用鼠标在图中框选矩形目标 xff0c 然后保存框选的图片 xff1b xff08 2 xff09 鼠标拖动过程中要求显示框的线条以及鼠标当前像素点信息 xff08 坐标和RGB值 xff09 xff1b

  • TensorFlow入门教程（十三）：利用inception-v3训练自己的模型

    一 训练自己模型的方法 inception v3 最初是在ImageNet比赛训练的 xff0c 其分类有1000多种 xff0c 但对于自己的特定目标 xff0c 分类效果并不好 xff0c 需要自己再对自己的数据进行训练 xff0c 有

  • 本地代码修改后如何更新Gitee仓库

    1 git status 查看当前有变更的代码文件 2 git add 你本地所有修改了的文件添加到暂存区 3 git commit m xxxxx 引号里面是你的介绍 xff0c 就是你的这次的提交是什么内容 xff0c 便于你以后查看

  • 大小端模式

    32位数字0x12345678在内存中的表示形式为 xff1a 1 大端模式 xff1a Big Endian就是高位字节排放在内存的低地址端 xff0c 低位字节排放在内存的高地址端 网络上的数据都是以大端数据模式进行交互的 低地址 gt

  • torch 和numpy的相互转化

    span class token keyword import span math span class token keyword import span torch span class token keyword import spa

  • 我的第二篇博客（vue中的瀑布流插件 vue-waterfall-easy）

    vue waterfall easy是一款很好的瀑布流插件 以下是代码 转载自GitHub的官方文档 https github com lfyfly vue waterfall easy 以下是代码 span class token ope

  • table_exists_action=append和table_exists_action=truncate

    table exists action 61 append和table exists action 61 truncate 一 环境准备 1 1 192 168 1 22上创建single01 student表 SQL gt select

  • 记录oracle的几个参数 db_files,Cursor_sharing ,open_cursor

    db files 定义了oracle数据中数据文件 的个数 xff0c 当数据文件个数超过这个参数设定的值就会报ORA 00059这个错误 这个参数设置的值的大小不会影响效率 xff0c 只是单纯的控制数据文件的个数 详情请看 xff1a

  • 【原】expdp参数CONTENT

    作者 xff1a david zhang 64 sh 转载时请以超链接形式标明文章 链接 xff1a http www cnblogs com david zhang index archive 2012 03 01 2376059 htm

  • 动态性能视图概述

    动态性能视图概述 动态性能视图属于数据字典 xff0c 它们的所有者为SYS xff0c 并且多数动态性能视图只能由特权用户和DBA用户查询 当数据库处于不同状态时 xff0c 可以访问的动态性能视图有所不同 启动例程时 xff0c ORA

  • 安装oracle19c时报错DBT-50000

    转载于 xff1a 重庆思庄每日技术分享 安装oracle19c时报错DBT 50000 知乎 在Windows10上使用dbca配置oracle19 3 0 0时 xff0c 报错DBT 50000 无法检查可用内存 查找官方文档2631

  • oracle 不直接提供的软件包和数据库下载

    oracle 不直接提供的软件包和数据库下载 想要下载11 2 0 1的client xff0c 点击提示的doc id 进入如下文章界面 点击提示的网址 xff1a 进入如下界面 xff1a 点击登陆 xff0c 进入如下界面 xff1a

随机推荐

  • ora-245control file backup failed； target is likely on a local file system

    一 rac环境控制文件快照位置存放错误 xff08 以下内容转载自ora 00245报错解决方法 晟数 博客园 xff09 1 发现问题 最近使用备份软件对客户11G RAC数据库进行备份 xff0c 发现备份失败查看日志发现数据库报ORA

  • PDB导出导入

    检查当前目录 set linesize 100 col DIRECTORY NAME for a20 col OWNER for a10 col DIRECTORY PATH for a50 select from dba director

  • 麒麟安装问题

    对于本系统 需要打开 firewall cmd zone 61 public add port 61 8001 tcp permanent firewall cmd zone 61 public add port 61 8011 tcp p

  • 单实例11g升级到19c

    11g的服务器上安装19c的软件 安装完成后 xff0c 不需要关库 xff0c 修改环境变量为19c的 xff0c 执行dbua开始下述升级 11g升级到19c 执行预检查

  • 编译方式安装mysql

    转载于 xff1a 编译编译方式安装mysql编译 环境准备 环境 xff1a 硬件为4C 4G 50G 系统版本为redhat7 9 创建用户和组 创建MySQL用户和组 并且用户不能登陆 系统自带mysql软件 xff0c 安装时会自动

  • mysql 5.7登陆简单密码问题

    lucifer mysql gt update user set authentication string 61 password 39 mysql 39 where user 61 39 root 39 Query OK 1 row a

  • 5.7及以下版本mysql不能插入中文

    转载于 xff1a https blog csdn net qq 59500621 article details 122390644 5 7及以下版本mysql默认数据库使用的字符集是Latin1 我们需要为其修改字符集为 xff1a u

  • 备库failover升级

    1 centos 6 9 single06 gt centos7 9 single06std 11 2 0 4 搭建上面的dg 2 adg上打补丁psu xff1a 31537677 3 centos 7 9 上安装19c软件 xff0c

  • Data Guard高级玩法：通过闪回恢复failover备库

    转载于 xff1a Data Guard高级玩法 xff1a 通过闪回恢复failover备库 ITPUB博客 今天看到有一个网友提了一个问题 xff0c 描述很简短 测试DG时 xff0c 主库不能宕机 xff0c 如何测试failove

  • Oracle性能调查之ASH

    转载于 xff1a Oracle性能调查之ASH xff08 一 xff09 腾讯云开发者社区 腾讯云 在ORACLE性能问题调查时 xff0c 有价值的诊断情报多 xff1a STATSPACK xff0c AWR xff0c ASH x

  • 记录一次网卡问题

    问题 xff1a root 64 rac19c01 ip a 1 lo lt LOOPBACK UP LOWER UP gt mtu 65536 qdisc noqueue state UNKNOWN group default qlen

  • CRS-1705: Found 1 configured voting files but 2 voting files are required

    背景 xff1a vmware虚拟机安装两节点19c rac xff0c 执行node1 root脚本时正常 xff0c 执行node2的root脚本时报错 报错如下 xff1a CRS 2672 Attempting to start 3

  • wwid和uuid的区别

    转载于 xff1a https blog csdn net zwjzqqb article details 80321348 1 wwid 每个SCSI磁盘都有一个WWID xff0c 类似于网卡的MAC地址 xff0c 是独一无二的 可以

  • Sm2记录介绍

    SM2是国家密码管理局于2010年12月17日发布的椭圆曲线公钥密码算法 xff0c SM2采用的就是ECC 256位的一种 1 签名验签 SSWINAPI SGD UINT32 DEVAPI SKF ECCSignData SGD HDL

  • xshell之for循环

    转载于 xff1a shell while read line 与for循环的区别 冥想心灵 博客园 cnblogs com 例子 xff1a while read line 是一次性将文件信息读入并赋值给变量line xff0c whil

  • virtualbox安装虚拟增强功能

    1 分配光驱 xff0c 选择windows的光驱 2 会发现出现了CD驱动器VBoxGuestAdditions 双击进去 xff0c 发现目录如下 xff1a 3 双击执行VBoxGuestAdditions exe

  • #蓝桥杯嵌入式组#历年客观题解析

    文章目录 第八届初赛第八届决赛第九届初赛第九届决赛第十届初赛第十届决赛 第八届初赛 C D 线与功能 xff1a 两个或多个输出信号连接在一起可以实现逻辑 与 的功能 OC门 xff0c 即 集电极开路 xff0c 实际上只是一个NPN型三

  • Git在vscode中简单使用

    Git在vscode中简单使用 一 Git安装与配置 1 Git安装 xff08 官网地址 xff1a https git scm com xff09 2 Git配置 xff08 1 xff09 安装好后 xff0c 桌面右键 Git Ba

  • 小程序云开发入门

    文章目录 前言一 开通云开发二 使用云开发1 直接创建云开发项目2 修改配置文件引入云开发 三 云数据库1 介绍2 使用 四 云函数1 介绍2 使用 五 云存储1 介绍2 使用 总结 前言 一个小程序在开发时 xff0c 除了考虑界面功能逻

  • 小程序Mpx框架入门

    文章目录 简介一 Mpx的特点1 使用原因2 设计思路3 与其他框架的区别 二 安装使用1 相关命令2 项目创建演示 三 Mpx在vscode中的相关插件四 学习Mpx框架开发1 Mpx具有的功能特性2 学习的资源 总结 简介 Mpx是一款

热门标签