Используйте flyio для инициирования сетевых запросов в апплете и mpvue.

GitHub JavaScript Апплет WeChat mpvue

Fly.jsМощная библиотека HTTP-запросов на основе Promise, которая поддерживает несколько сред выполнения JavaScript. С ее помощью вы можете использовать один код HTTP-запроса в браузерах, WeChat Mini Programs, Weex, Node, React Native и Quick Apps. Может работать нормально. В то же время его можно легко сопоставить с основным интерфейсным фреймворком и максимально возможной реализацией.Write Once Run Everywhere. В предыдущей статье было представленоИспользуйте flyio в быстрых приложениях, в этой статье в основном рассказывается, как использовать flyio в апплете WeChat.

Flyio Github: github.com/wendux/fly

вопрос

С Weex,mpvueОпубликованные, все они поддерживают синтаксис Vue.js. В настоящее время vue может работать в браузерах, апплетах и ​​Native. Хотя в каждой платформе все еще есть различия, в основном это было достигнуто.Write Once Run Everywhere. Это позволяет нам добиться максимально возможного повторного использования кода на нескольких концах. Но будь то vue, Weex или mpvue, они, по сути, являются просто слоем представления, а это означает, что в лучшем случае они могут добиться только повторного использования пользовательского интерфейса. Но для приложения помимо UI важнее всего данные, а источник данных вообще из сетевых запросов (чаще всего http). При использовании этих фреймворков ваши сетевые запросы должны использовать API-интерфейсы для конкретных платформ! Это плохо, это означает, что код вашего сетевого запроса нельзя использовать повторно, поэтому, хотя UI можно использовать повторно, нам все равно нужно адаптировать код части сетевого запроса.

О Флайо

Для решения вышеуказанных проблем требуется сетевая библиотека, поддерживающая несколько платформ, а пользовательский уровень предоставляет унифицированный API для защиты различий между платформами на нижнем уровне. а такжеFly.jsЭто сетевая библиотека Jiangzi. Чтобы облегчить миграцию пользователей axios, стиль дизайна fly.js API аналогичен стилю axios (но не идентичен)!

Fly.jsПоддержка нескольких сред достигается за счет переключения разных HTTP-движков внизу при запуске разных JavaScript, но в то же время он предоставляет унифицированный и стандартный API-интерфейс Promise для пользовательского уровня. Не только это,Fly.jsОн также поддерживает такие функции, как перехватчики запросов и ответов, автоматическое преобразование JSON и переадресацию запросов.github.com/wendux/fly. Давайте взглянем на апплет WeChat,mpvueКак использовать летать в нейтрализации.

Апплет WeChat

Апплет WeChat использует стек технологий веб-разработки и разработан на языке JavaScript, но среда выполнения JavaScript и браузер отличаются, поэтому такие библиотеки, как axios и jQuery, нельзя использовать в апплете WeChat, а flyio — можно. Конкретный метод использования приведен ниже.

Представьте муху

Стандартный API Flyio под каждой платформой одинаков, но файл входа разный, он представлен в апплете WeChat:

Установка нпм:npm install flyio --save.

var Fly=require("flyio/dist/npm/wx") 
var fly=new Fly

Если в вашем проекте мини-программы WeChat не используетсяnpmДля управления зависимостями вы можете напрямую загрузить исходный код в свой проект апплета, ссылка для скачиванияwx.jsилиwx.umd.min.js. Загрузите любой, сохраните его в локальном каталоге проекта, предполагая, что он находится в каталоге «lib», затем импортируйте:

var Fly=require("../lib/wx") //wx.js为您下载的源码文件
var fly=new Fly; //创建fly实例

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

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

Fly предоставляет Restful API на основе Promise, вы можете использовать их удобно, см.летная документация. Простой пример приведен ниже

//添加拦截器
fly.interceptors.request.use((config,promise)=>{
    //给所有请求添加自定义header
    config.headers["X-Tag"]="flyio";
    return config;
})
//配置请求基地址
fly.config.baseURL='http://www.dtworkroom.com/doris/1/2.0.0/'
...

Page({
  //事件处理函数
  bindViewTap: function() {
    //发起get请求
    fly.get("/test",{xx:6}).then((d)=>{
      //输出请求数据
      console.log(d.data)
      //输出响应头
      console.log(d.header)
    }).catch(err=>{
      console.log(err.status,err.message)
    })
    ...
  })
})

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

существуетmpvueВы также можете повесить экземпляр fly на прототип vue, чтобы его можно было передать в любой компонент.thisУдобный звонок:

var Fly=require("flyio/dist/npm/wx") 
var fly=new Fly
... //添加全局配置、拦截器等
Vue.prototype.$http=fly //将fly实例挂在vue原型上

В компоненте удобно использовать:

this.$http.get("/test",{xx:6}).then((d)=>{
      //输出请求数据
      console.log(d.data)
      //输出响应头
      console.log(d.header)
    }).catch(err=>{
      console.log(err.status,err.message)
    })

Обратная связь

Если у вас есть вопросы, задайте вопрос на github.fly.js github:github.com/fly

Категории