February 7, 2021
By: cici.Liu

2020项目总结：小程序项目

  1. 概要
  2. 开发语言的介绍
  3. 技术总结
    1. 构建
    2. VueX
    3. 小程序分包
  4. 经验总结与收获

概要

涉及到的项目主要有：

  1. 定制类的：艾莱依、特裁、京城、woo 等
  2. 工具类的：量体工具（正在开发中）
  3. 医疗类的：协和、alk等
  4. 展示类的：小程序直播、sass化小程序

开发语言的介绍

  1. mpvue官网

  2. mpvue, 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

  3. 与原生小程序开发的优势在于：

    • 集中数据管理 vuex
    • 样式规范，原生使用wxss ,mpvue 可使用 sass,less以及postcss
    • mpvue 可以支持自动化构建 webpack
    • mpvue 可以使用html标签和小程序标签
    • .......
    • 详细对比可查看 ​

技术总结

构建

  1. 全局安装npm install --global vue-cli
  2. 运行vue init mpvue/mpvue-quickstart 项目名称
  3. cd 进入项目，安装依赖，如 moment等
  4. 项目创建完成后打开project.config.json文件找到appid进行小程序id配置
  5. 运行npm run dev或npm start 启动项目
  6. 下载 [微信开发者工具] (https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html) 打开项目即可

VueX

  1. VueX是适用于在Vue项目开发时使用的状态管理工具,类似于Clojure 里的db。

  2. 成员列表：

  • state 存放状态
  • mutations state成员操作
  • getters 加工state成员给外界
  • actions 异步操作
  • modules 模块化状态管理
  1. 工作流程：
  • 安装 npm i vuex -s , 项目的src文件夹下会多一个store 的文件夹，如图
  • 在actions-types.js 创建type
  • 在mutation-types.js 创建type
  • 在modules文件下创建 如about.js
  • 在index.js 文件下引入创建的about.js
  • 页面中使用

小程序分包

  1. 为什么分包？

    • 整个小程序所有分包大小不超过 8M
    • 单个分包/主包大小不能超过 2M

  2. 利用插件 mpvue-entry ,目的是把每个page页面下的main.js 抽离出来

    • src下创建userCenter的分包,如图：
    • 在main.json中的pages要清空重写, 如图：
    • 在pages.js文件创建路径,如图：

经验总结与收获

  • 参与的小程序前端开发既有团队协作也有个人实现，熟悉了整个小程序的开发流程。
  • 当然其中也碰到过很多问题，深刻体会开发前定方案的重要性，比如小程序的sass化，就是通过前后端的事先约定，才有目标，节省了很多时间。
  • 其次就是积极的沟通与交流以及虚心请教，往往别人的一句话就是突破瓶颈的关键，比如我在小程序自定义placeholder 上，感觉语法没错啊，怎么就是实现不了，这时候问了下赵阳，告诉我用'+' 拼接字符串，不要放到一个字符串里，完美解决～ 。
  • 最后，知识是永无止境的，继续加油吧～