Разработка программы WeChat Mini Artifact-Grace

JavaScript Апплет WeChat

Grace

Компактная и простая в использовании вспомогательная библиотека для разработки апплетов WeChat.

Github: GitHub.com/Temperature/Конечно, переменный ток…

Функции

  1. Легкий, компактный и простой в использовании
  2. Поддерживает скорость реагирования на данные так же элегантно, как Vue
  3. Поддержка автоматического обновления данных, кэша изменений, пакетного обновления
  4. Мощная сетевая функция
  5. Поддержка глобальной шины событий
  6. Поддержка передачи значений между страницами
  7. Поддержка миксинов

Demo

Пример проекта находится в каталоге «quickstart-grace-demo» исходного кода и может быть открыт с помощью инструмента разработки апплета WeChat.

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

  1. Скопируйте все файлы из каталога src в проекте https://github.com/wendux/grace в каталог Grace в корневом каталоге апплета.
  2. при создании страницыgrace.pageзаменятьPageВот и все.
import grace from "../../grace/index.js"
grace.page({
  data: {
    userInfo: {},
    canIUse: true
  },
  onLoad() {
    //直接通过$data赋值更新数据
    this.$data.canIUse = false
    //通过$http发起网络请求
    this.$http.post("http://www.dtworkroom.com/doris/1/2.0.0/test", {xx: 7}).then((d) => {
      console.log(d)
    }).catch(err => {
      console.log(err.status, err.message)
    })
    //全局事件总线-监听事件
    this.$bus.$on("enventName", (data) => {
      console.log(data)
    })
    //返回上一页，并传递数据
    this.$goBack({retValue: "8"})
  },
  //跨页面传值  
  $onBackData(data) {
    //接收页面返回的数据，
  }
  ...
})

Если это зарегистрированный компонент (компонент), просто используйтеgrace.componentзаменятьComponentКонструктор может:

// grace.component 替换 Component
grace.component({
  properties: {
  },
  data: {
     text:"我是自定义组件",
     times:1
  },
  methods: {
    onTap(){
      //赋值更新
      this.$data.text="自定义组件点击 +"+this.$data.times++
    }
  }
}

Примечание. Все имена методов и свойств, которые Грейс внедряет в экземпляры, начинаются с «$».

данные реагируют

После изменения данных в апплете WeChat их необходимо явно обновить через setData, например:

//更新单个字段
this.setData({
    userInfo: res.userInfo
 })
//更新多个字段
this.setData({
    userInfo: res.userInfo
    canIUse: false
})

На это явно повлиял React.Хорошо его не учить🤦‍, если вы использовали Vue, вам должно показаться, что это выглядит очень неэлегантно, особенно когда в коде много разрозненных значений, которые нужно обновить, Код будет выглядеть избыточно, и, иногда, чтобы изменить переменную, нужно вызвать ее один разsetData.

Теперь с помощью Grace ваш код становится элегантным, и вы можете обновлять данные так же, как в Vue:

this.$data.userInfo=res.userInfo;
//更新多个字段，并非重新赋值
this.$data={
    userInfo: res.userInfo
    canIUse: false
}

Теперь вы можете обновить интерфейс напрямую, назначив его. Конечно, вы все еще можете использоватьthis.setDataдля обновления данных Грейс автоматически синхронизируетсяthis.$data.

Обнаружение обновления массива

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

Метод мутации

Grace содержит набор модифицирующих методов для наблюдения за массивами, поэтому они также будут запускать обновления представлений. Эти методы следующие:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

заменить массив

Методы мутации, как следует из названия, мутируют исходный массив, который был вызван этими методами. Напротив, существуют также немутирующие методы, такие как:filter(), concat()иslice(). Они не изменяют исходный массив, новсегда возвращает новый массив. При использовании немутирующего метода вы можете заменить старый массив новым:

this.$data.items = this.$data.items.filter(function (item) {
  return item.message.match(/Foo/)
})

Меры предосторожности

Из-за ограничений JavaScript, благодать не может обнаружить следующие изменяющиеся массивы:

  1. Когда вы используете индекс для прямой установки элемента, например:this.$data.items[indexOfItem] = newValue
  2. Когда вы изменяете длину массива, например:this.$data.items.length = newLength

Чтобы решить первый тип проблемы, можно достичь следующих двух способов:this.$data.items[indexOfItem] = newValueТот же эффект также вызовет обновление состояния:


this.$data.$set(example1.items, indexOfItem, newValue)


// Array.prototype.splice
this.$data.items.splice(indexOfItem, 1, newValue)

Для решения второго типа задач можно использоватьsplice:

this.$data.items.splice(newLength)

Добавление свойств объекта

Или из-за ограничений JavaScript,благодать не может обнаружить добавление или удаление свойств объекта:

grace.page({
  data: {
    a: 1
  }
  onLoad(){
   //a现在是响应式的
   this.$data.a=2;
   //b不是响应式的
   this.$data.b = 2
  }
})

Grace не может динамически добавлять реактивные свойства корневого уровня к уже созданным экземплярам. Однако вы можете использовать$data.$set(object, key, value)метод для добавления реактивных свойств к вложенным объектам. Например:

this.$data.$set(this.$data, 'b', 2)

кеш изменения данных

Согласно WeChatМини-программа Официальные предложения по оптимизации, благодать может избежать следующих проблем:

  1. Часто заходите в setData

    Чтобы решить эту проблему, в Grace вводится механизм кэширования изменений данных, рассмотрим пример:

    //开始缓存数据变更
this.$data.$cache();

//接下来是n次密集的数据更新
this.$data.name="doris"
this.$data.userCard.no="610xxx889"
this.$data.balance=66666
....
//统一提交变更
this.$data.$commit();

    вызов$cache()После этого все изменения данных будут кэшироваться (не срабатыватьsetData), умейте звонить$commitПосле этого он будет обновляться равномерно, что позволяет избежать частых вызовов.setDataпотребление производительности.

  2. Страница фонового состояния для setData

    Когда страница переходит в фоновое состояние (не видна пользователю), она не должна продолжаться.setData, отображение страницы фонового состояния пользователем не ощущается. Кроме того, страница фонового состояния переходит наsetDataТакже вытесняет выполнение страницы переднего плана. Когда страница переходит в фоновый режим, грейс автоматически останавливает обновление данных, а когда страница снова выходит на передний план, она автоматически начинает рендеринг.

Http

Grace инкапсулирует wx.request через Promise и поддерживает перехватчики, настройку запросов и т.д.:

  1. Restful API

    $http.get(url, [data], [options])
$http.post(url, data, [options])
$http.put(url, data, [options])
$http.delete(url,[data],[options])
$http.patch(url,[data],[options])

  2. несколько одновременных запросов

    var getUserRecords=()=>{
  return this.$http.get('/user/133/records');
}

var getUserProjects=()=>{
  return this.$http.get('/user/133/projects');
}

this.$http.all([getUserRecords(), getUserProjects()])
  .then(this.$http.spread(function (records, projects) {
    // Both requests are now complete
  }))
  .catch(function(error){
    console.log(error)
  })

  3. перехватчик

    // Add a request interceptor
this.$http.interceptors.request.use((config,promise)=>{
    // Do something before request is sent
    config.headers["X-Tag"]="grace";
    // Complete the request with custom data
    // promise.resolve("fake data")
    return config;
})

// Add a response interceptor
this.$http.interceptors.response.use(
    (response,promise) => {
        // Do something with response data .
        // Just return the data field of response
        return response.data
    },
    (err,promise) => {
      // Do something with response error
        //promise.resolve("ssss")
    }
)

Библиотека HTTP-запросов, используемая Грейс,FLY , $httpдаFLYЭкземпляр , пожалуйста, обратитесь к его официальному веб-сайту за подробностями, если вы хотите создать новыйFLYПример:

var newHttp=grace.createHttpClient();

Примечание. Когда Грейс создает страницу, все страницы$httpвсе так жеFLYэкземпляр, так правильноthis.$httpКонфигурация будет действовать глобально, поэтому, если вы хотите настроить глобальный перехватчик, запросить базовый адрес, время ожидания и т. д., вы можете создать файл справки, а затем импортировать этот файл на страницу:

import grace from "../grace/index.js"
grace.http.config.baseURL = 'http://www.dtworkroom.com/doris/1/2.0.0/'
grace.http.config.timeout = 5000;
grace.http.interceptors.request.use((config, promise) => {
    //拦截器逻辑
    //console.log(config.body);
});
export default grace;

автобус событий

Глобальная шина событий может инициировать и прослушивать события глобально (на разных страницах).

$on(eventName,handler)

прослушать событие

this.$bus.$on("enventName",(arg1,arg2)=>{
      //事件处理器参数为$emit触发事件时传递的参数
  	  console.log(arg1)
})

$emit(имя_события,[…аргументы])

триггерное событие

this.$bus.$emit("enventName", 1,2)

$off(eventName,[handler])

отменить прослушивание

this.$bus.$off("eventName",cb)

Когда обработчик предоставляется, из очереди прослушивателя удаляется только обработчик. Если обработчик не передается, очередь прослушивателя для события очищается.

Передача значений по страницам

При открытии новой страницы в апплете вы можете передать значение новой странице через URL-запрос, что очень просто, например:

wx.navigateTo({
  //传递id,在新页面onLoad中获取
  url: 'test?id=1'
})

Но как мне вернуть данные на предыдущую страницу, когда новая страница закрыта? В апплете нет прямого метода. Grace добавляет обратный вызов ко всем страницам для получения данных, возвращаемых страницей, следующим образом:


grace.page({
  data:{}
  $onBackData(data){
   //接收页面返回的数据，
  }  
  ...         
})

Вышеупомянутая страница записана как A. Предположим, вы открываете новую страницу B, вам нужно выбрать некоторую информацию в B и отправить ее обратно в A, тогда вы должны:

grace.page({
  data: {},
  bindViewTap(){
    //返回上一个页面，并回传一些数据
    this.$goBack({xxx:5});
  }
  ...
}

$goBack([data],[delta])

Закрыть текущую страницу и вернуться на предыдущую страницу или многоуровневую страницу, если таковая имеетсяdata, он вызовет возвращаемую страницу$onBackDataобратный звонок, еслиdataЕсли он не существует, он не перезвонит$onBackData.

deltaто же самое значениеwx.navigateBackДельта параметра представляет собой количество страниц для отката, по умолчанию 1 (предыдущая страница), если дельта больше, чем количество существующих страниц, произойдет возврат на домашнюю страницу.

mixin

Миксины — это очень гибкий способ распространения повторно используемой функциональности Страницы. Короче говоря, он может смешивать параметры страницы, когда апплет создает страницы, а может добавлять какие-то хуки на все страницы, если вы этого не понимаете, не волнуйтесь, давайте рассмотрим пример:

Реализация: вызов на любой страницеonLoad,onShowКогда журнал печатается, выводится текущий идентификатор страницы.

  1. Создайте файл help.js

    import grace from "../grace/index.js"
var page=grace.page;
grace.page=function(ob){
  mixin(ob,{
    onLoad(){
     //页面调用onShow时打印出当前页面id 
     console.log("onLoad, pageID:"+this.$id)
    },
    onShow(){
     //页面调用onShow时打印出当前页面id 
     console.log("onShow, pageID:"+this.$id)
  	}
  })
  //创建页面
  page.call(grace,ob)
}
export default grace;

  2. Внедрите help.js при создании страницы

    import grace from "../../utils/help.js"
grace.page({
  data:{}
})

//控制台输出
> onLoad, pageID:1
> onShow, pageID:1

Таким образом, это эквивалентно добавлению на все страницыonLoad,onShowпредварительная обработка.

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

вариант слияния

Когда объект сборки страницы и объект миксина имеют параметры с одинаковыми именами, эти параметры будут соответствующим образом смешаны.

  1. Объект данных будет неглубоко объединен внутри (один уровень глубины атрибута), и данные объекта сборки страницы будут иметь приоритет, если они конфликтуют с объектом номера сборки страницы.

  2. Хуки-функции с одинаковыми именами будут смешаны в массив, поэтому будут вызываться все. Кроме того, хук смешанного объекта будет цепляться за саму страницу.Доперечислить.

     
grace.mixin(ob,{
    onShow(){
     console.log("mixin onShow")
    }
 });

...

grace.page({
   onShow(){
     console.log("page onShow")
   }
})

//页面显示时会输出： 
> mixin onShow
> page onShow

    ​

Сравните с Wepy

Пожалуйста, обратитесь к: https://juejin.cn/post/6844903571264110606

Наконец

Опубликуйте адрес github еще раз, если вам это нравится, добро пожаловать в звезду, Github:GitHub.com/Temperature/Конечно, переменный ток…

Категории