• MPX 小程序框架 - Tracy 小笔记


    第1章Mpx课程导学

    1-1 mpx介绍

    MPX:全面拥抱原生的框架

    官方文档:Introduction · mpx文档

    基于 Mobo 实现高效的数据相应,基于 webpack 实现基于依赖手机的优化编译

    1-2开始

    1. 下载开发者工具
    2. 根据 mpx 官方文档安装 mpx
    3. 根据文档初始化项目,可以开发微信小程序,支付宝小程序,QQ小程序等等
    4. 进入目录安装 依赖
    5. # development
      npm run watch

      # production
      npm run build
    6. 打开开发者工具,导入dist/wx,填写 appID
      同时  appID 也要填写到项目 project.config.json 中的 appid 中
    7. 开发者工具左上角 :模拟器和调试器我们总用,编译器是可以看的但是不能再这里改,因为这是我们框架生成的原生的代码
    8. 打开 vs-code
    9. 下载相关插件 在mpx 文档的单位件-编辑器、IDE 配置中
      vscode 添加插件 mpx、minapp、Vetur、Color Highlight、language-stylus等

    1-3 效果演示

    1. 开 mpx 官方github: github.com/didi/mpx
    2. donwload 下来
    3. 项目在examples 文件夹中
    4. 试跑 examples/todoMVC 项目
    5. npm install
    6. npm run build,  这个命令能生成 dist 文件夹中的文件
    7. 微信开发者 工具导入该项目
    8. src/app.mpx 小程序入口文件