微信小程序的数据存储与Django等服务发送请求 讲解

目录
  • 官方文档
  • 快速归纳 存取改删
  • 1.wx存储数据到本地以及本地获取数
    • 1.1 wx.setStorageSync(string key, any data) 存(同步)
    • 1.2 wx.setStorage(Object object)存(异步)
    • 1.3 wx.getStorageSync(string key)取(同步)
    • 1.4 wx.getStorage(Object object)取(异步)
  • 小程序如何向我们django等服务请求接口(wx.request)

官方文档

wx.setStorageSync]

(https://developers.weixin.qq.com/miniprogram/dev/api/wx.setStorageSync.html)与

wx.setStorage

快速归纳 存取改删

wxml

 <button bindtap="cun">存数据</button>
  <button bindtap="qu">取数据</button>
   <button bindtap="del">删</button>

js

  cun:function () {
    wx.setStorageSync('name', "jason") //存
    wx.setStorageSync('name1', "sean")
  },
  qu:function () {
    wx.setStorageSync('name', "jason is  sb") //改
   console.log( wx.getStorageSync('name')) //取
  },
  del:function() {
    //wx.clearStorageSync() //清除所有的本地数据
    wx.removeStorageSync('name') //清除指定的本地数据

  }

总结:

1 本地存储有同步,也有异步,用法一样,同步与异步的区别,就是我们平时理解的同步与异步

2 这个本地数据的生命周期,和小程序同步,要清除数据,除非我们用代码删除,或者用户删除

(卸载)小程序,用户清理微信数据

3 本地数据单个键最多只能存1M内容,所有本地数据不能超过10M.

1.wx存储数据到本地以及本地获取数

存到本地就是存到你的手机,侬懂了伐?

1.1 wx.setStorageSync(string key, any data) 存(同步)

参数

string key: 本地缓存中指定的 key

any data: 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。

示例代码

wx.setStorage({
  key: 'key',
  data: 'value'
})
try {
  wx.setStorageSync('key', 'value')
} catch (e) { }

1.2 wx.setStorage(Object object)存(异步)

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。数据存储生命周期跟小程序本身一致,即除用户主动删除或超过一定时间被自动清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。

参数

Object object

属性 类型 默认值 必填 说明
key string   本地缓存中指定的 key
data any   需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
success function   接口调用成功的回调函数
fail function   接口调用失败的回调函数
complete function   接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

wx.setStorage({
  key: 'key',
  data: 'value'
})
try {
  wx.setStorageSync('key', 'value')
} catch (e) { }

上面的两个就是一个是同步的一个是异步的,还是有区别的,想用哪一个看你的业务来定

wx.getStorageany wx.getStorageSync

1.3 wx.getStorageSync(string key)取(同步)

参数

string key: 本地缓存中指定的 key

返回值:any data,key对应的内容

示例代码

wx.getStorage({
  key: 'key',
  success(res) {
    console.log(res.data)
  }
})
try {
  const value = wx.getStorageSync('key')
  if (value) {
    // Do something with return value
  }
} catch (e) {
  // Do something when catch error
}

1.4 wx.getStorage(Object object)取(异步)

从本地缓存中异步获取指定 key 的内容

参数:Object object

属性 类型 默认值 必填 说明
key string   本地缓存中指定的 key
success function   接口调用成功的回调函数
fail function   接口调用失败的回调函数
complete function   接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

参数

Object res

属性 类型 说明
data any key对应的内容

示例代码

wx.getStorage({
  key: 'key',
  success(res) {
    console.log(res.data)
  }
})
try {
  const value = wx.getStorageSync('key')
  if (value) {
    // Do something with return value
  }
} catch (e) {
  // Do something when catch error
}

小程序如何向我们django等服务请求接口(wx.request)

wxml

 <button bindtap="qing">请求</button>

js

qing:function(){
    wx.request({
      url: 'http://127.0.0.1:8000/test/', //路由
      data:{   //数据
        "name":"egon"
      },
      method:"POST",//请求方法
      header:{ //请求头
        "content-type":"application/json"
      },
      success(e){ //回调
          //e为后台返回的值
        console.log(e.data)
      }
    })
  }

注意

本地请求接口的时候,一定要关闭小程序编辑器中的 详情-本地设置-不校验https域名

以上就是微信小程序的数据存储与Django等服务发送请求 讲解的详细内容,更多关于微信小程序数据存储与Django服务发送请求的资料请关注我们其它相关文章!

(0)

相关推荐

  • 微信小程序 本地数据存储实例详解

    微信小程序 本地数据存储实例详解 前言 如果您在看此文章之前有过其他程序的开发经验,那一定会知道一般例如安卓或者苹果的原生APP都提供了本地的存储功能,甚至可以使用sqlite数据库来做存储.可是微信的小程序框架基于微信本身,其实际运行环境只是在浏览器里面,所以不会提供那么丰富的数据存储实力.但html5开始已经可以在浏览器里面存储数据,好在微信的小程序给这个功能封装好了,这样我们可以使用数据存储. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStor

  • 微信小程序:数据存储、传值、取值详解

    小程序界面传值 父级界面:A界面 子级界面:B界面 一.url传值 详细的配置参数可以查看组件导航:navigator,这里不再做过多的解释. 1. 正向传值:A界面 –>B界面 用 navigator标签或 wx.navigator传值,A界面向B界面传id值 A界面获取id值传向B界面如果需要传多个参数, 用 & 链接即可 // 方法一:navigator标签传值 <navigator url="/page/index/index?id=110" >传值&

  • 微信小程序数据存储与取值详解

    在小程序开发的过程,经常要需要这个页面输入的数据,在下一个页面中进行取值赋值. 比如: 在A页面input输入框,输入电话号码,点击添加.需要在B页面电话区域中,显示刚刚输入的电话号码. 因为这是两个页面,就需要先存储,再取值.微信小程序提供了数据存储的API,wx.setStorage(OBJECT) 可以将数据存储在本地缓存中指定的 key 中,如果重复会覆盖掉原来该 key 对应的内容. 思路是,在A页面,使用bindinput获取input输入的值,赋值给一个变量(自定义),点击添加按钮

  • 微信小程序开发之数据存储 参数传递 数据缓存

    微信小程序开发内测一个月.数据传递的方式很少.经常遇到页面销毁后回传参数的问题,小程序中并没有类似Android的startActivityForResult的方法,也没有类似广播这样的通讯方式,更没有类似eventbus的轮子可用. 现在已知传递参数的方法只找到三种,先总结下.由于正处于内测阶段,文档也不是很稳定,经常修改,目前尚没有人造轮子. 先上GIF: 1.APP.js 我把常用且不会更改的参数放在APP.js的data里面了.在各个page中都可以拿到var app = getApp(

  • 微信小程序中的数据存储实现方式

    目录 全局变量globalData 页面私有变量 data storage 异步存储(根据设备性能的不同,你还真不知道他会存多久) 同步存储(会造成阻塞~) 文件存储 fileSysteManager 写入: 读取 移除 全局变量globalData 在最初创建小程序时,app.js文件中App方法中传入的对象里面默认添加了globalData参数.在所有的页面中我们都可以通过getApp方法获取到这个App方法传入的对象,进而拿到其中的globalData. const App = getAp

  • 微信小程序的数据存储与Django等服务发送请求 讲解

    目录 官方文档 快速归纳 存取改删 1.wx存储数据到本地以及本地获取数 1.1 wx.setStorageSync(string key, any data) 存(同步) 1.2 wx.setStorage(Object object)存(异步) 1.3 wx.getStorageSync(string key)取(同步) 1.4 wx.getStorage(Object object)取(异步) 小程序如何向我们django等服务请求接口(wx.request) 官方文档 wx.setSto

  • 微信小程序之数据缓存的实例详解

    微信小程序之数据缓存的实例详解 前言: 在H5之前,缓存一般都是用cookie,但是cookie的存储空间太小.于是,H5增加了新的缓存机制,即localstorage 和 sessionstorage,具体的介绍就不在多说.在微信小程序中,数据缓存其实就和localstorage 的原理差不多,所以理解起来并不难.下面我们来一起实现一下. 效果图展示: 我们在index页面存入数字11,然后在跳转到新页面,在将缓存中的11取出渲染到当前页面.具体代码如下: index页面: <span sty

  • 微信小程序 用户数据解密详细介绍

    微信小程序 用户数据解密 官方指引图: 引导图一步一步操作 1.获取code onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 let that = this wx.login({ success: function (res) { // success let code = res.code that.setData({ code: code }) wx.getUserInfo({ success: function (res)

  • 微信小程序登录数据解密及状态维持实例详解

    本文实例讲述了微信小程序登录数据解密及状态维持.分享给大家供大家参考,具体如下: 学习过小程序的朋友应该知道,在小程序中是不支持cookie的,借助小程序中的缓存我们也可以存储一些信息,但是对于一些比较重要的信息,我们需要通过登录状态维持来保存,同时,为了安全起见,用户的敏感信息,也是需要加密在网络上传输的. 前台,service.封装了http请求,同时封装了getSession(通过code获取服务器生成的session).getUserInfo(获取用户信息).getDecryptionD

  • 微信小程序 动态绑定数据及动态事件处理

    微信小程序 动态绑定数据及动态事件处理 关键核心代码 <image class="midimage" data-Type="{{item.Type}}" data-BillCode="{{item.BillCode}}" data-src="{{item.imgurl}}" src="{{item.imgurl}}" mode="scaleToFill" bindtap="

  • 微信小程序首页数据初始化失败的解决方法

    一. 问题描述 用户首次后再次进入小程序时,我们通常需要通过获取用户openid或unionid用作唯一标示与后台进行数据交流,初始化用户信息.当我们通过第三方服务器跟微信建立请求时,微信需要用户确认是否公开信息.如图1,从console可以看到,在请求的同时,我们的首页index已经加载完成,图中初始化数据显示为空.无论我们将请求信息写在app.js的onload中或者index.js中,当我们点击确认后,请求信息才执行success方法,将第三方服务器返回的数据处理,这样的因需要用户点击而产

  • 微信小程序 本地数据读取实例

    微信小程序 本地数据读取实例 一般情况下,小程序的utils这个文件夹下,我们可以把本地的数据写进去,封装成.js文件,提供对外暴露的接口,然后读取本地数据.如果涉及到一些针对这些数据的处理方法,也可以把方法写好,封装到.js文件里面,然后需要时调用. module.exports = { mtData: mtData, searchmtdata: searchmtdata, usedraw: usedraw } var mt_data = mtData() function searchmtd

  • 微信小程序之数据双向绑定与数据操作

     微信小程序之数据双向绑定与数据操作 数据双向绑定是指js部分数据发生变化是html部分的数据也会发生变化,当然html部分数据发生变化js部分数据也会发生变化,从而使界面很方便的实现动态数据显示,一般拥有数据双向绑定的前端框架都为mvvm结构.数据双向绑定是个好东西,an1 an2 vue  也都有数据双向绑定的机制,而且基本都差不多,抄来抄去嘛!!下面以一个列表为例子来说下数据双向绑定及数据的操作. 1.把要进行数据双向绑定的属性放在page的data里,然后在html里使用{{属性名}}即

随机推荐