微信小程序开发经验总结(推荐)


Posted in Javascript onJanuary 11, 2017

一: 参数传值的方法

1: data-id

我们可以给HTML元素添加data-*属性来传递我们需要的值,使用方法说明:

(1)设置data-id

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

(2): 取值 + 传值

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

(3):取值

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

data-注意事项:data-名称不能有大写字母,曾经我就因为大写了一个字母,找了半天的才发现这个错误..data-*属性中不可以存放对象

2: 设置id 的方法标识来传值

使用方法说明:

(1)设置id

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

(2)取值

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

3: 在navigator中添加参数传值

使用方法说明

(1)传值:在navigator的属性url后拼接?id(参数名字)=要传递的值 (如果多个参数用&分开 &name=value&…….)

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

(2)取值:

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

二:数据请求封装

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

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

2:在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: 在子页面中调用封装的方法请求数据

import API from "../../api/api.js";
const app = getApp();
const conf = {
  data:{
    title:'正在拼命加载中...',
    loadding:true
  },
  onLoad (){
    app.fetch(API.hot,{},(err,data) => {
    })
  },

三:使用模板(发现模板真是个好东西哦!)

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

<template name="homecell">
   <view class="item">
  </view>
 </template>

2:使用模板

首先引入模板

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

然后使用模板is后写模板的name..通过data来传递需要是数据

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

四:Array比较好用的属性和方法

Array.isArray() 方法用来判断某个值是否为Array。如果是,则返回 true,否则返回 false。

concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回.

forEach() 方法对数组的每个元素执行一次提供的函数(回调函数)。

join() 方法将数组中的所有元素连接成一个字符串。

keys() 方法返回一个数组索引的迭代器。

map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组

pop() 方法删除一个数组中的最后的一个元素,并且返回这个元素。

push() 方法添加一个或多个元素到数组的末尾,并返回数组新的长度(length 属性值)。

toString() 返回一个字符串,表示指定的数组及其元素。

五:对象Object常用方法

1 初始化方法

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

2 添加元素的方法

dic[“key”] = “value”;

3 删除key的方法

delete dic[“key”];

4 清空词所有条目

dic.clear();

5 删除

delete dic;

6 查看所有属性的方法

Object.keys(obj);

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

7 读取属性

obj.name || obj['name']

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

8 检查变量是否声明

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

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

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

10 for … in 循环

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

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

11 with 语句

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

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

等同于

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 和 Java 的区别浅析
Jul 31 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
jquery手风琴特效插件
Feb 04 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
js实现漫天星星效果
Jan 19 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
bootstrap手风琴制作方法详解
Jan 11 #Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 #Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 #Javascript
js仿iphone秒表功能 计算平均数
Jan 11 #Javascript
jQuery实现限制文本框的输入长度
Jan 11 #Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 #Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 #Javascript
You might like
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
python可视化实现代码
2019/01/15 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
如何教少儿学习Python编程
2020/07/10 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
2014年教研活动总结范文
2014/04/26 职场文书
镇创先争优活动总结
2014/08/28 职场文书
新闻人物通讯稿
2014/10/09 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
团组织关系介绍信
2019/06/24 职场文书
python字符串的一些常见实用操作
2022/04/06 Python
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers