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


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 相关文章推荐
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 Javascript
JavaScript实现原型封装轮播图
Dec 27 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
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类的反射来实现依赖注入过程
2018/02/06 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
python下如何让web元素的生成更简单的分析
2008/07/17 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
python图片验证码生成代码
2016/07/02 Python
用python解压分析jar包实例
2020/01/16 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
力学专业毕业生自荐信
2013/11/17 职场文书
运动会邀请函范文
2014/02/06 职场文书
《草原》教学反思
2014/02/15 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
教师工作总结范文2014
2014/11/10 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
Java 在线考试云平台的实现
2021/11/23 Java/Android
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP