微信小程序怎么进行数据缓存

新手学堂021

微信小程序怎么进行数据缓存,第1张

您好!很高兴能为您解答,    在微信小程序中,数据缓存其实就和localstorage 的原理差不多,所以理解起来并不难。下面我们来一起实现一下。

效果图展示:

我们在index页面存入数字11,然后在跳转到新页面,在将缓存中的11取出渲染到当前页面。具体代码如下:

index页面:

<span style="font-size:24px;">

<view class="btn-area">

<navigator url="/navigator/navigatortitle=我是navi">跳转到新的页面post情求</navigator>

<navigator url="/redirect/redirecttitle=我是red" redirect>跳转到当前页面</navigator>

</view>

</span>

<view>

<input style="border:2rpx solid red" placeholder="输入信息" bindinput="getInput" />

<button style="border:2rpx solid yellow" bindtap="saveInput">存入</button>

</view>1234567891012345678910

index的js:

//indexjs

//获取应用实例

var app = getApp()

Page({

data: {

storage:''

},

onLoad: function () {

var that = this

//获取输入值

getInput:function(e){

thissetData({

storage:edetailvalue

})

},

//存储输入值

saveInput:function(){

wxsetStorageSync('storage', thisdatastorage)

}

})

12345678910111213141516171819202122231234567891011121314151617181920212223

跳转页面:

<view>从存储中得到的数据:{{storage}}</view>11

跳转页面的js:

var app = getApp();

var that;

Page( {

data: {

storage:''

},

onLoad: function(options) {

that = this;

//获取存储信息

wxgetStorage({

key: 'storage',

success: function(res){

// success

thatsetData({

storage:resdata

})

}

})

}

})

格式调整

界面相关

分割线

标签

一、视图容器(View Container):

view 视图容器

scroll-view 可滚动视图容器

swiper 可滑动的视图容器

二、基础内容(Basic Content)

icon 图标

text 文字

progress 进度条

三、表单组件(Form)

button 按钮

form 表单

input 输入框

checkbox 多项选择器

radio 单项选择器

picker 列表选择器

slider 滑动选择器

switch 开关选择器

label 标签

四、操作反馈组件(Interaction)

action-sheet 上拉菜单

modal 模态弹窗

progress 进度条

toast 短通知

五、导航(Navigation)

navigator 应用内跳转

六、多媒体(Media)

audio 音频

image

video 视频

七、地图(Map)

map 地图

八、画布(Canvas)

canvas 画布

1页面url传参

2data-属性传参

3缓存传参

4全局变量传参

1页面url传参

navigator标签里面设置url后面用?加上key=value键值对模式传参,可以绑定动态数据

2data-属性传参

通过data-属性设置产生,在通过url传递参数,其本质还是通过url传参

3,缓存传参

小程序缓存分为异步和同步,一般使用同步;方法类似于h5的本地存储;

4全局变量

小程序开发工具--详情--本地设置--启用自定义处理命令

用来执行脚本

为了提升用户操作的流畅性,同时让用户在微信内拥有一致的操作体验,“右滑手势返回”将成为基础配置,即所有小程序内都可以从屏幕左侧边缘向右滑动返回上一个界面。 在即将发布的705客户端版本中,页面配置中的 disableSwipeBack 属性将不再生效,请开发者及时调整。

背景图为fixed, top随滚动而改变 。 重点就是 onPageScroll

还可使用 scroll-view 的下拉刷新,且可以自定义样式。

用wxs监听滚动事件,设置样式。

不在以下 request 合法域名列表中,请参考文档

解决方案:在详情--本地设置中勾选“不校验合法域名。。。”

mode widthFix 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变。应避免使用widthFix,尽量指定宽高。

导航栏高度

iOS 44px (4+32+8)

android 48px (8+32+8)

胶囊与状态栏间距(应该计算得出)ios 4px,Android 8px,与导航栏底边距8px(只能取固定值)。

胶囊高度 32px

状态栏高度,刘海屏通常为44px

setData 是小程序开发中使用最频繁、也是最容易引发性能问题的接口。

因此,开发者在调用 setData 时要注意:

数组索引不能直接用变量,解决方案:

取原来的值:

在onUnload中取消timer

微信小程序中,可以用 hover-class 属性来指定元素的点击态效果。但是在在使用中要注意,大部分组件是不支持该属性的。

目前支持 hover-class 属性的组件有三个:view、button、navigator。

不支持 hover-class 属性的组件,同时也不支持 hover-stop-propagation、hover-start-time、hover-stay-time 这三个属性。

如果background写在wxml中,那么background-size也要写在style中,如果写在wxss中不会生效。

获取系统屏幕边框的安全距离:

safe-area-inset-top

safe-area-inset-right

safe-area-inset-bottom

safe-area-inset-left

ios11:constant(safe-area-inset-bottom)

ios112:env(safe-area-inset-bottom)

scroll-view的子元素最好包一层,不然宽度可能不起作用。

当小程序使用页面进行滚动时,可以给遮罩设置catchtouchmove属性来禁止页面滚动

写url的时候,后面的 wxml 是不需要写的,也就是说 appjson 中是怎么注册的page名,写的时候也就怎么写,不要自作主张加上扩展名,小程序会自动找相应的 wxml 文件的。