记一次一天上手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的开发使用的单位

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

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

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

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

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

四、还有一种状况,若是是在节点上使用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;
}
复制代码