[移动开发]小程序实战工作的知识点总结

1 跨页面传汉字，汉字乱码

在接收汉字的页面，使用 decodeURIComponent(传过来的乱码) ，汉字就恢复正常了

this.myname = decodeURIComponent(option.myname)

2 当前页面滚动到指定位置

目的：点击搜索，直接滚动到商品列表处

1 首先模拟器是苹果6

2 量各个模块的高度，如下

?

?

即 要跳转的高度（PX） =? 160 + 42 + 152 =? 354

然后如果模块用了margin的，还要加上这个margin的高度，因为我margin用的rpx单位，所以这里我们口算，在苹果6机型下的 1rpx = 2px

?

margin = 60rpx = 在苹果6机型下是30px

?即 要跳转的高度（PX） =? 160 + 42 + 152 =? 354 + 30 = 384px

3 然后接下来，我们在代码里计算各个机型的rpx与px的换算比

原理：rpx（responsive pixel）是微信小程序解决自适应屏幕尺寸的尺寸单位，可以根据屏幕宽度进行自适应。微信小程序规定屏幕宽为750rpx。

所以 1rpx = 750rpx / 手机屏幕实际的高度（px)

let percentRatio =  750 / wx.getSystemInfoSync().windowWidth;

4 滚动到指定的高度

  onSearch(e) {
    let toJumpRPX = 384 * 2 // 我们手动量的高度 * 苹果6机型下的rpx与px换算比 = 要滚动的rpx数值
    let percentRatio =  750 / wx.getSystemInfoSync().windowWidth; // 各机型的rpx与px换算比
    let toJumpPX = toJumpRPX /percentRatio // 各机型中实际要跳转的高度，px为单位
    // 微信小程序的滚动api
    wx.pageScrollTo({
      scrollTop: toJumpPX
    })
  },

5 演示

3?小程序 input 组件内容显示不全（字显示的长度不占满 input 宽度）

在<input>标签外面加了一层<view>,通过改变父层<view>来改变<input>标签的宽度，input 自己给个width:100% ，即可

4 小程序给自定义组件传布尔值

不能直接写true、false, 它判断是有值就是true，所以你发现传false传不过去，原因就是你直接写false，要用两个花括号包起来

?

5 小程序不想写太多的 that = this

?

?然后就可以很爽的每个地方都用that了，不用一直写 that = this 了

?