普通香草JS + CapacitorJS
[英]Plain Vanilla JS + CapacitorJS
问题描述
I'm a web developer and new to apps so excuse my ignorance and apologies if this is a stupid question.
我是 web 开发人员和应用程序新手，如果这是一个愚蠢的问题，请原谅我的无知和道歉。
I've setup a blank capacitorjs project, got all my emulators working (Android and iOS/Xcode) etc and now I cannot get the core plugins to work inside index.html.我已经设置了一个空白的电容器项目，让我的所有模拟器都工作（Android 和 iOS/Xcode）等，现在我无法让核心插件在 index.html 中工作。
Also when I include a locally hosted jQuery file in index.html I get localhost:// errors.此外，当我在 index.html 中包含本地托管的 jQuery 文件时，我得到 localhost:// 错误。 Basically, not found.. for everything.基本上，没有找到.. 一切。 When I link to the CDN it works当我链接到 CDN 时，它可以工作
My objective is to get my project to a blank slate where the index.html can make capacitor api calls eg alert(device info) etc. Any ideas where I am going wrong?我的目标是让我的项目进入空白状态，其中 index.html 可以使电容器 api 调用例如警报（设备信息）等。有什么想法我哪里出错了吗？
Index.html:索引.html:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="capacitor.js"></script> <head></head> <body> <button id="button" style="width:500px; height:500px; background-color:gold;">TEST</button> </body> <script> $("#button").on("click", (event) => { // execute your functions const info = await Device.getInfo(); console.log(info); }) </script>
capacitor.config.json电容器.config.json
import { Camera } from '@capacitor/camera'; import { CameraResultType } from '@capacitor/camera'; import { Device } from '@capacitor/device'; const config: CapacitorConfig = { "appId": "com.zenithapp.app", "appName": "Zenith Mobile App", "webDir": "www", "bundledWebRuntime": true }; export default config;
Result in XCODE console when compile and run my Capacitorjs app:编译和运行我的 Capacitorjs 应用程序时，在 XCODE 控制台中产生结果：
⚡️ ------ STARTUP JS ERROR ------ ⚡️ SyntaxError: Unexpected identifier 'Device'. Expected ';' after variable declaration. ⚡️ URL: capacitor://localhost ⚡️ localhost:27:0 ⚡️ See above for help with debugging blank-screen issues ⚡️ [error] - {"line":27,"sourceURL":"capacitor://localhost"} ⚡️ WebView loaded1 个解决方案
解决方案1
1 2022-07-04 08:52:59
For anyone who is scrolling RN with a similar issue, this is fixed, I deleted my capacitorJS container (backed up my www/root HTML folders) and started again, this time following this tutorial below which is more comprehensive than the one on the official site (what a surprise)对于任何正在滚动 RN 的人来说，这是固定的，我删除了我的电容器 JS 容器（备份了我的 www/root HTML 文件夹）并重新开始，这次遵循下面的教程，它比官方的更全面网站（真是个惊喜）
https://medium.com/@SmileFX/a-complete-guide-building-a-capacitorjs-application-using-pure-javascript-and-webpack-37d00f11720d https://medium.com/@SmileFX/a-complete-guide-building-a-capacitorjs-application-using-pure-javascript-and-webpack-37d00f11720d
Also this one:还有这个：
How to export a function with Webpack and use it in an HTML page? 如何使用 Webpack 导出 function 并在 HTML 页面中使用它？
Hope this helps.希望这可以帮助。 I needed to use webpack, then export the functions so they can be called anywhere in index.html.我需要使用 webpack，然后导出函数，以便可以在 index.html 中的任何位置调用它们。 Working cross platform Vanilla-ish JS.工作跨平台 Vanilla-ish JS。
I can now put a nice simple single-page-web-app that I actually know how to code and maintain + access the phone's APIs, and not have to deal with some hell-ish bloated framework like react or angular that I just can't be bothered with right now我现在可以放置一个漂亮的简单单页网络应用程序，我实际上知道如何编码和维护 + 访问手机的 API，而不必处理一些地狱般臃肿的框架，如我无法做到的 react 或 angular现在不用担心
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.