mpvue-小程序之蹲坑记

小程序里所有的 BOM/DOM 都不能用,也就是说 v-html 指令不能用

部分复杂的 JavaScript 渲染表达式

{{}} 双花括号的部分,直接编码到 wxml 文件中,小程序能力限制

小程序支持运算

三元运算

算数运算

逻辑判断

字符串运算 (+连接等)

过滤器

template 中使用 methods 中的函数

vuex mapState、mapGetters

vuex辅助函数mapState、mapGetters不可用

Vue.prototype.$store = store
子组件可通过 this.$store 使用

2. 规范 2.1. 变量绑定

使用 vue.js 规范

<!-- 小程序 --> <view >超然haha</view> <view current="{{currentTab}}">超然haha</view> <!-- vue.js --> <view :class="{'on': currentTab==0 ? true : false}" >超然haha</view> <view :current="currentTab" :style="{'height':currentTab==1 ? Height+'rpx':'100%'}">超然haha</view> 2.1. 事件处理

小程序原生事件 ---> vue.js 规范

mpvue-小程序之蹲坑记

列表中没有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上将 bind 改为@ @regionchange,在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>

不支持组件引用时原生事件

关于修饰符

.stop 的使用会阻止冒泡,但是同时绑定了一个非冒泡事件,会导致该元素上的 catchEventName 失效!

.prevent 可以直接干掉,因为小程序里没有什么默认事件,比如submit并不会跳转页面

.capture 支持 1.0.9

.self 没有可以判断的标识

.once 也不能做,因为小程序没有 removeEventListener, 虽然可以直接在 handleProxy 中处理,但非常的不优雅,违背了原意,暂不考虑

3. 组件 3.1. 限制

只能使用单文件组件(.vue 组件)的形式进行支持

其他的诸如:动态组件,自定义 render,和 <script type="text/x-template"> 字符串模版等都不支持

组件上定义原生事件

v-show---》v-if

slot

动态组件

异步组件

inline-template

X-Templates

keep-alive

transition

class

style

3.1.1. vuex 的支持

vuex和以往类似,不同的是,小程序以多页形式渲染,故每个页面都需要创建vue实例并引入相应的store模块

在main.js中引入你的store, 并绑定到Vue构造函数的原型上,这样在每个.vue的组件都可以通过this.$store访问store对象

无法使用它的辅助函数 mapState、 mapGetters、 mapActions、 mapMutations 等

用最原始的 store.commit()、 store.getter

3.2. 小程序组件使用

原生组件的事件绑定需用vue语法

4. 参数获取

page onLoad 时候传递的 options

this.$root.$mp.query

也可以通过 onLoad 方法

app onLaunch/onShow 的参数

this.$root.$mp.appOptions

5. 生命周期问题

mpvue 是兼容微信小程序的生命周期与 vue 的生命周期,vue 实例会接管小程序 Page 实例的生命钩子,因此需要使用到小程序的生命周期钩子时,可将相应的钩子方法定义在 vue 实例中
如定义当前Page的分享标题内容图片:

new Vue({ data () { return { score: '' } }, onShareAppMessage (res) { return { title: '我获得 ' + this.score + ' 分,快来一起掌握基础音阶知识吧!', path: '/pages/index/index', imageUrl: 'https://wechat.dddog.com.cn/static/wescale.jpg' } } }) 小程序踩坑记 1. 组件

input, map, canvas, video, live-player,camera , textarea 是由客户端创建的原生组件,层级最高,z-index 没用
而其它组件都是基于Web Component规范实现的Custom Element,而诸如picker弹出选择器行为,navigator跳转行为,都是基于微信原生提供的能力,理解为调用wx.xxxApi

微信小程序的组件是否都是原生实现的,类似React Native?
No,小程序视图层仍然依赖于Webview,只有部分组件是原生组件,用来解决Mobile Web体验问题。目前原生组件包括:
input,textarea,video,map,canvas

tip: input 组件是一个 native 组件,字体是系统字体,所以无法设置 font-family;

tip: textarea 组件是由客户端创建的原生组件,它的层级是最高的。

tip: video 组件是由客户端创建的原生组件,它的层级是最高的。

tip: map 组件是由客户端创建的原生组件,它的层级是最高的。

tip: canvas 组件是由客户端创建的原生组件,它的层级是最高的。

mpvue-小程序之蹲坑记

2. 页面层级

小程序页面跳转打开最多五层,超出五层不会跳转了

3. 组件名

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpxgwy.html