Some experiences in WeChat mini program development

1: Parameter Method of passing value

1: data -id

We can add data-* attribute to HTML element to pass the value we need. Instructions for use:

(1)Set data-id

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

(2): Value + Pass value

playTap:function(e) {
    const dataset = e.currentTarget.dataset;
    wx.navigateTo({
     url: '../play/index?id='+ dataset.id
    })
    console.log(dataset.id);
  }

(3): Value

onLoad:function (param) {
  //页面初始化
    this.setData({
      currentId:param.id
    })
}

data-Notes:data- The name cannot have capital letters. Once I 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 id to pass the value

Instructions for use:

(1)Set id

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

(2)Get the value

Through e.currentTarget. id gets the value of the set id, and then passes the value by setting the global object

3: Add parameters and pass values ​​in the navigator

Instructions for use

(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 :Create a method to encapsulate 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 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 really a 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 the template is Write the name of the template.. The data needs to be passed through data

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

Four: Array’s more useful attributes and methods

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

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

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

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

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

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

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: Common methods of Object

1 Initialization method

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

2 Method of adding 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 It is a 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 attributes

obj.name || obj['name']

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

8 Check whether

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;
}

Equivalent to

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

The above is the detailed content of Some experiences in WeChat mini program development. For more information, please follow other related articles on the PHP Chinese website!