小菜鸟的微信小程序 - 云开发 - 账号密码库(4)一些小知识点总结

一、wx.getUserProfile 与 wx.login 登录退出的问题

https://blog.csdn.net/weixin_42195593/article/details/90242382

小程序端调用云函数时默认带上可信的用户登录态(openid),没有登录态过期的概念

未登录模式即无登录态的模式,在未登录模式中,不存在用户的登录态。

除了两种未登录模式的场景,其他场景进入小程序后就是登录状态,不会登录过期

即云开发小程序不需要手动登录,因为操作数据库的时候默认携带openid,而openid在用户一进入小程序就有

所以需要登录退出功能的小程序,需要自己写相关逻辑

二、在wxml中判断一个元素是否在数组中 / WXS 模块的使用

官方文档

<wxs module="indexof">  /* module 属性是当前 <wxs> 标签的模块名。 */
  function res(arr,i){
    
    
    return arr.indexOf(i) === -1 ? false : true;
  }
  module.exports = {
    
      /* 通过该属性exports,可以对外共享本模块的私有变量与函数。 */
    res: res,
  }
</wxs>

声明了一个名字为 indexof 的模块,将 res 函数暴露出来,供当前页面使用。

调用方法 { {indexof.res(eye,index)}}

扫描二维码关注公众号,回复: 13414333 查看本文章

三、数组的增删

在最后增

    this.data.eye.push(e.target.dataset.i)
    this.setData({
    
    
      eye: this.data.eye
    })

在最后删

    this.data.eye.pop()
    this.setData({
    
    
      eye: this.data.eye
    })

四、splice的用法-替换/删除/添加数组内某一个或者几个值

arr.splice(index,len,[item])

·index:数组开始下标
·len: 替换/删除的长度
·item:替换的值,删除操作的话 item为空

删除特定的元素

    var i = this.data.eye.indexOf(e.target.dataset.i)
    this.data.eye.splice(i,1) 
    this.setData({
    
    
      eye: this.data.eye
    })

五、用二三四实现 密码显示与隐藏功能

效果

请添加图片描述

wxml文件

<wxs module="indexof">  /* module 属性是当前 <wxs> 标签的模块名。 */
  function res(arr,i){
    
    
    return arr.indexOf(i) === -1 ? false : true;
  }
  module.exports = {
    
      /* 通过该属性exports,可以对外共享本模块的私有变量与函数。 */
    res: res,
  }
</wxs>


      <van-checkbox-group  wx:for="{
    
    {infolist}}" wx:key="index">
          <van-cell wx:if="{
    
    {indexof.res(eye,index)}}" title="密码:">
            {
    
    {
    
    item.password}} 
            <van-icon data-i="{
    
    {index}}" bindtap="eyetoclose" name="eye-o" class="eye"/>
          </van-cell>

          <van-cell wx:else title="密码:">
            <text wx:for="{
    
    {item.password.length}}" wx:key="index">*</text>
            <van-icon data-i="{
    
    {index}}" bindtap="eyetoopen" name="closed-eye" class="eye" />
          </van-cell>
           </van-checkbox-group>

js文件

  data: {
    
    
    eye: [],
	},

  eyetoclose: function (e) {
    
    
    var i = this.data.eye.indexOf(e.target.dataset.i)
    this.data.eye.splice(i,1) 
    this.setData({
    
    
      eye: this.data.eye
    })
    console.log(this.data.eye)
  },
  eyetoopen: function (e) {
    
    
    this.data.eye.push(e.target.dataset.i)
    this.setData({
    
    
      eye: this.data.eye
    })
    console.log(this.data.eye)
  },

六、增加面板功能

效果

请添加图片描述

wxml文件

 <view wx:for="{
    
    {addnum}}" wx:key="index">

        <van-cell-group>
          <van-field data-index="{
    
    {index}}" value="{
    
    { addinfolist[index].type }}" placeholder="如QQ,便于分类管理" bind:change="onTypeChange" label="类型" clearable />
/*这里获取输入,可以参考我的第三篇文章*/
        </van-cell-group>
 </view>
      
      <view class="btnbox">
        <button bindtap="jixuadd">增加面板</button>
      </view>

js’文件

  data: {
    
    
	  addnum: 1,
	},


  jixuadd: function () {
    
    
    if (this.iskong()) {
    
    	/*这里对输入进行判断*/
      console.log("必填项输入不能为空")
      wx.showToast({
    
    
        title: '请填写',
        icon: 'none',
      })
      return
    } else {
    
    
      this.setData({
    
    
        addnum: this.data.addnum + 1,	/*面板+1*/
      })
    }
  },

七、 wx.navigateTo跳转页面,传递参数

要用字符串传参,所以先将对象变为字符串 JSON.stringify(res.data)

          var obj = JSON.stringify(res.data)
          wx.navigateTo({
    
    
            url: '../search/search?obj=' + obj,

到了跳转的页面在将字符串转换为对象 JSON.parse(options.obj)

	var obj = JSON.parse(options.obj)
    this.setData({
    
    
      arrobj: obj
    })

八、wx.navigateTo跳转后返回,刷新原页面,传递参数

用 pages = getCurrentPages(); //获取当前页面信息栈
pages[pages.length - 1]; //本页面
pages[pages.length - 2]; //上一个页面

可以直接调用某页面的方法和函数

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
    
    console.log("监听页面卸载")
    const pages = getCurrentPages(); //获取当前页面信息栈
    var prevPage = pages[pages.length - 2]; //上一个页面 - 个人页
    
    //直接调用上一个页面对象的setData()方法,把数据存到上一个页面中去
    prevPage.setData({
    
    
      currentitem: 0,
    });
    prevPage.refresh()

九、一键复制文本

效果
请添加图片描述

<van-icon class="copy" catchtap="copy" data-mima="{
    
    {item.password}}" name="records" />

绑定点击事件,将{ {item.password}}传到js文件,这里不应该用bindtap,而应该用catchtap

  copy: function (e) {
    
    
    wx.setClipboardData({
    
    
      data: e.target.dataset.mima,	/*要复制的内容*/
    });
    console.log(e.target.dataset.mima) // data
  },

十、bindtap与catchtap的区别

bindtap是冒泡的,catchtap是非冒泡的。

在这里插入图片描述

十一、透明度设置style=“opacity:{ {1}}”

https://developer.mozilla.org/zh-CN/docs/Web/CSS/opacity

/* 完全不透明 */
opacity: 1;
opacity: 1.0;

/* 半透明 */
opacity: 0.6;

/* 完全透明 */
opacity: 0.0;
opacity: 0;

/* 从父元素继承 */
opacity: inherit;

十二、固定悬浮球

wxml文件

<button bindtap="delbtn" class="floatbtn"></button>

wcss文件

.floatbtn{
    
    
/*右下角*/
  position: fixed !important;
  right: 5vw !important;
  bottom: 10vh !important;

/*圆的*/
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
/*颜色*/
  background-color: rgb(248, 0, 0);
}

猜你喜欢

转载自blog.csdn.net/tfnmdmx/article/details/119908982