記一次一天上手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;
}
複製代碼