微信小程序开发技巧

1、设置默认占位图

人物头像

background-image: url('https://ic_default_header.png');
background-repeat: no-repeat;
background-position: center;
background-color: #f6f6f6;
background-size: cover;

大图占位

background-image: url('https://image_default.png');
background-repeat: no-repeat;
background-position: center;
background-color: #f6f6f6;
background-size: cover;

2、Dialog弹窗不出来

vant的Dialog弹窗由于是从根节点查找第一个，开发过程中热更新会丢失，需要重新运行下项目。其次才是简单库有没有导入

3、vant添加圆角

• 中间弹窗<van-dialog id="van-dialog" />

Dialog.confirm({
  customStyle: 'border-radius: 16rpx;',
})

• 底部弹窗

<van-popup
  custom-style="border-radius: 16rpx;"
/>

4、字体粗细

尽量使用normal、bold属性，不使用具体数字。

小程序、uniapp、weex、RN这类框架在dom节点桥接原生组件上，部分安卓手机在字体粗细属性数字映射上，会将<=300映射成normal，>=500映射成bold（400目前看也是bold），从而造成适配问题，ui改起来很麻烦。

// ✅
font-weight: normal;
// ❎
   font-weight: 300;

5、空白视图CommonEmpty

推荐使用方法

1、如果页面不依赖自带的滚动（例如滚动使用scrollview或者没有滚动情况），设置overflow-y属性

/* 防止CommonEmpty滚动 */
overflow-y: hidden;

2、同时设置足够大的高度，例如100vh

<CommonEmpty
  style="margin-top: {{statusBarHeight}}px;height:100vh;"
/>

封装参考：

index.wxml

<view
  class="empty-container"
  style="{{style}}"
>
  <image
    class="empty-image"
    mode="aspectFill top"
    src="{{icon}}"
  />
  <text
    wx:if="{{title}}"
    class="empty-text"
    >{{title}}</text
  >
  <text
    wx:if="{{content}}"
    class="empty-text2"
    >{{content}}</text
  >
  <view
    wx:if="{{buttonText}}"
    class="button-post"
    bind:tap="onTapButton"
  >
    <text class="button-post-text">{{buttonText}}</text>
  </view>
</view>

index.js

const app = getApp();
const { OSS_DOMAIN } = app.globalData;

Component({
  properties: {
    style: {
      type: String,
      value: 'height:66vh;',
    },
    icon: {
      type: String,
      value: OSS_DOMAIN + '/miniprogram/channel/Post/ic_empty_default.png',
    },
    title: {
      type: String,
      value: '',
    },
    content: {
      type: String,
      value: '',
    },
    buttonText: {
      type: String,
      value: '',
    },
  },
  data: {
    OSS_DOMAIN,
  },
  methods: {
    onTapButton() {
      this.triggerEvent('onTapButton');
    },
  },
});

index.wxss

.empty-container {
  display: flex;
  position: relative;
  width: 100vw;
  flex-direction: column;
  background-color: white;
  align-items: center;
  padding-top: 60%;
}

.empty-image {
  width: 256rpx;
  height: 192rpx;
  margin-bottom: 22rpx;
}

.empty-text {
  font-size: 32rpx;
  font-family:
    PingFangSC,
    PingFang SC;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 44rpx;
}

.empty-text2 {
  font-size: 26rpx;
  font-family:
    PingFangSC,
    PingFang SC;
  font-weight: 400;
  color: #9e9e9e;
  line-height: 44rpx;
}

.button-post {
  width: 264rpx;
  height: 64rpx;
  background: #6d91f3;
  border-radius: 8rpx;
  border: 2rpx solid #6d91f3;
  margin-top: 38rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-post:active {
  opacity: 0.5;
}

.button-post-text {
  font-size: 28rpx;
  font-family:
    PingFangSC,
    PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 28rpx;
}

6、一行点点点

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

7、控件尺寸测量

this.createSelectorQuery()
  .select(`#fixedComponent`)
  .boundingClientRect((res) => {

  })
  .exec();

8、scroll-view组件撑满剩余控件

由于微信小程序的scroll-view必须制定高度，所以flex:1是没用的，因此我们可以设置高度为0即可。

这种写法兼容android、ios，并且适配度很好。

flex: 1;
height: 0;

9、wxml中书写Object

<IdentityItem
  info="{{ {title:'张三',content:'as扥'} }}"
  bind:tap="onTapItem"
/>

注意：在小程序中动态解析需要用{{，小程序不识别{{{。

以下会报错：Bad attr info with message

<IdentityItem
  info="{{{title:'张三',content:'as扥'}}}"
  bind:tap="onTapItem"
/>

10、scroll-view里面flex布局不生效

添加enable-flex="true"属性

<scroll-view
  class="scrollView"
  enable-flex="true"
  scroll-y="true"
>
</scroll-view>

11、页面间通讯

A页面注册数据

wx.navigateTo({
  url: `/CustomerService/pages/others/FriendPermission/index?fromChannel=1&userId=${this.userId}`,
  events: {
    FriendPermission: ({ friendPermission }) => {
      this.setData({ friendPermission });
    },
  },
});

B页面给A页面发数据

this.getOpenerEventChannel().emit('FriendPermission', { friendPermission: index });

12、调试

1、可在调试器 -> Sources -> 具体页面断点

2、也可在代码中输入debugger;微信小程序会走到这里会自动断点

13、添加阴影变色效果

在css样式上添加伪元素:active，注意冒号前不要有空格

.friend-item:active {
  background-color: #f8f8f8;
}