小程序的一些知识点和坑

[zhangjun620]

小程序的一些知识点和坑

[zhangjun620]

判断登录 及 维持登录状态
小程序的登录具体流程及函数作用
登录流程 进页面之后 调用 storage 看有无 token and userinfo 没有 进入 1 有进入 2
几个重要的函数 wx.login() \ wx.checksession \ button的bindgetuserinfo \ wx.getSetting()
1有授权过 2没有授权过

1. wx.checksession 判断token是否过期 getStorage token 读取 没有或失效就调用login
2. wx.login 获取code 只能用一次 返回登录态 token 登录态就是维护登录的状态 setstorage token 保存
   wx.getSetting 判断用户是否点击过授权USEINFO的button success后调用 getUserInfo 获取用户信息 或者 用后台给的数据填写进去，本项目会这么用 之后存储到 storage 和 全局
   getsetting这应该写在onload里 没点过就显示 点击登录button，并且得做一次刷新，不然局部刷新这个按钮还是会有（或者给个状态 ifelse来setdata局部切换 得看button逻辑怎么写）
   button 按钮 open-type为getUserInfo 回调函数中 会有e.deatil.userinfo 把这个和 login获取的 code发给后台 换取userinfo id（本项目） 还有登录态 token 并setStorage

参考文章
整理小程序登录状态维护笔记

[zhangjun620]

小程序组件化

从开始学代码开始经常会遇到重复运用一段代码的地方，某些地方的功能一样，那时候听说有组件化这东西，但一直不知道怎么用，
这次工作的项目有了用处，但是是小程序里面的，所以有些地方写的还是不一样
当我封装了个组件时，我思考怎么才能在不同页面 引入，但是数据是不一样的，这时候可以用到 properties 属性 刚才是看文档真的看不懂怎么写属性，以及这是干嘛用的，实际测试知道，你可以在里面写一个默认的属性 在别的页面调用时就可以显示不同的数据。
组件 js
cardText: { type : String, value: '' }, 写在 properties 里
组件的 HTML
<view class="card-text">{{ cardText }}</view>
两个页面
足迹 html 与效果
<like-card cardText="{{ cardTitle }}"></like-card>

另一个页面 HTML 与效果
<like-card cardText="{{cardText}}"></like-card>

两个括号中值根据传来的数据改变

参考文章
(干货)微信小程序组件封装
Component 参考文档

[zhangjun620]

小程序 tabbar 仅仅自定义是会有问题的，点击跳转后，selecticon会跳到第一个去，有时候也会乱跳，明明点这个却高亮的是别的tab。
解决这个问题，需要在设置tabbar的页面js中onshow

onShow: function () {

if (typeof this.getTabBar === 'function' && this.getTabBar()) {

        this.getTabBar().setData({

            selected: 2

        })

    }

} 

来确定当前选中的是哪一个tab

这点在自定义的文档给出的实例中居然看到了，请自己以后仔细阅读全文档！

[zhangjun620]

在做 一个全选的按钮 怎么选取所有的checked状态，可以先把checkbox标签上的属性绑定给data，写一个forEach来遍历修改

      this.data.items.forEach( (e,index)=>{
        this.setData({
         [`items[${index}].checked`]: false,
         selectAll: false
        })

e就是checkbox的数据，困扰我的是在setData中怎么取到每个下标的值，网上搜了下，发现可以用类似于css属性选择器来选择
这是es6的写法，

[items[${index}].checked]: false,

正常的话，拼接字符串与下标

["items["+ index+"].checked"]: true

也是可以的

参考 小程序 setData 修改 data 中数组内不定对象的数据
涉及的知识点 需看一下es6语法指南

[zhangjun620]

小程序自定义导航栏 不同机型高度适配

标题对齐胶囊 
思路 
整个导航栏高度 = 状态栏高度 + 胶囊高度 + 状态栏到胶囊的间距 * 2(分为上下，不然不美观) 还需实现导航栏内容与胶囊居中
小程序提供了两个函数 单位必须用px才能动态适配
这里是动态计算，防止机子不一样正常。android标题栏高度48px ios是44px
wx.getSystemInfoSync() 可以获取当前设备信息，最重要的是获得该设备的状态栏高度
wx.getMenuButtonBoundingClientRect() 可以动态获取胶囊高度信息 以及 间距 计算是 屏幕左上角原点到胶囊高度-状态栏高度就是单个间距高度

参考文章
小程序自定义导航栏，兼容适配所有机型（附完整案例）

[zhangjun620]

自定义tabbar 多处复用

在小程序里经常会用到自定义的tabbar，但是在一些需求里，例如小程序首页需要一个，电商进去之后的店铺首页也需要一个，但是需要加载不同的图标。刚开始不知道怎么解决，在小程序自定义组件的函数中没看见 properties 以为不能用。搜了很多没发现解决办法，因为是自定义组件，需要写custom-tab-bar 文件，我在js文件中加上了 properties 属性，给了一个判断函数

  <cover-view wx:if="{{shopIndex}}" wx:for="{{list1}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" 
  data-index="{{index}}" bindtap="switchTab">

  <cover-view wx:if="{{!shopIndex}}" wx:for="{{list2}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" 
  data-index="{{index}}" bindtap="switchTab">

而shopIndex就是 properties 里根据想要显示哪个属性，所赋予的Boolean值。试了下居然可以解决。
两个不同页面的tabbar

组件的js文件中两个列表

[zhangjun620]

做一个tab标签页
今天首页需要加一个功能，类似于标签页，但是样式变了，而用的vant改样式background不生效，改源码的话其他用到的地方也会变，索性自己写一个。
思考思路， for一个数组把头部标签们显示，内容点击切换显示。下面是内容 jd小程序是setdata来显示的 上面click的时候下面变换 显示的是当时那个数组的内容不就行了吗，这样的话可以用双数组，上面显示的是商品类别名字，下面是另外一个数组，里面是内容，下面的数组由data-index来控制，data-index就是下标，根据这个下标去上面数组里取出装有内容的数组

onLoad: function () {
this.setData({
arrayList: this.data.testList[0].a
})
},
clickChange: function(e){
console.log(e.currentTarget.dataset.active)
let arrayIndex = e.currentTarget.dataset.active
this.setData({
arrayList: this.data.testList[arrayIndex].a
})
}

wxml

<view wx:for="{{ testList }}" bindtap="clickChange" data-active="{{ index }}">
  <view >{{item.shopName}}</view>
</view>
  <view wx:for="{{ arrayList }}">
  {{item.asd}}
  {{item.l}}
  </view>

这样点击时可以setdata数组
网上看也有用swiper作为下面内容实现的，但是不是我这需求，所以有思路就能写出来，断断续续想了2小时，还不如写下来理一理思路，立马就出来了。

[zhangjun620]

小程序rpx 与 px
在小程序的官网介绍不同设备的rpx与px的比是不同的，并不全是是1rpx=0.5px，所以我这有一个布局是动态算出导航栏高度用的是px，并且下面跟上了一个搜索框高100rpx，这两个固定在上方，例如 nexus5导航栏是64px高，再加上搜索框100rpx，理论来说就是114px的高度，下面内容会给一个114px的margin-top，但是这样会有空隙

但是把搜索框高度换成50px，就正常了，不会出现空隙，按照官方解释，应该是设备的比不是完整1：2只能同意写px

[zhangjun620]

getStorageSync() 同步获取信息，但是写法需要卸载trycatch里而不是直接取值。同理setStorageSync也是，但我直接赋值了也能用，get却不行

[zhangjun620]

购物车逻辑
首先有个总全选 包含了所有的全选。点击取消所有 点击选中所有 单选+店铺函数都得判断点击后是否触发总全选
接下来是店铺全选 店铺商品全选 全不选，单个选择时为不选 思路：根据group给的数组判断是否全选，因为是for出来的列表，所以要根据idx(wx:for-index="idx")来判断是否是当前店铺
一级 All全选 收集渲染的全部array的每个checked foreach setdata 为true 反之

参考文章
vant 实现全选功能
小程序 获取数据下标和两层wx:for的下标方法 用于点击各个图集看图

[zhangjun620]

mark 与 data-set
在小程序中想实现一个功能，把本地上传的图片显示在界面中，并在右上角添加个删除按钮。
<view wx:if="{{licenses.length !== 0}}" wx:for="{{licenses}}" wx:for-index="idx" class="imgView " mark:num='{{idx}}'> <image src="{{licenses[idx]}}"></image> <view class="min" bindtap="clickNone"> <view>-</view> </view>

这里想通过点击 下面的 min 来删除整个 view标签，思路就是 子标签获取父标签的值，用currentTarget只能获取当前标签的值，但是mark可以获取上面的值
官方文档

当事件触发时，事件冒泡路径上所有的 mark 会被合并，并返回给事件回调函数。（即使事件不是冒泡事件，也会 mark 。）

这样就可以获取，很方便