小程序里所有的 BOM/DOM 都不能用,也就是说 v-html 指令不能用
部分复杂的 JavaScript 渲染表达式
{{}} 双花括号的部分,直接编码到 wxml 文件中,小程序能力限制
小程序支持运算
三元运算
算数运算
逻辑判断
字符串运算 (+连接等)
过滤器
template 中使用 methods 中的函数
vuex mapState、mapGetters
vuex辅助函数mapState、mapGetters不可用
Vue.prototype.$store = store
子组件可通过 this.$store 使用
使用 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 规范
列表中没有的原生事件也可以使用例如 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的分享标题内容图片:
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 组件是由客户端创建的原生组件,它的层级是最高的。
2. 页面层级小程序页面跳转打开最多五层,超出五层不会跳转了
3. 组件名