微信小程序中组件和存储以及传递数据

表单组件

input、button、checkbox-group、checkbox、radio-group、radio、textarea、picker

本地存储

微信小程序中,也有本地存储对象。

存储内容

异步存储

wx.setStorage({

key: 存储的名称,

value: 存储的内容,

success: 存储完毕之后的回调函数

})

同步存储

wx.setStorageSync(key, value);

key: 存储的名称

value: 存储的内容

demo:

wx.setStorageSync("name", {
  a: 1
})

存储结果:从控制台面板的Storage面板中查看

图片1.png

提取内容

异步提取数据

wx.getStorage({

key: 要提取的内容名称

success: 提取完毕的回调函数

回调函数有一个参数,是一个对象,提取的内容在这个参数对象上

errMsg: 提取的提示信息

data: 提取出来的数据

})

同步提取数据

wx.getStorageSync(key)

key: 要提取的内容的名称

返回值: 提取出来的数据

demo:

var wanglaowu = wx.getStorageSync("name");
console.log(wanglaowu)

输出结果:

图片2.png

其它

删除一项数据: wx.removeStorageSync(key) wx.removeStorage({key: key})

删除全部数据: wx.clearStorage() wx.clearStorageSync()

现在,在不同的页面中传递数据,有一种方式了。

URL传递数据

在跳转普通页面时,可以通过URL上挂载query部分,进行数据的传递。tabBar页面不支持此种方式。

组件跳转页面并传递数据

传递方式:

获取方式:

在目标页面的onLoad生命周期函数中有一个参数

demo:

<navigator url="/pages/second/second?a=1&b=2&c=3">跳转到第二个页面</navigator>

输出:

微信小程序中组件和存储以及传递数据_第1张图片

注:redirectTo方式可以传递数据

<navigator open-type='redirectTo' url="/pages/second/second?a=a&b=b&c=c" >跳转到第二个页面</navigator>

注:switchTab不可以使用query传递数据

图片4.png

代码跳转并传递数据

wx.navigateTo({
  url: "/pages/second/second?a=1&b=2&c=3"
})

通过全局对象传递数据

app.js文件是一个全局生命周期配置文件。它可以被任何页面所得到。

在页面.js文件中:

var app = getApp();

app对象:

微信小程序中组件和存储以及传递数据_第2张图片

可以利用它来传递数据。

例如:在页面A中,getApp并设置一个数据。再到页面B中getApp获取该数据

rpx单位

px是像素单位。是我们最常用的单位。但是px无法实现响应式。

于是微信就设计了rpx单位。

从左到右一共分成750份。

1rpx就是实际宽度的1/750。

如果说iPhone5: 整宽320px: 1rpx = 320 / 750

如果是iPhone6: 整宽375px: 1rpx = 375/ 750

微信小程序中组件和存储以及传递数据_第3张图片

微信小程序中组件和存储以及传递数据_第4张图片

以上分别是iPhone5和iPhone6中的rpx表现。

Web-View

该组件允许用户在微信小程序中,嵌入HTML5页面。

属性: src

demo:

<web-view src="https://www.baidu.com"></web-view>

警告:此时,因为没有配置业务域名,所以不允许访问。

如果是测试使用,可以点击编辑代码面板上方的详情按钮。

弹出一个面板,在该面板中找到不校验合法域名、web-view这条信息 打√即可

开放组件

该组件是一个用于获取用户信息的组件。是为了替代 原有的 wx.getUserInfo接口出现的。

原来的接口不让用了:

图片9.png

现在: 要通过open-data组件来使用

<open-data type="userNickName"></open-data>

原来通过wx.getUserInfo得到的数据

微信小程序中组件和存储以及传递数据_第5张图片

如上,获取nickName的数据要 type=“userNickName”

现在获取city的数据要 type=“userCity”

获取country的数据 要 type=“userCountry”

依次类推。

规则: type=“user” + key

使用驼峰写法。

最后

作者每周都会发布不错的文章,供大家学习,欢迎大家关注。

微信搜索【前端每日技巧】关注公众号,写作不易,希望能点赞️加收藏❤️和转发。

你可能感兴趣的:(微信小程序,前端,微信小程序,前端,小程序)