如何获取data中的值?如何取出,存储数据?跳转外部链接?与非本机联调?修改头部标题?动态更改样式?动态获取设备宽高?(微信小程序)

工具:微信开发者工具
1.如何获取data中的值? 使用this.data.
2.如何修改data中的值?使用 this.setData({key: value}),其中key为data中修改的数据,value为要修改的值
3.如何存储数据? 1.简单数据wx.setStorage({ key: ‘key’,data: value} 2.对象类数据wx.setStorage({ key: ‘key’,data: {}}
4.跳转外部链接?

<web-view  src=""></web-view>

5.拿到存储的值,并修改data的值 wx.getStorageSync(‘key’)

let name1 = wx.getStorageSync('name1');
console.log(name1);
  1. 动态获取设备宽高wx.getSystemInfo({ })
  2. 修改头部标题
// xxx.js 第一种 
onLoad () {
	wx.setNavigationBarTitle({
          title: '进入群认证',
	})
}
// xxx.json 第二种
{
    "navigationBarTitleText": "", // 此处修改
    "usingComponents": {}
}

例子:

/*
xxx.wxml 存放标签
xxx.wxss 存放css
xxx.js 存放js,逻辑
*/
// xxx.wxml
<view class="container">
  {{ userInfo }}
  <br/>
  {{ userInfo.name }}
  <br/>
  {{ userInfo.age }}
  <!--方法start-->
  <button bindtap="onSet">存储数据</button>
  <view style="width: {{width}}px;height:{{height}}px"></view>
</view>

// xxx.js
Page({
  data: {
  	width: 0,
  	height: 0,
    userInfo: {
      name: 'cc',
      age: 18
    },
    // 获取存储的值
    name1: wx.getStorageSync('name1') || '',
    userInfo1: wx.getStorageSync('userInfo1') || {}
  },
  onLoad () { // 加载  类似created,mounted
      wx.setNavigationBarTitle({ //修改头部标题
          title: '进入群认证',
      })
      wx.getSystemInfo({ // 动态获取设备宽高
          success: res => {
              const { windowWidth, windowHeight } = res;
              this.setData({
	              width: windowWidth,
	              height: windowHeight
	          })
           }
       })
    let userInfo = this.data.userInfo;
    console.log(userInfo);
    console.log(userInfo.name);
    console.log(userInfo.age);
    // 修改data里面的值
    this.setData({
    	userInfo: {
            name: 'mm',
            age: 20
        }
    })
  },
  // 方法
  onSet () { // 存储 数据
    wx.setStorage({
        key: 'name1',
        data: 'cc'
    })
    wx.setStorage({
        key: 'userInfo',
        data: this.data.userInfo || {}
    })
  },
  onGet () { // 获取数据
	let name1 = wx.getStorageSync('name1');
    console.log(name1);
    this.setData({
        name1: name1
    })

	wx.getStorage({
        key: 'userInfo1',
        success(res) {
            console.log('1111', res.data)
        }
    })
  },
  	onPage () { // 跳转页面
      location.href = 'http://baidu.com';
  }
})

结果:
在这里插入图片描述
5.如何查看存储的数据?点击调试器–>Stroage
在这里插入图片描述

注意点:
1.使用的时候会立刻马上跳转到页面,如果使用点击事件,要重新建立一个新页面,然后把放在.wxml中
2. 不能使用location.href跳转页面
在这里插入图片描述
3. 当连接后端的时候,1.关闭防火墙,2.下面这张图片
在这里插入图片描述
否则报错
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值