微信小程式資料封裝及參數傳值等經驗總結

這篇文章主要介紹了微信小程式資料封裝及參數傳值等經驗總結的相關資料,需要的朋友可以參考下

微信小程式開發總結：

一: 參數傳值的方法

1: data-id

我們可以為HTML元素新增data-* 屬性來傳遞我們需要的值,使用方法說明:

(1)設定data-id

<view class="block" bindtap="playTap" data-id="{{modle.id}}">

(2): 取值+ 傳值

 playTap:function(e) {

    const dataset = e.currentTarget.dataset;

    wx.navigateTo({

     url: '../play/index?id='+ dataset.id

    })

    console.log(dataset.id);

  }

(3):取值

 onLoad:function (param) {

  //页面初始化

    this.setData({

      currentId:param.id

    })

}

data-注意事項:data-名稱不能有大寫字母,曾經我就因為大寫了一個字母,找了半天的才發現這個錯誤..data-*屬性中不可以存放物件

2: 設定id 的方法標識來傳值

使用方法說明:

(1)設定id

##

<view bindtap=“playTap" id="{{modle.id}}">

(2)取值

透過e.currentTarget.id取得設定的id的值,然後透過設定全域物件的方式來傳遞數值

3: 在navigator中加入參數傳值

使用方法說明

(1)傳值:在navigator的屬性url後拼接?id(參數名字)=要傳遞的值(如果多個參數用&分開&name=value&.......)

#

<navigator url="../my/my?id={{item.id}}" wx:for="{{modles}}">

(2)取值:

onLoad (params){

    app.fetch(API.detail + params.id,(err,data) => {

    })

  }

二:資料請求封裝

#1.將所有的

介面放在統一的js檔案中並匯出

const api = {

  interface1: 'https://........',

   interface2: 'https://.......',

   interface3: 'https://....',

   .....

}

module.exports = api;

2:在app.js中建立封裝請求資料的方法

 fetch(url,data, callback) {

    wx.request({

      url,

      data: data,

      header: {

        'Content-Type': 'application/json'

      },

      success(res) {

        callback(null, res.data);

      },

      fail(e) {

        callback(e);

      }

    })

  },

3: 在子頁面中調用封裝的方法請求資料

import API from "../../api/api.js";

const app = getApp();

const conf = {

  data:{

    title:'正在拼命加载中...',

    loadding:true

  },

  onLoad (){

    app.fetch(API.hot,{},(err,data) => {

    })

  },

三:使用範本(發現範本真是個好東西哦!)

1:定義範本:name設定模板的名字

定義模板

 <template name="homecell">
  
     <view class="item">
  
    </view>
  
   </template>

(2)使用模板首先引入模板

##

<import src="../../commonXml/homecell.wxml" />

然後使用模板is後寫模板的name..透過data來傳遞需要是資料

<template is="homecell" data="{{item}}"></template>

四:

Array

比較好用的屬性與方法

Array.isArray() 方法用來判斷某個值是否為Array。如果是，則傳回 true，否則傳回 false。
concat() 方法將傳入的
• 陣列

  或非陣列值與原數組合並,組成一個新的陣列並傳回.

• #forEach

  () 方法對陣列的每個元素執行一次提供的函數(回呼函數)。

join() 方法將陣列中的所有元素連接成一個
• 字串

  。

• key

  s() 方法傳回一個陣列索引的迭代器。

• map

  () 方法傳回一個由原始陣列中的每個元素呼叫一個指定方法後的傳回值所組成的新陣列

pop() 方法刪除一個陣列中的最後的一個元素，並且傳回這個元素。
push() 方法將一個或多個元素新增到陣列的結尾，並傳回陣列新的長度（length 屬性值）。
to
• String

  () 傳回字串，表示指定的陣列及其元素。

五:物件

Object

常用方法
#1 初始化方法

var obj = [];
var obj = new obj();
var obj = Object.create(null);

2 新增元素的方法

dic[“key”] = “value”;

3 刪除key的方法

delete dic[“key”];

4 清空字所有項目

dic.clear();

5 刪除

#

delete dic;

6 檢視所有屬性的方法

Object.keys(obj);

物件的所有鍵名都是字串，所以加不加引號都可以,如果鍵名是數值,會被自動轉為字串但是，如果鍵名不符合識別名的條件（例如第一個字元為數字，或含有空格或

運算子

），也不是數字，則必須加上引號，否則會報錯6 讀取屬性

##

obj.name || obj['name']

注意: 數值鍵名不能使用點運算子（因為會被當成小數點），只能使用方括號運算子。 7 檢查
變數

是否宣告

#

if(obj.name) || if(obj['name'])

8 in 运算符用于检查对象是否包含某个属性,如果包含返回true,否则返回false

if ( ‘x' in obj) {return 1}

9 for … in 循环用来遍历一个对象的全部属性

for (var i in obj) {
console.log(obj);
}

10 with 语句作用: 操作同一个对象的多个属性时,提供一些书写的方便

with(obj) {
name1 = 1;
name2 = 2;
}
等同于
obj.name1 = 1;
obj.name2 =

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

以上是微信小程式資料封裝及參數傳值等經驗總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！