微信小程序开发经验总结

参数传值的方法

data-id

可以给HTML元素添加data-*属性来传递我们需要的值

(1)设置data-id

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

(2)取值 + 传值

1
2
3
4
5
6
7
playTap: function(e) {
const dataset = e.currentTarget.dataset
wx.navigateTo({
url: '../play/index?id=' + dataset.id
})
console.log(dataset.id);
}

(3)取值

1
2
3
4
5
6
onLoad: function (param) {
//页面初始化
this.setData({
currentId: param.id
})
}

使用data-注意事项:data-*名称不能有大写字母,data-*属性中不可以存放对象

设置id 的方法标识来传值

使用方法说明:

(1)设置id

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

(2)取值

通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值

在navigator中添加参数传值

(1)传值:在navigator的属性url后拼接?id(参数名)=要传递的值(如果多个参数用&分开 ?name1=value1&name2=value2)

1
<navigator url="../my/my?id={{item.id}}" wx:for="{{modles}}">

(2)取值

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

数据请求封装

(1)将所有的接口放在统一的js文件中并导出

1
2
3
4
5
6
7
const api = {
api1: 'https://url1',
api2: 'https://url2',
api3: 'https://url3',
.....
}
module.exports = api

(2)在app.js中创建封装请求数据的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
fetch(url, data, callback) {
wx.request({
url,
data: data,
header: {
'Content-Type': 'application/json'
},
success(res) {
callback(res.data, null)
},
fail(e) {
callback(null, e)
}
})
}

(3)在子页面中调用封装的方法请求数据

1
2
3
4
5
6
7
8
9
10
11
12
import API from "../../api/api.js"
const app = getApp()
const conf = {
data: {
title:'正在拼命加载中...',
loadding:true
},
onLoad () {
app.fetch(API.api1, {}, (data, err) => {
})
}
}

使用模板

(1)定义模板:name设置模板的名字

1
2
3
4
<template name="cell">
<view class="item">
</view>
</template>

(2)使用模板

首先引入模板

1
<import src="../../common/cell.wxml" />

然后使用模板is调用指定name的模板,通过data传递需要的数据

1
<template is="cell" data="{{item}}"></template>

Array比较好用的属性和方法

  • Array.isArray() 方法用来判断某个值是否为Array。如果是,则返回 true,否则返回 false。
  • concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回.
  • forEach() 方法对数组的每个元素执行一次提供的函数(回调函数)。
  • join() 方法将数组中的所有元素连接成一个字符串。
  • keys() 方法返回一个数组索引的迭代器。
  • map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
  • pop() 方法删除一个数组中的最后的一个元素,并且返回这个元素。
  • push() 方法添加一个或多个元素到数组的末尾,并返回数组新的长度(length 属性值)。
  • toString() 返回一个字符串,表示指定的数组及其元素。

对象Object常用方法

初始化

1
2
3
var obj = []
var obj = new obj()
var obj = Object.create(null)

字典添加元素

1
dic['key'] = 'value'

字典删除key

1
delete dic[“key”]

字典清空词所有条目

1
dic.clear()

删除对象

1
delete obj

查看对象所有属性

1
Object.keys(obj)

对象的所有键名都是字符串,所以加不加引号都可以,如果键名是数值,会被自动转为字符串。但是,如果键名不符合标识名的条件(比如第一个字符为数字,或者含有空格或运算符),也不是数字,则必须加上引号,否则会报错

读取属性

1
obj.name || obj['name']

注意: 数值键名不能使用点运算符(因为会被当成小数点),只能使用方括号运算符。

检查变量是否声明

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

in运算符

用于检查对象是否包含某个属性,如果包含返回true,否则返回false

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

for … in 循环

用来遍历一个对象的全部属性

1
2
3
for (var i in obj) {
console.log(obj)
}

with语句

作用: 操作同一个对象的多个属性时,提供一些书写的方便

1
2
3
4
with(obj) {
name1 = 1
name2 = 2
}

等同于

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

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :