meituan-dianping / mpvue Goto Github PK
View Code? Open in Web Editor NEW基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系。
Home Page: http://mpvue.com
License: MIT License
基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系。
Home Page: http://mpvue.com
License: MIT License
mpvue-loader是不是对vuex做了特殊处理?是在Vue初始化参数options上挂了一个init方法吗?
这个不是在Vue2.0之后就废弃了么
首先我们知道在使用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时作用域更混乱)
目前是以下这种形式
// 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
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`
小程序现在支持分包,请问我要怎么在这个里面使用分包
subpackages
`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);`
通过延长延时时间可以减少出现问题的概率。
<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.
三元运算符样式渲染失败
<i v-bind:class="[localeptenable?'ic-r-pt':'ic-r']" >哈哈</i>
编译结果:
<view class="_i data-v-71a2949b {{('ic-r'])? '[localeptenable?'ic-r-pt' : ' '}}">哈哈</view>
按照quickstart生成的项目。微信开发者工具报错找不到app.js。查明原因是关闭了ES6 转 ES5。
建议,由于之前很多开发者会习惯以下配置
可能会导致项目不能初始化成功。所以希望官方文档能写明这些不一样的配置。避免大家踩坑。
为方便开发者反馈问题和跟进技术支持,我们特别开设 issues 收集小程序项目接入情况。
欢迎使用 mpvue
的小程序项目加入!
为统一呈现方式,我们建议加入的小程序包含如下内容:
# 小程序名称
小程序介绍,xxxx
<img src="http://xxx.xxx..jpg" width="200">
如图,v-for 循环生成的元素,无法再onShow/mounted钩子环境中通过createSelectorQuery获取,已经写好的元素(okok)则是可以获取的,试了下wepy是可以在钩子中获取的,如图
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()
}
测试代码:
<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也可以响应
如题,想尝试一下新加的页面又不知道在哪里查资料,如果issue恼人,请谅解
请问一下,我在使用vuex的mapGetters和mapMutations时报错了,是目前不支持吗?
感谢大家发起讨论,为方便大家交流学习,我们对微信交流群进行了规范化。请认准官方交流群
追风
,白兔
,蹑景
,追电
,飞翩
,铜爵
,晨凫
越影
,逾辉,超光,腾雾,挟翼请认准官方技术交流群,乱贴二维码的帖子请自行删除。
如题。
在vue init mpvue/mpvue-quickstart my-project新建的项目里,组件card的class name能正确,但是样式丢失了。是要配置什么东西么?
如题。
想在mpVue中使用微信官方小程序的组件 https://github.com/Tencent/weui-wxss/ ,有可以参考的例子吗?
<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.base.config.js配置了less-loader后,控制台还是说没有less模块
在组件内使写了样式,一个页面调用这个组件没问题,但两个和两个以上页面调用这个组件,这个组件的样式将会失效,将组件样式移到全局样式App.vue下能解决这问题,但这样做不合理,希望这个问题能得到解决。
是要通过其他方式进行页面传参吗,示例代码如下
<a href="/pages/detail/detail?id=666">链接</a>
onLoad (options) {
console.log(options) // undefined
},
增加或重命名pages下的目录,编译不会随之更新,必须重启webpack才会更新
@-moz-document url-prefix() {
@media print {
.application {
display: block;
}
.application--wrap {
display: block;
}
}
}
@media print 小程序不支持,没过滤掉
看文档 mpvue 没有关于 WXS 的介绍,请问目前框架支持了吗?如果不支持,目前对于复杂的 Javascript 渲染表达式要怎么处理?
bindgetphonenumber是调用微信获取手机号的授权窗口的回调,拿到授权的加密信息。但是在mpvue里编译过后,dist里面的bindgetphonenumber就没有了
用小程序的scroll-view的bind事件,发现都没有用,已经修改为@scroll,@scrolltolower
现有小程序转为vue, 这个什么时候可以支持呢
如题,请问支持这些特性吗?
对现有的一些vue方面的框架我们应该如何介入,例如vux,MUI ?
在代码中使用微信小程序官方组件时,样式不生效。请问怎么解决
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
插件可以正常编译。
mpvue-loader
的配置可以时错误消失,但是无法生成小程序项目了。在mpvue中能否使用echarts,百度有一个echarts小程序版的https://github.com/ecomfe/echarts-for-weixin 原生写小程序用echarts这个版本没问题,能否在mpvue中也使用呢
请问应该在哪里才能创建有效的静态资源文件,我尝试过在pages内创建,也尝试在外创建一个resource文件夹,里面存放静态图片,但编译后小程序工具报错,需要手动引入静态资源的吗??
有木有详细的计划(TODO),招募开发者。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.