PhoneGap Day Intermediate Workshop 2016 PhoneGap Day Intermediate Workshop 2016 is Framework7+ traditional JS. Finally, I’ll introduce some tips for Phonegap packaging apps.

preface

Framework7 works with Vue.js in the same way Ionic+Angular does. Developed up a lot of wheels have been built, twice the result with half the effort!

Although the online music player App is relatively simple, it covers the basic aspects of F7+Phonegap.

There are few F7+Vue tutorials, so it’s a good idea to start with a simple example. You’d better code by hand. Take a look at what’s convenient about it and what to watch out for to avoid potholes. The original text is using javascript, we through comparison, also can realize Vue’s concise and powerful!

Key points:

  • F7 is close to native components
  • Vue – Router is not needed
  • Come with Dom7. Ajax, do not need vue-resouce
  • Vuex is recommended for large projects, and this example simply uses store.js
  • Phonegap’s tips for packaging Hybrid Apps
  • Source: github.com/kevinqqnj/s…

Example completion diagram:





Paste_Image.png

1. Initialize the vm using the template template

Note that Uglip-js is installed separately

npm install phonegap -g
phonegap create spotifyApp --template cordova-template-framework7-vue-webpack
cd spotifyApp
npm install
npm install uglify-Js @ ^ 2.8.0phonegap platform add browser android
phonegap run browser -- --lrCopy the code

At this point, a browser window should pop up showing the Demo page.

2. Add the Font Awesome Icon library

Framework7 has built-in ICONS, but only a basic nine. icon-back, icon-forward, icon-bars, icon-camera, icon-f7, icon-next, icon-prev, icon-plus

F7 supports additional icon libraries such as Framework7 Icons, Material Icons, FontAwesome, Ionicons, and more. Here in FontAwesome, for example: download FontAwesome. IO/assets/font… , then unzip the CSS, fonts directory into: \spotifyApp\ SRC \assets\. Then, import in main.js:

# \spotifyApp\src\main.js
import './assets/css/font-awesome.min.css'Copy the code

Now you can reference the fa Icon in the template:

<i class="icon icon-bars"></i>  // F7 built-in ICONS
<i class="icon fa fa-star"></i>   / / FontAwesome iconCopy the code

3. View and Page concept

Framework7 docs – Views

F7 安 装 Mobile App View functions are packaged, we first understand the View and Page, this is the most important basic concept, and has close connection with the built-in routing:

  • Views – A container for all visible Views. Only one view is allowed
  • View – An App that can have multiple separate, visible views, with separate Settings, navigation, and history. The default main view has class “.view-main “. The most common multi-view scenario is a landscape iPad app: navigation view on the left, content display view on the right
  • Pages – A container for all Pages in a view
  • Page – Each Page, representing one Web Page. A single view can have multiple pages, but only one page can be displayed at a time (controlled by routing)

View +page for this example:





Paste_Image.png

We set up a view that contains multiple pages. The main page is Index, with navigation bar Navbar, Toolbar Toolbar

4. Update main view:

Change layout to black:

# \spotifyApp\src\index.html
 <body class="layout-dark">Copy the code

Change main.vue to add main page: delete all elements between template div#app

# \spotifyApp\src\main.vue
<template>
    <! -- App -->
    <div id="app">

    </div>
</template>Copy the code

Then add views-view-pages-page:

  • F7-pages. Navbar -through. Toolbar – Through All pages share the Navbar, Toolbar effect
  • The F7-Navbar is in the F7-View andf7-pagesIn the middle, because navbar-through is used (note: other sub-pages, f7-navbar is inf7-pageThe internal!
  • F7-list-item media, used to add ICONS
  • Note the use of the F7-toolbar, Text Input, and Range input elements
  • Compared to the original F7 HTML, F7-Vue saves more than half of the code
# \spotifyApp\src\main.vue
<template>
  <! -- App -->
  <div id="app">
    <f7-views>
      <! -- Main view-->
      <f7-view main dynamicNavbar>
        <! -- Top Navigation Bar-->
        <f7-navbar>
          <f7-nav-left>
            <f7-link icon="icon-bars" open-panel="left"></f7-link>
          </f7-nav-left>
          <f7-nav-center>Spotify Browser</f7-nav-center>
        </f7-navbar>
        <! -- Pages -->
        <f7-pages navbar-through toolbar-through>
          <! -- Page, data-page contains page name-->
          <f7-page name="index">
            <! -- Scrollable page content-->
            <f7-block-title>Criteria</f7-block-title>
            <f7-list form>
              <f7-list-item media="<i class='icon fa fa-music'></i>">
                <f7-label>Songs</f7-label>
                <f7-input type="text" placeholder="Search for..." value="" />
              </f7-list-item>
              <f7-list-item media="<i class='icon fa fa-list-ol'></i>">
                <f7-label>Max Results</f7-label>
                <f7-input type="range" id="numResults" min="0" max="50" step="1" value="20" />
                <f7-input type="text" id="sliderVal" disabled value="20" />
              </f7-list-item>
            </f7-list>
            <f7-block>
              <div class="row">
                <div class="col-100">
                  <f7-button id="btnSearch" class="button button-big button-fill color-green">Submit</f7-button>
                </div>
              </div>
            </f7-block>
          </f7-page>
        </f7-pages>
        <! -- Bottom Toolbar on every view unless no-toolbar class specified (see item template)-->
        <f7-toolbar>
          <f7-link href="http://www.spotify.com" class="link external">
            <i class="icon icon-spotify"></i>
            <p class="color-white"> Spotify</p>
          </f7-link>
          <f7-link href="http://www.idangero.us/framework7" class="link external">
            <i class="icon icon-f7"></i>
          </f7-link>
        </f7-toolbar>
      </f7-view>
    </f7-views>
  </div>
</template>Copy the code

5. Custom style file CSS:

In the toolbar above, a custom class is used to reference images as ICONS. You are advised to store your own CSS in main.css.

  • Copy this picture:spotify.png 到\spotifyApp\src\assets\images\directory
  • Create your own CSS filemain.cssIf you want to use sass, you don’t need to create it, use the defaultmain.scss) 
    # \spotifyApp\src\assets\css\main.css
i.icon.icon-spotify { 
width: 29px; height: 29px; background-image: url(".. /images/spotify.png"); margin-right: 3px; 
}Copy the code

Don’t forget to reference the style file in main.js:

# \spotifyApp\src\main.js
import './assets/css/main.css'Copy the code

6. Initialize the App and associate the slider with the displayed value

Framework7-vue is initialized in main.js. You can define the global parameters of the application. Here are all the global parameters. F7, this.$device, this.$theme, this.Dom7 and so on.

  • Material: Set to true, the interface changes to the Google Material Design style. This article uses the default iOS color scheme
  • ModalTitle: Sets the title of all Alert/Notify/Modal
# \spotifyApp\src\main.js
// Init App
new Vue({
  el: '#app'.template: '<app/>'.// Init Framework7 by passing parameters here
  framework7: {
    root: '#app'./* Uncomment to enable Material theme: */
    // material: true,
    routes: Routes,
    modalTitle: "Spotify Browser".// Used for all Alert/Notify/Modal headings
  },
  // Register App Component
  components: {
    app: App
  }
})Copy the code

Correlating range-input data, which is Vue’s forte, with V-Model data binding without writing a line of code:

# \spotifyApp\src\main.vue
<template>.<f7-input type="range" id="numResults" min="0" max="50" step="1" v-model="sliderVal" />.</template>
<script>
export default {
  name: 'Index',
  data() {
    return {
      sliderVal: 20,
    }
  },
  mounted() {
    window.Dom7(document).on('deviceready', () = > {console.log("Device is ready!"); }); }},</script>Copy the code

7. Call the Spotify API to process the returned data

Now that the main interface of the App has been written, let’s start processing the data.

–> Please see details (2)