mpvue +小程序坑点汇总

Vue开发小程序 坑点汇总:

1、button 去边框 背景

            button::after{
                border: 0;
                background:transparent;
            }
            button[disabled][type='default'],wx-button[disabled]:not([type]){
                background-color:transparent;
            }

2、vue.js视图不更新的三种解决办法:

1).  Vue.set(vm.someObject, 'keyORindex', 2)

2). this.$set(this.someObject,'keyORindex',2)

3).  代替 `Object.assign(this.someObject, { a: 1, b: 2 })

        this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

3、 设置小程序的状态栏、导航条、标题、窗口背景色。

window: { 
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: '', 
    navigationBarTextStyle: 'white',
    navigationStyle:'custom'
 },

常见问题

1.请确认微信版本在6.6.0以上,以及公共库版本在1.9.1以上。
2.这里的custom的意思,是指需要开发者自行设计定义顶栏的样式。另外,系统的标题栏是无法隐藏的,只能隐藏微信小程序本身的navigationBar。
3.这里“自定义”的意思,是指开发者需要用wxml和wxss来实现顶栏(或者不实现,通过margin或position等样式留出空白)
4.目前需要在web-view里的网页自行做navigation bar
5.
navigationStyle设置为custom属性时,默认导航没有了,但是如果页面内容头部我需要fixed固定,那么内容的层级就默认比下拉刷新的按钮层级高了,刷新点点点的不现实了。后续官方更新中,将下拉刷新调高等级(2018.04.03)
6.
tabar 是用原生控件的实现的,所以无法设置样式
7.
tabar 是用原生控件的实现的,所以无法设置样式
8.
当使用自定义导航条navigationStyle: 'custom',并且页面使用了标签时,键盘弹出隐藏后,系统右上角“胶囊按钮”位置出现偏离(BUG,在iphoneX和小屏幕上可能会出现)建议通过getSystemInfo会返回一个statusBarHeight,可以用这个来兼容
9.
当前不支持单个页面设置 navigation style
10.右上角的胶囊不能修改颜色(目前)
11.支持单个页面设置 navigationBarTextStyle (main.js文件)

import Vue from 'vue'
import App from './index.vue'
import store from "@/store";

const app = new Vue(App);
app.$mount();
export default {
    /*页面配置*/
    config: {
        navigationBarTitleText: '我的',
        navigationBarTextStyle: 'white',
    }
}

4、storage 及 过期时间
   
   1.setStorage 

wx.setStorage({key:'dataInfo',data:dataInfo})          
wx.setStorage({
      key:'dataInfo_time', 
      data:Date.parse(new Date())+300*1000 //缓存时间
})
//在设置某缓存数据A的时候,我们可以同时设置一个过期时间值的数据缓存B;
//在下一次打开该页面的时候,不仅需要判断数据A是否存在,也需要比较B与当前时间,
//如果符合要求则使用本地缓存的数据A,否则则重新拉取数据并刷新A和B

 

2. 获取  getStorage

  try {
       var res = wx.getStorageSync('dataInfo');
       var timeStemp= wx.getStorageSync('dataInfo_time');
       var nowTime=Date.parse(new Date());
       if (res&&timeStemp>nowTime) {//缓存存在并且过期时间未到
               //Do something.... 
       }else{
        
              //Do something.... 
             }
        } catch (e) {

         //Do something.... 
       }

5.textarea、input的层级太高,遮罩层无法覆盖文字
   改变textarea、input的z-index,隐藏时设置z-inde: -1; 显示时设置z-index: 0

6.video的层级问题
   问题:由于视频组件层级过高并且无法使用z-index进行控制层级,导致无法在视频组件之上放置一些其他的组件。

   官方说明:
mpvue +小程序坑点汇总_第1张图片

 

原生组件 cover-view

1.在同一父容器中,要在原生控件上添加布局,只能用cover类的控件,因为原生控件的层级处于顶层,即使将非cover类的控件的z-index设置到10000,依然层级在原生控件之下,被覆盖。

2.在原生控件cover-view作为父容器时,不能使用其他控件嵌套作为子元素,只能使用cover类的控件,例如:cover-viewcover-image 。
3.其他浮层要放在video浮层之后


     
    
        {{goodsInfo.qiKanContent}}
    


7.scroll-view中使用下拉刷新 失效
   原因:标签与onPullDownRefresh事件无法同时使用
   修改方法:

  1.放弃使用标签,以及标签上的所有属性值,使用标签替换,这样     就无法触发 bindscrolltolower事件,也就无法实现上滑加载了

   2.使用onReachBottom事件处理函数替换onLoaderMoreMovies事件处理函数,onReachBottom事件是当页面滑动到底部时触发,     通过该事件来实现下滑加载

 代码如下: