微信小程序做适配不用关心设备尺寸，规定屏幕宽度是
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;
