微信小程序缓存用户密码及轮播

1.缓存用户及密码：

wxml内容：

<!--pages/shuoye/shouye.wxml-->

<text>用户名：</text><input class="input-sty" placeholder="请输入您的账户" bindinput="bindKeyInput"/>

<text>密码：</text><input class="input-sty" placeholder="请输入您的密码" bindinput="bindKeyInput2" type="password"早知档/>

<button bindtap="dl" size="mini" type="primary" plain="">登录</button>

js内容

// pages/shuoye/shouye.js

Page({

    /**

     * 页面的初始数据

     */

    data: {

    },

    bindKeyInput:function(e){

        console.log(e)

     陆乱   let {detail:{value}} = e

        this.setData({

            inputVal:value

        })

        },

    bindKeyInput2:function(a){

        console.log(a)

        let {detail:{value}} = a

        this.setData({

            inputVal1:value

        })

        },

    dl:function(res){

        wx.setStorageSync('username', this.data.inputVal),

        wx.setStorageSync('password', this.data.inputVal1),

        wx.navigateTo({

          url: '/pages/lunbo/lunbo',

        })

    },

    /**

     * 生命周期函数--监听页面加载

     */

    onLoad: function (options) {

    },

    /**

     * 生命周期函数--监听页面初次渲染完成

     */

    onReady: function () {

    },

    /**

     * 生命猛坦周期函数--监听页面显示

     */

    onShow: function () {

    },

    /**

     * 生命周期函数--监听页面隐藏

     */

    onHide: function () {

    },

    /**

     * 生命周期函数--监听页面卸载

     */

    onUnload: function () {

    },

    /**

     * 页面相关事件处理函数--监听用户下拉动作

     */

    onPullDownRefresh: function () {

    },

    /**

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

     */

    onReachBottom: function () {

    },

    /**

     * 用户点击右上角分享

     */

    onShareAppMessage: function () {

    }

})

wxss内容:

/* pages/shuoye/shouye.wxss */

.input-sty{

    border: 1px solid #000

    margin: 5px

    padding: 5px

}

本地缓存官方讲解：

https://developers.weixin.qq.com/miniprogram/dev/api/data.html#wxsetstorageobject

演示视屏可以关注公微信订阅号查看(Rabbit_svip)。

样式随便写，主要留意功能。

页面结构

【app.json】

【login.wxml】

【login.js】

【index.wxml】

【index.js】

先看看【app.json】，在pages里面，要把login放在第一，这样在小程序打开的时候，就会先打开login.wxml这个页面。

【login.wxml】页面，第二行的<form>标签里，要加bindsubmit。

这是微信官方文档上写明的事件。在<form>表单提交时，会携带<form>中的数据出发submit事件。

在使用bindsubmit时，记得在input元素上面写明“name”属性。

可以试试，查看一下控制台输出的值。

【login.js】

在点击登录提交表单后，如果登录成功，用wx.setStorage()，把用户名临时存储起来。

存储完渗数成后，跳转页面。胡厅用到 wx.redirectTo

用 wx.redirectTo 进行跳转，是没有返回上一层的路径的。

在login.js这个页面中，用到 onLoad 这个函数（第107行）。作用是监听页面加载。

onLoad里面，用到 wx.getStorage 这个API。作用是检测本地缓存，看看是否有对应的key指定的值。如果有，则调用 success 这个回调丛做首函数。

【index.js】

这个页面设置了一个清除本地缓存的button。

用到 wx.removeStorage 这个API。

这里只要指定key值就行。这样就可以删除掉对应的缓存。

删除成功后，执行 success 回调函数。

每个微信小程序都可以有自己的本地缓存，可以通过没巧型 wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。同一个微信用户，同一宽散个小程序 storage 上限为 10MB。localStorage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据。

1.设置缓存

2.获枯猜取缓存

3.清除缓存

---