一些总结
一、wx.getUserProfile 与 wx.login 登录退出的问题
小程序端调用云函数时默认带上可信的用户登录态(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的用法-替换/删除/添加数组内某一个或者几个值
·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的区别
十一、透明度设置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);
}