小程序中的基本操作示例

這篇文章將為大家詳細講解有關小程序中的基本操作示例，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

1.一些需要去取data中的變量的操作。我們可以運用ES6對象解構賦值來做簡化。這樣的方法我們不光可以在小程序中使用同樣也可以用到vue里面。

// 例子(小程序)
let a = this.data.a;
let b = this.data.b;
// ES6對象解構賦值
let {a,b} = this ; // vue
let {a,b} = this.data; //小程序

2.小程序的 組件公共屬性 hidden如果不注意看文檔的朋友可能就會遺漏這個公共屬性。等于css 中的display:none; 可以運用于頻繁切換的節點。

<view  hidden="{{false}}"></view>
 <!--  false 為顯示   true為隱藏 -->

引用官方的話來說：”一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好?！?/p>

3.關于text博主剛開始寫小程序的時候在wxml中使用格式化文檔時踩過的坑

<!-- 這樣的寫法會出現換行的效果 -->
<text>
    SevenDream 
    SevenDream 
</text>
<!-- 如果不需要換行的效果-->
<text>SevenDream SevenDream</text>

4.關于image 有事需要渲染圖片時，連續的圖片會發現圖中間有條白縫。如果做商城方面在商品詳情中它是切片的話中間有白條很不雅觀。在image標簽加入display:bolck就好了。

<image src="xxx.png" style="display:block"></image>

5.關于跳轉

• 如果超出最大頁面棧處理方法(大于10頁) ,將跳轉封裝。

//utils.js
export function navigateTo(url) {
   let Type = getCurrentPages().length >= 10 ? 'redirectTo' : 'navigateTo'
    return new Promise((resolve, reject) => {
      wx[Type]({
        url,
        success: res => {
          resolve()
        },
        fail: err => {
          reject(err)
        },
      })
    })
}
// 其他頁面js
import {navigateTo} from '../../utils/utils';
navigateTo('pages/index/index')

• 返回上一頁時刷新（例如返回個人中心）

wx.switchTab({
    url: '/pages/my/my',
    success:function(){
        var page  =  getCurrentPages().pop(); //當前頁面
        page.onLoad(); // 調用 onload
    }})

• 在返回上一頁時設置上一頁的的值

    var pages = getCurrentPages(); // 獲取頁面棧
    var prevPage = pages[pages.length - 2];  //上一頁
    prevPage.setData(data);
    wx.navigateBack({
      delta: 1
    })

6.this.setData  如果想改變對象或數組中的一個

  //data
  data: {
    obj: {
      a: 1
    },
    array: ['1']
  },
  //改變對象
  setOBJ:function(){
    var name = 'a'
    var obj = 'obj.a'
    this.setData({
      [obj]:2
    })
  },
  //改變數組
  setArr: function () {
    var num = 0
    var arr = `array[${num}]`
    this.setData({
      [arr]: 2
    })
  }

• 如果我們有個表單需要綁定很多bindinput，運用上面的方案,在加上data-*。不需要寫很多方法了一個就夠了

  <input data-name="name"  bindinput="onInput" value="{{FromOBJ.name}}">
  <input data-name="phone"  bindinput="onInput" value="{{FromOBJ.phone}}">
  <input data-name="address"  bindinput="onInput" value="{{FromOBJ.address}}">

// 寫入
  data:{
    FromOBJ:{
      name:'',
      phone:'',
      address:''
    }
  },
  onInput: function (e) {
      let name =  e.currentTarget.dataset.name
      let value = e.detail.value
      let valueObj = `FromOBJ.${name}`;
      this.setData({
        [valueObj]:value
      })
  }

7.封裝 wx.request (網上有很多關于wx.requset的封裝方案，這里展示樓主的封裝方案)

//API.js
const HTTP_URL = 'https://xxxx.xxx.xxx/'

function Request(url, data={},method='get',ContentType='application/json;charset=utf-8') {
    return new Promise((resolve, reject) => {
        wx.request({
            url: HTTP_URL.http + url,
            method: method,
            header: {
                'Content-Type': ContentType,
                'xxxx': 'xxxx'  // 其他header頭
            },
            data: data,
            success: function (res) {
                resolve(res.data)
            },
            fail: function (err) {
                reject(err)
            }
        })
    })
}

export function getApi(data) {
    var url = '/getapi';
    return Request(url, data)
}
// 其他頁面js
import {getApi} from '../../utils/api';
getApi({a:1,b:2}).then(res=>console.log(res)).catch(err=>console.log(err))

8.其他注意的問題

• 如果運用到了iconfont，是一次性將文件全部放入的話0一定要把iconfont.js刪除。真機的時候會出現報錯。白屏無法加載的情況。

• 制作動畫效果時注意 建議用官方的Animation Api 或者css3的animation  慎用transition

• 最后說一個樓主遇到的坑（可能是我的處理方式不對）。在map 組件上的層級不要使用高度變化或者寬度變換的動畫過度效果，微信Animation Api和css3 transition  Animation 屬性都會卡楨，卡成ppt。盡量使用他們（微信api，css3）的"transform"來解決問題。

關于“小程序中的基本操作示例”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。