微信小程序 数据封装,参数传值等经验分享


Posted in Javascript onJanuary 09, 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);

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

obj.name || obj['name']

注意: 数值键名不能使用点运算符(因为会被当成小数点),只能使用方括号运算符。7 检查变量是否声明

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

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

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

9 for … in 循环用来遍历一个对象的全部属性

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

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

with(obj) {
name1 = 1;
name2 = 2;
}
等同于
obj.name1 = 1;
obj.name2 =

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
js 验证密码强弱的小例子
Mar 21 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 Javascript
JS中数组重排序方法
Nov 11 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
简单实现jQuery多选框功能
Jan 09 #Javascript
微信小程序开发之Tabbar实例详解
Jan 09 #Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 #Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 #Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 #Javascript
原生Javascript插件开发实践
Jan 09 #Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 #Javascript
You might like
php4的session功能评述(二)
2006/10/09 PHP
PHP下对字符串的递增运算代码
2010/08/21 PHP
php下使用iconv需要注意的问题
2010/11/20 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
xml和web特殊字符
2009/04/28 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
python原始套接字编程示例分享
2014/02/21 Python
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
Python中DJANGO简单测试实例
2015/05/11 Python
Python 爬虫的工具列表大全
2016/01/31 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
python简单实现操作Mysql数据库
2018/01/29 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
环保建议书500字
2014/05/14 职场文书
体育专业自荐书
2014/05/29 职场文书
总经理司机岗位职责
2015/04/10 职场文书