微信小程序wepy框架开发记录及常用代码片段

作者: 回到唐朝做IT | 来源:发表于2019-11-01 13:07 被阅读0次

一、小程序wepy初始化

1、全局安装wepy-cli脚手架

npm install wepy-cli -g

2、查看wepy版本号

$ wepy -v

3、安装项目

//1.7.0之前版本
$ wepy new myproject
//1.7.0之后版本
$ wepy init standard myproject

4、进入项目安装依赖

$ cd myproject
$ npm  install

5、开启实时编译

//npm run dev
wepy build --watch

注意：

将dilt文件导入微信开发工具查看页面效果
关闭ES6转ES5等功能 , 开启不校验域名
关联.wpy格式: 点击右下角text模式文本,选择.wpy关联文件,输入vue

二、开发过程中问题记录

1.小程序弹窗禁止底部内容滚动

问题：在小程序页面中增加遮罩层后，底部页面依然可以跟随滑动
方法：catchtouchmove="preventTouchMove"

<!-- 遮罩层+actionSheet -->
    <view class="cus-modal" wx:if="{{isShowModal}}"  catchtouchmove="preventTouchMove">
      <view class="actionSheet">
        <view class="action-title">
          <image src="" />
        </view>
        <view class="action-item">全部类型</view>
        <view class="action-item">余额充值</view>
        <view class="action-item">余额提现</view>
        <view class="action-item">余额转入</view>
        <view class="action-item">在线支付</view>
        <view class="action-item">交易退款</view>
      </view>
    </view>

//同methods平级处
methods = {
   //...
   //...
 }
preventTouchMove () {}  //此处就是一个空方法

2.微信小程序取 dataset 值

方法：e.target.dataset.xxX

<block wx:for="{{detailTypeList}}" wx:key="index">
      <view  bindtap="chooseType" data-type="{{item}}" >{{item.type}}</view>
</block>

methods={
  chooseType(e) {
        console.log(e.target.dataset.type)
    }
}

注意：e.target 确定是哪个触发的，dataset 对应 data- 开头的属性，type 是具体哪一个属性。注意：data-xxx，xxx 这里只能小写

3.自定义actionSheet和动画

注意：data中并未定义showModalStatus=false，若定义则在showModal()方法中声明showModalStatus=true

    <!-- actionsheet  -->
    <view class="cus-modal" wx:if="{{showModalStatus}}">
    </view>
    <view class="actionSheet" animation="{{animationData}}" wx:if="{{showModalStatus}}">
      <view class="action-title">签到规则</view>
      <view class="action-Content">
        <view class="action-item">每天完成一次签到即可获得积分奖励</view>
        <view class="action-item">每天完成一次签到即可获得积分奖励</view>
        <view class="action-item">每天完成一次签到即可获得积分奖励</view>
      </view>
      <view class="action-confirm" bindtap="hideModal">知道了</view>
      <!-- <view class="footer">
        <view class="leftItem" bindtap="hideModal">取消</view>
        <view class="rightItem" bindtap="hideModal">确认</view>
      </view> -->
    </view>

    // 显示遮罩层
    showModal() {
      var animation = wx.createAnimation({
        duration: 400,
        timingFunction: 'ease',
        delay: 0
      })
      this.animation = animation
      animation.translateY(300).step()
      this.setData({
        animationData: animation.export(),
        showModalStatus: true
      })
      setTimeout(
        function() {
          animation.translateY(0).step()
          this.setData({
            animationData: animation.export()
          })
        }.bind(this),
        100
      )
    },
    // 隐藏遮罩层
    hideModal() {
      var animation = wx.createAnimation({
        duration: 200,
        timingFunction: 'ease',
        delay: 0
      })
      this.animation = animation
      animation.translateY(300).step()
      this.setData({
        animationData: animation.export()
      })
      setTimeout(
        function() {
          animation.translateY(0).step()
          this.setData({
            animationData: animation.export(),
            showModalStatus: false
          })
        }.bind(this),
        200
      )
    },

//部分样式
 .cus-modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
  }

  .actionSheet {
    position: fixed;
    z-index: 999;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center;
    background: #fff;
    border-radius: 8rpx 8rpx 0 0;
  }
  //底部取消确认
      .footer {
        height: 95rpx;
        display: flex;
        align-items: center;
        margin-top: 59rpx;
        justify-content: space-between;
        border-top: 1rpx solid #EDEDED;
        view {
          width: 50%;
          height: 95rpx;
          line-height: 95rpx;
          text-align: center;
          font-size: 28rpx;
        }
        .leftItem {
          color: #999;
          border-right: 1rpx solid #EDEFF2;
        }
        .rightItem {
          color: #438BFE;
        }
      }

4.自定义切换Tab

image.png

    <view class="ticketStatus">
      <view class="{{activeIndex==1?'active':''}} statusItem" bindtap="chooseStatus(1)">
        <view>可用(3)</view>
        <view class="b-line" wx:if="{{activeIndex==1}}"></view>
      </view>
      <view class="{{activeIndex==2?'active':''}} statusItem" bindtap="chooseStatus(2)">
        <view>使用记录(4)</view>
        <view class="b-line" wx:if="{{activeIndex==2}}"></view>
      </view>
      <view class="{{activeIndex==3?'active':''}} statusItem" bindtap="chooseStatus(3)">
        <view>已过期(6)</view>
        <view class="b-line" wx:if="{{activeIndex==3}}"></view>
      </view>
    </view>

data={
  activeIndex: 1, // 当前选中的tab
};

methods={
  chooseStatus(e) {
        this.activeIndex = e
   },
}

    .ticketStatus {
      background: #fff;
      padding-top: 50rpx;
      height: 70rpx;
      display: flex;
      justify-content: center;

      .statusItem {
        width: 33.33%;
        font-size: 28rpx;
        color: #999;
        text-align: center;

        .b-line {
          width: 34rpx;
          height: 4rpx;
          display: inline-block;
          background: #438BFE;
        }
      }
      .active {
        color: #333;
      }

5.1自定义顶部导航栏（仅保留胶囊位置）

<template lang="wxml" minapp="wepy">
  <view class="confirmOrder">
    <view class="topItem g-container" style="padding-top:{{headertop}}">
      <view class="topNav" style="height:{{navheight}};line-height:{{navheight}}">
        <image class="nacBackImg" src="https://h5.jinghu.aoqq.com/miniApp/assets/homeImg/backWihte.png"
          bindtap="handleBack" />
        <view class="navTitle">确认订单</view>
        <view class="navTitle"></view>
      </view>
    </view>
  </view>
</template>

<script>
  import wepy from 'wepy'

  export default class confirmOrder extends wepy.page {
    config = {
      navigationBarTitleText: '确认订单',
      navigationStyle: 'custom'    //此处一定要设置
    };
    data = {
      headertop: 0,
      navheight: 0
    };
    onLoad() {
      //
      this.gethight()
    }
    methods = {
      //
    };
    // 1. 获取胶囊高度
    gethight() {
      const res = wx.getMenuButtonBoundingClientRect()
      // 2. 动态设置顶部返回按钮和文字距离头部的高度
      this.headertop = res.top + 'px'
      // 3.动态设置头部固定栏的高度
      this.navheight = res.height + 6 + 'px'
    }
  }

</script>
<style lang="less" scoped>
  .confirmOrder {

    .topItem {
      width: 100%;
      //height: 446rpx; //400+46
      box-sizing: border-box;
      background: linear-gradient(to right, #5C9BFF 0%,#438BFE 50%, #438BFE 100%);

      .topNav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 42rpx;
        line-height: 42rpx;
        background: #96f7d2;

        .nacBackImg {
          padding: 10rpx 50rpx 10rpx 10rpx;
          width: 23rpx;
          height: 42rpx;
          vertical-align: center;
        }

        .navTitle {
          font-size: 34rpx;
          color: #fff;
        }
      }
    }
  }

</style>

5.2自定义终极版导航

<template lang="wxml" minapp="wepy">
   <view class="myBankCard">
    <view class="nav" style="padding-top:{{headertop}};height:{{navheight}}">
      <!-- 头部navigationBar -->
      <view  class="headerTab" style="height:{{headerTab}}">
        <view class="navTittle" style="line-height:{{headerTab}}">
          <view class="navTittleText">我的银行卡</view>
        </view>
        <view class="backOne" style="height:{{headerTab}}" @tap="backOne">
          <image class="backOneImg" src="https://h5.jinghu.aoqq.com/miniApp/assets/homeImg/back@2x.png" />
        </view>
      </view>
      </view>
  </view>
</template>

<script>
import wepy from 'wepy'

export default class myBankCard extends wepy.page {
  config = {
    navigationStyle: 'custom'
  };
  data = {
    isCard: true,
    safeHeight: '',
    headertop: '',
    navheight: '',
    headerTab: '',
    imgsHeight: ''
  };
  onLoad() {
    // 获取首页中保存的苹果全面屏信息设置兼容性
    const res = wepy.getStorageSync('safeHeight') || null
    console.log('取到的手机信息', res)
    if (res !== null) {
      this.safeHeight = res
    } else {
      this.safeHeight = 0
    }
    this.gethight()
    console.log('进入页面', this.headertop)
  }
  // 1. 获取胶囊高度
  gethight() {
    const res = wx.getMenuButtonBoundingClientRect()
    console.log(res)
    // 2. 动态设置顶部返回按钮和文字距离头部的高度
    this.headertop = res.top + 'px'
    // 3.动态设置头部固定栏的高度
    this.navheight = res.height + 6 + 'px'
    // 4.动态设置头部固定栏内标题和返回一行的高度
    this.headerTab = res.height + 'px'
    // 4.动态设置头部标题离邀请好友注册有礼的距离
    this.imgsHeight = res.bottom + 6 + 'px'
  }

  methods = {
    // 1.点击返回上一层  如果要多层 改变delta的值 。如果delta大于返回页的个数，则返回home
    backOne() {
      wepy.navigateBack({
        delta: 1
      })
    }
  };
}
</script>
<style lang="less">
page {
  height: 100%;
  // background-color: #f5f7fa;
  width: 100%;
}
.myBankCard {
  position: relative;
  width: 100%;
  overflow: hidden;
  // background-color: #f5f7fa;
  // 头部navigationBar
  .nav {
    width: 100%;
    position: fixed;
    background-color: #fff;
    .headerTab {
      overflow: hidden;
      position: relative;
      .navTittle {
        padding: 0 80rpx 0 80rpx;
        text-align: center;
      }
      .backOne {
        position: absolute;
        top: 0;
        width: 40px;
        .backOneImg {
          width: 12px;
          margin-left: 15px;
          height: 20px;
          position: absolute;
          top: 5px;
        }
      }
      .headerTab_tittle {
        background-color: aqua;
        height: 100%;
        width: 30%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        .cityDown {
          width: 18rpx;
          height: 11rpx;
          margin-left: 17rpx;
          margin-top: -10rpx;
        }
      }
    }
  }
}
</style>

6.支付方式单选

image.png

     <!-- 支付方式 -->
     <view class="payTypeList" wx:elif="{{payTypeModal}}">
       <view class="totalPrice"> ￥5999.00</view>
       <view class="remainingTime">支付剩余时间 0:29:58</view>
       <view class="payList">
         <block wx:for="{{payTypeList}}" wx:key="index">
           <view class="payItem" bindtap="choosePay({{item}})">
             <image class="leftImg" src="{{item.img}}" />
             <view class="rightItem">
               <view>{{item.name}}</view>
               <image
                 src="{{item.isChoose?'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/xz@2x.png':'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/wz@2x.png'}}" />
             </view>
           </view>
         </block>
       </view>
     </view>

data={
  payType: '余额支付',  // 充值方式
  payTypeList: [{
        id: 1,
        img: 'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/yue.png',
        name: '余额支付',
        isChoose: true
      }, {
        id: 2,
        img: 'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/weixin@2x.png',
        name: '微信支付',
        isChoose: false
      }, {
        id: 3,
        img: 'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/zhifu@2x.png',
        name: '支付宝支付',
        isChoose: false
      }]
};

methods={
     // 选择支付方式
      choosePay(e) {
        this.payType = e.name
        this.payTypeList.forEach(item => {
          item.isChoose = false
        })
        let obj = this.payTypeList.find((item) => {
          return item.id === e.id
        })
        obj.isChoose = true
      },
}

7.小程序调用相册和拍照功能并调用接口获取图片路径

data={
  leftPhoto:''
},
methods={
       takeLeftPhoto() {
        var that = this
        wx.showActionSheet({
          itemList: ['从相册中选择', '拍照'],
          itemColor: '#a3a2a2',
          success: function(res) {
            if (!res.cancel) {
             that.chooseWxImage()
            }
          }
        })
      },
};
chooseWxImage(type) {
    var that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function(res) {
       let imageUrl = res.tempFilePaths[0]  //保存手机本地虚拟地址
          wx.uploadFile({
            url:  '***************imgUpload', // 后端上传图片接口地址
            filePath: imageUrl, // 选择后的虚拟地址
            name: 'file',
            header: {
              'Content-Type': 'multipart/form-data'
            },
            success: function (res) {
              const resImg = JSON.parse(res.data)   //用户选择图片后上传到服务器然后返回的图片链接地址
              if (resImg.code === 0) {
                // 给指定图片路径
                that.leftPhoto=resImg.data
                that.$apply()
              }
            }
          })
      }
    })
  }

8.商品评价小星星数量

星星评分

wxml

<view class="tittle">商品评分</view>
<view class="stars">
     <image class="star" wx:for="{{shopsStars}}" wx:key="index" src="{{item}}" 
            @tap="shopsStarTap({{index}})"/>
 </view>

data

 shopsStars: [  // 商品评分星星  默认是灰色的
      'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/star2.png',
      'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/star2.png',
      'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/star2.png',
      'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/star2.png',
      'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/star2.png'
    ],

methods

  // 商品五星评价
    shopsStarTap (index) {
      let index = index // 获取当前点击的是第几颗星星
      let len = this.shopsStars.length // 获取星星数组的长度
      for (var i = 0; i < len; i++) {
        if (i <= index) {
          // 小于等于index的是满心
          this.shopsStars[i] = 'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/star1.png'
        } else {
          // 其他是空心
          this.shopsStars[i] ='https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/star2.png'
        }
      }
    },

9.小程序获取设备系统信息

wx.getSystemInfo({
   success(res) {
     console.log('系统信息:',res)
     console.log('设备品牌:',res.brand)
   }
 }) 
/*返回值*/
  brand   设备品牌  
  model   设备型号
  pixelRatio     设备像素比
  screenWidth    屏幕宽度，单位px  
  screenHeight   屏幕高度，单位px  
  windowWidth    可使用窗口宽度，单位px
  windowHeight   可使用窗口高度，单位px
  statusBarHeight    状态栏的高度，单位px  
  language   微信设置的语言
  version    微信版本号
  system     操作系统及版本
  platform   客户端平台
  fontSizeSetting    用户字体大小（单位px）。以微信客户端「我-设置-通用-字体大小」中的设置为准   
  SDKVersion         客户端基础库版本  
  benchmarkLevel     设备性能等级（仅Android小游戏）。取值为：-2 或 0（该设备无法运行小游戏），-1（性能未知），>=1（设备性能值，该值越高，设备性能越好，目前最高不到50）

微信小程序wepy框架开发记录及常用代码片段

一、小程序wepy初始化

1、全局安装wepy-cli脚手架

2、查看wepy版本号

3、安装项目

4、进入项目安装依赖

5、开启实时编译

注意：

二、开发过程中问题记录

1.小程序弹窗禁止底部内容滚动

2.微信小程序取 dataset 值

3.自定义actionSheet和动画

4.自定义切换Tab

5.1自定义顶部导航栏（仅保留胶囊位置）

5.2自定义终极版导航

6.支付方式单选

7.小程序调用相册和拍照功能并调用接口获取图片路径

8.商品评价小星星数量

9.小程序获取设备系统信息

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Web 前端开发

让前端飞

工作生活

微信小程序wepy框架开发记录及常用代码片段

一、小程序wepy初始化

1、全局安装wepy-cli脚手架

2、查看wepy版本号

3、安装项目

4、进入项目 安装依赖

5、开启实时编译

注意：

二、开发过程中问题记录

1.小程序弹窗禁止底部内容滚动

2.微信小程序取 dataset 值

3.自定义actionSheet和动画

4.自定义切换Tab

5.1自定义顶部导航栏（仅保留胶囊位置）

5.2自定义终极版导航

6.支付方式单选

7.小程序调用相册和拍照功能并调用接口获取图片路径

8.商品评价 小星星数量

9.小程序获取设备系统信息

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Web 前端开发

让前端飞

工作生活

4、进入项目安装依赖

8.商品评价小星星数量