Some experiences in WeChat mini program development

PHPz
Release: 2017-04-02 16:37:05
Original
1404 people have browsed it

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}}">
Copy after login

(2): 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): Value

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

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}}">
Copy after login

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

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

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);
Copy after login

2 Method of adding elements

dic[“key”] = “value”;
Copy after login

3 Method to delete key

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 Method to view all attributes

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

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[&#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

Equivalent to

bj.name1 = 1;
obj.name2 = 2;
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template