A summary of WeChat mini program development experience worth reading

This article mainly introduces a summary of WeChat applet development experience that is worth reading. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

1: Method of passing parameter values

1: data-id

We can add data-* attributes to HTML elements to pass the values ​​we need. Instructions for use:

(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: The data-name cannot have capital letters. Once, I found this error after searching for a long time because of a capital letter..data-* Objects cannot be stored in attributes

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

Usage instructions:

(1) Set id

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

(2) Get the value

Get the value of the set id through e.currentTarget.id, and then pass Set the global object method to pass values

3: Add parameters in the navigator to pass values

Usage instructions

(1) Passing value: After the navigator attribute url, splice ?id (parameter name) = the value to be passed (if multiple parameters are separated by & and 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: In app Create a method to encapsulate request data in .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 the encapsulated method to request data in a sub-page

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 a really good thing!)

1: Define the template: name set the name of the template

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

2: Use the template

First introduce the template

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

Then use template is and then write the name of the template.. Pass the required data through data

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

Four: Array’s more useful properties and methods

Array.isArray() method is used to determine a certain value Whether it is an Array. If so, returns true, otherwise returns false.

The concat() method combines the incoming array or non-array value with the original array to form a new array and returns it.

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

The join() method joins all elements in the array into a string.

The keys() method returns an iterator of array indices.

The map() method returns a new array consisting of the return value of each element in the original array after calling a specified method.

The pop() method deletes the last element in an array. element 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).

toString() returns a string representing the specified array and its elements.

5: Object Common Methods

1 Initialization Method

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

2 Method of adding elements

dic[“key”] = “value”;

3 Method of deleting keys

delete dic[“key”];

4 Clear all entries of the word

dic.clear();

5 Delete

delete dic;

6 View all attributes Method

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 character. String However, if the key name does not meet the conditions of the identification name (for example, the first character is a number, or contains a space or operator), and it is not a number, you must add quotation marks, otherwise an error will be reported

7 Read Get the attribute

obj.name || obj['name']

Note: The numeric key name cannot use the dot operator (because it will be regarded as a decimal point), only the square bracket operator can be used.

8 Check whether the variable is declared

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

9 The in operator is used to check whether the object contains a certain attribute. If it does, it returns true, otherwise Return false

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

10 for … in loop

Used to traverse all properties of an object

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

11 with statement

Function: Provide some writing convenience when operating multiple properties of the same object

with(obj) {
name1 = 1;
name2 = 2;
}

is equivalent to

obj.name1 = 1;
obj.name2 = 2;

The above is the entire content of this article. I hope it will be helpful to everyone's learning, and I also hope that everyone will support the PHP Chinese website.

The above is the detailed content of A summary of WeChat mini program development experience worth reading. For more information, please follow other related articles on the PHP Chinese website!