原创经验:微信小程序开发总结

扶桑木下
扶桑木下 发布于 2017-01-08 22:55:24 浏览:2214 类型:原创 - 随笔 分类:手机移动 - 微信小程序 二维码: 作者原创 版权保护
学习时间不短了.今天公司不加班总结一下我的开发经验吧,以下都是我认为很重要的总结哦!写下来让我自己也记得更清楚,同时希望可以帮助到有需要的同学哦

一: 参数传值的方法

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


作者:ntt123456
来自:来源地址
z
给个赞 16 人点赞
收藏 62 人收藏
评论 已有 14 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
hugeannex
hugeannex2017-01-09 09:42:281F
全是前端基础。。。
举报 支持 (4) 回复 (1)
最新评论
扶桑木下
扶桑木下昨天 14:4514F
emoticon //@台灯油条:先收藏了,到时候再看
举报 支持 (0) 回复 (0)
扶桑木下
扶桑木下昨天 14:4513F
哦 //@hinong:不感兴趣emoticon
举报 支持 (0) 回复 (0)
台灯油条
台灯油条4 天前12F
先收藏了,到时候再看
举报 支持 (0) 回复 (1)
hinong
hinong4 天前11F
不感兴趣emoticon
举报 支持 (0) 回复 (1)
jie4038
jie40385 天前10F
挺好,看来没少被小程序折磨
举报 支持 (0) 回复 (0)
扶桑木下
扶桑木下6 天前9F
加油哒~ //@huiyanlihao:看来是要努力学习了
举报 支持 (0) 回复 (0)
huiyanlihao
huiyanlihao6 天前8F
看来是要努力学习了
举报 支持 (0) 回复 (1)
扶桑木下
扶桑木下7 天前7F
是啊emoticon //@ddvbbk:我们前端有的忙了
举报 支持 (0) 回复 (0)
扶桑木下
扶桑木下7 天前6F
哈哈哈,可以 //@叶绛攸:我也加一条,假如用canvas画动画,记得降低帧数。
举报 支持 (0) 回复 (0)
ddvbbk
ddvbbk2017-01-09 17:32:315F
我们前端有的忙了
举报 支持 (0) 回复 (1)
liguanlin
liguanlin2017-01-09 16:59:394F
全是前端基础。
举报 支持 (0) 回复 (0)
叶绛攸
叶绛攸2017-01-09 16:36:203F
我也加一条,假如用canvas画动画,记得降低帧数。
举报 支持 (0) 回复 (1)
扶桑木下
扶桑木下2017-01-09 13:19:572F
做小程序也需要这些基础啊。。。 //@hugeannex:全是前端基础。。。
举报 支持 (0) 回复 (0)
hugeannex
hugeannex2017-01-09 09:42:281F
全是前端基础。。。
举报 支持 (4) 回复 (1)
扶桑木下 扶桑木下 作者

我爱学习,学习使我快乐

作者最新