小程序踩坑点-js篇

博文内容为蛮久之前总结的，具体排版及内容还在完善，欢迎指正

 

插值表达式

 

使用差值表达式可以达到快捷的展示data中数据等的操作,但不同于Vue等框架的是,小程序中插值表达式的功能并没有我们想象的那么强大,
在小程序中,仅可以在插值中写简单的js表达式,而不能调用方法

渲染的内容一般都是在从.js中获取的,调取的内容可以是String、Number、Object等

这里推荐(只会)的解决方法就是使用wxs[WXS(WeiXin Script) 是小程序推出的一套脚本语言,结合 WXML，可以构建出页面的结构。]

全局： 将要使用的wxs工具作为一个工具文件存放在utils文件夹下,需要引用时导入模块即可.

单页面使用： （官方demo）

 <wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

// 使用
<view> {{m1.message}} </view>

 

在实际开发中, wxs中的msg则是需要处理的数据,经过处理后由插值表达式进行渲染

 

数据更新（设置数据)

 

page中的data是用来存储设置初始数据的,插值表达式中的数据也大都来自这里,但如果要动态展示,则需要使用setData进行数据的更新,以完成动态展示数据的操作

.wxml

<view>{{ msg }}</view>

 

.js

Page({
  data: {
    msg:\'Hello World!\'
   }
})

 

则渲染到页面上的会是一个view标签,而内容就是 "Hello World"

但如果某个数据需要动态(后台返回的信息),则需要通过setData设置,下面展示设置数据的方法

 

 function : changeMsg() {
     // 因为这里如果有发送请求的情况,会涉及到this指向的问题
     var that = this
     that.setData({ 
     　　// 这里的键就是data中对应的数据的键名;值则是目标值
     　　msg:"这是我要修改的新数据"
     })
 }

 

当changeMsg调用之后,则发现页面上对应的试图数据已经改变啦,更改视图数据的操作也就完成了

注 :: 1.不同于Vue的是在js中获取data中的数据需要使用 "this.data.msg" ,直接this.msg是取不到的~要注意一下啦

2.在设置data中的数据是,注意如果要设置对象的某一个属性,比如下方要修改obj.age的场景 ↓↓↓

Page({
　　data: {
　　　　obj: { name: \' Yu \' , age : 10 }
　　}
})

 

在以上的代码中,其实包含了我们在开发中有时候需要通过设置返回的对象中的某一个属性来完成功能。那么在这里如果要设置obj.age的值,直接使用setData设置 obj.age的值为\'100\' 是无法操作的。这边大家可以在setData设置属性时用引号包裹起来。虽然简单但是当时做的时也是踩过坑的,希望可以帮到各位~

 

this.setData({ 
　　"obj.age" : 100
})

 

列表渲染

 

列表渲染在实际开发中算是应用较多的一个点.相信看到这篇记录的各位一定深谙各大框架遍历的写法了,这边就贴出官方给出的信息作为简单的介绍

 

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item；使用 wx:for-item 可以指定数组当前元素的变量名

 

直接上代码，在代码中也会尽可能做出相应的注释

.js

 

data : {
    userInfo: {
　　　　id: 5,
　　　　name: "Lolita",
　　　　userImg: "http://chrome/guguguge/jiatupian.jpg",
　　　　sex: "女",
　　　　age: 99,
　　　　active: "骑车",
　　　　intro: "**单车",
　　　　collect: {
　　　　　　listen: \'Music\',
　　　　　　price: 150
　　　　}
    },
    tabArr : [ "首页","特卖推荐","每日福利" ]
}

 

.wxml

 

// 渲染userInfo,直接通过 "." 的方式获取到值以及对象内更深层的数据
<view>{{ userInfo.name }}</view>
<image src="{{userInfo.userImg}}"></image>
<view>{{ userInfo.collect.price }}</view>

<!-- 下方为返回对象较为复杂时的遍历方式,复制demo修改数据操作一下就懂啦~ -->
<!-- 当wx:for遍历对象时，wx:for-index会得到对象的key，wx:for-item会得到对象的value -->

<view wx:for="{{userInfo}}" wx:for-index="key" wx:key="{{ item.id }}" wx:for-item="value">
<view>{{ key }} - {{ value }}</view>
<view>{{ value.listen }}</view>
<view>{{ value.price }}</view>
</view>

 

// 渲染tabArr 在使用wx:for时,最好绑定一个对应的wx:key,不写不影响正常使用但是调试器里会有一坨黄色的东西作为警告~
<view wx:for="{{ tabArr }}" wx:key="{{index}}">
{{item}}
</view>

 

可能确实蛮久没踩关于小程序遍历这方面的坑,也忘了当初怎么跌跌撞撞地,所以多少会有遗漏的,如果各位有碰到别的,欢迎随时补充指正

 

页面层级

 

小程序中是存在页面的层数限制的,之前是5层,在经历官方改版后虽然改成10层,放宽了限制,但有些点还是希望和大家分享一下~

过多的页面层级会导致逻辑或者数据的紊乱,所以建议各位在跳转的时候根据业务逻辑选择跳转方式,这里针对几种跳转方式作出相应介绍,希望可以帮到各位

1.wx.navigateTo(OBJECT)； 

比较常用的一个,保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回到原页面。

 

2.wx.redirectTo(OBJECT)； 

销毁当前页面，跳转到应用内的某个页面。比如当登录授权页用户完成操作后跳转到首页,这个时候就授权页就没有存在的必要了,使用redirectTo可以关闭授权页并跳转到指定的页面

3.wx.switchTab(OBJECT)；

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。值得一提的是此方法不可以传参,即在其他页面需要直接走到首页时,仅可以通过此方法跳转且不能通过传参的方式携带数据,解决方法为使用全局数据或缓存等

4.wx.navigateBack(OBJECT)  

关闭当前页面，返回上一页面或多级页面。此处参数为number,可选择回退的页面层数,而如果回退的页面层级大于当前存在的总层级,默认回到首页~

5.wx.reLaunch(OBJECT) 

 wx.reLaunch() 关闭内存中所有保留的页面，再跳转到目标页面。

 

页面跳转 || 传参 || 参数接收

 

跳转

跳转方式 (直接上代码~)

1.<navigator/>标签跳转

// 不需要传参,直接跳转

<navigator url="/pages/personal/personal">个人中心</navigator>

// 携带动态参数

<navigator url="/pages/personal/personal?id={{store_id}}">个人中心</navigator>

2.wx.navigateTo

// 不需要传参
navtoPerCenter () {
    wx.navigateTo({
        url: \'../../pages/personal/personal\',
    })
}
// 携带参数 store_id需要在data中声明或作为参数传入
navtoPerCenter() {
    wx.navigateTo({
        url: \'../../pages/personal/personal?id=\' + this.data.store_id,
    })
}

 

3.wx.redirectTo

// 不需要传参
navtoperson () {
    wx.redirectTo({
        url: \'../../pages/personal/personal\',
    })
}
// 携带参数
navtoperson () {
    wx.redirectTo({
        url: \'../../pages/personal/personal?id=\' + this.data.store_id,
    })
}

 

4.wx.switchTab

 

// 此方法暂不支持携带参数
navtoperson () {
    wx.switchTab({
        url: \'../../pages/personal/personal\',
    })
}

 

5.wx.navigateBack

 

通过以上代码可以看到,跳转的方法很多,但其方式却都是千篇一律的,在实际开发中可以根据特性选择跳转方式

 

参数接收

 

在页面.js的onload函数中,是有默认的参数options的,在onload中打印 "options" 即可拿到当前页面的所有参数(如果已经向当前页面传递了参数),获取到参数后可以根据参数发请求获取页面数据或者使用setData存到data中留待之后的操作使用

onLoad: function (options) {
    let that = this
    if(options.mid){
        that.setData({
              titiem_id: options.mid
        });
    }
    // 拿到请求需要的参数后调用页面渲染需要的方法等
    that.checkActSign()
}

 

 

.js文件内容简介

 

Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。下面介绍一些常用或者特殊场景用的生命周期函数

onLoad 监听页面加载

在这里进行参数的接收,页面数据的拉取等操作

 

onReady 监听页面初次渲染完成

 

onShow 监听页面显示

如果页面需要多次打开且每次的状态均有更新时,适合在这里进行一系列的操作

 

onHide 监听页面隐藏

当页面数据频繁更新且页面多次重复隐藏-展示模式的情况下,如果网络较慢,则会存在页面数据的闪烁,即上次页面的数据残存到当前页面,这时可以在这里,即页面隐藏是把当前页面的数据清空,防止数据闪烁

 

onUnload 监听页面卸载

同onHide,但此时执行的是在页面卸载,及点击左上方退出页面的操作

如果需要在当前页面回退时回退或者跳转到制定页面,则可以在这里进行跳转动作

 

onPullDownRefresh 监听用户下拉动作

可以做列表页的刷新功能,下拉时重新拉取列表数据,如果不希望用户下拉,可以在页面对应的json文件中添加禁止下拉操作选项

 

onReachBottom 页面上拉触底事件的处理函数

在这里进行列表的下拉加载更多等操作~

 

onShareAppMessage 用户点击右上角转发

在这里可以进行用户转发当前页面的配置项,具体...看文档(微笑)

 

onPageScroll 页面滚动触发事件的处理函数

如题,页面滚动,具体应用场景...暂未接触到相关类目,涉及到会回来补充

 

全局数据

 

个人认为是小程序对于数据的操作相对来说比较重要且常用的一点...

在pages同级的app.js文件最下方,globalData即是我们要操作的"全局数据"

在这里可以进行请求地址的公共前缀,在需要发请求的页面获取到该数据然后进行请求操作(这里暂不提request封装问题,不要问为什么,问就是不会)

存取 => app.js

globalData: {
    baseUrl:\'https://piano.test.com/qaq.php/v1/api\' ,
    userInfo: {},
    isLocation: true,
    scene: false,
　　 DateShow: true
}

 

页面获取 => text.js

const app = getApp() // 导入全局变量

// 当需要使用该数据的时候
var baseUrl = app.globalData.baseUrl
// 这里的baseUrl 就是app.js中的公共路径啦
console.log(baseUrl)

 

当然全局数据可以存放的不仅仅是公共接口,也可以放一些多页面公用的数据,防止在无休止的传参中出错

修改

场景 : 同一组件展示状态修改
app.js

globalData: {
　　DateShow : true
}

 

同存取全局数据一样,需要在使用的页面导入全局变量

const app = getApp()

// 需要修改处
app.globalData.DateShow = false;

 

Storage

缓存不同于全局数据的是缓存不需要导入,且缓存可能会被用户手动清除,而全局数据则不会

存储

let res = {
　　data:[],
　　status:1,
　　code:1003
}
// 同步方法中有成功的回调函数,这里可以根据自己需要进行操作
wx.setStorageSync(\'errorCode\', res.code);

 

获取

var statusCode = wx.getStorageSync(\'errorCode\')
// 这里的error就是之前存储的1003啦~
console.log( statusCode )

 

相对来说缓存的存取修改操作较之全局数据还是较为简单的,但缓存也有限制,目前是5M大小

小程序官方提供的操作接口

设置 wx.setStorageSync
获取 wx.getStorageSync
删除 wx.removeStorageSync
清空 wx.clearStorageSync
获取缓存信息 wx.getStorageInfoSync

事件绑定

.wxml

<view bindtap="dosomething">点这里</view>

 

.js

// 方法的位置与onload等生命周期函数同级
dosomething ( ) {
　　console.log(\' 在这里可以根据逻辑进行一系列的操作啦 \')
　　console.log(\' 比如发请求,切换页面标签展示状态等等啊 \')
}

 

// 遍历操作中的点击事件

.wxml

<!-- tosetdetails为绑定的点击事件,而data-id是绑定的自定义属性,用来区分当前点击的列表项,有关自定义属性后边会进行解释 -->
<view wx:for="{{list}}" wx:key="item.id" bindtap="tosetdetails" data-id="{{item.id}}">
　　<image src="{{item.img_pathh}}"></image>
　　<view class="goodstext">
　　　　<text class="name">{{item.goods_name}}</text>
　　　　<view class="goods-price-view">
　　　　　　<text>￥</text>
　　　　　　<text class="price">{{item.goods_price}}</text>
　　　　　　<text class="number">已售{{item.count}}件</text>
　　　　</view>
　　</view>
</view>

 

.js

tosetdetails: function(e) {
    // 这个e就是当前点击元素的详情,里边包含元素位置,元素的自定义属性等,如果是input组件,则可在方法传了参数e之后,打印e.detail.value获取到input的值
    console.log(e)
    wx.navigateTo({
        url: \'../../pages/setgoodsdetail/setgoodsdetail?id=\' +e.currentTarget.dataset.id, // 这里dataset后的id指向的是上方data-id的id，初次接触难免会摸不着头脑，多敲几次看下
    })
},    

 

 

e.target与e.currentTarget区别

在上边的例子中的打印出e(绑定事件获取当前组件数据的时候),拿到的e里面有target和currentTarget .

这两个数据里面都有一个dataset，而我们需要获取的数据就在dataset对象里面。正常情况下直接取 currentTarget 里面的就行
但两个数据是存在区别的,下边是官方给出的释义：
target：触发事件的源组件,也就是事件开始触发的地方
currentTarget： 事件绑定的当前组件