微信小程序开发中的一些技巧

1、CSS样式标签的覆盖

a) 单个标签的覆盖

  假如一个组件里面定义了多个相同的样式，后一个会覆盖之前的样式，除非后面的样式之前没有定义过，举例如下:

<view class="tv">
 QQQQ
</view>

.tv{
  background-color: pink;
}
.tv{
  background-color: olive;
  color: orange;
}

b) 复合标签的覆盖

<view class="tv tv2 tv3">
 QQQQ
</view>

.tv{
  background-color: pink;
}
.tv.tv2{
  color: darkblue;
}
.tv.tv3{
  color: orange;
  font-size: 100rpx;
}

应用场景：根据这种情况，可以使view根据不同的场景改变样式

2、微信小程序中setData()赋值对象的子对象问题。

​ 下面是微信小程序中的示例：

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

假如我们场景中需要修改某个对象中的子对象的值，比如以下情况:

<view> {{ message.msg }} </view>

Page({
  data: {
      message: {
    	msg:'Hello MINA!'
    }
  }
})

针对上面情况，如果运行时候需要采取以下方式进行修改：

 setData({
      'message.msg': '已更改'
    })

3、通过!、!!进行有效变量的判断

​ 因为js规定 null、’ '、" "、NaN、undefined、false、0均为false。所以可以用!来进行取反操作来判断值为无效变量、通过!!来判断值为有效变量来进行判断

所以假如有以下代码：

	test(value){
		if(value != ‘’ && value != undefined){
			//执行正常逻辑
		}
	}

则可以改写成以下方式

test(value){
		if(!!value){
			//执行正常逻辑
		}
	}

4、&&、|| 操作符参与逻辑运算

​ 当 && 参与逻辑运算时候，有以下几种情况

​ a) 左侧为真时，则返回右侧变量，假如右侧是表达式或函数时，则执行该表达式或函数并返回结果。

b) 左侧为假时，则返回左侧变量，假如左侧时表达式或函数时，则执行该表达式或函数并返回结果

​ 当 || 参与逻辑运算时候，有以下几种情况

​ a) 左侧为真时，则返回左侧变量，假如左侧时表达式或函数时，则执行该表达式或函数并返回结果

b) 左侧为假时，则返回右侧变量，假如右侧是表达式或函数时，则执行该表达式或函数并返回结果。

产生上述结论的原因是因为： && 操作符 只有左右两侧结果都为真时，结果才为真，所以当左侧为假时则无需判断右侧结果，直接返回即可。当左侧结果为真时，还需要判断右侧结果，这时候逻辑已经执行到最后了，所以直接返回右侧结果即可。 || 操作符 只要左右两侧结果其中一个为真时，结果即为真，所以当左侧结果为真时，则无需判断右侧结果，直接返回。当左侧结果为假时，还需要判断右侧结果，此时逻辑已执行到最后了，所以此时无论右侧结果是否为真，直接返回即可。

假如有以下代码，则可进行改写：

a) 假如某个方法为空则不执行，不为空则执行：

	test(callback){
		if(callback != null && callback != undefined){
			callback()
		}
	}

可以改写成如下方式

	test(callback){
		callback && callback()
	}

b) 假如某个参数为空则不赋值，否则赋值

	test(value){
	var result = '默认值';
		if(value!= null && value!= undefined){
			result = value;
		}
		var newValue = result + 666
		//处理其他逻辑
	}

可以改写成如下方式：

	test(value){
	var result = 0;
		result && (result = value)
		var newValue = result + 666
		//处理其他逻辑
	}

c) 假如某个参数为空则使用默认值，否则则只有当前值:

	test(value){
		if(value== null && value== undefined){
			value = 0
		}
		var newValue = value+ 666
		//处理其他逻辑
	}

则可以改写成如下代码：

	test(value){
		value|| (value= 0)
		
		var newValue = value+ 666
		//处理其他逻辑
	}

4、微信小程序中判断权限的代码示例：

const UNPROMPTED = 0//第一次进入，需要主动弹出权限确认框
const UNAUTHORIZED = 1//用户拒绝权限
const AUTHORIZED = 2//用户同意权限
 wx.getSetting({
      success: res => {
        let auth = res.authSetting['scope.userLocation']
        let locationAuthType = auth ? AUTHORIZED
          : (auth === false) ? UNAUTHORIZED : UNPROMPTED
        this.setData({
          locationAuthType: locationAuthType
        })

        if (auth)
        consol.log('已经定位')
        else
         consol.log('没有定位，使用默认城市') //使用默认城市广州
      },
      fail: () => {
        
      }
    })

5、拦截点击事件的方式：

在微信小程序中一般的点击事件是由 bind、catch 之类的方式触发。有时候点击事件是变化的，比如购买按钮，可以购买时候能够点击，不能购买时候不能点击。通常来说都是在js点击事件里面进行拦截判断，这里提供一种新的方式----使用css中的pointer-events来进行控制，该属性与其它css样式配合使用可以实现点击时候和不可点击时候的两种状态样式。pointer-events的具体属性如下:

pointer-events: auto;	/*  这个属性跟没设置一样 */
pointer-events: none; /*  这个属性设置后，无法再监听点击事件 */
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

参考链接如下：
a、https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
b、https://www.cnblogs.com/lankongclub/p/11493089.html

6、立即执行函数使用时候需要注意的地方(IFFE函数)

 立即执行函数顾名思义就是，定义后无需调用即可执行的函数。示例如下：

(function(){
  console.log('立即执行函数')
})()

因为微信小程序需要编译一下才会执行，所以假如该函数定义在不恰当的位置时候也会执行，比如页面的js顶部，或者page({})中，如下：

var iffe = (function(){
  console.log('立即执行函数')
})()

page({
	ie: (function($,a){
    	console.log('类中的立即执行函数')
  	})()
})

对于以上写法即使并未跳转到该页面，立即执行函数也会执行。

7、IOS上面的间隔线不显示问题：

在部分IOS手机上面1rpx的像素无法显示，这是因为这部分手机物理屏幕的问题，低于1px无法显示，写1.5rpx即可。百度有详细答案

8、IOS手机页面可以滑动的问题：

在IOS手机上面即使内容没有超过一屏、也没有设置scroll时候，页面毅然可以滑动，但是Android没有问题，这时候在 相关页面的json文件里面设置`"disableScroll": true`就可以了，完整代码如下：

{
    "usingComponents": {
    },
  "navigationBarTitleText": "我的",
  "navigationBarBackgroundColor": "#5d89f0",
  "navigationBarTextStyle": "white",
  "navigationStyle": "custom",
  "disableScroll": true
}

参考链接如下:
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html#%E9%85%8D%E7%BD%AE%E9%A1%B9

9、顶部与底部固定，中间滚动的布局

该布局采用flex进行控制，无需处理底部高度，唯一问题就是代码量较多
[https://www.jianshu.com/p/cd4be40160ad](https://www.jianshu.com/p/cd4be40160ad)

10、movable-area 使用中遇到的一些问题

[https://blog.csdn.net/qq_36437172/article/details/83055774](https://blog.csdn.net/qq_36437172/article/details/83055774)

11、微信小程序中"enablePullDownRefresh":true无效的可能性(前提是跟官方文档写的一致)

  a)、页面跟布局由绝对定位固定了，导致页面无法下拉刷新，如下：

wxml

<view class="all_view">
</view>

wxss

.all_view {
  display: block;
  min-height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

12、cover-view中文字不能显示多行且无法显示省略号

   `cover-view`不能显示多行的问题需要设置`white-space`属性，设置什么都可以。具体有以下属性：

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

设置"white-space":normal 即可解决换行问题。
对于省略号的事情，这个暂时无法解决，需要有服务端控制字数并加上省略号进行返回(当然也可以由客户端控制)

拓展：
1、使用after进行多行控制显示省略号：http://www.daqianduan.com/6179.html
该方式采用隐藏末尾宽度，追加省略号的方式，但是字体宽度不容易控制，容易出现遮挡一半文字的情况。