初探微信小程序

* 布局

问题一：wx.showModal的content内容换行显示

添加‘\r\n’就行，真机上有效果，模拟器上没效果。

问题二：小程序布局的单位rpx是怎么回事？

参考了网上一些资料，这篇说的比较清楚：https://www.jianshu.com/p/25f28d80ec81

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。 

• pt为逻辑分辨率，与屏幕尺寸有关， 可以理解为长度单位；
• px为物理分辨率，与屏幕尺寸无关，用于描述像素点的多少；
• 小程序框架规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375（pt），共有750个物理像素（px），那么750rpx = 375pt = 750px。所以iPhone6下：1px = 1rpx =0.5pt;建议设计稿建议以iPhone6的分辨率（750x1334px）为基准。这样的情况下1rpx=1px。
• 另：不是所有单位都适合rpx，有一些比如字体标题不需要自调整就不实用rpx。

问题三：小程序的主流布局方式是什么？

flex布局：可用，主要是水平垂直居中；其他属性对于低版本的系统可能会有兼容性问题，以后遇到再补充；

绝对定位、相对定位：可用

float：可用

总的来说，还是按照正常的移动端布局来做，暂时少用flex布局

网上的一篇小程序开发中遇到一些常用布局：https://www.jianshu.com/p/2713df0de683

 

* 事件

对于单个input，获取输入的值

//wxml

<input bindinput="bindKeyInput" placeholder="输入同步到view中" />

//js
bindKeyInput(e) {
    this.setData({
      inputValue: e.detail.value
    })
  },

当页面中有许多input框时，获得多个input值的方法

方法一：

wxml：

<view class='majorscore-input'>
        <input type='number' bindinput="bindKeyInput" data-model="majorscore1" class='inputsty scoreinputsty'></input>
        <input type='number' bindinput="bindKeyInput" data-model="majorscore2" class='inputsty scoreinputsty'></input>
        <input type='number' bindinput="bindKeyInput" data-model="majorscore3" class='inputsty scoreinputsty'></input>
      </view>

js:

bindKeyInput(e) {
    let item = e.currentTarget.dataset.model;
    this.setData({
      [item]: e.detail.value
    });
}

方法二：参考https://blog.csdn.net/qq_35909852/article/details/78336193

wxml：

<view class='box'>
  <form bindsubmit='searchBox'>
      <input type='text' class='userBox' name='username'></input>
      <input type='text' class='pwdBox' name='pwd'></input>
      <button class='login' form-type='submit'>登录</button>
  </form>
  <text>输入的内容:{{first}}</text>
  <text>输入的内容2:{{second}}</text>
</view>

js：

searchBox:function(e){
    const that = this;
    let first,second;
    that.setData({
      first    :    e.detail.value.username,
      second   :     e.detail.value.pwd
    })
  }
//这个函数一定要写在标签上才能用e.detail.value获取到