Адрес загрузки демо-приложения

предисловие

Для страниц с более простой структурой следует использовать несколько страниц, потому что слишком громоздко использовать маршрутизаторы для страниц с короткими ответами.Этот шаблон был разработан для такого сценария.

Использование скаффолдинга с Hbuilder также позволяет быстро использовать vue для разработки приложений для Android и IOS.

Самая большая особенность этой статьи:

webpack4
несколько страниц
Междоменный прокси
Отладка мобильного терминала VConsole, инструменты разработчика на мобильных телефонах
es6/es7 вавилонское преобразование

адрес проектаGitHub

руководство

MogoH5+это Vue многостраничныйИнструменты для строительных лесов, В сочетании с H5+ вы можете быстро разрабатывать приложения для Android и Apple.

Даже если Hbuilder не подходит для упаковки в приложение, этот каркас также можно использовать в качестве эталонного проекта для создания многостраничных веб-страниц.

характеристика

支持 Npm 生态
支持 vue 语法,以及 vue 生态,比如 vux,mint,vant
支持 ES6/ES7 语法
使用 VConsole 调试
VSCode 友好
局域网便捷调试
兼容部分 mui 语法

Эти функции на самом деле не новы, их просто нельзя использовать только в Hbuilder.

Начать быстро

Загрузите проект напрямую, затем настройте пакет в соответствии с вашими потребностями и, наконец, упакуйте его через облако Hbuilder для создания приложения.

Эта статья содержит случай, в котором используются несколько интерфейсов, разработанных VantUI. Если вам нравятся другие пользовательские интерфейсы, вы также можете заменить их другими пользовательскими интерфейсами.

// 1.安装模块
npm i  // or yarn
// 2.调试
npm start   // 将manifest.json 的`页面入口` 修改成 http://your_ip:8082/
// 3.打包
npm run build

использовать

В основном, как использовать MogoH5+ для формальной разработки, это необходимо соблюдать в процессе разработки.Правила каталога, иначе будут непредвиденные ошибки.

Структура каталогов

.
├── docs  // 文档
├── index.html // 入口模板
├── jsconfig.json //js配置
├── manifest.json //hbuilder 入口文件
├── src  
│   ├── components  //组件文件夹
│   │   └── List.vue  //组件
│   ├── index.js  //主页入口文件
│   ├── index.vue // 主页vue文件
│   ├── page  // 页面
│   └── utils // 工具
├── unpackage // hbuilder 构建目录
│   └── res
└── webpack.config.js  //webpack配置目录

Новая страница

Если мы хотим создать новое имяlistстраницу в качестве списка продуктов, мы собираемся./src/page/goodsпод новымlist.jsа такжеlist.vueдва файла.list.jsКак многостраничная запись,list.vue, Леса поставляются с несколькими страницами для справки.

Следуйте принципу относительного пути, если вsrcПосещение этой страницы./goods/list.html!!!Суффикс должен быть.html

Новый компонент

компонент, вставленный./src/componentsВ каталоге, если компонентов много, вы можете создать каталог самостоятельно, например, компонент Logo, использованный в демо, можно использовать в качестве эталона.

Новая библиотека инструментов

Библиотека инструментов./src/utilsВ основном поместите некоторые общедоступные функции, такие как запрос, открытый веб-просмотр, оплата, совместное использование и другие функции выполнения. Демонстрация инкапсулирует некоторые функции из mui, такие как自定义事件,webview, Эти функции можно использовать в качестве справочных.

`common.js` 是每个页面都需要加载的一个 js,里面加载了`fastclick`和`vconsole`.如果全局需要加统计,全局执行的函数,可以放在这个文件里面.

`./src/utils` 做了 `alias`别名,可以 直接这样加载 `import common from "Utils/common"`.

послать запрос

запросить библиотеку

Демонстрационный запрос используетaxios, а также вы можете инкапсулировать любую понравившуюся вам библиотеку.

Библиотеки общих запросовfetch,request,SuperAgent,jquery-ajax.

перекрестный домен

из-заnpm startПосле этого в локальную сеть вешается отладочная веб-страница, и она используется как Hbuilder页面入口, поэтому при запросе появится跨域.

существует./build.jsиспользовать локальный прокси вhttps://api.douban.comПросто измените его на доменное имя вашей компании.

proxy: {
    "/api": {
      name:"DOUBANAPI",  // 自己取名
      target: "https://api.douban.com",
      pathRewrite: { "^/api": "" },
      changeOrigin: true,
      secure: false
    },
     "/baidu_api": {
      name:"BAIDUAPI",  // 自己取名
      target: "https://api.baidu.com",
      pathRewrite: { "^/api": "" },
      changeOrigin: true,
      secure: false
    },
    ...
  }

Если есть больше бизнес-доменов, можно продолжитьproxyДобавить к.

Кроссдоменные проблемы будут только во время разработки, URL запакованного файла будет заменен на URL прокси, поэтому в запрос необходимо добавить имя.DOUBANAPI

request({
  url: DOUBANAPI + "/bookList"
});

отладка

При отладке в Hbuilder будет много проблем, таких как:

не может печатать напрямую数组,对象, который необходимо преобразовать в строку.
даже использоватьwebview调试, по-прежнему не может распечатать массив, и его очень неудобно использовать на Mac.

использоватьVConsole, проблема отладки в основном не связана с Hbuilder, используйтеVConsoleОсновные преимущества заключаются в следующем

Может печатать массивы, объекты
Может просматривать запросы, куки, Localstorage
существуетSystemСкорость загрузки страницы можно увидеть в колонке
элементы можно просмотреть

В основном упрощенный开发者工具栏, который очень легко отлаживать.

Пакет

npm run build

После запуска команды появитсяdistКаталог, внутри сжатый статический файл.

Дистрибутив HBuilder

Прежде чем использовать Hbuilder для создания установочного пакета, пожалуйста,入口文件изменился наdist/index.html. Тогда можешь спокойно собираться.

Совместимость с mui.js

Для проблемы совместимости с некоторыми функциями mui некоторые функции портированы наUtils, и будет постепенно портироваться в будущих обновлениях.

Инструмент скаффолдинга для быстрой разработки приложений с помощью vue