使用 mpvue 写了个小程序，点击内容里的图片，之前点过的图片会依次显示一次 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
已注册用户请 &
使用 mpvue 写了个小程序，点击内容里的图片，之前点过的图片会依次显示一次
· 29 天前 · 221 次点击
最近小程序挺火的，然后闲着没事也学习一波，用 mpvue 写了个小程序，在图片显示的时候，点击一张图片，按返回，以前点击过的图片会依次显示一次，感觉是点击图片的时候就把该图片 push 进了一个数组，每次都把这个数组循环了一遍。
我做的就是使用 mpvue-wxparse 解析了 HTML 然后显示出来，没有做其他的逻辑处理，这个 bug 目前无从下手，有大佬能点拨一下吗
目前尚无回复
& · & 2721 人在线 & 最高记录 3541 & · &
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.1 · 17ms · UTC 03:51 · PVG 11:51 · LAX 20:51 · JFK 23:51? Do have faith in what you're doing.美团小程序框架--mpvue入坑指南
[原文链接]
mpVue 是一套定位于开发小程序的前端开发框架，其核心目标是提高开发效率，增强开发体验。
一套代码多端复用
支持使用 npm 外部依赖
拥有vue开发经验的开发者，可以快速上手
支持使用 npm 外部依赖
方便的 Vuex 数据管理方案：方便构建复杂应用
不支持 纯-HTML
小程序里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用。
不支持部分复杂的 JavaScript 渲染表达式，建议使用计算属性，不支持在 template 内使用 methods 中的函数
目前可以使用的有 + - * % ?: ! == === & & [] .
不支持过滤器
渲染部分会转成 wxml ，wxml 不支持过滤器，所以这部分功能不支持
Class 与 Style 绑定
为节约性能，我们将 Class 与 Style 的表达式通过 compiler 硬编码到 wxml 中
&p :class=&{ active: isActive }&&111&/p&
// 编译后的结果
&view class=&_p {{[isActive ? 'active' : '']}}&&111&/view&
//classObj 不支持
&div class=&container& :class=&computedClassObject&&&/div&
computed: {
&!-- 支持 --&
computedClassStr () {
return this.isActive ? 'active' : ''
&!-- 不支持 --&
computedClassObject () {
return { active: this.isActive }
事件处理器
引入了 Vue.js 的虚拟 DOM ，在模版中绑定的事件会被挂在到 vnode 上，同时我们的 compiler 在 wxml 上绑定了小程序的事件，并做了相应的映射，所以你在真实点击的时候通过 runtime 中 handleProxy 通过事件类型分发到 vnode 的事件上，同 Vue 在 WEB 的机制一样，所以可以做到无损支持。同时还顺便支持了自定义事件和 $emit 机制
有且只能使用单文件组件（.vue 组件）的形式进行支持。其他的诸如：动态组件，自定义 render，和&script type=&text/x-template&& 字符串模版等都不支持。原因很简单，因为我们要预编译出 wxml。（动态增删改查 wxml 节点信息欠缺）
暂不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性(例：&card class=&class-name&& &/card& 样式是不会生效的)，**因为编译到 wxml，小程序不会生成节点**，建议写在内部顶级元素上。
Slot（scoped 暂时还没做支持）
动态组件、异步组件
inline-template
X-Templates
keep-alive
transition
mpVue 设计思路
Vue.js 和小程序都是典型的逻辑视图层框架，逻辑层和视图层之间的工作方式为：数据变更驱动视图更新；视图交互触发事件，事件响应函数修改数据再次触发视图更新.
Vue.js 和小程序工作原理的一致性，所以我们可以将小程序的功能托管给 Vue.js，在正确的时机将数据变更同步到小程序，从而达到开发小程序的目的。
为实现数据同步，mpVue 修改了 Vue.js RunTime 实现，在 Vue.js 的生命周期中增加了更新小程序数据的逻辑。
Vue.js 事件响应如果触发了数据更新，其生命周期函数更新将自动触发，在此函数上同步更新小程序数据，数据同步就实现了。
参照 Vue.js 编写与之对应的小程序代码，小程序负责视图层展示，所有业务和逻辑收敛到 Vue.js 中，Vue.js 数据变更后同步到小程序，如图所示。
如此一来，我们就获得了以 Vue.js 的方式开发小程序的能力。
如何使用？
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
生成的目录结构
Webpack配置
app: resolve('./src/main.js'),
// app 字段被识别为 app 类型
index: resolve('./src/pages/index/main.js'),
// 其余字段被识别为 page 类型
'news/home': resolve('./src/pages/news/home/index.js')
module.rules
需要给所有 js 后缀文件增加 mpvue-loader ，并且需要加 options: {checkMPEntry: true }，通过这个配置，我们的 loader 才能知道 entry 进来的 js 和 vue 的类型是 app 还是 page，从而做页面类型的区分。
test: /\.vue$/,
loader: 'mpvue-loader',
options: vueLoaderConfig
test: /\.js$/,
include: [resolve('src'), resolve('test')],
'babel-loader',
loader: 'mpvue-loader',
options: {
checkMPEntry: true
mpvue-loader
mpvue-loader 是 vue-loader 的一个扩展延伸版，类似于超集的关系，除了 vue-loader 本身所具备的能力之外，它还会产出微信小程序所需要的文件结构和模块内容。
经过mp-loader处理过后的文件
function injectStyle (ssrContext) {
if (disposed) return
// scoped CSS
require(&!!../../node_modules/extract-text-webpack-plugin/loader.js?{\&omit\&:1,\&remove\&:true}!vue-style-loader!css-loader?{\&minimize\&:false,\&sourceMap\&:false}!../../node_modules/mpvue-loader/lib/style-compiler/index?{\&vue\&:true,\&id\&:\&data-v-1fb80d35\&,\&scoped\&:false,\&hasInlineConfig\&:false}!px2rpx-loader?{\&baseDpr\&:1,\&rpxUnit\&:0.5}!postcss-loader?{\&sourceMap\&:true}!../../node_modules/mpvue-loader/lib/selector?type=styles&index=0!./card.vue&)
var normalizeComponent = require(&!../../node_modules/mpvue-loader/lib/component-normalizer&)
/* script */
import __vue_script__ from &!!babel-loader!../../node_modules/mpvue-loader/lib/selector?type=script&index=0!./card.vue&
/* template */
import __vue_template__ from &!!../../node_modules/mpvue-loader/lib/template-compiler/index?{\&id\&:\&data-v-1fb80d35\&,\&hasScoped\&:false,\&transformToRequire\&:{\&video\&:\&src\&,\&source\&:\&src\&,\&img\&:\&src\&,\&image\&:\&xlink:href\&}}!../../node_modules/mpvue-loader/lib/selector?type=template&index=0!./card.vue&
/* styles */
var __vue_styles__ = injectStyle
/* scopeId */
var __vue_scopeId__ = null
var Component = normalizeComponent(
__vue_script__,
__vue_template__,
__vue_styles__,
__vue_scopeId__,
__vue_module_identifier__
Component.options.__file = &src/components/card.vue&
/* hot reload */
if (module.hot) {(function () {
/* hot reload some code*/
export default Component.exports
&template&
&div class=&my-component&&
&h1&{{msg}}&/h1&
&other-component :msg=&msg&&&/other-component&
&/template&
import otherComponent from './otherComponent.vue'
export default {
components: { otherComponent },
return { msg: 'Hello Vue.js!' }
对应生成如下结构
&import src=&components/other-component$hash.wxml& /&
&template name=&component$hash&&
&view class=&my-component&&
&view class=&_h1&&{{msg}}&/view&
&template is=&other-component$hash& wx:if=&{{ $c[0] }}& data=&{{ ...$c[0] }}&&&/template&
&/template&
mpvue 在运行时会从根组件开始把所有的组件实例数据合并成一个树形的数据，然后通过 setData 到 appData,$c是$children 的缩写。至于那个 0 则是我们的 compiler 处理过后的一个标记，会为每一个子组件打一个特定的不重复的标记。 树形数据结构如下：
// 这儿数据结构是一个数组，index 是动态的
'0'{
// ... root data
'0': {
// ... data
msg: 'Hello Vue.js!',
// ...data
app.json／page.json
import Vue from 'vue';
import App from './app';
const vueApp = new Vue(App);
vueApp.$mount();
// 这个是我们约定的额外的配置
export default {
// 这个字段下的数据会被填充到 app.json ／ page.json
pages: ['static/calendar/calendar', '^pages/list/list'], // Will be filled in webpack
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#455A73',
navigationBarTitleText: '美团汽车票',
navigationBarTextStyle: '#fff'
style scoped
&!-- .vue --&
&template&
&div class=&container&&
&/template&
&style scoped&
.container {
&!-- vue-loader --&
&template&
&div class=&container& data-v-23e58823&
&/template&
&style scoped&
.container[data-v-23e58823] {
&!-- mpvue-loader --&
&template&
&div class=&container data-v-23e58823&&
&/template&
&style scoped&
.container.data-v-23e58823 {
mpvue-webpack-target
修改自 webpack/lib/JsonpTemplatePlugin.js 中关于 target 为 web 部分的源码。
主要兼容微信小程序中的全局变量。例如把 window 修改为 global 。
不支持 DOM 和 DOM 方法，不能进行热更替，注释部分功能。
触发 webpack 打包后的启动器。
postcss-mpvue-wxss
样式代码转换预处理工具，专门为 wxss 格式化处理的的一个 postcss 插件
清理 wxss 不支持的选择器。
清理 wxss 不支持的注释。
转换 rem 单位到 rpx。
转换 Web 的标签选择器到小程序的 class 选择器。
style scoped（postcss插件部分）
与WEPY对比基于mpvue开发微信小程序,vue能用的,用mpvue哪些情况不能用
摘要: 在使用mpvue开发过程中,会碰到一些在vue中能使用,结果在mpvue不能正常解析到小程序中的情况,下面就列一下,我在开发过程中遇到的一些情况,不断更新中! & & & & & & & &异化情况生命周期支持vue.js的生命周期部分，并且兼容了小程序的生命周期。new&Vue({&&data:&{&&&&a:&1
&&},&&created&()&{&&&&//&`this`&指向&vm&实例
&&&&console.log(‘a&is:&‘&+&this.a)
&&},&&onShow&()&{&&&&//&`this`&指向&vm&实例
&&&&console.log(‘a&is:&‘&+&this.a,&‘小程序触发的&onshow‘)
})//&=&&&a&is:&1&模板语法不支持 v-html，因为小程序里没有dom和bom的概念。不支持部分复杂的 JavaScript 渲染表达式mpvue会把 template 中的&{{}}&双花括号的部分，直接编码到 wxml 文件中，由于微信小程序的能力限制(数据绑定)，所以无法支持复杂的 JavaScript 表达式目前可以使用的有+ - * % ?: ! == === & & [] .。以下这几种情况都不支持://&基本类型的方法调用&p&{{&message.split(‘‘).reverse().join(‘‘)&}}&/p&//&实例方法调用&p&{{&strDecode(message)&}}&/p&//&类型判断&p&{{&typeof&message&}}&/p&//&过滤器&p&{{&message&|&strDecode&}}&/p&第一种可以使用计算属性来解决，第二种和第四种都是经常使用的，可以数据初始化的时候用js处理，只不过遍历的时候会稍微有点繁琐。也可以让后端支持，直接返回处理过的数据。支持短路和断路：&p&{{&false&||&‘默认值‘&}}&/p&&p&{{&true&&&&‘默认值‘&}}&/p&Class 与 Style 绑定基本全支持，不支持classObj和styleObj形式，例如：&p&:class=&classObj&&&/p&data&()&{&&&&return&{&&&&&&&&classObj:&{&&&&&&&&&&&&active:&true
}mpvue会解析成:&p&class=&object&Object&&&/p&styleObj 类似，另外，暂不支持在组件上使用 Class 与 Style 绑定。条件渲染、列表渲染、计算属性全支持组件不支持列表：暂不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性(例：&card class=&class-name&& &/card&&样式是不会生效的)==Slot==（scoped 暂时还没做支持）动态组件异步组件inline-templateX-Templateskeep-alive==transition==不支持复杂的slot，组件化会受限，不支持transition，过渡动画可能要用css3手写。支持小程序原生组件，原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange=&eventName& 事件，需要写成 @change=&eventName&，例如：&picker&mode=&date&&:value=&date&&start=&&&end=&&&@change=&bindDateChange&&
&&&&&view&class=&picker&&
&&&&&&当前选择:&{{date}}&&&&&/view&&/picker&注意事项及踩坑模板中的img标签url指向相对路径时不能正确解析例如：&img&src=&~assets/images/home/header.png&&/&&img&src=&./assets/images/home/header.png&&/&在当前mpvue版本（1.0.8）中，图片相对url不能正确解析，官方已列入待修复bug(27 days ago)，，暂时的解决方法是可以将静态资源放入static文件夹中，然后img标签用绝对路径引入：&img&src=&/static/images/home/header.png&&/&带来的副作用是不能享受url-loader的处理（小图片转base64）。另外，css中却是可以通过相对路径引入图片的，例如：.icon&{&&&&background-image:&url(‘./assets/images/home/header.png‘);
}.icon1&{&&&&background-image:&url(‘~assets/images/home/header.png‘);
}url-loader 会将小于limit数值的图片转成base64，但是小程序中好像规定了css中不能引入本地静态资源，可以通过配置url-laoder、nginx别名、host解决：host配置：127.0.0.1&sns-mp.guahao-inc.comnginx配置：server&{
&&&&listen&80;
&&&&server_name&sns-mp.guahao-inc.
&&&&location&/static/src/assets/&{
&&&&&&&&alias&/Users/lavyun/Code/FE/vue/vue-mp-demo/src/assets/;
}url-loader配置：const&imageRule&=&{
&&&&test:&/\.(png|jpe?g|gif|svg)(\?.*)?$/,
&&&&loader:&‘url-loader‘,
&&&&options:&{
&&&&&&&&limit:&10&*&1024,
&&&&&&&&publicPath:&‘http://sns-mp.guahao-inc.com/‘,
&&&&&&&&name:&utils.assetsPath(‘[path][name].[ext]‘)
}//&生产环境下指向静态资源服务器if&(isProd)&{
&&&&imageRule.options.publicPath&=&‘http://static.gauhao-inc.com‘}module.export&=&{
&&&&...,&&&&module:&{
&&&&&&&&rules:&[
&&&&&&&&&&&&imageRule,
&&&&&&&&&&&&...
}组件和小程序系统组件重名时的BUG比如：&loading&&/loading&小程序文档里没有提到有loading这个组件，之前直接使用loading做组件名，产生了很多莫名其妙的bug，框架层面也没做错误提示。所以大家开发时最好避免下命名冲突。slot的各种问题之前mpvue版本1.0.6时，使用slot生成的小程序代码少了import命令。组件的代码：&template&
&&&&&div&class=&scroll-wrapper&&
&&&&&&&&&slot&&/slot&
&&&&&&&&&loading&v-if=&loading&&&/loading&
&&&&&/div&&/template&使用组件时的代码：&scroll-wrapper&:loading=&loading&&
&&&&&top-entries&&/top-entries&&/scroll-wrapper&生成的wxml：&template&name=&data-v-7d8efa60-default-1&&
&&&&&template&data=&{{...$root[$kk+‘0‘],&$root}}&&is=&home$69cf8ee0&&&/template&
&/template&少了一行：&import src=&home$69cf8ee0& /&现版本 1.0.8 使用slot时：&scroll-wrapper&:loading=&loading&&
&&&&&circle-list&v-if=&circleList.length&&:list=&circleList&&&/circle-list&&/scroll-wrapper&circleList状态被更新时不能正确的触发视图更新，官方的仓库中也有大部分issue也是关于slot的。使用vuex管理状态虽然小程序是多页的，但小程序的多页主要是指 视图层 是多个 webview，相互独立，但是 js 都是在同一个执行环境中的，所以在mpvue中可以直接使用vuex来管理状态。初始化一个vuex实例，然后在需要使用的组件里引入。import&Vue&from&‘vue‘import&Vuex&from&‘vuex‘import&actions&from&‘./actions‘import&mutations&from&‘./mutations‘import&getters&from&‘./getters‘import&state&from&‘./state‘
Vue.use(Vuex)const&store&=&new&Vuex.Store({
&&&&state,
&&&&actions,
&&&&mutations,
&&&&getters
})export&default&store在组件里使用：import&store&from&‘../../store‘import&*&as&types&from&‘../../store/types‘
export&default&{&&&&data&()&{&&&&&&&&return&{
&&&&&&&&&&&&animate:&false
&&&&computed:&{
&&&&&&&&popup&()&{&&&&&&&&&&&&return&store.getters.postEntryPopup
&&&&methods:&{
&&&&&&&&close&()&{&&&&&&&&&&&&this.animate&=&false
&&&&&&&&&&&&setTimeout(()&=&&{
&&&&&&&&&&&&&&&&store.commit(types.POST_ENTRY_POPUP)
&&&&&&&&&&&&},&this.popup.animateTime)
}app.json 和 page.json框架规定在 src/main.js 中导出app.json配置,import&Vue&from&‘vue‘import&App&from&‘./App‘
Vue.config.productionTip&=&falseApp.mpType&=&‘app‘const&app&=&new&Vue(App)
app.$mount()export&default&{&&&&//&这个字段走&app.json
&&&&config:&{&&&&&&&&//&页面前带有&^&符号的，会被编译成首页，其他页面可以选填，我们会自动把&webpack&entry&里面的入口页面加进去
&&&&&&&&pages:&[‘^pages/home/main‘],&&&&&&&&window:&{
&&&&&&&&&&&&onReachBottomDistance:&10
}在 src/pages/**/main.js 中导出page.json配置:import&Vue&from&‘vue‘
import&App&from&‘./index‘
const&app&=&new&Vue(App)
app.$mount()
export&default&{&&&&config:&{&&&&&&&&navigationBarBackgroundColor:&‘#3f86ff‘,&&&&&&&&navigationBarTitleText:&‘首页‘,&&&&&&&&backgroundTextStyle:&‘light‘,&&&&&&&&navigationBarTextStyle:&‘light‘,&&&&&&&&enablePullDownRefresh:&true,&&&&&&&&backgroundColor:&‘#3f86ff‘
}使用总结使用mpvue可以很好降低开发人员的学习小程序语法的成本，可以很大程度上的实现h5和小程序代码复用（使用vuejs框架），在迁移一些vue组件到小程序时，可能都不需要改动代码或者改动少量代码就可以直接使用。官方对待框架的态度是很不错的，开源一个多月（3月9日 - 5月10日），一共有300个issue，处理了250个，获得8900star，社区比较活跃。作者：前端大白来源：https://my.oschina.net/kaykie/blog/1809948
随时随地看视频& MP大BUG!!!!!!!!!!!!!!!!!
查看: 1003|回复: 2
UID3809500主题阅读权限10帖子精华0积分4金钱43 荣誉0 人气0 在线时间0 小时评议0
Lv.1游侠新人, 积分 4, 距离下一级还需 1 积分
帖子精华0积分4金钱43 荣誉0 人气0 评议0
对方球员6犯不下场，继续玩，然后都8犯了还在场上。。。好不容易把科比搞到犯满，居然不下，直接导致比赛输了，郁闷啊！！
希望补丁快点出，太多的bug了，玩MP很不爽。。
UID1567542主题阅读权限30帖子精华0积分387金钱1712 荣誉0 人气0 在线时间552 小时评议0
Lv.3游侠中级会员, 积分 387, 距离下一级还需 113 积分
帖子精华0积分387金钱1712 荣誉0 人气0 评议0
想当年2K9出来的时候也是BUG一大堆的，后来出了1.1还是BUG一大堆……
宠辱不惊，闲看庭前花开花落。
去留无意，漫随天外云卷云舒。
UID1596914主题阅读权限40帖子精华0积分739金钱2285 荣誉0 人气0 在线时间1111 小时评议0
Lv.4游侠高级会员, 积分 739, 距离下一级还需 261 积分
帖子精华0积分739金钱2285 荣誉0 人气0 评议0
现在快速游戏也是BUG一大堆。。。哎
Powered by