04.小程序框架mpvue

7.0 基本概念

• 三个问题：
  • 是什么
    • 小程序的开发框架
  • 有什么用
    • 用来开发小程序
    • 使用 vue 的语法来开发小程序
  • 怎么用
• 学习资料
  • 官方文档
    • github 中搜索
    • http://mpvue.com/

8.0 使用步骤

• 初始化一个 mpvue 项目

  • 前置工作：

    • 下载 nodejs
    • 检查 npm 版本
    • 修改 taobao 源

  • 生成项目：

    • 方式一：

      • 安装 vue-cli 2.x 的版本

        npm install --global vue-cli@2.9
        

      • 生成项目：

        vue init mpvue/mpvue-quickstart my-project
        

    • 方式二：

      • 安装 vue-cli 3.x 版本

        npm install --global vue-cli
        

      • 安装一个 3.x 到 2.x 的桥接工具

        npm install -g @vue/cli-init
        

      • 生成项目

        vue init mpvue/mpvue-quickstart my-project
        

        ​

• 搭建小程序的开发环境

  • 运行项目：
    • cd my-project
      • 进入项目目录
    • cnpm i
      • 下载第三方包
    • npm run dev
      • 将 vue 项目打包成为小程序项目

• 调试开发 mpvue

9.0 开发模式

• 代码的编辑
  • 运行项目： npm run dev
    • 将 vue 项目打包成为小程序项目
  • 使用 vscode
• 效果的查看
  • 使用微信开发者工具

10.0 了解 mpvue 项目结构

• 入口：
  • main.js —> 加载 app.vue
  • app.vue —> 加载 app.json
  • app.json 管理了所有的页面路径
    • pages/index/main
      • pages —> index —> main.js ----> 加载了 index.vue
    • pages/log/main
• 新建一个自己的页面：
  • 步骤：
    • 找到 app.json
      • pages 中添加路径： pages/demo/main
    • 找到 pages 文件夹
      • 在 pages 中添加文件夹 demo
      • 在 demo 中添加文件
        • main.js
        • index.vue
    • 重启项目（修改 app.json 中内容之后需要重启）：
      • npm run dev

使用 mpvue 开发 lol

11.0 搭建项目结构

• 创建一个项目

12.0 完成英雄列表

• 完成静态页面
  • 结构
  • 样式
• 动态渲染数据
• 注意事项：
  • mpvue 中不能使用小程序中的数据操作语法：
    • {{}}
    • wx:for
    • bindtap
    • …
  • 如果需要设置页面的表现
    • 创建一个 json 文件: main.json
    • 在 main.json 中添加配置

13.0 完成英雄详情

• 创建页面
  • 设置一个详情的入口
  • 添加参数
  • 跳转到详情页面
  • 添加一个详情页面
• 完成静态页面
  • 结构
  • 样式
• 动态渲染数据
  • 接收数据的 id
  • 导入数据源
  • 从数据源中获取对应的详情数据
• 总结：
  • 1.0 在 template 中
    • 不要使用 小程序的中的数据操作代码
    • 可以使用小程序中的组件