微信小程序实战常用技巧

关于样式问题

1.如果给了ui图，千万要注意百分百还原

2.图标的大小高度一定要和字体高度相同

3.要注意字体的颜色间距大小，要培养出审美

4.如果没有ui图跟着自己的感觉画图，多看看其他小程序的样式，可以照搬照抄，但切记要百分百还原。

WXML

1.在模板里需要for循环的地方加一句 wx:key=“unqire”，不然会发出警告

2.图片兼容问题需要加一个mode=“widthFix”

3.进度条最简单的实现方法就是使用css属性定位来实现，z-index来控制它的层级，动态绑定会发生变化的width，超出部分隐藏

4.禁止用户滑动

 catchtouchmove="{{true}}"

WXSS

1.自定义按钮尽量使用padding去撑开它

2.让图片变成灰色

.gray { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  opacity:0.7;
}

3.布局少用百分比布局，最好使用vw进行布局

4.布局多使用flex弹性布局，一般常用的弹性布局属性就是

.box{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;}

5.当使用弹性盒子布局的时候，有图片的地方尽量加高，不然页面加载是会发生卡顿闪烁的情况

6.一般需要动画地方都会使用animate动画插件

<view>
<text class='animated bounce infinite'>微信小程序</text>
</view>

.animation{

animation-name:		//动画名

animation-duration:		//持续时长 

animation-timing-function:   //速度曲线 

animation-delay:  		//开始时延迟的时长

animation-iteration-count: // 播放次数

animation-direction:	// 轮流反向播放

}

7.增加字体之间的间距

 letter-spacing:20px

8.渐变色

	   <!-- 从上到下 -->
    .view11 {

       width: 240px;

       height: 60px;

       margin: 10px auto;

       background: linear-gradient(red, blue);

    }

<!-- 从左到右 -->
    .view12 {

       width: 240px;

       height: 60px;

       margin: 10px auto;

       background: linear-gradient(to right, red , blue);

    }

更多渐变色

9.超出部分显示省略号

单行文字

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文字

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

JS

1.实现自定义百分比

  number: function () {
    var that = this
    var draw = that.data.user.draw
    var newdraw = draw / 30 * 100

    var integer = Math.floor(newdraw)
    if (integer < 1) {
      integer = 0
    }

    this.setData({
      draw: integer
    })
  },

2.获取for循环到后台接口的数组

		      <!-- 这里是html的内容 -->
      <view class="award-array-text" bindtap="onExchange" id="{{idx}}" wx:for="{{prize}}" wx:for-index="idx" wx:key="unqire">
      </view>

在这里插入代码片

JSON

	使用组件
  "usingComponents": {
    "mine":"../../components/mine/index"
  }

Component

1.子传父

子组件

js

	子组件
  var myEventOption = {}
            that.triggerEvent('myevent', res.data, myEventOption)
            console.log(that.properties.id)

json

{
  "usingComponents": {
    
  },
  "component":true   开启子组件
}

父组件

wxml

子组件传过来的点击事件
  <mine bindmyevent="onUser"></mine>

  onUser: function (e) {
    console.log(e)
    this.setData({
      user: e.detail,
    })
  }

2.父传子

父组件

wxml

  <mine lid="{{id}}"></mine>

js

  properties: {
    // settimeoutClick: Boolean,
    lid: {
      type: Number,
      value: "",
    }
  },
在哪里使用直接res.data.lid就可以获取到