小小小卒
小小小卒

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-view、cover-image 。
3.其他浮层要放在video浮层之后


     
    
        {{goodsInfo.qiKanContent}}


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

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

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

 代码如下：