目录
01.request 请求
先.. 实验 发现res.data总是_ G 或者undefined
uni.request({
//TODO 随便找个网址 总之request请求
url:'https://tcc.taobao.com/cc/json/mobile_tel_segment.htm',
header: {
'Access-Control-Allow-Origin':'*',
},
data:{
//TODO 字段要改 也不是tel
tel:this.username,
psw:this.password,
},
//TODO 应该是post method:'POST',
method:'GET',
success:(res)=>{
console.log("01",res);
console.log("02",res.data);
console.log("03",JSON.stringify(res.data));
console.log("04",JSON.parse(JSON.stringify(res.data)));
console.log("05",JSON.parse(JSON.stringify(res.data))[0]);
uni.showToast({
icon: 'none',
title: '用户名与密码不符'
});
},
fail:()=>{
uni.showToast({
icon:'none',
title:'网络异常 稍后重试'
})
}
})
然后 为什么呢 因为返回的只是个【字符串】
仔细看01 都是粘在一起的 因此证明了JSON为什么要先stringify再parse ，因为要先把这个解析成JSON，再把JSON换成JavaScript对象。(有的时候连用)
可以看到 直接stringify的话(console有) 还是不行 笨比给解析到一起了
(元格式)
但是 name没有用引号引起来，使用JSON.parse所有浏览器中均抛异常，解析失败。stringify显然也是不行滴
又看了附录，这样解析呢，但是，毕竟前面还有一个那么长__GetZoneResult_ 试试截取 总可以了吧
截取方法信手拈来: 一定要实际去用不然忘记的很快 (单参数直接silce好了QUQ)
(上图) 可以看！到！这时终于解析出来了。 不再是。。。。黑色的头像。变成了Object对象
let data=res.data.slice(18);
console.log("03",(data));
let json = eval('(' + data + ')');
console.log("04",json);
可以了，这样直接json.catName 就可以打印出 中国移动了！ 可以用了 那么我们精简一下就是
let json=eval('('+res.data.slice(18) +')');
好了, 慢慢进阶探索吧~ (这个数据特殊而已,..... 没用引号 不然可直接JSON.parse)
发现一个坑 这个时候用+ 是不行的 因为它不是字符串 不能拼接 逗号还可以 +的话只能
逗号是有空格的 + 是站在一起
02.(期望)cookies / 本地存储
https://www.cnblogs.com/wo1ow1ow1/p/11131403.html
代码见附录2 . uni 的存储方法其实还好 分为同步和异步
(1) 异步的
uni.setStorage({
key:'name',
data:{
username:_self.username,
passwd:_self.password
},
success() {
console.log('1 成功了')
},
fail() {
console.log('缓存失败了')
}
});
大同小异 都是 给到key算是id标识 然后等待success( ) 等待人的返回值. 还可以 uni.getStorageInfo 没啥用
uni.getStorage({
key: 'name',
success: function (res) { // 不再神秘 这里就是 success: (res)=> {
console.log('3 name 异步获取 = ' , res.data);
}
});
同步放try catch 里 都要加上sync(方法名) (或者 )uni.setStorageSync('age', '18');
try{
const value = uni.getStorageSync('name');
if(value){
console.log("4 const value = uni.getStorageSync('name') 同步获取 = " ,value)
}
}catch(e){
console.log("4 同步获取失败");
//TODO handle the exception
};
这里还是 需要注意如果是对象，别用加号 不然就会object
可以看到存储对象完全可行，但是！！ 异步对象变化了。获取不到this，下面代码可以看到<script>下面直接给了 把this存到外面的_self 这样才能拿到password.
查找了一下：
该success方法指向闭包，所以this属于闭包，由此在success回调函数里是不能直接使用this.title的。
解决办法就是在闭包之外先把this赋值给另一个变量
或者箭头函数 (没有自己的 this 去全局作用域找(函数 ) k可以 很nice
可以了 我用上面的方法已经做到了用户密码存储 就是不太标准8
onLoad(){
//从本地缓存中 异步获取指定 key 对应的内容
let _self=this;
uni.getStorage({
key: 'userInfo',
success: (res)=> {
console.log('之前登陆了.. ' , res.data);
_self.username=res.data.username;
_self.password=res.data.passwd;
}
});
},
那么去看看vue怎么写?
03.登录状态/ 全局存储
啊 大失败 不知道为什么我的项目总是报 not a function
垃圾Hbulider！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
我改着的都是下面app的 自动给我运行上面app的（两个界面一样 但是仓库不一样）
这里字太小了 根本没发现
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊！！！！！！！！！！！！！！！！！！！！！
怪不得什么都无效！！！！！！！！！！！！！！！！！！！！！！！！！！！！！气死了 实践还是留着后面再。。。
main.js里贝 $的开头为了防止污染
还是先复制一下。。。
看看掘金... https://juejin.im/post/6844903960323555341
(1 ) 理论上可以写个...
uni-app 项目根目录下创建 common 目录，然后在 common 目录下新建 base.js 用于定义公用的方法。
const websiteUrl = 'http://www.javanx.cn';
export default { websiteUrl }
引用 import helper from '/common/base.js';
维护起来比较方便，但是缺点就是每次都需要引入。
(2) 直接扩展到 Vue.prototype 上，每个 Vue 对象都会“继承”下来。
注意这种方式只支持多个vue页面或多个nvue页面之间公用，vue和nvue之间不公用。
示例如下： 在 main.js 中挂载属性/方法
Vue.prototype.websiteUrl = 'http://www.javanx.cn'; Vue.prototype.now = Date.now || function () { return new Date().getTime(); }; 然后在 pages/index/index.vue 中调用onLoad(){
console.log('now:' + this.now());
}, 只需要在 main.js 中定义好即可在每个页面中直接调用
1、每个页面中不要在出现重复的属性或方法名。
2、建议在 Vue.prototype 上挂载的属性或方法，可以加一个统一的前缀。比如 $url、global_url 这样，在阅读代码时也容易与当前页面的内容区分开。
(3) 小程序中可以在 App 上声明全局变量，但在 Vue 中没有，uni-app 中在 App.vue 可以定义在 globalData 属性上，也可以使用 API 读写这个值。
这个方式支持vue和nvue共享数据。是目前nvue和vue共享数据的一种比较好的方式。 App.vue
<script>
export default {
globalData: {
text: 'text'
},
onShow: function() {
console.log('App Show')
},
}
</script>
js中操作globalData的方式如下：
赋值：getApp().globalData.text = 'test'
取值：console.log(getApp().globalData.text)
如果需要把globalData的数据绑定到页面上，可在页面的onshow声明周期里进行变量重赋值。HBuilderX 2.0.3起，nvue页面在uni-app编译模式下，也支持onshow。(????? )
(4)Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
注意这种方式只支持多个vue页面或多个nvue页面之间公用，vue和nvue之间不公用。
在 uni-app 项目根目录下新建 store 目录，在 store 目录下创建 index.js 定义状态值
const store = new Vuex.Store({
state: {
login: false,
token: '',
avatarUrl: '',
userName: ''
},
mutations: {
login(state, provider) {
console.log(state)
console.log(provider)
state.login = true;
state.token = provider.token;
state.userName = provider.userName;
state.avatarUrl = provider.avatarUrl;
},
logout(state) {
state.login = false;
state.token = '';
state.userName = '';
state.avatarUrl = '';
}
}
}) 然后，需要在 main.js 挂载 Vuex
import store from './store'
Vue.prototype.$store = store
<script>
import {
mapState,
mapMutations
} from 'vuex';
export default {
computed: {
...mapState(['avatarUrl', 'login', 'userName'])
},
methods: {
...mapMutations(['logout'])
}
}
</script> 最后，在 pages/index/index.vue 使用
示例操作步骤： 未登录时，提示去登录。跳转至登录页后，点击“登录”获取用户信息，同步更新状态后，返回到个人中心即可看到信息同步的结果。
注意：对比前面的方式，该方式更加适合处理全局的并且值会发生变化的情况。
附录: 字符串转json三种方法
1，eval方式
function strToJson(str){
var json = eval('(' + str + ')');
return json;
}记得别忘了str两旁的小括号。
2，new Function形式
Function strToJson(str){
var json = (new Function("return " + str))();
return json;
}
3，使用全局的JSON对象
function strToJson(str){
return JSON.parse(str);
}
目前 IE8(S)/Firefox3.5+/Chrome4/Safari4/Opera10 已实现了该方法，以下是部分资料：<a href="http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx" target="_blank">http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx</a> <a href="https://developer.mozilla.org/en/Using_JSON_in_Firefox" target="_blank">https://developer.mozilla.org/en/Using_JSON_in_Firefox</a> <br>使用JSON.parse需严格遵守JSON规范，如属性都需用引号引起来，如下
var str = '{name:"jack"}';
var obj = JSON.parse(str); // --> parse error
name没有用引号引起来，使用JSON.parse所有浏览器中均抛异常，解析失败。而前两种方式则没问题。 <br>另见：<a href="http://www.jb51.net/article/25988.htm" target="_blank">Chrome中JSON.parse的特殊实现</a>
原文地址：https://www.cnblogs.com/ziyoublog/p/9088878.html。
附录2
<script>
var _self;
export default {
data() {
return {
}
},
methods: {
},
onLoad() {
// 数据缓存 异步
_self = this;
uni.setStorage({
key:'name',
data:'hcoder',
success() {
console.log('成功了')
},
fail() {
console.log('缓存失败了')
}
});
//数据缓存 同步 一定要用try catch 包裹
try{
uni.setStorageSync('age', '18');
}catch(e){
//TODO handle the exception
};
//从本地缓存中 异步获取指定 key 对应的内容
uni.getStorage({
key: 'name',
success: function (res) {
console.log('name 异步获取 = ' + res.data);
}
});
// 同步方式获取数据， 阻塞形式，如果做完了的话代码才会向下进行
try{
const value = uni.getStorageSync('name');
if(value){
console.log("const value = uni.getStorageSync('name') 同步获取 = " + value)
}
}catch(e){
//TODO handle the exception
};
// 异步获取当前 storage 的相关信息
uni.getStorageInfo({
success: function (res) {
// keys: 当前 storage 中所有的 key
// currentSize: 当前占用的空间大小, 单位：kb current:当前的
// limitSize: 限制的空间大小, 单位：kb limit:限制
console.log('异步获取' + res.keys);
console.log(res.currentSize);
console.log(res.limitSize);
}
});
// 同步获取 当前 storage 的相关信息
try {
const res = uni.getStorageInfoSync();
console.log('同步获取' + res.keys);
console.log(res.currentSize);
console.log(res.limitSize);
} catch (e) {
// error
};
// 从本地缓存中 异步移除指定 key
// uni.removeStorage({
// key: 'name',
// success: function (res) {
// console.log('删除成功');
// }
// });
// 从本地缓存中 同步移除指定 key
// try {
// uni.removeStorageSync('name');
// } catch (e) {
// // error
// }
// 异步清理本地数据缓存
// uni.clearStorage();
//
//
// // 同步清理本地数据缓存
// try {
// uni.clearStorageSync();
// } catch (e) {
// // error
// }
}
}
</script>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
