The previous development APP project was directly written by APICloud+ native JS. However, the whole project was found to be slow in development, with multiple and complex page codes and relatively difficult to maintain. Besides, the APP with large files packed would be relatively large, and the Framework of APICloud was also difficult to use. Support for some ES67 features (such as let, const, import, etc.)

Using vuE-CLI +APIcloud to write to solve the above pain points, flexible development, and packaging after smaller volume and faster

Environment depends on

  • vue
  • webpack
  • vue-cli3
  • nodeJS

The basic flow

It is better to prepare two projects for project development, one package APP and one project development, which will also reduce a lot of unnecessary trouble

Create the project and initialize it

CD to the location where the project wants to be created, execute:

vue create vue-for-apicloud
Copy the code

Select Manually select Features

The project structure

The project structure is shown as follows:

Multi-page configuration

Create vue.config.js in the project root directory

const pages = require('./build/pages')

module.exports = {
  publicPath: '/', pages: pages, // Whether to generatesourceMap file // Development environment configurationtrueFor quick error location (APICloud console output is really uncomfortable) // production environment configurationfalse, faster to build and smaller to pack:true
}
Copy the code

Create the build folder in the project root directory and create page.js in the bulid folder

const glob = require('glob') // Loop through the file and pack console.log('Get page file... 'Const files = glob.sync(const files = glob.sync() const files = glob.sync()'**/views/**/main.js') const pages = {} files.forEach(item => {// Default output to the dis folder, the output format is folder name (if the folder name is frame, the parent folder name +frame) item.split('/')
  let page = items[items.length - 2]
  const pageParent = items[items.length - 3]
  if (page === 'frame') {
    page = `${pageParent}Frame`
  }
  pages[page] = item
})
console.log('End of file retrieval')

module.exports = pages
Copy the code

SRC folder to create the views folder, used to store the source of the development page; SRC folder main.js, app. vue are optional, because these two pages will not be packaged, so you can delete or retain them according to your preference

The command that

Packaging:

npm run build
Copy the code

Run the project virtual server

npm run serve
Copy the code

If you are using webstrom can turn these two commands configured to run the command, reference: blog.csdn.net/q649381130/…

Page development

Based on the above configuration, the actual packaged project should have the following structure:

Create a folder based on your requirements. The folder name is the page name. If there is a frame folder under the folder, the frame folder is the folder name and frame

Js and app.vue (entry and page files) must be in each folder and can be split into multiple components (similar to vUE development)

Page jump

Page initialization opens Win or frame in main.js, or app.vue, I’m used to main.js

import Vue from 'vue'
import App from './App.vue'

window.apiready=function () {
  new Vue({
    render: h => h(App)
  }).$mount('#app')
  window.api.openFrame({
    name: 'waringFrame',
    url: 'waringFrame.html'.bgColor: '#ffffff',
    rect: {
      x: 0,
      y: document.getElementsByTagName('header')[0].clientHeight,
      w: 'auto',
      h: 'auto'
    },
    bounces: true,
    overScrollMode: 'scrolls'})}Copy the code

Open the page in app.vue (be sure to use window.api.openWin if you are in app.vue, since there are no API objects in the VM object) :

methods: {
    openWin (name) {
      window.api.openWin({
        name: name,
        url: `./${name}.html`,
        bgColor: '#fff'}}})Copy the code

Debugging through APICloud

The project in the development phase is the local virtual service, which can be configured as the local virtual server path in the config.xml of APICloud:

Open the wifi automatic synchronization. Due to the hot update of VUE, the development project will be automatically synchronized to the APP project

Package the project in the production environment, copy the packaged file to the HTML folder of the APICloud project (according to your own habits), and change the path to the APICloud project path.

It is important to note that APICloud Studio cannot be copied to the project folder, only the local folder can be opened to replace the files. After each replacement, you need to restart APICloud Studio or add the project folder again. It’s a pain in the ass, I have to say. APICloud Studio doesn’t have the option to refresh projects or folders.

Open Win or Frame through the above process, and the other APICloud development is almost the same

Something to watch out for

  • The method to call APICloud in app. vue needs to use window.api.openWi (same as other methods of APICloud). This in App.vue is essentially a VM object
  • In app. vue, methods or callbacks use arrow functions whenever possible, making sure this is the VM object
  • Module loading for APICloud is best placed in the window.apiready method in main.js
  • APICloud Studio cannot copy files to the project folder, only open the local folder to replace files. After each replacement, you need to restart APICloud Studio or add the project folder again

instructions

  • The above process has been implemented in formal projects
  • Reference article: juejin.cn/post/684490…
  • Github address: github.com/maihuochai/…