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 People

Contributors

anchengjian avatar aorz avatar armyja avatar bartlomieju avatar blake-newman avatar bluemsn avatar chrisvfritz avatar defcc avatar dewyzee avatar dsonet avatar gebilaoxiong avatar hanks10100 avatar herringtondarkholme avatar hucq avatar hunnble avatar javoski avatar jinjiang avatar jkzing avatar kazupon avatar kingmario avatar kingwl avatar ktsn avatar mingmingwon avatar phanan avatar posva avatar s-you avatar sexdevil avatar yuez-sky avatar yyx990803 avatar znck avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mpvue's Issues

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`

使用 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

三元运算符样式渲染失败

三元运算符样式渲染失败

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

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

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.

WXS 支持

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

分包及h5运行问题

What problem does this feature solve?

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

What does the proposed API look like?

subpackages

关于组件的bug

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

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也可以响应

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

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

用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还是我哪里写错了

mpvue 合作项目征集

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

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

内容

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

示例

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

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

mpvue 技术交流群

官方提示:

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

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

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

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


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

【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时作用域更混乱)

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是可以的。建议在文档中提示

关于目录结构

目前是以下这种形式

// 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

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

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

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

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

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

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

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

vuex的初始化问题

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

先给你们赞一个,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);`

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()
  }

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.