apicloud結合vue實現資料實時重新整理使用工具類
阿新 • • 發佈:2019-01-25
1.在入口頁 index.html
apiready = function(){
var dataDefault = {
user:{
nickname:'胡輝',
age:'18',
sex:'男',
avatar:'../../image/photo.png'
},
setting:{
func:'智慧翻譯',
voice:'小燕-女青、中英、普通話' ,
type:'普通話'
},
chat:{
},
}
var datastr = api.getPrefs({
sync:true,
key: 'data'
});
console.log(datastr)
if (datastr==''){
api.setPrefs({
key: 'data',
value: JSON.stringify(dataDefault)
},function (ret,err){
console.log('初始化完成')
});
}
api.openSlidLayout({
type: 'left',
fixedPane: {
name: 'sectting',
url: 'html/setting/setting_win.html'
},
slidPane: {
name: 'mian',
url: 'html/main/main_win.html'
}
});
}
2.在setting_frm.html
2.1匯入 common.js
<script type="text/javascript" src="../../script/common.js"></script>
var data;
var app;
apiready = function(){
//獲取本地資料
data = $tools.getData();
console.log('setting頁面得到的data:' + JSON.stringify(data));
app = new Vue({
el: '#app',
data: data
});
//新增data refresh事件監聽
api.addEventListener({
name: 'avatarsave'
}, function(ret, err) {
console.log('頭像已經儲存好了:' + JSON.stringify(ret));
$tools.saveData('user',{
avatar: ret.value.avatarurl
});
});
};
//儲存資料
//選擇功能
function setFunc(){
api.actionSheet({
title: '選擇功能',
cancelTitle: '取消按鈕',
buttons: ['智慧翻譯','智慧聊天']
}, function(ret, err){
if( ret ){
if (ret.buttonIndex==1) {
$tools.saveData('setting',{
func:'智慧翻譯'
})
}else if (ret.buttonIndex==2) {
$tools.saveData('setting',{
func:'智慧聊天'
})
}
}else{
alert( JSON.stringify( err ) );
}
});
}
//選擇功能
function setVoice(){
api.actionSheet({
title: '選擇發音人',
cancelTitle: '取消按鈕',
buttons: ['小燕','小明']
}, function(ret, err){
if( ret ){
if (ret.buttonIndex==1) {
$tools.saveData('setting',{
voice:'小燕'
})
}else if (ret.buttonIndex==2) {
$tools.saveData('setting',{
voice:'小明'
})
}
}else{
alert( JSON.stringify( err ) );
}
});
}
//選擇識別語言
function setType(){
api.actionSheet({
title: '選擇識別語言',
cancelTitle: '取消按鈕',
buttons: ['普通話','粵語']
}, function(ret, err){
if( ret ){
if (ret.buttonIndex==1) {
$tools.saveData('setting',{
type:'普通話'
})
}else if (ret.buttonIndex==2) {
$tools.saveData('setting',{
type:'粵語'
})
}
}else{
alert( JSON.stringify( err ) );
}
});
}
//喚醒開關
function setWakeup(){
$tools.saveData('setting',{
wakeup:!data.setting.wakeup
})
}
function openUser(){
api.openWin({
name: 'user',
url: '../user/user_win.html'
});
}
3在user_setting.html
var app;
var data;
apiready = function(){
data = $tools.getData();
console.log('user頁面得到的data:' + JSON.stringify(data));
app = new Vue({
el: '#app',
data: data
});
//新增data refresh事件監聽
$tools.dataRefresh(app);
//新增一個頭像儲存完成的訊息監聽
api.addEventListener({
name: 'avatarsave'
}, function(ret, err) {
console.log('頭像已經儲存好了:' + JSON.stringify(ret));
$tools.saveData('user',{
avatar: ret.value.avatarurl
});
});
}
function setAge() {
api.prompt({
title:'年齡',
text:$api.html($api.dom('#age')),
type:'number',
buttons: ['確定', '取消']
}, function(ret, err){
if( ret.buttonIndex==1 )
$tools.saveData('user',{
age: ret.text
});
}else if(ret.buttonIndex==2){
alert( JSON.stringify( ret ) );
}
});
}
function setSex(){
api.actionSheet({
title: '設定性別',
cancelTitle: '取消按鈕',
buttons: ['男','女']
}, function(ret, err){
if( ret ){
if (ret.buttonIndex==1) {
$tools.saveData('user',{
sex: '男'
});
}else if (ret.buttonIndex==2) {
$tools.saveData('user',{
sex: '女'
});
}
}else{
alert( JSON.stringify( err ) );
}
});
}
function setName(){
api.prompt({
title: '修改',
msg: '請修改暱稱',
text: $api.html($api.dom('#nickname')),
type: 'text',
buttons: ['確定', '取消']
}, function(ret, err){
if( ret ){
console.log(JSON.stringify( ret ));
if (ret.buttonIndex==1) {
$tools.saveData('user',{
nickname: ret.text
});
}
}else{
alert( JSON.stringify( err ) );
}
});
}
function setAvatar(){
api.actionSheet({
title: '更換頭像',
cancelTitle: '取消',
buttons: ['開啟相簿','開啟相機']
}, function(ret, err){
if( ret ){
var sourcetype = ''
if (ret.buttonIndex==1) {
sourcetype = 'library';
}else if (ret.buttonIndex==2) {
sourcetype = 'camera';
}else {
return;
}
api.getPicture({
sourceType: sourcetype,
encodingType: 'jpg',
mediaValue: 'pic',
destinationType: 'url',
allowEdit: true,
quality: 100,
saveToPhotoAlbum: false
}, function(ret, err){
if(ret){
console.log(JSON.stringify(ret));
if (api.systemType=='ios') {
$tools.saveData('user',{
avatar: ret.data
});
}else{
api.openFrame({
name: 'avatar',
url: './avatar_frm.html',
rect: {
x: 0,
y: 0,
w: api.winWidth,
h: api.winHeight
},
pageParam: {
imgurl: ret.data
}
});
}
}else{
alert(JSON.stringify(err));
}
});
}else{
alert( JSON.stringify( err ) );
}
});
}