Dclound + vue开发 Hybrid APP注意事项

1.vue实例放在 plusready 函数内执行回调函数

vue实例如果用到Dclound 内置api时候需要放在 plusready 函数内执行回调函数，在iOS上，plus ready只是为了向下兼容，因为在webview最开始，plus就是生效的，但是在安卓手机webview最开始，plus并不一定就是生效的。苹果和安卓在配合vue使用时候可能由于Dclound和vue生命周期先后渲染顺序不同，引发莫名错误，所以应该采用如下方法解决例如：

定义plusReady.js

/**
* plusReady 事件
* @param callack
*/
export function plusReady (callack) {
if (window.plus) {
callack()
} else {
document.addEventListener('plusready', callack, false)
}
}
export default {plusReady}

定义webview.js
const webview = {}
webview.close = function (id) {
evt.plusReady(() => {
var view
if (id) {
view = window.plus.webview.getWebviewById(id)
} else {
view = window.plus.webview.currentWebview()
}
window.plus.webview.close(view)
})
}
export default webview

vue页面A
import webview from 'xxxxx'
mounted: {
webview.close('id')
}

所以最好自己封装好webview模块方法，之后在vue实例内使用，或者在实例内如下方法：

import evt from '../xx/xx/xx/plusReady'
mounted () {
evt.plusReady(() => {
var view
if (id) {
view = window.plus.webview.getWebviewById(id)
} else {
view = window.plus.webview.currentWebview()
}
// var ws= window.plus.webview.currentWebview();
window.plus.webview.close(view)
})
}

2.vue多页面开发Dclound webview页传值

传值有两种方法

第一种采用Dclound内webview创建时候传值，只能传字符串

页面A
window.plus.webview.create('newslist.html', 'B', {}, {val: val.name, vid: val.id})// 创建B页面
页面B
var view =  window.plus.webview.getWebviewById('B')
window.plus.webview.show(view)
this.id = view.vid
this.val = view.val

第二种采用事件广播传值

//所需方法
// A页面打开B页面，B处理之后把数据传回给A
webview.childsendevent = function (name, data) {
evt.plusReady(() => {
var wvB = window.plus.webview.currentWebview()
var wvA = wvB.opener()
wvA.evalJS(`document.dispatchEvent(new CustomEvent('${name}', {
detail:JSON.parse('${JSON.stringify(data)}'),
bubbles: true,
cancelable: true
}));`)
wvB.close()
})
}
//监听
webview.parentgetevent = function (name, fun) {
evt.plusReady(() => {
document.addEventListener(name, fun)
})
}

页面A
mounted () {
webview.parentgetevent('事件名', this.getshijian)
}
destroyed () {
//如果需要卸载事件
webview.removeparentevent('事件名', this.getshijian)
}
methods: {
getshijian (e) {
console.log(e.detail.obj) B传的value值
}
}
页面B
webview.childsendevent('事件名', {obj: value})

3.手机返回键

如果有用到vue嵌套路由，Dlound的手机返回键监听需要根据自己页面逻辑重写，切需要在嵌套路由的单页面入口文件js内处理，

let app = r => require.ensure([], () => r(require('./app')), 'app')
let forget = r => require.ensure([], () => r(require('./forget')), 'forget')
let sure = r => require.ensure([], () => r(require('./sure')), 'sure')
const routes = [
{
path: '/',
component: app,
children: [
{
path: '/forget',
component: forget,
children: [
{
path: 'sure',
component: sure
}
]
}
]
}
]
import evt from 'xxxxx/plusReady'
var first = null
evt.plusReady(() => {
var webview = window.plus.webview.currentWebview()
window.plus.key.addEventListener('backbutton', function () {
let href = window.location.href
var wvs = window.plus.webview.all()
webview.canBack(function (e) {
if (href.indexOf('forget/sure') > -1) {
router.push('/forget')
} else if (href.indexOf('/forget') > -1) {
router.push('/')
} else if (webview.id === 'login.html') {
if (wvs.length <= 1) {
if (!first) {
first = new Date().getTime()
window.plus.nativeUI.toast('再按一次退出应用')
setTimeout(function () {
first = null
}, 1000)
} else {
if (new Date().getTime() - first < 1000) {
window.plus.runtime.quit()
}
}
} else {
webview.close()
}
}
})
})
})

4.三方分享三方登陆

注意微信分享略缩图需小于35kb

新浪微博分享需要内容+链接的字符串形式，

三方登陆，大同小异看文档

import evt from '@config/H5Plus/plusReady'
let sharebox = {}
export default {
data () {
return {
contentmsg: {
wbcont: '',
cont: '',
href: '',
title: '',
img: ''
}
}
},
mounted () {
this.init()
},
methods: {
init () {
evt.plusReady(() => {
window.plus.share.getServices(function (s) {
for (var i in s) {
var t = s[i]
sharebox[t.id] = t
}
}, function (e) {
console('获取分享服务列表失败：' + e.message)
})
})
},
async initstart () {
try {
let res = await imagetextshow(this.id)
if (res.data.Error) {
Toast({
message: res.data.Msg,
position: 'middle',
duration: 2000
})
} else {
console.log(JSON.stringify(res))
this.contentmsg.cont = res.data.description
this.contentmsg.title = res.data.title
this.contentmsg.href = res.data.titleurl
this.contentmsg.img = res.data.suolue_thumb
this.contentmsg.wbcont = res.data.title + res.data.titleurl//新浪微博分享需要内容+链接
}
} catch (e) {
}
},

shareHref () {
console.log(111)
let _this = this
var shareBts = []
// 更新分享列表
var ss = sharebox['weixin']
ss && ss.nativeClient && (shareBts.push({title: '微信朋友圈', s: ss, x: 'WXSceneTimeline'}),
shareBts.push({title: '微信好友', s: ss, x: 'WXSceneSession'}))
//        ss = sharebox['sinaweibo']
//        ss && shareBts.push({title: '新浪微博', s: ss})
// ss = sharebox['tencentweibo']
// ss && shareBts.push({title: '腾讯微博', s: ss})
// ss = sharebox['qq']
// ss && ss.nativeClient && shareBts.push({title: 'QQ', s: ss})
// 弹出分享列表
if (shareBts.length > 0) {
window.plus.nativeUI.actionSheet({cancel: '取消', buttons: shareBts}, function (e) {
if (e.index > 0) {
console.log(e.index - 1)
if (e.index - 1 === 2) {
_this.shareAction(shareBts[e.index - 1], false)
} else {
_this.shareAction(shareBts[e.index - 1], true)
}
}
})
} else {
window.plus.nativeUI.alert('当前环境无法支持分享链接操作!')
}
},
/**
* 分享操作
* @param {JSON} sb 分享操作对象s.s为分享通道对象(plus.share.ShareService)
* @param {Boolean} bh 是否分享链接
*/
shareAction (sb, bh) {
console.log('分享操作：')
if (!sb || !sb.s) {
console.log('无效的分享服务！')
return
}
var msg = {content: this.contentmsg.cont + this.contentmsg.href, extra: {scene: sb.x}}
if (bh) {
//其他分享
msg.href = this.contentmsg.href
msg.title = this.contentmsg.title
msg.content = this.contentmsg.cont
msg.thumbs = [this.contentmsg.img]
msg.pictures = [this.contentmsg.img]
} else {
//微博分享
msg.pictures = [this.contentmsg.img]
}
// 发送分享
if (sb.s.authenticated) {
console.log('---已授权---')
this.shareMessage(msg, sb.s)
} else {
console.log('---未授权---')
sb.s.authorize(function () {
this.shareMessage(msg, sb.s)
}, function (e) {
Toast({
message: '认证授权失败',
iconClass: 'iconfont icon-error'
})
console.log('认证授权失败：' + e.code + ' - ' + e.message)
})
}
},
/**
* 发送分享消息
* @param {JSON} msg
* @param {plus.share.ShareService} s
*/
shareMessage (msg, s) {
console.log(JSON.stringify(msg))
s.send(msg, function () {
Toast({
message: '分享成功',
iconClass: 'iconfont icon-error'
})
console.log('分享到"' + s.description + '"成功！')
}, function (e) {
Toast({
message: '分享失败',
iconClass: 'iconfont icon-error'
})
console.log('分享到"' + s.description + '"失败: ' + JSON.stringify(e))
})
}
}
}
</script>

5.系统状态栏

ios6.0以上，以及部分安卓可以自己设置样式，且在一个webview页设置成功默认所有页面同样生效

evt.plusReady(() => {
window.plus.navigator.setStatusBarStyle('UIStatusBarStyleBlackOpaque')//文字样式
window.plus.navigator.setStatusBarBackground('#1c1e25')//背景样式
})

也可以在manifest.json配置

"distribute": {
"apple": {
"UIStatusBarStyle":"设置状态栏的样式，可取值UIStatusBarStyleBlackTranslucent/UIStatusBarStyleDefault/UIStatusBarStyleBlackOpaque",
"StatusBarBackground":"设置状态栏的背景颜色，iOS7以上系统有效，支持#RRGGBB格式"
}
}

6.缓存

前台手动存cookie存储不上，无论采用js原生方法，还是webview模块内方法都存储失败，有需求尽量使用storage模块内置方法，注意一样放在evt.plusReady()回调内使用，无论是强制退出还是返回键退出只要不清除缓存，Storage永远保存在app内，可以记录登陆状态等，后台接口返回时候如果带cookie是可以存在app中。供后台自己使用，但是只要强制退出app时，cookie会失效

7.打包发布

如果有用到微信分享，登陆等，注意安卓的包名一定要和微信开发平台内的包名一致，否则安卓的微信分享，微信登陆将失败