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.

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

dic[“key”] = “value”;

delete dic[“key”];

dic.clear();

delete dic;

Object.keys(obj);

operator), and it is not a number, you must add quotation marks, otherwise an error will be reported.

obj.name || obj['name']

variable is declared

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

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

Loop

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

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

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!