Summary of experience in data encapsulation and parameter value transfer of WeChat mini programs

This article mainly introduces relevant information on the experience summary of data encapsulation and parameter value transfer of WeChat mini programs. Friends in need can refer to the following

Summary of WeChat mini program development:

1: Parameter value transfer method

1: data-id

We can add data-* to HTML elements Attribute to pass the value we need, usage instructions:

(1) Set data-id

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

(2): Get value + pass value

 playTap:function(e) {

    const dataset = e.currentTarget.dataset;

    wx.navigateTo({

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

    })

    console.log(dataset.id);

  }

(3): Get value

 onLoad:function (param) {

  //页面初始化

    this.setData({

      currentId:param.id

    })

}

data-Note Matters: The data- name cannot have capital letters. I once found this error after searching for a long time because it had a capital letter.. objects cannot be stored in the data-* attribute

2: Set the method identifier of the id to pass the value

Instructions for use:

(1) Set the id

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

(2) Value

Get the value of the set id through e.currentTarget.id, and then pass the value by setting the global object

3: Add parameter value passing in navigator

Usage instructions

(1) Value passing: splice ?id(parameter name) after navigator’s attribute url )=The value to be passed (if multiple parameters are separated by &&name=value&....)

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

(2) Value:

onLoad (params){

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

    })

  }

2: Data request encapsulation

1. Put all interfaces in a unified js file and export

const api = {

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

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

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

   .....

}

module.exports = api;

2: Create a method that encapsulates the request data in 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: Call it in a sub-page The encapsulated method requests data

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

const app = getApp();

const conf = {

  data:{

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

    loadding:true

  },

  onLoad (){

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

    })

  },

Three: Use templates (I found that templates are such a good thing!)

1: Define template: name Set the name of the template

Define the template

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

(2) To use the template, first introduce the template

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

Then use template is and then write the name of the template.. To pass the data through data, the data needs to be

##

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

Four:

Array is easier to useProperties and methods

• The Array.isArray() method is used to determine whether a value is an Array. If so, returns true, otherwise returns false.

• concat() method combines the incoming

  array or non-array value with the original array to form a new array and return.

  The

• forEach() method executes the provided function(callback function) once for each element of the array.

• join() method joins all elements in the array into a

  string.

• #keys() method returns an iterator of array indices.

• map() method returns a new array consisting of the return value of calling a specified method on each element in the original array

• The pop() method deletes the last element in an array and returns this element.

• push() method adds one or more elements to the end of the array and returns the new length of the array (length attribute value).

• to

  String() Returns a string representing the specified array and its elements.

Five: Object

ObjectCommon methods

1 Initialization method

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

2 Method to add elements

dic[“key”] = “value”;

3 Method to delete key

delete dic[“key”];

4 Clear all entries of the word

dic.clear();

5 Delete

delete dic;

6 Method to view all attributes

Object.keys(obj);

All key names of the object are strings, so they can be added or not in quotes. If the key name is a numerical value, it will be automatically converted to a string. However, if the key name does not meet the conditions of the identification name (such as the first If a character is a number, or contains a space or the

operator), or is not a number, quotation marks must be added, otherwise an error 6 will be reported. Read attribute

obj.name || obj['name']

Note: The dot operator cannot be used for numeric key names (because it will be treated as a decimal point), only the square bracket operator can be used. 7 Check whether

variable is declared

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 =

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

The above is the detailed content of Summary of experience in data encapsulation and parameter value transfer of WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!