項目六遇到的知識點

一、小程序中從一個頁面獲取另外一個頁面的方法或值

• 在項目中想要實現，點擊a頁面跳轉到b頁面，而且選中b頁面的值，當回到a頁面時，b頁面選中的值已經在a頁面中出現
• 說的有點囉嗦，具體實現以下

a頁面

<view class="pay-loayout">
    <view class="pay-box shadow white-bg" bindtap="goData">
      <text class="f32">您選擇的是</text>
       <view  class="fr f32 icon-gray">
        {{data}}
          <icon class="iconfont icon-xiangyou f36"></icon>
        </view>
    </view>
  </view>

js

data:{
    data: ''
},
/**
   * 生命週期函數--監聽頁面顯示
*/
onShow: function () {
    this.setData({
      data: wx.getStorageSync('wish')
    })
},
goData:function(){
//跳轉到b頁面
    wx.navigateTo({
      url: '../b/b'
    })
}

b頁面

<radio-group class="radio-group" bindchange="radioChange">
  <label class="radio" wx:for="{{items}}" wx:key="index">
    <radio value="{{item.value}}" checked="{{item.checked}}" />
    {{item.value}}
  </label>
</radio-group>

js

data: {
    items: [
      {  value: '變美' },
      {  value: '變高' },
      {  value: '變白' },
      {  value: '變瘦' },
      {  value: '變有錢' },
      {  value: '你想多啦' },
    ]

  },
  radioChange(e) {
    var value = e.detail.value;
    console.log('radio發生change事件，攜帶value值爲：', e.detail.value)
    wx.setStorageSync('wish', value); 
  }

• 主要經過wx.setStorageSync同步緩存，wx.getStorageSync 同步獲取實現。

方法

• wx.getStorage(Object object) 從本地緩存中異步獲取指定 key 的內容
• wx.getStorageSync(string key) wx.getStorage 的同步版本
• wx.getStorageInfo(Object object) 異步獲取當前storage的相關信息
• wx.getStorageInfoSync() wx.getStorageInfo 的同步版本
• wx.setStorage(Object object)
• 將數據存儲在本地緩存中指定的 key 中。會覆蓋掉原來該 key 對應的內容。數據存儲生命週期跟小程序自己一致，即除用戶主動刪除或超過必定時間被自動清理，不然數據都一直可用。數據存儲上限爲 10MB。
• wx.setStorageSync(string key, Object|string data) wx.setStorage 的同步版本
• wx.removeStorage(Object object) 從本地緩存中移除指定 key
• wx.removeStorageSync(string key) wx.removeStorage 的同步版本
• wx.clearStorage(Object object) 清理本地數據緩存

• wx.clearStorageSync() wx.clearStorage 的同步版本

• onShow

（二）、獲取input焦點改變input的border邊框顏色

• 效果圖
• 初始狀態

• 獲取焦點

• 獲取input焦點時變化border邊框顏色，失去焦點時去掉顏色。

wxml

<view>
  <image src="{{img}} {{imgUrl}}"></image>
  <input placeholder='請輸入手機號' 
         maxlength="11" 
         type="number" 
         bindfocus="getFocus" 
         bindblur="getBlur" 
         value="{{tel}}"
         style="{{border}}"
        > </input>
</view>

js

Page({
    data: {
        tel: '',
        border: '',
        img: '',
        imgUrl: ''
    },
    onLoad"function(){
        this.setData({
            img: '../../assets/images/phone.png'//圖片靜態地址
        })
    },
    //獲取焦點
    getFocus:function(){
        var bgImg = '../../assets/images/data-phone.png';//帶顏色的圖片地址
        this.setData({
            imgUrl: bgImg,
            img: '',
            border: 'border:4px solid #0DE1A8'
        })
    },
    //失去焦點
    getBlur:function(){
        this.setData({
            imgUrl: '',
            img: '../../assets/images/phone.png',
            border: ''
        })
    }
})

• 完成，寫法我以爲有點麻煩，哪位大神有好的方法請多指教，嘿嘿估計也沒人看