Home  >  Article  >  WeChat Applet  >  Original experience in WeChat mini program development

Original experience in WeChat mini program development

高洛峰
高洛峰Original
2017-02-16 10:24:341341browse

1: Parameter value transfer method


1: data-id
We can add data-* attributes to HTML elements to pass the value we need, usage instructions :
(1)Set data-id

(2): Get value + pass value

playTap:function(e) {

const dataset = e.currentTarget.dataset;

wx.navigateTo({

urll: '../play/index?id='+ dataset.id

##})

Console.log (dataset.id);

# # }

(3): Value

onLoad:function (param) {

//Page initialization

This.setData({

Currentid: Param.id

})

}

Data-Note: Data-Name cannot have capital letters, I used to have a capitalized Letter, I found this error after searching for a long time. 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

(2) Value

Get through e.currentTarget.id Set the value of the id, and then pass the value by setting the global object


3: Add parameters in the navigator to pass the value
Usage instructions
(1) Pass the value: in the properties of the navigator After splicing the url?id (parameter name) = the value to be passed (if multiple parameters are separated by & &name=value&.....)

(2)Value:

onLoad (params){

app.Fetch (API.Detail + Params.id, (Er, Data) = & GT; {

##})

}

## 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 the 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 in the sub-page to request data

import API from "../../api/api.js";

const app = getApp ();

const conf = {

data:{

title:'Loading...',

loading:true

},

onLoad (){

app.fetch(API.hot,{},(err,data) => {

} )

},

Three: Use templates (I found that templates are such a good thing!)

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

Define template