首页 微信小程序 小程序开发 微信小程序开发的原创经验

微信小程序开发的原创经验

Feb 16, 2017 am 10:24 AM
微信小程序

一: 参数传值的方法


1:  data-id
我们可以给HTML元素添加data-*属性来传递我们需要的值,使用方法说明:
(1)设置data-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

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

3:  在navigator中添加参数传值
使用方法说明
(1)传值:在navigator的属性url后拼接?id(参数名字)=要传递的值    (如果多个参数用&分开   &name=value&.......)

(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设置模板的名字

定义模板

2:使用模板
首先引入模板

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

四: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 = 2;

更多微信小程序开发的原创经验相关文章请关注PHP中文网!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

闲鱼微信小程序正式上线 闲鱼微信小程序正式上线 Feb 10, 2024 pm 10:39 PM

闲鱼官方微信小程序悄然上线,在小程序中可以发布闲置与买家/卖家私信交流、查看个人资料及订单、搜索物品等,有用好奇闲鱼微信小程序叫什么,现在快来看一下。闲鱼微信小程序叫什么答案:闲鱼,闲置交易二手买卖估价回收。1、在小程序中可以发布闲置、与买家/卖家私信交流、查看个人资料及订单、搜索指定物品等功能;2、在小程序的页面中有首页、附近、发闲置、消息、我的5项功能;3、想要使用的话必要要开通微信支付才可以购买;

微信小程序实现图片上传功能 微信小程序实现图片上传功能 Nov 21, 2023 am 09:08 AM

微信小程序实现图片上传功能随着移动互联网的发展,微信小程序已经成为了人们生活中不可或缺的一部分。微信小程序不仅提供了丰富的应用场景,还支持开发者自定义功能,其中包括图片上传功能。本文将介绍如何在微信小程序中实现图片上传功能,并提供具体的代码示例。一、前期准备工作在开始编写代码之前,我们需要先下载并安装微信开发者工具,并注册成为微信开发者。同时,还需要了解微信

实现微信小程序中的下拉菜单效果 实现微信小程序中的下拉菜单效果 Nov 21, 2023 pm 03:03 PM

实现微信小程序中的下拉菜单效果,需要具体代码示例随着移动互联网的普及,微信小程序成为了互联网开发的重要一环,越来越多的人开始关注和使用微信小程序。微信小程序的开发相比传统的APP开发更加简便快捷,但也需要掌握一定的开发技巧。在微信小程序的开发中,下拉菜单是一个常见的UI组件,实现了更好的用户操作体验。本文将详细介绍如何在微信小程序中实现下拉菜单效果,并提供具

实现微信小程序中的图片滤镜效果 实现微信小程序中的图片滤镜效果 Nov 21, 2023 pm 06:22 PM

实现微信小程序中的图片滤镜效果随着社交媒体应用的流行,人们越来越喜欢在照片中应用滤镜效果,以增强照片的艺术效果和吸引力。在微信小程序中也可以实现图片滤镜效果,为用户提供更多有趣和创造性的照片编辑功能。本文将介绍如何在微信小程序中实现图片滤镜效果,并提供具体的代码示例。首先,我们需要在微信小程序中使用canvas组件来加载和编辑图片。canvas组件可以在页面

使用微信小程序实现轮播图切换效果 使用微信小程序实现轮播图切换效果 Nov 21, 2023 pm 05:59 PM

使用微信小程序实现轮播图切换效果微信小程序是一种轻量级的应用程序,具有简单、高效的开发和使用特点。在微信小程序中,实现轮播图切换效果是常见的需求。本文将介绍如何使用微信小程序实现轮播图切换效果,并给出具体的代码示例。首先,在微信小程序的页面文件中,添加一个轮播图组件。例如,可以使用<swiper>标签来实现轮播图的切换效果。在该组件中,可以通过b

实现微信小程序中的图片旋转效果 实现微信小程序中的图片旋转效果 Nov 21, 2023 am 08:26 AM

实现微信小程序中的图片旋转效果,需要具体代码示例微信小程序是一种轻量级的应用程序,为用户提供了丰富的功能和良好的用户体验。在小程序中,开发者可以利用各种组件和API来实现各种效果。其中,图片旋转效果是一种常见的动画效果,可以为小程序增添趣味性和视觉效果。在微信小程序中实现图片旋转效果,需要使用小程序提供的动画API。下面是一个具体的代码示例,展示了如何在小程

闲鱼微信小程序叫什么 闲鱼微信小程序叫什么 Feb 27, 2024 pm 01:11 PM

闲鱼官方微信小程序已经悄然上线,它为用户提供了一个便捷的平台,让你可以轻松地发布和交易闲置物品。在小程序中,你可以与买家或卖家进行私信交流,查看个人资料和订单,以及搜索你想要的物品。那么闲鱼在微信小程序中究竟叫什么呢,这篇教程攻略将为您详细介绍,想要了解的用户们快来跟着本文继续阅读吧!闲鱼微信小程序叫什么答案:闲鱼,闲置交易二手买卖估价回收。1、在小程序中可以发布闲置、与买家/卖家私信交流、查看个人资料及订单、搜索指定物品等功能;2、在小程序的页面中有首页、附近、发闲置、消息、我的5项功能;3、

实现微信小程序中的滑动删除功能 实现微信小程序中的滑动删除功能 Nov 21, 2023 pm 06:22 PM

实现微信小程序中的滑动删除功能,需要具体代码示例随着微信小程序的流行,开发者们在开发过程中经常会遇到一些常见功能的实现问题。其中,滑动删除功能是一个常见、常用的功能需求。本文将为大家详细介绍如何在微信小程序中实现滑动删除功能,并给出具体的代码示例。一、需求分析在微信小程序中,滑动删除功能的实现涉及到以下要点:列表展示:要显示可滑动删除的列表,每个列表项需要包

See all articles