记一次一天上手mpvue & 小程序开发过程中的坑

其实之前有稍微看了下小程序的项目，但是自学的时候，总是觉得这也可以，那也可以，正式开发的时候发现好像还是有坑的。里边说的坑，有些是因为不熟悉文档导致的，有些是确实是小程序自带的坑或者是开发遇到的问题

1.获取手机号

//原生的写法
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

//mpvue的写法(差别在绑定事件的不同)
<button  class="phone-btn" open-type="getPhoneNumber"  @getphonenumber="getPhoneNumber"  hover-class="other-button-hover"> 手机登录 </button>
复制代码

//手机号授权允许或拒绝的回调  
getPhoneNumber(e) {
    console.log(e)
}
复制代码

我们通过回调的errmsg判断是否授权，并且通过iv和encryptedData传给后端，最后才能拿到后端解密的手机号,并不能拿到手机号

这里要注意问题，如果在回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的sessionKey不是加密时使用的sessionKey，导致解密失败。获取手机号有时候成功，有时候失败，建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。

2.mpvue的开发使用的单位

1、mpvue的template工程自带有px2rpx-loader编译器，px2rpx-loader会自动将得到的css中的px数值转换为 rpx数组（px=2rpx），所以为了统一规范，在scss文件以及在vue的style节点中，编写的样式统一使用px作为单位，需要注意的是，750rpx为屏幕宽度，所以375px为屏幕宽度（如果设计稿就是750像素的，可以修改下配置文件，直接改成1:1的，多少像素就是多少rpx 这样就舒服多了）；

2、如果是针对横向的，大多数情况下请使用px单位，因为px会自动转为rpx，是根据屏幕变化的，在各种尺寸的设备上效果不会差太多，px的精度要比vw高一点，所以最好使用px，如果是针对纵向的，请使用vh单位， 100vh为屏幕高度，比如有的页面，顶部为tabbar，内容为scroll-view，而scroll-view必须指定一个高度，这时就可以设置顶部tabbar 高度为7vh，scroll-view为93vh，或者说是其他数值；

3、如果宽高是计算属性，请使用styles函数，styles函数会自动将px数值转换为rpx（px=2rpx）

<div :style="computedStyles"></div>

computed:{
  computedStyles(){
      return styles({
        width:'100px'
      })
  },
}
复制代码

4、还有一种情况,如果是在节点上使用style样式的，最好使用rpx单位，否者如果使用px单位，这种情况不会做任何处理 在不同分辨率设备上的显示的效果是不一样的

3.radio的颜色改变（默认的颜色是微信的原谅绿）

方案一：（百度的大部分结果都是这个，并没有生效哦，人类的本质都是黏贴怪）

/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked{
   border: none;
   background: red;
}
复制代码

方案二：文档上的color属性

// 只要加color属性
<radio-group class="radio-group" @change="radioChange($event, index,item.question_id,item.question_type)">
  <label class="radio" v-for="(item2,index2) in item.option" :key="index2">
    <radio :value="item2.option_id"  color="#FF743D"/>
    {{item2.option_name}}
  </label>
</radio-group>

复制代码

4.页面滚动到指定位置

由于小程序的需求有一个页面是问卷调查，当你填写完一道题，页面会滚动到下一道题的位置

方案一：在网上找了小程序处理这类需求的方案，一种是使用scropTo,另一种是使用scroll-view 先来说说wx.pageScrollTo，使用这个属性会有两个问题，如果页面中有元素的position为absolute或fixed时，这个元素会先消失，然后再出现，导致屏幕闪烁、抖动（这个是小程序自带的bug，官方还未解决），然后前端通过计算dom的高度然后动态的调整pageScrollTo中的scrollTop值的时候发现跳转的位置并不准确

方案二：使用scroll-view,通过scroll-into-view的值就可以跳到指定的位置

// 核心代码

//这里是html
<scroll-view scroll-y style="height: calc(100% - 50rpx);width:96%;margin-top:60rpx;padding-bottom:120rpx;position:fixed;left:30rpx;" scroll-top="0" :scroll-into-view=currView>
    ...
  <radio-group class="radio-group" @change="radioChange($event, index,item.question_id,item.question_type)">
    <label class="radio" v-for="(item2,index2) in item.option" :key="index2">
      <radio :value="item2.option_id"  color="#FF743D"/>
      {{item2.option_name}}
    </label>
  </radio-group>
</scroll-view>

// 这里是data
data() {
return {
  currView: '',
};
},


//这里是methods
methods:{
    radioChange: function({mp}, index,question_id,question_type) {
      let _this = this;
      ...
      //如果不是最后一个问题，触发跳到下一个问题的逻辑
      if(index<(_this.questionData.question.length-1)){
        _this.tap(index+1);
      }
    },
    tap(val) {
     //根据传过来的下标值，使页面跳到下一到题的位置
      this.currView = 'kindItem'+val
    },
}
复制代码

5.小程序中页面通过navigateTo跳转数据不会被销毁,导致信息显示异常

方案一：使用redirectTo代替navigateTo，该函数在跳转页面时会销毁原页面，从而实现了类似jquery里.empty()的作用，将页面元素中的数据进行清除，但是页面没办法回退了

wx.redirectTo({
url: ''
})
复制代码

方案二：在onUnload和onLoad钩子函数内清空数据

6.换行符渲染

//html
<p class='index-remind'>{{remind}}</p>

//js
var remind = 'hello\n' + data.info.see_time + '\nWorld'

//css
.index-remind {
  width: 550rpx;
  height: 30rpx;
  color: #222222;
  font-size: 30rpx;
  white-space: pre-wrap;
}
复制代码