微信小程序的使用心得

前引

　　刚入职一家新公司，公司有一个新项目，是一个关于微信小程序的项目，这个担子一下子就落到了我头上，只能迎难而上，各种翻看文档，在这里记录下自己的采坑之旅。

　　首先，对于没有接触过的同学可以将微信小程序的官方文档先过下，这个是必须的。

　　推荐几个不错的插件和框架。由于个人之前学过vue，所以接触过vue的同学，推荐一个，不，两个框架，wepy和mpvue，mpvue更接近于原生vue的写法，wepy更倾向原生小程序，但是使用的是类vue的思想。所以个人最终更倾向使用wepy框架。

　　顺便推荐一个很棒的小程序的UI库ivew-weapp，可以帮助你快速上手，快速开发。

　　奉上地址：

　　　　微信小程序官方文档https://developers.weixin.qq.com/miniprogram/dev/

　　　　wepy框架官网https://tencent.github.io/wepy/

　　　　UI库ivew-weapp官网：https://weapp.iviewui.com/

正题

 

1.如何将内容铺满整个页面

修改该页面的wxss文件

/* pages/weather/weather.wxss */

.weather{

position: fixed;

height: 100%;

width: 100%;

display:flex;

flex-direction:column; /*纵向显示*/

align-items:center;/*垂直居中*/

justify-content: center;/*水平居中*/

background: #f2f2f8;

}

2.在page页面如何获取和操作globalData全局变量

　　this.$parent.globalData.xxx

3.小程序中最常见的布局方式

　　盒子

　　<view class="box">

　　　　<view class="left"></view>

　　　　<view class="right"></view>

　　</view>

　　如何将两个view标签平铺在一个view中，除了使用float，但是不推荐，会造成父标签的塌陷

　　<style>

　　　　.box {

　　　　　　display:flex;

　　　　}

　　　　.left {

　　　　　　flex:1;

　　　　}

　　　　.right {
　　　　　　width:100rpx;

　　　　}

　　</style>

备注：小程序中长度用rpx代替px。上述样式为 right占据自身的100rpx的位置，其余全部为left的

4.  使用盒子时，如何子盒子中需要折行，比如：有三个子盒子在一行，需要将两个子盒子一行，就需要box设置一个样式：    flex-wrap: wrap

5.保证盒子中元素上下居中：    align-items: center        左右居中：   justify-content: center

6.微信小程序的模态框的弹出样式，选择门店

 

<template>
  <view class="container">
    <view class="userinfo">
      <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵</button>
      <block wx:else>
        <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </block>
      <button type="default" open-type="contact" session-from="wapp"> 打开客服 (普通客服) </button>
      <button type="default" session-from="{\'nickName\':\'赵丽颖\',\'avatarUrl\':\'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=956547549,964120469&fm=58\'}" open-type="contact"> 带头像客服 （固定头像）</button>
      <button type=\'default\' session-from="{\'nickName\':\'{{userInfo.nickName}}\',\'avatarUrl\':\'{{userInfo.avatarUrl}}\'}" open-type="contact">带头像客服（微信头像）</button>
      <button type=\'default\' session-from="{\'source\':\'产品BBBB\',\'nickName\':\'{{userInfo.nickName}}\',\'avatarUrl\':\'{{userInfo.avatarUrl}}\'}" open-type="contact">指定消息来源</button>
      <button type=\'default\' session-from="{\'kefu\':[\'126\',\'127\'],\'nickName\':\'{{userInfo.nickName}}\',\'avatarUrl\':\'{{userInfo.avatarUrl}}\'}" open-type="contact"> 指定客服</button>
      <button open-type=\'contact\' send-message-title="会话内消息卡片" send-message-path="/pages/index/index" send-message-img="https://imgsa.baidu.com/baike/pic/item/562c11dfa9ec8a13918d4ed4fb03918fa0ecc06b.jpg" show-message-card="true">卡片消息</button>
    </view>
  </view>
  <view>
    <view wx:if="{{visible}}">
      <view class="modal-mask"></view>
      <view class="modal">
        <view class="modal-main">
          <view class="modal-content">
            <view class="modal-title">请选择门店</view>
            <view class="modal-body"></view>
            <view class="modal-actions">
              <view class="action-vertical">
                <view class="choice shop1">门店1<button class="btn" type=\'default\' session-from="{\'kefu\':[\'100\',],\'nickName\':\'{{userInfo.nickName}}\',\'avatarUrl\':\'{{userInfo.avatarUrl}}\'}" open-type="contact" bindcontact="handleContact1"></button></view>
              </view>
              <view class="action-vertical">
                <view class="choice shop2">门店2<button class="btn" type=\'default\' session-from="{\'kefu\':[\'126\',\'127\'],\'nickName\':\'{{userInfo.nickName}}\',\'avatarUrl\':\'{{userInfo.avatarUrl}}\'}" open-type="contact" bindcontact="handleContact2"></button></view>
              </view>
              <view class="action-vertical">
                <view class="choice">取消<button class="btn" lang="zh_CN" @tap="cancelModal"></button></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view wx:else>
      <button class="contact-btn" lang="zh_CN" @tap="choiceShop">联系客服</button>
    </view>
  </view>
</template>
<script>
  import wepy from \'wepy\';
  import api from \'@/api/api\';
  export default class Order extends wepy.page {
    config = {
      navigationBarTitleText: "测试",
    }
    components = {}
    data = {
      motto: \'Hello World\',
      userInfo: {},
      hasUserInfo: false,
      canIUse: wx.canIUse(\'button.open-type.getUserInfo\'),
      visible: false,
    }
    onLoad() {
      let that = this;
      console.log("usrinfo值", that.$parent.globalData);
      if (that.$parent.globalData.userInfo) {
        console.log("sddls")
        that.userInfo = that.$parent.globalData.userInfo;
        that.hasUserInfo = true;
      } else {
        wx.getUserInfo({
          success: function(res) {
            that.$parent.globalData.userInfo = res.userInfo;
            that.userInfo = res.userInfo;
            console.log("xxxx");
          }
        })
      }
    }
    computed = {}
    methods = {
      choiceShop() {
        this.visible = true;
      },
      cancelModal() {
        this.visible = false;
      },
      handleContact(e) {
        console.log("客服e", e);
        console.log("客服path", e.path);
        console.log("客服query", e.query);
      },
      handleContact1(e) {
        console.log("客服1e", e);
        console.log("客服1path", e.path);
        console.log("客服1query", e.query);
      },
      handleContact2(e) {
        console.log("客服2e", e);
        console.log("客服2path", e.path);
        console.log("客服2query", e.query);
      }
    }
    events = {}
    watch = {}
  }
</script>
<style lang="less">
  // .container {
  //   height: 100%;
  //   display: flex;
  //   flex-direction: column;
  //   align-items: center;
  //   justify-content: space-between;
  //   box-sizing: border-box;
  // }
  // .userinfo {
  //   display: flex;
  //   flex-direction: column;
  //   align-items: center;
  // }
  // .userinfo-avatar {
  //   width: 128rpx;
  //   height: 128rpx;
  //   margin: 20rpx;
  //   border-radius: 50%;
  // }
  // .userinfo-nickname {
  //   color: #aaa;
  // }
  // .usermotto {
  //   margin-top: 200px;
  // }
  // button {
  //   margin: 15px 0;
  //   font-size: 14px;
  // }
  .modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .7);
    z-index: 1000;
    transition: all .2s ease-in-out;
  }
  .modal {
    position: fixed;
    overflow: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    z-index: 1000;
    display: flex;
    outline: 0;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    transform: translateZ(1px);
    .modal-main {
      width: 270px;
      position: relative;
      .modal-content {
        border-radius: 7px;
        padding-top: 15px;
        position: relative;
        background-color: #fff;
        border: 0;
        background-clip: padding-box;
        text-align: center;
        height: 100%;
        overflow: hidden;
        .modal-title {
          padding: 6px 15px 15px;
          margin: 0;
          font-size: 18px;
          line-height: 1;
          color: #1c2438;
          text-align: center;
        }
        .modal-body {
          max-height: 100px;
          margin-bottom: 15px;
          font-size: 14px;
          color: #80848f;
          height: 100%;
          line-height: 1.5;
          overflow: auto;
        }
        .modal-actions {
          margin: 0 1px;
          .action-vertical {
            .choice {
              position: relative;
              height: 100rpx;
              border-top: 1rpx solid #dbdbdb;
              justify-content: center;
              align-items: center;
              line-height: 100rpx;
              .btn {
                height: 100rpx;
                background: #fff;
                position: absolute;
                top: 0;
                width: 100%;
                margin: 0;
                box-shadow: none;
                opacity: 0;
              }
            }
            .shop1 {
              color: #2d8cf0;
            }
            .shop2 {
              color: #ff9900;
            }
          }
        }
      }
    }
  }
</style>

View Code

 

7.使用图片代替客服按钮特效实现

## template

<button class="contact-btn" lang="zh_CN" open-type="contact" bindcontact="handleContact" session-from="weapp">
    <!--<button class="contact-btn" lang="zh_CN" @tap="choiceShop">-->
    <image class="icon_kf" src="../images/kefu.jpg"></image>
 </button>


##  css

.contact-btn {
    width: 120rpx;
    height: 120rpx;
    background: #209e85;
    color: white;
    position: fixed;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    margin-bottom: 138rpx;
    padding: 0;
    .icon_kf {
      width: 120rpx;
      height: 120rpx;
    }
  }

View Code