ionic开发笔记

一、APP复制文字到剪切板

使用到 Clipboard.js 插件

HTML代码
定了一个button，初始化了复制事件：data-clipboard-action=“copy” 和 data-clipboard-target="#selectCopy" ，selectCopy对应一个input，我们要复制的就是input里面的内容。

<div class="orderDetail">
	<div>
		<span class="orderDivSon"  style="padding-right: 5px;">订单编号</span>
		<input type="text" name="selectCopy" id="selectCopy" class="orderNumber" ng-model="billNo" style="position: absolute;left:-100%;bottom:-5%" readonly> {{billNo}}
	</div>
	<button class="orderCopy" data-clipboard-action="copy" data-clipboard-target="#selectCopy" onclick=""> 复制  </button>
</div>

JS代码
初始化一个 Clipboard 对象，复制成功的时候需要调用 clearSelection()方法清除这个控件的响应。

开发中遇到过一个坑，同一个页面 Clipboard 对象会重复初始化，每次点击复制会复制N遍，未避免这种情况必须在页面销毁的同时销毁这个 Clipboard 对象。

var clipboard = new Clipboard('.orderCopy');
            clipboard.on('success', function (e) {
                console.log(e);
                if (e.text) {
                    showMsg("订单编号复制成功", 'center');
                    e.clearSelection();

                }
            });
            
//页面销毁时调用
 $scope.$on('$destroy', function () {
                clipboard.destroy();
                window.broadcaster.removeEventListener("propertyPayBack", broadcasterHandler);
            });

二、广播的使用（ cordova-broadcaster ）

在iOS开发中会用到广播实现js和原生通讯的情况，这就通道 cordova-broadcaster 插件（具体添加插件的方法这里不多说）。

js调用原生广播
fireNativeEvent，相当于原生 postNotification 方法的作用

 window.broadcaster.fireNativeEvent("ionicToNative", {
                        DATA: p,
                        FLAG: '456'
                    }, function () {
                        console.log("event fired!");
                    })

js添加监听
addEventListener，相当于原生 addObserver方法
这里生命了broadcasterHandler方法作为监听的回调函数，这里很多人直接addEventListener(“propertyPayBack”, function(){ })是会有问题的后面会提到

//监听的触发方法
function broadcasterHandler() {
    console.log("ios++getUseOrderStatus");
    $scope.getUseOrderStatus();
};

//*监听ios支付结果 检测当前订单状态*/
window.broadcaster.addEventListener("propertyPayBack", broadcasterHandler);

js销毁监听
因为在开发的时候遇到了每次进入同一个页面都会添加监听，这有会出现多个同名的监听，当原生触发通知时会响应很多次，这肯定是不符合设计的。
所以需要在页面销毁的时候，销毁监听，保证唯一性。
这里broadcasterHandler很眼熟？不错，就是上面注册监听时的方法名，之所以单独生命方法就是这个用处，这里销毁的handler必须和添加的时候是同一个，这有才能正确移除监听，否则没有意义根本移除不掉，笔者在这里被坑了一个下午！！！（划重点，要考！）

$scope.$on('$destroy', function () {
	window.broadcaster.removeEventListener("propertyPayBack", broadcasterHandler);
 });

三、Swiper的小坑

说话前先发张图，这是UI给的设计图，实现左右滑动。这自然想到Swiper了，但是又有点毛病，怎么实现这种效果。

UI实现代码
HTML代码

 <div class="swiper-container findSwiper" style="height:80px;" ng-if="momentList.length>0">
          <div class="swiper-wrapper">
            <div class="swiper-slide" ng-repeat="monent in momentList track by $index" style="width:276px !important;">
              <div class="findPanel">
                <img
                  ng-if="ownerInfo.PIC_URL == ''|| ownerInfo.PIC_URL == null || ownerInfo.PIC_URL == 'null' || momentsDefault"
                  image-lazy-src="img/find/photo.png" class="userImg">
                <img
                  ng-if="ownerInfo.PIC_URL != ''&& ownerInfo.PIC_URL != null && ownerInfo.PIC_URL != 'null' && !momentsDefault"
                  image-lazy-src="{{ownerInfo.PIC_URL}}" class="userImg">
                <div class="findTittle">
                  <div class="findInfo">{{monent.noteMap.CONTENT}}</div>
                  <div class="findInfo"><span style="color:#3a3a3a;">{{monent.noteMap.OWNER_NICK_NAME}}</span><span
                      style="margin-left: 8px;color:#3a3a3a;">1小时前</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>

CSS代码
主要是 .swiper-slide 设置了 width: 80% !important; 但是这么设置以后虽然UI对了，但是swiper滑动也失常了。

/* 发现2.3 */
.homepage .findNone{
  height: 60px;
  width: 90% !important;
  margin: 0 5%;
  background-color: white;
  box-shadow: 0 0 8px 0 rgba(164,164,164,0.30);
  border-radius: 4px;
  font-size: 12px;
  color: #3A3A3A;
  letter-spacing: -0.04px;
  text-align: center;
  line-height: 60px;
}
.homepage  .findSwiper{
  width: 89% !important;
  margin: 0 5%;
}
.homepage  .findSwiper .swiper-wrapper .swiper-slide{
  width: 80% !important;
  border-radius: 4px;
}
.homepage .findSwiper .findPanel{
  height: 60px;
  width: 100%;
  box-shadow: 0 0 8px 0 rgba(164,164,164,0.30);
  margin: 10px 0 0 8px;
  display: flex;
}
.homepage .findSwiper .userImg{
  height:34px;
  width: 34px;
  border-radius: 17px;
  margin: 14px 13px 0 13px;
}
.homepage .findSwiper .findTittle{
  height:34px;
  width: 80%;
  margin-top: 14px;
}
.homepage .findSwiper .findInfo{
  height: 17px;
  line-height: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.homepage .findSwiper .lifesWiperTitle{
  width: 100%;
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: #333333;
  font-weight: 550;
  letter-spacing: -0.05px;
  margin-top: 14px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.homepage .findSwiper .lifesWiperCon{
  width: 100%;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #9A9A9A;
  letter-spacing: -0.04px;
  line-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

JS代码
查了官方文档才知道默认的设置无法满足这种UI效果，需要加入 slidesPerView: ‘auto’，让控件自动适应宽度。

$scope.findSwiper = new Swiper('.findSwiper', {
                  initialSlide: 0,
                  observer: true,
                  observeParents: true,
                  resistanceRatio: 0,
                  spaceBetween: 30,
                  slidesPerView: 'auto',
                  slidesOffsetAfter : 100,
                });

到这里UI正常了，滑动正常了，但是又出现一个问题了。可以看到加载UI的时候是后期填充的 swiper-slide ，但是js中初始化的时候swiper-slide还没填充，既网络请求异步加载还没完成。导致最后的结果是每次swiper显示的都是最后一个元素。
网上查了很多方法，最后统一口径只能在网络请求完成以后，延时初始化swiper（有更好办法的小伙伴可以留言哦）。

修改后JS代码
延时时间自由设定，测试了一下50到500毫毛都可以。

$timeout(function () {
                $scope.findSwiper = new Swiper('.findSwiper', {
                  initialSlide: 0,
                  observer: true,
                  observeParents: true,
                  resistanceRatio: 0,
                  spaceBetween: 30,
                  slidesPerView: 'auto',
                  slidesOffsetAfter : 100,
                });
              }, 500);