Coder Social home page Coder Social logo

meituan-dianping / mpvue Goto Github PK

View Code? Open in Web Editor NEW
20.4K 601.0 2.1K 8.2 MB

基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系。

Home Page: http://mpvue.com

License: MIT License

CSS 0.44% HTML 0.63% JavaScript 98.43% Shell 0.12% TypeScript 0.37%
mpvue vue wxmp weapp mini

mpvue's Issues

v-else指定内的事件指令无效

<template>
<div>
  <div v-if="false"></div>
  <div v-else> // 此处改成 v-if="true" 可行
    <div @click="test = !test">{{test}}</div>
  </div>
</div>
</template>
<script>
export default {
  data () {
    return {
      test: true
    }
  }
}
</script>

v-else 内的事件会失效,改成v-if是可以的。建议在文档中提示

建立静态资源是不是要到dist手动引入??

请问应该在哪里才能创建有效的静态资源文件,我尝试过在pages内创建,也尝试在外创建一个resource文件夹,里面存放静态图片,但编译后小程序工具报错,需要手动引入静态资源的吗??

mpvue 合作项目征集

为方便开发者反馈问题和跟进技术支持,我们特别开设 issues 收集小程序项目接入情况。

欢迎使用 mpvue 的小程序项目加入!
为统一呈现方式,我们建议加入的小程序包含如下内容:

内容

  • 小程序名称
  • 小程序介绍,介绍产品能力或使用的技术方案
  • 小程序码,建议尺寸 200x200
  • 可以附录项目地址或其链接

示例

# 小程序名称
小程序介绍,xxxx

<img src="http://xxx.xxx..jpg" width="200">

v-else好像有bug,在v-else区块的标签上的事件会丢失。

测试代码:

    <button @tap="changeView">切换v-if</button>

    <view v-if="show">
      <button @click="increment">+</button>

    </view>
    <view v-else>
      <button @click="decrement">-</button>
    </view>

在v-else区块里的click事件不会被触发,v-else-if也不会触发事件。
换成v-if="!show"就可以响应。
换成v-show也可以响应

关于对象展开运算符的支持

场景:使用mpvue的模板,通过vue-cli初始化的项目;已经在babelrc引入stage-2的preset以及transform-runtime的plugin。
问题:在src/main.js里面想要使用对象展开运算符,发现控制台报错。然后在webpack.base.conf.js里面把mpvue-loader注释掉以后就没有报错了。
截图:
395210399914c7206b2b118a8c4b4eaa
7e556a2bbfbea91cb4ba1a3a0d830935

请问我还需要什么配置才能正确运行展开运算符呢?望解答,谢谢!

mpvue使用ts-loader报错。

vue文件中使用

<script lang="ts" src="./index.ts"></script>

会报如下错误。

` ERROR Failed to compile with 1 errors 12:28:56

error in ./src/pages/index/index.ts

Module build failed: TypeError: Cannot read property 'afterCompile' of undefined
at successfulTypeScriptInstance (/Users/xxx/work/mpvueQuickStart/node_modules/ts-loader/dist/instances.js:147:28)
at Object.getTypeScriptInstance (/Users/xxx/work/mpvueQuickStart/node_modules/ts-loader/dist/instances.js:48:12)
at Object.loader (/Users/xxx/work/mpvueQuickStart/node_modules/ts-loader/dist/index.js:16:41)

@ ./src/pages/index/index.vue 8:0-51
@ ./src/pages/index/main.js`

【bug】可能是slot作用域处理上一个比较大而且重要的bug。wepy也有类似问题。

首先我们知道在使用slot插槽的时候按照vue的原则是:被分发的内容会在父作用域内编译。
然后看下面一个场景:

父组件模板:
`
<template>
<type-group v-for="(item, index) in questionTypeMap" :key="index">
<div>
<p>{{ parentMsg }}</p>
<p>{{ item}} {{ index }}</p>
</div>
</type-group>
</template>

data () {
  return {
    parentMsg: '我是父组件的数据',
    questionTypeMap: [
      {
        name: 'choice',
        zhName: '选择题'
      },
      {
        name: 'fillin',
        zhName: '填空题'
      },
      {
        name: 'solution',
        zhName: '解答题'
      }
    ]
 }

`

子组件模板: (type-group)
`
<template>
<div class="type-group">
<slot></slot>

</div>
</template>
`

呈现结果:
只能看到 parentMsg: '我是父组件的数据',(这点相比wepy而言在slot分发时做了作用域优化处理)
看不到v-for循环出来的item和index。(wepy repeat出来有同样问题。而且wepy 使用slot时作用域更混乱)

先给你们赞一个,canvas的接口有没有转码,globalCompositeOperation 这个接口小程序没有提供,你们有没有解决办法。

`var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);

ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);`

关于组件的bug

在组件内使写了样式,一个页面调用这个组件没问题,但两个和两个以上页面调用这个组件,这个组件的样式将会失效,将组件样式移到全局样式App.vue下能解决这问题,但这样做不合理,希望这个问题能得到解决。

关于目录结构

目前是以下这种形式

// webpack.config.js
entry: {
  app: resolve('./src/main.js'),               // app 字段被识别为 app 类型
  list: resolve('./src/pages/list/main.js'),   // 其余字段被识别为 page 类型
  page1: resolve('./src/pages/page1/main.js')
}

// 产出文件的结构
├── pages
   ├── list
      ├── list.js
      ├── list.json
      ├── list.wxml
      └── list.wxss
   └── page1
       ├── page1.js
       ├── page1.json
       ├── page1.wxml
       └── page1.wxss

比较理想的是下面这样,即支持多级目录嵌套

// webpack.config.js
entry: {
  app: resolve('./src/main.js'),               // app 字段被识别为 app 类型
  newsList: resolve('./src/pages/news/list/main.js'),   // 其余字段被识别为 page 类型
  newsDetail: resolve('./src/pages/news/detail/main.js')
}

// 产出文件的结构
├── pages
   └── news
        ├── list.js
        ├── list.json
        ├── list.wxml
        └── list.wxss
        ├── detail.js
        ├── detail.json
        ├── detail.wxml
        └── detail.wxss

分包及h5运行问题

What problem does this feature solve?

小程序现在支持分包,请问我要怎么在这个里面使用分包

What does the proposed API look like?

subpackages

mpvue有Promise化小程序API吗?&& mpvue微信学习交流群

请问mpvue有Promise化小程序API吗?
文档和Demo里都没有提供说明,在Demo里尝试了不生效。

建了个群方便大家一起来学习交流,共同尝尝螃蟹,非官方
image
群超100人了,吃螃蟹尝尝鲜共同学习,加我微信拉进群,请备注:mpvue
image

WXS 支持

看文档 mpvue 没有关于 WXS 的介绍,请问目前框架支持了吗?如果不支持,目前对于复杂的 Javascript 渲染表达式要怎么处理?

三元运算符样式渲染失败

三元运算符样式渲染失败

<i v-bind:class="[localeptenable?'ic-r-pt':'ic-r']" >哈哈</i>

编译结果:

<view class="_i data-v-71a2949b {{('ic-r'])? '[localeptenable?'ic-r-pt' : ' '}}">哈哈</view>

mpvue 技术交流群

官方提示:

感谢大家发起讨论,为方便大家交流学习,我们对微信交流群进行了规范化。请认准官方交流群

  1. mpvue官方认可的群,会统一备注群名称,并有核心开发者负责解答问题和提供咨询
  2. 交流群专注技术交流,谢绝其它无关讨论(严禁广告和招聘)
  3. 群名规范:mpvue 技术交流(群代号) ,群代号拟采用古代名马称号,备选如下:
  • 秦皇皇七骏《古今注》:追风白兔蹑景追电飞翩铜爵晨凫
  • 周穆王八骏《拾遗记》:绝地,翻羽,奔宵,越影,逾辉,超光,腾雾,挟翼

已经规范化的群如下(加群请注明 mpvue,或者 github)

请认准官方技术交流群,乱贴二维码的帖子请自行删除。


  • mpvue 技术交流(追风群)
  • mpvue 技术交流(黑马群)
  • mpvue 技术交流(蹑影群)
  • mpvue 技术交流(白兔群)
  • mpvue 技术交流(追电群)
  • mpvue 技术交流(越影群)
  • mpvue 技术交流(飞翩群)
  • mpvue 技术交流(铜爵群)
  • mpvue 技术交流(晨凫群)

用js抛出vue组件后,报template not found的错

这样写的正常的

import Toast from '@/Toast.vue'

下面这样写就出问题了

import Toast from '@/toast.js'
// toast.js
import Toast from './Toast.vue'

Toast.install = function (Vue) {
  Vue.component(Toast.name, Toast)
}

export default Toast

报错如下:

image

请问这是个bug还是我哪里写错了

v-for 循环生成元素,onShow/mounted钩子中使用createSelectorQuery无法获取

image
如图,v-for 循环生成的元素,无法再onShow/mounted钩子环境中通过createSelectorQuery获取,已经写好的元素(okok)则是可以获取的,试了下wepy是可以在钩子中获取的,如图

image

html代码

<div 
    v-for="(item,index) in planList"
    :key="index"
    class="lazyload userinfo"
    @click="bindViewTap">
      {{item.index}} =-> {{item.name}}
    </div>

    <div class="lazyload">
      
    </div>

js代码

data () {
    return {
      motto: 'Hello World',
      userInfo: {},
      planList: [
        { name: 'name111', poi_id: '111' },
        { name: 'name222', poi_id: '222' },
        { name: 'name333', poi_id: '333' },
        { name: 'name444', poi_id: '444' },
        { name: 'name555', poi_id: '555' },
        { name: 'name666', poi_id: '666' },
        { name: 'name777', poi_id: '777' },
        { name: 'name888', poi_id: '888' },
        { name: 'name999', poi_id: '999' },
        { name: 'namelll', poi_id: 'lll' },
        { name: 'nameccc', poi_id: 'ccc' },
        { name: 'namettt', poi_id: 'ttt' }
      ]
    }
  },
mounted () {
    const query = wx.createSelectorQuery()
    query.selectAll('.lazyload')
      .boundingClientRect(res => {
        // this.exposureData.items = res
        console.log('mounted, select all', res, 'res.length', res.length)
      })
      .exec()
  },
  onShow () {
    console.log('on show index')
    const query = wx.createSelectorQuery()
    query.selectAll('.lazyload')
      .boundingClientRect(res => {
        // this.exposureData.items = res
        console.log('on show select all', res, 'res.length', res.length)
      })
      .exec()
  }

建议:官方文档应该补全微信开发者工具的配置

按照quickstart生成的项目。微信开发者工具报错找不到app.js。查明原因是关闭了ES6 转 ES5。
建议,由于之前很多开发者会习惯以下配置

  • 关闭 ES6 转 ES5
  • 关闭 代码压缩上传
  • 关闭 上传代码时样式文件自动补全
  • 开启 开发环境不校验请求域名、TLS版本以及HTTPS证书

可能会导致项目不能初始化成功。所以希望官方文档能写明这些不一样的配置。避免大家踩坑。

使用 babel-plugin-transform-decorators-legacy babel插件支持装饰器语法,出现`Syntax Error: Unexpected token`的错

测试代码

function defaultResult(target, name, descriptor) {
  const oFunc = descriptor.value
  descriptor.value = function(...arg) {
    return new Promise((resolve, reject) => {
      oFunc.apply(target, arg)
        .then(data => {
          console.log(data)
        })
        .catch(err => reject(err))
    })
  }

  return descriptor
}

class CustomerTotalApi {

  @defaultResult
  static getXXX() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('CustomerTotalApi descriptor')
      }, 2000)
    })
  }
}

export default CustomerTotalApi

以上代码通过babel命令行和babel-plugin-transform-decorators-legacy插件可以正常编译。

error

image

通过修改mpvue-loader的配置可以时错误消失,但是无法生成小程序项目了。

image

components引用大小写导致组件失效

<template>
<main>
  <card></card>
</main>
</template>
import Card from "@/components/card"

export default{
  components:{
   Card
  }
}

如果改成小写就没有问题,这个只有在第一次启动npm run dev的时候才会出现,之后无论怎么改都不会好了,因为之前vue的项目是可以这样大写引入的,so。。这算是个bug吧。

Compiling... 报错信息:

> [email protected] dev /Users/xiaojue/Dev/projects/subject-wx
> node build/dev-server.js

TypeError: Cannot read property 'indexOf' of undefined
    at Resolver.parse (/Users/xiaojue/Dev/projects/subject-wx/node_modules/[email protected]@enhanced-resolve/lib/Resolver.js:181:27)
    at Resolver.<anonymous> (/Users/xiaojue/Dev/projects/subject-wx/node_modules/[email protected]@enhanced-resolve/lib/ParsePlugin.js:14:25)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (/Users/xiaojue/Dev/projects/subject-wx/node_modules/[email protected]@tapable/lib/Tapable.js:256:13)
    at runNormal (/Users/xiaojue/Dev/projects/subject-wx/node_modules/[email protected]@enhanced-resolve/lib/Resolver.js:130:20)
    at Resolver.doResolve (/Users/xiaojue/Dev/projects/subject-wx/node_modules/[email protected]@enhanced-resolve/lib/Resolver.js:116:3)
    at Resolver.<anonymous> (/Users/xiaojue/Dev/projects/subject-wx/node_modules/[email protected]@enhanced-resolve/lib/UnsafeCachePlugin.js:37:12)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (/Users/xiaojue/Dev/projects/subject-wx/node_modules/[email protected]@tapable/lib/Tapable.js:256:13)
    at runNormal (/Users/xiaojue/Dev/projects/subject-wx/node_modules/[email protected]@enhanced-resolve/lib/Resolver.js:130:20)
    at Resolver.doResolve (/Users/xiaojue/Dev/projects/subject-wx/node_modules/[email protected]@enhanced-resolve/lib/Resolver.js:116:3)
    at Resolver.resolve (/Users/xiaojue/Dev/projects/subject-wx/node_modules/[email protected]@enhanced-resolve/lib/Resolver.js:86:14)
    at Object.resolve (/Users/xiaojue/Dev/projects/subject-wx/node_modules/[email protected]@webpack/lib/NormalModule.js:130:14)
    at Promise (/Users/xiaojue/Dev/projects/subject-wx/node_modules/[email protected]@mpvue-loader/lib/mp-compiler/index.js:104:14)
    at Promise (<anonymous>)
    at Object.keys.map.k (/Users/xiaojue/Dev/projects/subject-wx/node_modules/[email protected]@mpvue-loader/lib/mp-compiler/index.js:103:14)
    at Array.map (<anonymous>)
    at Object.compileMPScript (/Users/xiaojue/Dev/projects/subject-wx/node_modules/[email protected]@mpvue-loader/lib/mp-compiler/index.js:102:48)
(node:4499) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

vuex的初始化问题

mpvue-loader是不是对vuex做了特殊处理?是在Vue初始化参数options上挂了一个init方法吗?
这个不是在Vue2.0之后就废弃了么

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.