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


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 相关文章推荐
直接生成打开窗口代码,不必下载
May 14 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
详解如何探测小程序返回到webview页面
May 14 Javascript
编写一个javascript元循环求值器的方法
Apr 14 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
php简单实现无限分类树形列表的方法
2015/03/27 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
在视频前插入广告
2006/11/20 Javascript
jQuery html()等方法介绍
2009/11/18 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
python实现数字炸弹游戏
2020/07/17 Python
python 常见的反爬虫策略
2020/09/27 Python
python 批量将中文名转换为拼音
2021/02/07 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
中英文求职信范文
2014/01/27 职场文书
业务总经理岗位职责
2014/02/03 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL