kaola-fed / megalo Goto Github PK
View Code? Open in Web Editor NEW基于 Vue 的小程序开发框架
License: MIT License
基于 Vue 的小程序开发框架
License: MIT License
test
如题!mpvue使用开始会先初始化所有页面实例,与小程序的page绑定在一起,但开发中会出现一个问题,就是我一个页面,比如商品详情,打开了一个A商品的详情,然后我要再打开一个B商品的详情,因为他们是同一个page,所以在mpvue中会出现我打开的第二个B商品的详情会将vue实例上的data改掉,这样我再回到A商品的详情时数据其实已经被改掉了。
描述可能有点复杂,主要问题就是我一个页面打开两个的时候,想做到他们有独立的id,相互间数据不干扰!
大神们这次有处理这个问题吗?万分感谢
百度小程序
<button :data-index="index">
更新是更新路径是 $root.0.h['data-index']
,会有问题。需要转换成 dataIndex
支持微信小程序的第三方原生组件吗》?如vant-app等。
如果支持,可以同步在支付宝小程序和百度小程序中使用吗?
原生支付宝小程序在使用 web-view
组件时,src
属性只能在,页面初次渲染完成前进行更新。即必须在 onReady
触发以前。
<web-view src="{{url}}" onMessage="onmessage"></web-view>
Page({
data: {
url: 'xxx' // 有效
},
onLoad() {
this.setData({ url: 'aaa' }) // 有效
},
onReady() {
this.setData({ url: 'bbb' }) // 无效
}
})
目前,megalo 的 $mount
的触发时机是在 onReady
触发时,此时才会首次将 vnode
上的数据同步到小程序视图层,使得 web-view
的 src
无法修改。
onLoad
阶段。本身不需要操作 DOM 节点,只是同步数据,所以实现上将 $mount
提前到 onLoad
阶段执行是没什么问题的,但这样的修改会改变生命周期钩子的顺序(onLoad -> created -> mounted -> onReady)。有待验证其影响。为避免过多的回调地狱,建议新增对async/await语法的支持,我的做法如下:
npm i babel-plugin-transform-runtime
{
"plugins": ["transform-runtime"],
"presets": [ "env", "stage-0" ]
}
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: [
{
loader: 'babel-loader',
options: {
babelrc: true
}
}
]
},
不知官方后期是否考虑列为新特性?
代码:
<template>
<div>
<div v-if="obj">
<div v-if="obj.a"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
obj: null
}
}
}
</script>
现象:
报错 Cannot read property 'a' of undefined;
原因:
第一个调整判断为 false 时,后面的条件判断不应该执行,但是在 render 方法里没有对 v-if 嵌套关系进行判断。
请问是否支持小程序分包?
问题描述:
v-if
时,只有第一次能够正常解析,第二次开始无论条件是否为 true
时,都默认为 false
.软件版本:
{
"megalo": "^0.3.0",
"@megalo/target": "^0.2.2",
"@megalo/template-compiler": "^0.3.0"
}
问题复现代码:
<template>
<div>
// 第一次正常显示
<div v-if="test1"> {{ test1 }} </div>
// 第二次开始不能正常显示
<div v-if="test2 !== ''"> {{ test2 }} </div>
<div v-else-if="test2 !== ''"> {{ test2 }} </div>
<div v-else-if="true"> {{ test2 }} </div>
<div v-else>没有正确显示</div>
</div>
</template>
<script>
export default {
mpType: 'page',
data (){
return {
test1: '第一次会显示',
test2: '第二次开始不显示'
}
}
}
</script>
/megalo-demo/src/packageA/pages/a/components/ComA.vue
<template>
<div @tap="handleTap">点击我{{ index }}</div>
</template>
<script>
export default {
props: {
index: Number
},
methods: {
handleTap() {
console.log("点击了:", this.index);
}
}
};
</script>
<style>
</style>
/megalo-demo/src/packageA/pages/a/index.vue
<template>
<div class="app">
<div>v-for 组件,组件里的点击事件失效</div>
<com-a v-for="n in 9" :key="n" :index="n"/>
<div v-for="n in 9" :key="n" @tap="handleTap(n)">点击我---{{ n }}</div>
</div>
</template>
<script>
import ComA from "./components/ComA";
export default {
components: {
ComA
},
methods: {
handleTap(i) {
console.log('点击了---' + i)
}
}
};
</script>
<style lang="less" scoped>
</style>
组件ComA
里的点击事件失效了
修改.github
目录下的 issue 模版等,现在还是 vue 的。
请问除了支持支付宝小程序外与 mpvue 有什么明显却别/设计思路差异吗?
微信小程序 Picker组件,动态绑定的range对象无法响应对象的变化 ,点击addcity按钮,picker里的选项没有增加。
测试组件代码
<template>
<div>
<picker
class="_picker"
mode="multiSelector"
range-key="name"
:value="mindex"
:range="range"
>testing</picker>
<div @click="addCity">add City</div>
</div>
</template>
<style>
._picker {
padding: 13px;
background-color: #ffffff;
height: 100rpx;
width: 200rpx;
border: 1rpx solid red;
}
</style>
<script>
export default {
methods: {
addCity() {
this.range[0].push({ id: 9, name: "云南" });
}
},
data() {
return {
range: [
[{ id: 0, name: "北京" }, { id: 1, name: "上海" }],
[{ id: 2, name: "海淀区" }, { id: 3, name: "玄武区" }]
],
mindex: [0, 0]
};
}
};
</script>
在app的配置中挂载了自定义方法,页面中getApp后,没有该自定义方法。改用vue的mixins吗
test
官方使用文档有吗
code:
测试用例
export default {
data: {
ok: false
},
template: `
<test>
<template v-if="ok" slot-scope="foo">
<p>{{ foo.text }}</p>
</template>
</test>
`,
components: {
test: {
data () {
return { msg: 'hello' }
},
template: `
<div>
<slot :text="msg">
<span>{{ msg }} fallback</span>
</slot>
</div>
`
}
}
}
现象:
test 组件内部的 fallback slot 不生效。
迁移后的主要问题
优点:
解决了mpvue 共用同一个page导致的问题,和数据diff 问题
请问例子中,./src/htmlparse
目录下的文件有什么作用,里面的两个文件都是空文件,删除后build的小程序运行会报错
Error:
in File: ./app.wxss
File not found: ./htmlparse/index.wxss
编译 .wxss 文件错误,错误信息如上,可在控制台查看更详细信息
需要使用一些第三方的组件库,例如,f2-canvas
按照其文档使用没有效果,请问是否需要其他特别的配置?
请问,有计划支持百度智能小程序吗? 什么时候支持
你好,请问是否支持小程序插件的开发?
3端小程序各自有各自的 Api 写法,如拍照、扫描二维码等等,建议提供统一处理方式
否则 均需要 手动 判断 platform,会形成大量无用代码且繁琐。
可参考 Taro 的处理方式
https://nervjs.github.io/taro/docs/native-api.html
其中路由跳转部分 我已经单独 抽出了一个插件,megalo-router-patch,mpvue 也有类似插件,便于迁移 ,希望可以 加入到 本项目的 readme 或 demo 中。
希望能有官方文档
// index.js里
加入Vue.prototype.$app = 'test'
// page 里使用
created () {
console.log(this.$app) // 结果为undefined
}
this.$root.$mp.query;
改成 this.$mp.options;
写法
import { Component } from 'vue-property-decorator';
declare module "megalo/types/vue" {
interface Vue {
$mp: any
}
}
//
Component.registerHooks([
'onShow',
'onHide',
'onShareAppMessage',
'onReachBottom',
'onPullDownRefresh'
])
仅新建项目,运行npm run dev:wechat
就会有
ERROR in ./node_modules/@megalo/vhtml-plugin/index.js
Module not found: Error: Can't resolve 'octoParse' in '/home/lujian/wechatproj/genchain.wechat.todo/node_modules/@megalo/vhtml-plugin'
@ ./node_modules/@megalo/vhtml-plugin/index.js 3:16-36
@ ./src/app.js
错误提示。
或者说有教程吗,咋整合?
提个小建议,感觉源码阅读起来还是很吃力的,大部分都是 Vue 的源码,不知道 megalo 的代码具体分布在哪里, 开源的目的应该就是要让大家发现问题找到问题, 这样好像不太好提 pr😂
使用megalo/cli创建项目后直接编译成功,增加一个page后编译报如下错误:
项目代码地址:https://github.com/zhdwwf/megalo-demo
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.