小程序踩坑点-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 可以指定数组当前元素的变量名

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

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()
}

上篇完 ~