A summary of WeChat mini program development experience worth reading-Mini Program Development-php.cn

A summary of WeChat mini program development experience worth reading

高洛峰

Release： 2017-03-10 15:44:50

Original

1723 people have browsed it

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

Copy after login

(2): Get value + Pass value

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

Copy after login

(3): Get value

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

Copy after login

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

Copy after login

(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}}">

Copy after login

(2) Value:

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

Copy after login

##2: Data request encapsulation

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

const api = {
  interface1: &#39;https://........&#39;,
   interface2: &#39;https://.......&#39;,
   interface3: &#39;https://....&#39;,
   .....
}
module.exports = api;

Copy after login

2: In app Create a method to encapsulate request data in .js

fetch(url,data, callback) {
   wx.request({
     url,
     data: data,
     header: {
       &#39;Content-Type&#39;: &#39;application/json&#39;
     },
     success(res) {
       callback(null, res.data);
     },
     fail(e) {
       callback(e);
     }
   })
 },

Copy after login

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:&#39;正在拼命加载中...&#39;,
    loadding:true
  },
  onLoad (){
    app.fetch(API.hot,{},(err,data) => {
    })
  },

Copy after login

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>

Copy after login

2: Use the template

First introduce the template

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

Copy after login

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

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

Copy after login

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

Copy after login

2 Method of adding elements

dic[“key”] = “value”;

Copy after login

3 Method of deleting keys

delete dic[“key”];

Copy after login

4 Clear all entries of the word

dic.clear();

Copy after login

5 Delete

delete dic;

Copy after login

6 View all attributes Method

Object.keys(obj);

Copy after login

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[&#39;name&#39;]

Copy after login

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[&#39;name&#39;])

Copy after login

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&#39; in obj) {return 1}

Copy after login

10 for … in loop

Used to traverse all properties of an object

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

Copy after login

11 with statement

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

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

Copy after login

is equivalent to

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

Copy after login

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!