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'，并且页面使用了<input>标签时，键盘弹出隐藏后，系统右上角“胶囊按钮”位置出现偏离（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进行控制层级，导致无法在视频组件之上放置一些其他的组件。

官方说明：

`原生组件 cover-view`：

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

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

<cover-view class="qiKanTitle-video" v-if="isVideoMode">
     <cover-view class="logo" style="overflow: hidden">
         <cover-view class="periodical-describe img-wrap">
             <cover-image class="coverimage" :src="shopInfo.siteLogo"/>
         </cover-view>
         <cover-view style="float:left;width:calc(100% - 48rpx);height:48rpx;line-height: 
      48rpx;padding-left:10rpx;box-sizing: border-box">{{shopInfo.siteName}}
         </cover-view>
    </cover-view>
    <cover-view class="periodical-describe" style="margin-top:24rpx;">
        {{goodsInfo.qiKanContent}}
    </cover-view>
</cover-view>

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

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

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

代码如下：

<view class='more-movie-container'>
  <template is='movieGrid' data='{{moviesListData}}' />
  <view class='bottom-tip' wx:if='{{isShowBottomTip}}'>
    没有数据了!
  </view>
</view>

// 上滑加载更多数据
  onReachBottom() {
    if (this.data.requestUrl.length && this.data.totalMovies > this.data.moviesListData.length) {
      wx.showNavigationBarLoading();
      utils.http(`${this.data.requestUrl}?start=${this.data.moviesListData.length}&count=20`, this.processDoubanData, this.getMoviesListDataErrorDeal);
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.data.moviesListData = [];
    utils.http(`${this.data.requestUrl}?start=0&count=20`, this.processDoubanData, this.getMoviesListDataErrorDeal);
    wx.showNavigationBarLoading();
  },

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: {
        navigationBarTextStyle: 'white',
        
        enablePullDownRefresh: true,
        onReachBottomDistance:5,
        backgroundTextStyle: "dark"
    },
}

mpvue +小程序坑点汇总

原生组件 cover-view：

猜你喜欢

`原生组件 cover-view`：