小程序的那些事

微信小程序是微信官方自己发布的一套语法

官方文档

开发当中遇到一些有趣事件，

• button按钮的一些小问题：去掉button的边框使用button::after {border:0;},当属性disable为true的时候，里面的字体和北京有可能会被默认值改变，需要设置取代默认属性button[disabled]:not([type]){设置css属性}

• 小程序内部canvas样式宽高只能用px而不能用rpx,想要适配各种型号的手机屏幕，需要计算系数，

     var bgPath = '图片路径';
    var wxSys = wx.getSystemInfoSync();
    var screenScale = wxSys.screenWidth * 2 / 750;
    ctx.drawImage(bgPath, 0, 0, screenScale * 360, screenScale *500);
  

• 调用image组件时，执行方法，让图片或者gif重新加载播放的时候，图片路径添加hash值(时间戳或者随机数)，android真机不显示。解决方案：把图片放到服务器上，使用服务器地址链接

    <wxml>代码
    <image src="{{imgSrc}}"></image>
    
    <js>代码
    给图片添加hash值，执行toRefesh重新加载gif图片
    toRefesh:function(){
        this.setData({
            imgSrc:"本地路径.gif"+'?'+new Date().getTime()
        })
    }
  

• 页面使用过滤器，在外部定义一个aa.wxs的文件里面写上过滤器，wxml页面上要引用<wxs module="filters" src="../../common/aa.wxs"></wxs>示例如下

   //aa.wxs
   var filters = {
     toFix: function (value) {
       return value.toFixed(2)//此处2为保留两位小数
     }
   }
   module.exports = {
     toFix: filters.toFix
   }
   //wxml页面使用
   filters.toFix(1000)
  

• 自定义弹框的时候怎样阻断弹框穿透，避免在弹框后还可以滚动蒙层下的界面，一般页面添加catchtouchmove="true"或者catchtouchmove="preventTouchMove"js当中定义一个空函数来实现；但是部分不生效不能解决的时候，使用以下方法：

    //定义css样式
    .scroll-lock{
    	position:fixed;
    	top:0;
    	right:0;
    	bottom:0;
    	keft:0;
    	width:100%;
    	height:100%
    }
  

  在下一层页面上添加类名class="{{isStopBodyScroll?'scroll-lock':''}}"
  //弹框打开的时候isStopBodyScroll为true,下一层页面就不会滚动了，关闭弹窗的时候，设置为false,可以继续滚动

• 自定义组件和slot

  • 一个自定义组件由json wxml wxss js,编写一个自定义组件，首先需要在json文件中声明{"component":true}

  • 自定义组件内部的wxml

      <slot name="header"></slot>
      <view class="inner">
        {{imgData.txt}}
      </view>
      <slot name="footer"></slot>
    

  • 自定义组件的js结构

      Component({
        options: {
          multipleSlots: true  // 在组件定义时的选项中启用多slot支持
        },	
        properties: {
          // 这里定义了imgData属性，属性值可以在组件使用时指定
          imgData: {
            type: Object,//必填，目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
            value: {}, //可选，默认值，如果页面没传值过来就会使用默认值
          }
        },
        data: {
          // 这里是一些组件内部数据
          someData: {}
        },
        methods: {
          // 子组件向父组件传值通信
           fun(){
             this.triggerEvent("action","数据");
             //triggerEvent函数接受三个值：事件名称、数据、选项值  
           },
      	detailBtn:function(){console.log("子组件方法")}
        }
      })
    

  • 使用自定义组件的页面

    • 在json文件中声明{"usingComponents": {"component-show-model": "../../component/detailModel/detailModel"}}

    • 页面使用,slot插槽内的标签，样式要写在当前页面样式之中，而不是写在组件之中

        <component-show-model id="showModel" img-data="{{imgData}}" bind:action:'exFun'>  //exFun是你想要在组件里调用的方法名
        	<view slot="header" > 我是头部</view>
           <button slot="footer" class="btn-confirm"   bindtap="closeModal">保存图片</button>
        </component-show-model>
      

    • js之中的方法调用

         exFun(v){
              console.log(v) 
          },
         detailBtn() {
            let imgData = {
              id:1,
              imgUrl:"图片地址",
              txt:"文本内容"
            }
            this.setData({
              imgData: imgData
            })
        	//父组件调用子组件的方法和传值
            this.selectComponent('#showModel').detailBtn()
          },
      

• 自定义模态对话框实例 参考资料

  • 界面代码 .wxml

      <button class="show-btn" bindtap="showDialogBtn">弹窗</button>
      <!--弹窗-->
      <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
      <view class="modal-dialog" wx:if="{{showModal}}">
        <view class="modal-title">添加数量</view>
        <view class="modal-content">
          <view class="modal-input">
            <input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="请输入数量"></input>
          </view>
        </view>
        <view class="modal-footer">
          <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>
          <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view>
        </view>
      </view>
    

  • 样式 .wxss

      .show-btn {
        margin-top: 100rpx;
        color: #22cc22;
      }
      .modal-mask {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: #000;
        opacity: 0.5;
        overflow: hidden;
        z-index: 9000;
        color: #fff;
      }
      .modal-dialog {
        width: 540rpx;
        overflow: hidden;
        position: fixed;
        top: 50%;
        left: 0;
        z-index: 9999;
        background: #f9f9f9;
        margin: -180rpx 105rpx;
        border-radius: 36rpx;
      }
      .modal-title {
        padding-top: 50rpx;
        font-size: 36rpx;
        color: #030303;
        text-align: center;
      }
      .modal-content {
        padding: 50rpx 32rpx;
      }
      .modal-input {
        display: flex;
        background: #fff;
        border: 2rpx solid #ddd;
        border-radius: 4rpx;
        font-size: 28rpx;
      }
      .input {
        width: 100%;
        height: 82rpx;
        font-size: 28rpx;
        line-height: 28rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        color: #333;
      }
      input-holder {
        color: #666;
        font-size: 28rpx;
      }
      .modal-footer {
        display: flex;
        flex-direction: row;
        height: 86rpx;
        border-top: 1px solid #dedede;
        font-size: 34rpx;
        line-height: 86rpx;
      }
      .btn-cancel {
        width: 50%;
        color: #666;
        text-align: center;
        border-right: 1px solid #dedede;
      }
      .btn-confirm {
        width: 50%;
        color: #ec5300;
        text-align: center;
      }
    

  • 事件及方法 .js

      Page({
          data: {
            showModal: false,
          },
          onLoad: function () {
          },
          /**
           * 弹窗
           */
          showDialogBtn: function() {
            this.setData({
              showModal: true
            })
          },
          /**
           * 弹出框蒙层截断touchmove事件
           */
          preventTouchMove: function () {
      		蒙层view里有一个事件绑定catchtouchmove="preventTouchMove"。这养写的原因是阻断事件向下传递，避免在弹窗后还可以点击或者滑动蒙层下的界面。
          },
          /**
           * 隐藏模态对话框
           */
          hideModal: function () {
            this.setData({
              showModal: false
            });
          },
          /**
           * 对话框取消按钮点击事件
           */
          onCancel: function () {
            this.hideModal();
          },
          /**
           * 对话框确认按钮点击事件
           */
          onConfirm: function () {
            this.hideModal();
          }
      })