<template> <!-- 支持 --> <div :class="computedClassStr"></div> <div :class="{active: isActive}"></div> <!-- 不支持 --> <div :class="computedClassObject"></div> </template> <script> export default { data () { return { isActive: true } }, computed: { computedClassStr () { return this.isActive ? 'active' : '' }, computedClassObject () { return { active: this.isActive } } } } </script>
7） 不支持在组件上使用 Class 与 Style 绑定，将class与style绑定在组件最外层div上
8） 列表渲染 需要注意一点， 嵌套列表渲染，必须指定不同的索引！
<!-- 在这种嵌套循环的时候， index 和 itemIndex 这种索引是必须指定，且别名不能相同，正确的写法如下 -->
<template> <ul v-for="(card, index) in list"> <li v-for="(item, itemIndex) in card"> {{item.value}} </li> </ul> </template>
9) 小程序不支持路由，因此，路由跳转使用小程序的页面导航 api代替
this.$router.push-->wx.navigateTo() //进入子页面 this.$router.replace-->wx.reLaunch()//打开新页面
10） 获取当前页面地址
this.$route.fullPath-->getCurrentPages()[0].route
11） 接口返回参数结构调整，小程序的 request请求接口返回的数据会在外层添加一个data
res:{ res:{ data:{ code:'000000', --> code:'000000', data:{...} data:{...} } } }
12） 不支持本地图片用作背景图，可以使用网络图片、或者 base64，或者使用img、image标签
13） 上拉加载 /下拉刷新，选用小程序的全局api，scroll-view中无法使用
14） 不支持 css媒体查询，css样式避免标签选择器，不易于维护
15） mpvue-wxParse富文本解析
1）安装npm i mpvue-wxparse
2)组件内
<template> <wxParse :content="article" /> </template> <script> import wxParse from 'mpvue-wxparse' components: {wxParse}, </script> <style> @import url("~mpvue-wxparse/src/wxParse.css"); </style>
您可能感兴趣的文章: