怎么掌握微信小程序的取值、传值、数据存储

小程序界面设定如下

父级页面：A界面

子级页面：B界面

异级页面：C界面

?

一.本页面取值（A界面→A界面）

a.例如：input输入文字获取到value（键盘输入时触发）

wxml：

<input type='text' name="userName" maxlength="11" bindinput="userPhoneInput" ></input>

js:

data: {
    userPhone: '',},//手机号输入框事件键盘输入时触发(文字提醒)
  userPhoneInput: function (e) {
    this.setData({
      userPhone: e.detail.value
    })
  },0); line-height: 1.5 !important;">//接口取值格式
  onShow: function () {
    .....
    data:{
        UserPhoneNum:that.data.userPhone,.....
  },

b.例如：input不输入文字获取到全部的value（键盘不输入时触发）

wxml：

按钮点击事件
  formSubmit: var companyname = e.detail.value.companyname;
    var openbank = e.detail.value.openbank;
    根据name取input的value
    wx.request({
      url: aaaaaa,data: {
        name: companyname,bankName: openbank,header: {
        'content-type': 'application/json',success: function (res) {

      },fail: function () {

      }
    })
  }

二.异页面传值取值（A界面→B界面，A界面→C界面）

a.url传值

用 navigator标签或 wx.navigator传值，A界面向B界面传值；（不懂的自行安利小程序api和组件）

wxml:

// navigator标签传值
navigator url="/page/index/index?id=1432&name=qima&password=hj1234" >传值navigator>

//wx.navigator传值
wx.navigateTo({
      url: '/page/index/index?id=' + id +'&username='+ username+'&password='+ password
})

下一个页面取值方法：

data: {
    id : "",name : "",password : "",onLoad: function (options) {
    var id = options.id;
    var name = options.name;
    var password = options.password;
    this.setData({
      id:id,name:name,password:password,})
},255);'>一般小程序能不用接口解决的就不要用到接口呈现数据，可以用URL传值，到下一个页面取值，然后呈现到页面即可；

b.数据存储
我们会用到小程序的api,通过调用微信提供的方法：wx.setStorage、wx.setStorageSync、wx.getStorage、wx.getStorageSync、wx.clearStorage、wx.clearStorageSync、实现对数据本地缓存、获取、清除。
js缓存:
我们获取接口传回的数据，id,code之类的，我们做全局储存，命名一个key和内容value；


wx.request({
        url: aaaaa,data: {
          UserPhoneNum: '86//' + that.data.userPhone,Password: that.data.passWd,IP: that.data.IP,header: {
          'content-type': 'application/json',255); line-height: 1.5 !important;">function (res) {
          console.log(res.data),0); line-height: 1.5 !important;">存储格式 wx.setStorageSync('key命名',value内容);
          wx.setStorageSync('salemanId',res.data.salemanId);
          wx.setStorageSync('salemanLevel',res.data.salemanLevel);
          if (res.data.state == 200){
            
          }else{
           
          }
        },})


js获取：
根据key获取到数据，缓存到本地或上传到接口；
js清除：

从本地缓存中同步移除指定 key。这里具体使用同步或是异步需要根据你存储时的方法，或是同步清理本地数据缓存；
查看自己缓存数据地点：（如图）


c.全局App对象
在我们的app.js文件里面，我们需要写好我们需要全局使用的数据；
我们需要给它赋值，赋值代码如下：

在我们需要取值的地方引用全局的app.js,然后取值：

三.总结

小程序了解到这些传值取值过程，接通接口，呈现数据就快多了，还有哪些可以传值取值的方法，欢迎大家留言哦，交流才能让人进步，有什么错误的地方也欢迎大家指正，我将进行更改，觉得博主写的还可以的，欢迎点个关注，以后有空常来我的博客逛逛，虽然可能写的东西不是很高级，但是对于初级的人来说，还是能帮助到很多东西的，我的博文能帮助到大家我就很开心了，谢谢您百忙之中的观看，一起加油进步，哇哈哈哈
?
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!