IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 如何获取data中的值?如何取出,存储数据?跳转外部链接?与非本机联调?修改头部标题?动态更改样式?动态获取设备宽高?(微信小程序) -> 正文阅读

[移动开发]如何获取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.下面这张图片
在这里插入图片描述
否则报错
在这里插入图片描述

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-10-22 21:26:57  更:2022-10-22 21:28:40 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/20 4:44:50-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码