微信小程序

微信小程序做适配不用关心设备尺寸，规定屏幕宽度是750rpx。
一般UI作图都会选 375 * 667的屏幕尺寸，也就相当于 2rxp = 1px

1、简易双向绑定

官方文档地址链接

• 只能是单一字段的绑定，尚不能是data路径

<!-- 如果输入框的值被改变了， this.data.value 也会同时改变。同时， WXML 中所有绑定了 value 的位置也会被一同更新， 数据监听器 也会被正常触发。 -->
<input model:value="{{value}}" bindinput="inputCallback" />

注：只用model就可以实现双向绑定，但是控制台会打印warning，原因是没有绑定bindinput事件，在不影响最终结果的情况下可以无视报错。 如果看着难受可以bind一个空函数

inputCallback() {}

2、页面传值

（1）正向传值

数据量小，可以直接使用URL传值

    // 跳转
    // 用了ES6的模板字符串 ``
    wx.navigateTo({
      url: `../next-page/next-page?id=${124}`,
    })

  // 在这个方法可以直接获取上个页面传过来的值
  onLoad(option) {
    console.log(option)
     // 打印结果为：{id: "124"}
     // 直接用 option.id 就可以获取
  }
})

数据量大数据结构复杂的时候，使用URL传值，需要先编码

    let params = {
      name: '王一扬',
      gender: '男',
      age: 22,
      phone: '13266667777',
      address: '山东省青岛市市北区徐州路160号',
      remark: '母胎solo'
    }

    // 将对象转为json字符串
    let jsonStr = JSON.stringify(params)
    // 对数据进行URI编码，数据量大的话，不进行这一步操作，数据容易被截断，导致获取不到完整的数据
    let data = encodeURIComponent(jsonStr)
    wx.navigateTo({
      url: `/pages/mine/mine.wxml?param=${ data }`,
    })

  // 在下个页面 onLoad 方法中处理上个页面传过来的数据
  onLoad: function(options) {
    // URI解码并转化为 json 格式对象
    const param = JSON.parse(decodeURIComponent(options.param))
    console.log(param)
  },

（2）逆向传值

    // 获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面
    let pages = getCurrentPages()
    // -2 获取到的是上一个页面
    let lastPage = pages.length >= 2 ? pages[pages.length - 2] : undefined
    // 判断 lastPage 是不是我们想要的上一个页面
    if (lastPage != undefined && lastPage.route == 'pages/index/index') {
      // 拿到上一个页面对象，直接操作上个页面的data，可直接修改上个页面的数据，或者调用上个页面里的方法
      // 注：current_area 为 上个页面 data 里面定义的字段
      lastPage.setData({
        current_area: '传给上个页面的值'
      })
      wx.navigateBack()
    }

3、显示一行或两行文字

（1）显示一行文字，超出的部分用省略号

text-overflow: ellipsis; 表示显示省略号
white-space: nowrap; 禁止文本自动换行

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

（2）显示两行文字，超出的部分用省略号

-webkit-line-clamp: 2; 想显示几行就把 2 替换成几

  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

4、文字中划线和下划线

  text-decoration: line-through;
  text-decoration: underline;

5、小程序 button 去掉边框

/* button 没有添加属性 */
button::after {
  border-style: none;
}
/* button 添加了plain属性 */
button[plain] {
  border-style: none;
}
/* button 添加了type属性 */
button[type=primary] {
  border-style: none;
}
/* button 同时添加了 type 和 plain 属性 */
button[type=primary][plain] {
  border-style: none;
}

6、小程序 switch 设置大小

• 小程序官方文档中并没有明确给出如何修改 switch 的大小的属性和方法，可以利用 CSS 中的 zoom 属性

  zoom: .6;

7、小程序swiper轮播dot指示点样式修改

/* 其它点样式 */
.wx-swiper-dot {
  width: 6rpx;
  height: 6rpx;
  border-radius: 3rpx;
  background-color: rgba(61, 55, 223, 0.21);
}
/* 当前点样式 */
.wx-swiper-dot-active {
  width: 20rpx;
  height: 6rpx;
  border-radius: 3rpx;
  background: #5E54FE;
}

8、小程序实现四周阴影

/*
方法一:
 0表示水平方向阴影位置（可以为负值）； 
1表示垂直方向阴影位置（可以为负值）； 
11表示阴影模糊程度（0为不模糊）
20表示向四周延展的值
red是色值
*/
box-shadow: 0rpx 1rpx 11rpx 20rpx red;

// 方法二：
// 将颜色放到前面，将h-shadow, v-shadow设为0, 可以实现四周阴影
box-shadow:red 0rpx 0rpx 30rpx;