Построение проекта апплета WeChat на основе mpvue

Апплет WeChat mpvue

[TOC]

1. Создайте проект

Обратитесь к пятиминутному руководству по mpvue.

# 全局安装 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), которая является сгенерированным кодом, связанным с апплетом. На данный момент вам нужно только запустить инструмент разработчика WeChat, создать небольшой программный проект и отладить его.

Предварительный просмотр проекта выглядит следующим образом:

image

2. mpvue-entry

github

Централизованная конфигурация страниц, автоматическое создание входных файлов для каждой страницы, оптимизация структуры каталогов и поддержка горячего обновления новых страниц.

Здесь есть два способа его использования:

Способ 1: напрямую используйте шаблон на основе mpvue-entry

vue init F-loat/mpvue-quickstart my-project

Способ 2. Вручную установите mpvue-entry и измените соответствующий код упаковки веб-пакета.

# 安装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

github

Используйте запись маршрута, совместимую с vue-router, в mpvue

# 安装
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Методы и свойства объекта, какие методы и свойства поддерживаются,mpvue-router-patch

4. Управление статусом

vuex

vuex-persistedstate

# 安装 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: window.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, библиотеки мобильных компонентов Youzan.Оба основаны на одних и тех же визуальных спецификациях и предоставляют согласованные интерфейсы API, помогающие разработчикам быстро создавать приложения-апплеты.

Vant Weapp

Поддержка небольшой программы npm

Пользовательские компоненты мини-программы

шаг 1 Установите компоненты vant weapp

# 安装vant weapp

cd your/path/to/dist
npm init 
npm i vant-weapp -S --production

==Примечание==: Чтобы установить vant weapp здесь, попробуйте использовать установку npm вместо cnpm. Поскольку установка cnpm создаст каталог _vant-weapp@0.4.7@vant-weapp в каталоге node_modules, поэтому при втором шаге сборки npm соответствующий _vant-weapp@0.4.7 будет создан в каталоге miniprogram_npm @ vant-weapp, объявление компонента должно быть написано так:

"usingComponents": {
    "van-button": "/miniprogram_npm/_vant-weapp@0.4.7@vant-weapp/button/index"
  }

Несомненно, если вам нужно будет обновить компоненты позже, это будет большой проблемой.

шаг 2 Инструменты разработчика WeChat создают npm

Щелкните строку меню в инструментах разработчика: Инструменты --> Сборка npm.

Установите флажок «Использовать модуль npm»: «Настройки» — «Настройки проекта».

На этом этапе он будет сгенерирован в родительском каталоге node_modules.miniprogram_npmкаталог, здесь мы ссылаемся на сторонний компонент

шаг 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

image

==Примечание:== Необходимо изменить файл игнорирования, установите файл dist/wx/package.json, чтобы не игнорировать файл

#.gitignore

dist/wx/*
!dist/wx/package.json

6. flyio

Fly.js — это основанная на промисах, легкая и мощная сетевая библиотека Javascript http. В настоящее время Fly.js поддерживает следующие платформы: Node.js, WeChat Mini Programs, Weex, React Native, Quick App и браузеры.

fly

// 安装
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-препроцессор

Апплет WeChat поддерживает большую часть CSS, но поддержка селекторов CSS ограничена.В этом проекте было введено приложение vant weapp, и рабочая нагрузка CSS значительно снижена, поэтому препроцессор CSS пока не используется. Я добавлю его позже, когда это необходимо будет представить.

значок шрифта

В этом проекте используется библиотека векторных иконок Alibaba (iconfont) вОфициальная библиотека иконок Ant Design, процесс введения выглядит следующим образом:

step 1.После выбора значка загрузите его локально

step 2.Скачанный кодiconfont.cssа такжеiconfont.ttfСкопируйте его в src/style/icon в проекте

step 3.Измените файл iconfont.css, просто сохраните часть ttf src, которая определяет шрифт.

/*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-osx-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Код апплета компилируется в папку DINT, что не легко отличить. После регулировки код отладки компилируется в папку DINT, а код производства среды упакован в папку оружия.

  • поддержка пакетов 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
├─......
Категории