Skip to main content

JS脚本

H5DS编辑器支持自定义脚本。页面初始化的时候会执行代码

jsScript.png

可以通过全局变量core调用内置方法：

全局参数 core[paramName]

@param {object} appData app数据
@param {object} pageData 页面数据
@param {function} toPage 跳转页面，eg: toPage(n:number)
@param {function} prevPage 跳转上一页，eg: prevPage()
@param {function} nextPage 跳转下一页，eg: nextPage()
@param {function} renderStart 页面渲染开始的回调，eg: renderStart((pageData) => {}) // constructor 执行一次
@param {function} renderBefore 页面渲染之前的回调，eg: renderBefore((pageData) => {}) // render 的时候执行
@param {function} renderAfter 页面渲染之后的回调，eg: renderAfter((pageData) => {}) // componentDidMount 的时候执行
@param {function} renderUnmount 页面卸载前的回调，eg: renderUnmount((pageData) => {}) // componentWillUmmount 的时候执行
@param {function} updatePage 更新当前页面视图，eg: updatePage() 
@param {function} updatePopups 更新弹窗页面视图，eg: updatePopups()
@param {function} updateFixeds 更新浮动层的视图，eg: updateFixeds()
@param {function} pauseSound 暂停音频， eg: pauseSound(eventId);
@param {function} playSound 播放音频， eg: playSound(eventId);
@param {function} updateLayerByKeyid: this.updateLayerByKeyid, // 通过keyid更新对应的图层，强制更新
@param {function} updateLayerByIds: this.updateLayerByIds, // 通过ids更新对应的图层，强制更新
@param {function} updateLayerByClass: this.updateLayerByClass, // 通过class更新对应的图层，强制更新
@param {function} getLayerDataById 通过id获取图层数据，eg: getLayerDataById('id') @return [layerData<Object>]
@param {function} getLayerDataByClassName 通过className获取图层数据，eg: getLayerDataByClassName('className')  @return [layerData<Object>];
@param {function} setWeiXinShare 设置微信分享参数，eg: setWeiXinShare({ title, imgUrl, desc })
@param {function} setFrameAnimate 设置帧动画 eg: setFrameAnimate(frame, $elements);

data数据说明：appData, pageData

DEMO案例：​

比如要实现“过3秒后修改文本”插件的文字

// 页面渲染之后执行：
core.renderAfter(function(pageData) {
  // 3秒后修改文字
  setTimeout(function() {
    pageData.layers[0].data.text = '文字改变了~';
    core.updatePage(); // 更新当前视图
  }, 3000)
})

// 关于设置帧动画

// 设置帧动画之前需要先设置css3动画暂停
document.querySelector('.element-animate').style.animationPlayState = 'paused';

// 监听帧动画触发的事件
window.pubSubEditor.subscribe('h5ds.fps.frame', ({ progress, frame, maxFrame}) => {
  // 设置动画，该方法特殊情况下会用于浮动层中
  core.setFrameAnimate(frame, $('.element-animate'));
});