does this framework support Single Page Application such as React or Vue?

<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.github

Does it support SPA? about androidjs HOT 27 CLOSED

android-js commented on August 25, 2024

Does it support SPA?

from androidjs.

Comments (27)

Chhekur commented on August 25, 2024

Yes it support both Single Page Application and Multi Page Application as well.

If you have any doubts feel free to write us!

Thanks!

from androidjs.

murunwas commented on August 25, 2024

I have tried to use vue but it is giving me blank screen, can you please add an example using SPA?

from androidjs.

Chhekur commented on August 25, 2024

This is the Hello World Example of Vue JS build on Android JS
https://github.com/android-js/sample-app/tree/master/vue-js-example

no need to create server at all this is very simple example just by using html and vue js

if you have any doubts, feel free to write us !

Thanks!

from androidjs.

Chhekur commented on August 25, 2024

for debugging first run your app in browser.
open index.html file in browser and run main.js file using node

from androidjs.

murunwas commented on August 25, 2024

thank you sir, let me test it now

from androidjs.

murunwas commented on August 25, 2024

when building the app, it always copy the phonon boilerplate app even thou i'm not using it and it increase the bundle size

from androidjs.

Chhekur commented on August 25, 2024

Did you generate the project with androidjs g

from androidjs.

Chhekur commented on August 25, 2024

If you are generating project like this, it will generate the sample phonon app

You should generate project from scratch
Try this: https://blog.usejournal.com/how-to-build-android-apps-with-node-js-using-android-js-2aa4643be87b

from androidjs.

murunwas commented on August 25, 2024

I generated it from scratch but when I run androidjs build in the /dist/app-debug/assets folder, I always found that boilerplate even thou I don't have it in my views folder

from androidjs.

murunwas commented on August 25, 2024

from androidjs.

Chhekur commented on August 25, 2024

Update the androidjs-builder to the latest version and delete the dist folder and build again

from androidjs.

DeveshPankaj commented on August 25, 2024

You can generate scratch app via androidjs g --example helloworld

from androidjs.

murunwas commented on August 25, 2024

I updated the androidjs-builder and now I'm getting this error

from androidjs.

commented on August 25, 2024

User force command
androidjs b -f

from androidjs.

murunwas commented on August 25, 2024

The main.js does not run when I install the apk on my device.

from androidjs.

Chhekur commented on August 25, 2024

How do you come to know main.js does not run?

from androidjs.

murunwas commented on August 25, 2024

because when I try to invoke the functions in the main.js there's no response

from androidjs.

Chhekur commented on August 25, 2024

Did you used IPC for making communication between Back Process and Front Process.

check out : https://android-js.github.io/androidjs/ipc.html

from androidjs.

murunwas commented on August 25, 2024

I followed that, on development it is working fine but when I build and install apk on my device, there's no response from the server / main.js

from androidjs.

Chhekur commented on August 25, 2024

could you please share the code of index.html and main.js file ?

from androidjs.

murunwas commented on August 25, 2024

main.js

app.js

index.html

from androidjs.

Chhekur commented on August 25, 2024

we fixed some bugs and sorry to say that

you have to update androidjs-builder to the latest one again
and androidjs.js file as well because your are using older one new: android.js

and you have to update your app.js file something like this:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    number:"",
    list: []
  },
  methods:{
  	call(){
  		app.call.makeCall(this.number)
  	},
  	server(){
  		front.send('Hello', this.number);
  	}
  },
  mounted(){
  	front.on('print', function(msg){
           // because this.list says undefined
  	    this.list = this.list || [];
  	    this.list.push(msg)
  	    let node = document.createElement('LI');
  	    node.appendChild(document.createTextNode(msg));
  	    document.getElementById('numbers').appendChild(node);
  	    console.log(list);
  	})
  }
})

and index.html

<!DOCTYPE html>
<html>
<head>
	<title>Vue Example</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<style>
	.app{
		font-size:30px;
	}
</style>

<body>
<div id="app" class = "app">
	{{ message }}
	<input type = "text" v-model = "number" /> <br />
	<button @click="call">call</button>
	<button @click="server">server</button>
	<hr/>
	<ul id = "numbers">
		<li v-for="(a,i) in list":key="i">{{a}}</li>
	</ul>
</div>
</body>
<script type="text/javascript" src = "../assets/androidjs.js"></script>
<script type="text/javascript" src = "../assets/app.js"></script>
</html>

and package.json like this because in order to use Call API you need to add android.permission.CALL_PHONE permission to your package.json file

{
  "name": "vue_example",
  "app-name": "Vue Example",
  "package-name": "mypkg",
  "icon": "./assets/icon/icon.png",
  "dist-path": "./dist",
  "permission": [
    "android.permission.INTERNET",
    "android.permission.CALL_PHONE"
  ],
  "version": "1.0.0",
  "description": "",
  "main": "script.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "androidjs": "^1.0.5"
  }
}

from androidjs.

murunwas commented on August 25, 2024

thank you, I'll give it a try...

from androidjs.

murunwas commented on August 25, 2024

on main as shown below, can I name the script whatever I want or it is suppose to be main.js or script.js?

from androidjs.

Chhekur commented on August 25, 2024

It doesn't matter 😉

from androidjs.

murunwas commented on August 25, 2024

lols it matters cause if I named it main.js it works fine but if i named it script.js my app crashes 😉😉😉

from androidjs.

Chhekur commented on August 25, 2024

lols it matters cause if I named it main.js it works fine but if i named it script.js my app crashes

I think that because of something else, may be

from androidjs.

Does it support SPA? about androidjs HOT 27 CLOSED

Comments (27)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent