网站备案时核验单,网站备案后 换服务器,什么推广方法最有效,南昌地宝网最近开发了个oa系统#xff0c;pc端的表单使用form-create开发#xff0c;form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。移动端使用uniapp开发#xff0c;但是因为form-create移动端只支持vant#xff0c;不支持uniapp。官… 最近开发了个oa系统pc端的表单使用form-create开发form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。移动端使用uniapp开发但是因为form-create移动端只支持vant不支持uniapp。官方的说法是移动端用vant开发后通过webview的方式嵌入到uniapp。 uniapp嵌入开发好的h5页面没有问题但是h5页面需要保存表单数据和发起工作流做完这个操作后需要告知uniapp关闭webview页面并跳转uniapp相应页面。 1uniapp 的webview.vue页面
templateviewweb-view :srcfileUrl messagehandlerMessage/web-view/view
/templatescriptexport default {data() {return {fileUrl: ,}},onLoad(options) {this.fileUrl decodeURIComponent(options.fileUrl)},methods: {handlerMessage(event) {console.log(Received message:, event.detail.data);}}}
/scriptstyle/style webview页面使用message方法监听h5发送给uniapp应用的消息。
2h5推送消息至uniapp 我的h5页面基于vue3vant4vite开发。 1.首先在public目录下新建static目录接着创建js目录。下载jweixin-1.4.0.js和uni.webview.1.5.6.js文件到本地引入到js目录下。 2.在项目index.html中写入如下内容
!DOCTYPE html
html lang
headmeta charsetUTF-8link relicon href/favicon.icometa nameviewport contentwidthdevice-width, initial-scale1.0title流程表单/title
/head
body
div idapp/div
script typemodule src/src/main.ts/script
script typetext/javascript src/static/js/jweixin-1.4.0.js/script
script typetext/javascript src/static/js/uni.webview.1.5.6.js/script
scriptdocument.addEventListener(UniAppJSBridgeReady, function () {uni.getEnv(function (res) {if (res.plus) {console.log(当前环境为【5App】);} else if (res.miniprogram) {console.log(当前环境为【微信小程序】);} else if (res.h5) {console.log(当前环境为h5);}});});
/script
/body
/html3.在h5页面保存按钮点击时调用下面的方法。
//提交
async function onSubmit(formData) {let params {procdefKey: processDefKey,formData: JSON.stringify(formData)};try {loading.value trueawait apiSaveFormStartProcess(params);uni.postMessage({data: {action: startProcessCompleted}});showSuccessToast(流程发起成功);uni.navigateBack({delta: 1});} finally {loading.value false}
}
uni.postMessage推送消息到uniapp应用。由于message在后退、组件销毁、分享才会接受到消息。所以在提交完后调用 uni.navigateBack触发后退。此时webview的message方法就能接受到消息了。 3效果
