[TOC]
1. 创建项目
参照 mpvue 五分钟上手教程 http://mpvue.com/mpvue/quickstart/
- # 全局安装 vue-cli
- $ NPM install --global vue-cli
- # 创建一个基于 mpvue-quickstart 模板的新项目
- $ vue init mpvue/mpvue-quickstart my-project
- # 安装依赖
- $ cd my-project
- $ NPM install
- # 启动构建
- $ NPM run dev
此时, 可以看到新建了一个 ==dist== 文件夹(新的模板可能是 dist/wx), 该目录就是生成的小程序相关代码. 这时, 只需要启动微信开发者工具, 创建小程序项目, 并调试即可.
项目预览如下:
- 2. mpvue-entry
- https://github.com/F-loat/mpvue-entry
集中式页面配置, 自动生成各页面的入口文件, 优化目录结构, 支持新增页面热更新
此处有两种使用方式:
方式一: 直接使用基于 mpvue-entry 的模板
vue init F-loat/mpvue-quickstart my-project
方式二: 手动安装 mpvue-entry 并修改相关的 webpack 打包代码
- # 安装 mpvue-entry
- NPM i mpvue-entry -D
- const MpvueEntry = require('mpvue-entry')
- module.exports = {
- entry: MpvueEntry.getEntry({
- pages: 'src/pages.js',
- dist: 'dist/wx/' // 注意!!!! 此处的配置应与 congig/index.JS 中的 build.assetsRoot 保持一致
- }),
- ...
- plugins: [
- new MpvueEntry(),
- ...
- ]
- }
- // 官方模板生成的项目请务必去除以下配置
- module.exports = {
- plugins: [
- new CopyWebpackPlugin([{
- from: '**/*.json',
- to: ''
- }], {
- context: 'src/'
- }),
- ...
- ]
- }
- // pages.JS
- module.exports = [
- {
- path: 'pages/news/list', // 页面路径, 同时是 vue 文件相对于 src 的路径, 必填
- config: { // 页面配置, 即 page.JSON 的内容, 可选
- navigationBarTitleText: '文章列表',
- enablePullDownRefresh: true
- }
- }
- ]
- 3. mpvue-router-patch
- https://github.com/F-loat/mpvue-router-patch
在 mpvue 中使用 vue-router 兼容的路由写法
- # 安装
- NPM i mpvue-router-patch -S
- // main.JS
- import Vue from 'vue'
- import MpvueRouterPatch from 'mpvue-router-patch'
- Vue.use(MpvueRouterPatch)
- // 新建 `src/router` 文件夹
- src
├─router
├─routes.JS // 页面配置, 同时用于 mpvue-entry 的配置
├─components.JS // 页面对应的组件(component)
├─index.JS // 整个 vue-router 的配置
......
- // webpack.base.conf.JS
- // 修改 mpvue-entry 的配置
- module.exports = {
- entry: MpvueEntry.getEntry({
- pages: 'src/router/routes.js', // 与 vue-router 共用路由配置
- dist: 'dist/wx/'
- }),
- ........
- }
至此, 我们可以在项目中使用 this.$router 和 this.$route 对象的方法和属性了, 具体支持哪些方法和属性, https://github.com/F-loat/mpvue-router-patch
4. 状态管理
- https://vuex.vuejs.org/zh/
- # 安装 vuex, 使用 mpvue 模板创建项目时已选了 vuex 的, 此处可省略
- NPM install vuex --save
- # 安装 vuex-persistedstate, 使 vuex 状态持久化
- NPM install vuex-persistedstate --save
- // 创建 src/store 文件夹
- src
├─store
├─index.JS // 组装模块并导出 store 的地方
├─mudule.const.JS // 业务常量定义在这里, 这样就可以在 template,script 中同时使用了
├─其他需要分割的模块文件
......
- // src/store/index.JS
- import Vue from 'vue'
- import Vuex from 'vuex'
- import createPersistedState from 'vuex-persistedstate' // state 数据持久化
- import appConst from './module.const'
- Vue.use(Vuex)
- export default new Vuex.Store({
- plugins: [
- createPersistedState({
- paths: [ // 需要被持久化的 state
- 'token'
- ],
- storage: Windows.sessionStorage // 持久化存储方式
- })
- ],
- state: {
- token: '',
- counter: 0
- },
- getters: {},
- mutations: {},
- actions: {},
- modules: {
- appConst
- }
- })
- // src/store/module.const.JS
- // vuex 模块: 常量管理
- export default {
- state: {
- ORDER_STATUS_PAID: 'paid'
- }
- }
- // src/main.JS
- import store from './store/index'
- const App = new Vue({
- store,
- ...App
- })
5. Vant Weapp
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本, 两者基于相同的视觉规范, 提供一致的 API 接口, 助力开发者快速搭建小程序应用.
Vant Weapp https://youzan.github.io/vant-weapp/#/intro
小程序 NPM 支持
小程序自定义组件
step 1 安装 vant weapp 组件
- # 安装 vant weapp
- cd your/path/to/dist
- NPM init
- NPM i vant-weapp -S --production
== 注意 ==: 此处安装 vant weapp 尽量使用 NPM 安装, 不要用 cnpm 安装. 因为 cnpm 安装会在 node_modules 目录中生成_vant-weapp@0.4.7@vant-weapp 目录, 这样去进行第二步的构建 NPM 时, 会在 miniprogram_npm 目录中生成对应的_vant-weapp@0.4.7@vant-weapp 目录, 组件声明需要写成这样:
- "usingComponents": {
- "van-button": "/miniprogram_npm/_vant-weapp@0.4.7@vant-weapp/button/index"
- }
无疑, 这样后期如果需要组件升级的话会是个大麻烦.
step 2 微信开发者工具构建 NPM
点击开发者工具中的菜单栏: 工具 --> 构建 NPM
勾选 "使用 npm 模块" 选项: 设置 - 项目设置
此时, 会在 node_modules 父目录中生成 miniprogram_npm 目录, 这就是我们引用第三方组件的路径
step 3. 使用 vant weapp 组件
- // App.JSON 或页面 JSON 文件中
- "usingComponents": {
- "van-button": "/miniprogram_npm/vant-weapp/button/index"
- }
- // vue 中直接使用
- <div class="demo-container">
- <div class="demo-title">按钮</div>
- <div class="demo-row">
- <label><van-button type="default">默认按钮</van-button></label>
- <label><van-button type="primary">主要按钮</van-button></label>
- </div>
- <div class="demo-row">
- <label><van-button type="warning">警告按钮</van-button></label>
- <label><van-button type="danger">危险按钮</van-button></label>
- </div>
- </div
== 注意:== 需要修改忽略文件, 设置 dist/wx/package.JSON 文件为不忽略文件
- #.gitignore
- dist/wx/*
- !dist/wx/package.JSON
6. flyio
Fly.JS 是一个基于 promise 的, 轻量且强大的 JavaScript http 网络库. 目前 Fly.JS 支持的平台包括: Node.JS , 微信小程序 ,Weex ,React Native ,Quick App 和浏览器.
- https://wendux.github.io/dist/#/doc/flyio/readme
- // 安装
- NPM install flyio -S
- // 创建接口相关的目录 src/API, 方便接口统一管理
- // 因我们的程序需要访问不同的业务接口, 这些业务接口基础地址, 请求格式, 返回格式各有区别
- // 故创建了不同的业务接口模块, 如若接口单一, 标准, 这里的多个接口模块是不需要的
- src
├─API
├─index.JS // fly 对象创建和统一配置
├─branch.JS // 不同的业务接口模块
├─order.JS
├─其他业务接口模块
......
- // src/API/index.JS
- // 注意: 小程序需要使用的是 flyio/dist/NPM/wx;h5 需要使用的是 flyio/dist/NPM/fly
- import Fly from 'flyio/dist/npm/wx';
- /**
- * 创建一个默认配置的请求实例
- * 对不同的接口提供者发起请求时, 在对应的业务接口文件中进行具体的配置即可
- */
- export default function () {
- return new Fly();
- }
- // src/API/branch.JS
- import createHttp from './index';
- let API = createHttp();
- API.config.baseURL = 'https://your/api/base/path/'; // 注意: 小程序只支持 https,wss 协议
- API.interceptors.response.use(
- (response) => {
- return response.data;
- },
- (err) => {
- return Promise.resolve(err);
- }
- )
- const getBranchList = function () {
- return API.get('/branch.json');
- }
- export {
- getBranchList
- }
- // 业务代码 XX.vue
- import {getBranchList} from '@/api/branch';
- // .....
- getBranchList().then(data => {
- this.branches = data || [];
- this.branchesLoading = false;
- }).catch(err => {
- console.error(err);
- this.branchesLoading = false;
- })
7. CSS
CSS 预处理器
微信小程序支持大部分的 CSS, 但是对于 CSS 选择器支持有限, 本项目中已引入 vant weapp,CSS 工作量大大减少, 因此暂不使用 CSS 预处理器. 以后有必要引入的时候再来补充吧.
字体图标
本项目使用了阿里巴巴矢量图标库 (iconfont) 中的 Ant Design 官方图标库, 引入过程如下:
step 1. 选好图标后下载到本地
step 2. 将下载的代码中的 iconfont.CSS 和 iconfont.ttf 拷贝到项目中的 src/style/icon 下
step 3. 修改 iconfont.CSS 文件, 定义字体的部分 src 只保留 ttf 就好
- /*iconfont.CSS*/
- @font-face {font-family: "iconfont";
- src: url('iconfont.ttf?t=1543540389274') format('truetype'); /* Chrome, Firefox, opera, Safari, Android, iOS 4.2+*/
- }
- .iconfont {
- font-family:"iconfont" !important;
- font-size:25px;
- font-style:normal;
- -webkit-font-smoothing: antialiased;
- -moz-OS X-font-smoothing: grayscale;
- }
- .icon-minus-circle-fill:before { content: "\e844"; }
- .icon-plus-circle-fill:before { content: "\e845"; }
step 4. 使用
<icon class="iconfont icon-minus-circle-fill" style="font-size: 40px;color: #ccc"></icon>
== 备注 ==: 网上说的下载的字体文件需要转 base64 不知是为何, 目前没转换, 在开发者工具中没有问题, 以后有问题的话再来补充.
8. 其他
wx 模块化
将 wx 对象模块化, 给以后的 h5 留坑
打包代码调整
主要有两点调整
调试代码和生产代码打包到不同的文件夹
原打包代码 NPM run dev 和 NPM run build 都将小程序的代码编译到了 dist 文件夹, 不便于区分, 调整后将调试代码编译到 dist 文件夹, 生产环境代码打包到 weapp 文件夹
NPM 包的支持
在 NPM run build 时将 dist/miniprogram_npm 代码拷贝到 weapp, 用来支持小程序对第三方包的依赖.
9. 整体目录结构
经过以上工作后, 整体目录结构如下:
mall
├─build // 构建程序
├─congfig // 环境配置
├─dist // 小程序代码(调试代码)
├─wx
├─......
├─mpvue 编译后的小程序代码
├─......
├─miniprogram_npm // 小程序依赖
├─package.JSON
├─src
├─API // 接口
├─components // 组件
├─config // 配置参数
├─params.JS
├─pages // 页面
├─router // 路由
├─store // vuex
├─style // 全局样式
├─icon
├─iconfont.CSS
├─iconfont.ttf
├─common.CSS
├─utils // 工具方法
├─index.JS
├─wx.JS
├─App.JSON
├─App.vue
├─main.JS
├─static // 静态资源
├─weapp // 小程序代码(生产环境)
├─index.html
├─package.JSON
├─......
来源: https://juejin.im/post/5c00f389e51d4503fb448a70