Апплет WeChat mpvue (без друзей) шагает по яме

внешний интерфейс Апплет WeChat Vue.js mpvue
Апплет WeChat mpvue (без друзей) шагает по яме

предисловие

Как морская свинка переднего плана, профессионально работающая с различными небольшими программными фреймворками (нативные, wepy, web-view), я была очень рада впервые увидеть mpvue, ведь он может беспрепятственно подключаться к Vue, что значительно снижает Стоимость небольших программ Стоимость обучения Всесторонне сравните преимущества и недостатки нескольких фреймворков и без колебаний выберите mpvue для разработки небольших программ.

Наступление на направляющую ямы

1.Cannot assign to read only property 'exports' of object '#<Object>'Ошибка компиляции

Это связано с тем, что при ссылке на сторонний плагинmodule.exportsнаписание,webpack可以使用require和export ，但是不能混合使用import 和module.exports, что вам нужно сделать, это обновить корневой каталог.babelrcконфигурация файла

Vue представляет плагин Невозможно назначить свойство «экспорт» объекта только для чтения

{
    "presets": [
        ["env", {
            "modules": false,
            "targets": {
                "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
            }
        }],
        "stage-2"
    ],
    "plugins": [
        ["transform-runtime", {
            "polyfill": false,
            "regenerator": true
        }]
    ],
    "env": {
        "test": {
            "presets": ["env", "stage-2"],
            "plugins": ["istanbul"]
        }
    }
}

2. Свойство, подключенное к Vue.prototype, не определено в синтаксисе шаблона, и его необходимо вычислить, прежде чем его можно будет использовать. через@noahlam 

import config from './config'
Vue.prototype.$serverPath = config.serverPath

использовать это на странице

<img :src="$serverPath + 'logo.png'" />

После компиляции будет вот так

<image src="undefinedlogo.png" ></image>

Что вам нужно сделать, так это вернуть this.$serverPath на каждой странице, которую вы используете.

3. Не отображаются картинки относительных путей, например

<img src="../../images/LOGO.png">

Решение: указать путьimportзайди или вставь фотоstaticссылка на каталог, но как cssbackground-imageПри ссылке вы можете выбрать ссылку только на удаленные изображения или изображения, чей относительный каталог меньше 8k (связанный с конфигурацией webpck), в противном случае компилятор сообщит об ошибке.

<template>
    <div>
        <div class="test"></div>
        <img :src="imgUrl">
    </div>
</template>

<style>
.test{
    width: 48rpx;
    height: 48rpx;
    background-image: url("../../img/a.png");
}
</style>

<script>
import imgUrl from '@/img/a.png'

export default {
    data() {
        return {
            imgUrl
    }
}
</script>

4. Проблема обнаружения данных подкомпонента

Например, я ссылаюсь на такой компонент на определенной странице и привязываю данныеmyOrderList, В то же время я представил vuex для управления состоянием, управленияmyOrderListобъект

### A页面中
 <order :isEnd="isEnd" :orderList="myOrderList"></order>
 
### B页面中更新"myOrderList"对象

this.$store.commit('updateList', {data: this.orderList});

Когда страница A отображается снова, поток данных подкомпонента не обновляется, печатаетсяmyOrderListОбъекты обновляются. Мое решение состоит в том, чтобы сначала присвоить значение myOrderList пустым, а затем снова присвоить объект в store.state, проблема решена. Предполагается, что существует проблема с механизмом обнаружения данных mpvue, а я надеюсь что не так.Ребята выпрямляйтесь.

5. Проблемы, связанные с собственными компонентами, см.Использование компонента апплета echarts в mpvue, официальные документы уже очень подробные, скажу тут несколько моментов:

  • готовы получать данные асинхронно.
  • Добавить параметр параметров получения для инициализации
  • main.js в каталоге страниц необходимо добавитьusingComponents: {'ec-canvas': '../../../static/ec-canvas/ec-canvas'}
  • Его нужно поместить в статический каталог

Статьи 1 и 2 особенно важны, все помнят

Суммировать

Ведь фреймворк только вышел, а там всякие питы.Надеюсь все дадут официальный PR и Issues.

Категории