Develop a WanAndroid quick app

Wanandroid – quickapp (quickapp)

Quick Application official website

Screenshot of wanAndroid Express app

Under the first speech

1. There is no online tutorial (at least when I am writing this application today, there is only a demo on the Internet, and the demo is a demo on the official website) 2. Although there is a document on the official website, but the document is not perfect, many places do not know how to solve, write this application is really by their own slowly groped to write, there are several functions, because I really can not find a solution to give up (to be slowly studied)…

Note: the first steps are basically the same as the official document tutorial and can be skipped.

I. Environment construction

1. Install nodejs

2. Install the hap – toolkit

npm install -g hap-toolkit
Copy the code

If this step gets stuck (which I did), you can stop it by CTRL + C and then enter the following command to set up taobao mirror before installing

npm config set registry https://registry.npm.taobao.org
Copy the code

Enter the command when the installation is complete

hap -V
Copy the code

If the version information is correct, the installation is successful.

Initialize the project

1. Run the following command to initialize the project

Hap init < Name of your project >Copy the code

After executing this command, a folder named your project will be generated in the current directory as the root directory of the project. The directory structure is as follows:

├ ─ ─ node_modules ├ ─ ─ sign signature RPK package module │ └ ─ ─ the debug debugging environment │ ├ ─ ─ certificate. The certificate of pem file │ └ ─ ─ private. Pem private key file ├ ─ ─ the SRC │ ├ ─ ─ Common public resource files and components │ │ └ ─ ─ logo. The PNG manifest. Json configuration icon in │ ├ ─ ─ the Demo page directory │ | └ ─ ─ index. The ux page file, ├─ ├─ manifest.json ├─ ├─ ├─ ├─ manifest.json ├ ─ └─ package.json (PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDF, PDFCopy the code

2. Compile the project

npm install
Copy the code

npm run build
Copy the code

npm run watch
Copy the code

Note :(I get this problem every time)

Cannot find module ‘… /webpack.config.js’, please re-execute hap update –force. This is because the later version of NPM will check and delete some folders under node_modules during NPM install, causing an error. Hap update –force will re-copy the hap-tools folder to node_modules

Three, debugging,

1. Install the debugger

Debugger is an Android application, directlydownloadThe installationAfter installation, open the button as shown in the picture. At this time, the button cannot be clicked, and it needs to be installed againPlatform PreviewAfter installing two applications, you can install fast applications

2. Install and run the RPK package

There are two ways:

• HTTP request: The developer starts the HTTP server, opens the debugger, clicks Scan to install and configure the HTTP server address, downloads the RPK package, and prompts the platform to run the RPK package
• Local installation: The developer copies the RPK package to the mobile file system, opens the debugger, clicks local Install to select the RPK package, and prompts the platform to run the RPK package

The first method is recommended for convenient debugging.

HTTP request mode: Run the following command:

// Default port 12306 NPM run server // User-defined port, such as 8080 NPM run server -- --port 8080Copy the code

The TWO-DIMENSIONAL code will be displayed after the execution is successful. You can scan the two-dimensional code to install it, or click the upper right corner of the debugger to set the HTTP server address and click Online update.

Now cooperate with the command

npm run watch
Copy the code

You can preview the effect while developing

The official documentation for viewing logs is to use Android Studio’s Android Monitor output to view logs. Here’s an alternative, execute the following command

Adb logcat -s JsConsole // JsConsole is used to filter information. The JsConsole flag is displayed in the output of fast application logs in the AS, so you can use this flag to view fast application logs without interference from other mobile phone logsCopy the code

In this way, you can happily develop the application, because these commands can not be interrupted (thought interrupted can not see the information or debugging), so you need to open multiple terminals, here we recommend using VScode + HAP Extension plug-in development, directly while developing to view, without switching the screen, etc., as shown in the figure:

Iv. Start development

At the beginning, I thought the demo code was similar to vue, but it should be very simple to develop. During the development process, I gradually found that it is not a real HTML + CSS, and many HTML and CSS codes are not supported. It seems that it is just a simulation, because it will be converted to a native component, so it cannot be fully supported temporarily. So it’s kind of a pain in the development process, getting errors all the time that you don’t have this property or that property.

Here byWanandroid development apisTo develop the WanAndroid app

1. Modify the manifest.json configuration

{"package": "cn.codebear. Wanandroid ", // Application package name" name": "wanandroid", // application name" versionName": "1.0.0", // Version name "versionCode": "1", // Version number "minPlatformVersion": "101", // Minimum supported platform version number "icon": "/Common/Image/logo.png", // apply logo "features": [// interface list {"name": "system.prompt"}, {"name": "system.router" }, { "name": "system.shortcut" }, { "name": "system.fetch" }, { "name": "system.webview" }, { "name": }] system. "" storage", "permissions" : [{" origin ":" * * "}], "config" : {/ / system configuration information "logLevel" : "debug"}, "router" : {// Routing information "Entry ": "Wanandroid", "pages": {"Wanandroid": {" Component ": "index"}, "Webview": {" Component ": {"component": "TitleBar ": true, "titleBarBackgroundColor": "# 24b9FF ", "titleBarTextColor": "# FFFFFF ", "titleBarText": "页", "pages": {}}Copy the code

The specific configuration, the official documentation is quite detailed, not to say here.

2. Delete code

3. Create wanAndroid page

Create a new Wanandroid directory under SRC and create an index.ux file without naming it index. This is the main page of the application. The following code

<template> <div class="wanandroid-page"> <div class="flexible-tabs"> <tabs onchange="changeTabactive" index="{{currentIndex}}"> <tab-content class="flexible-tab-content"> <div class="tab-content-section"> <home></home> </div> <div class="tab-content-section"> <classify></classify> </div> </tab-content> </tabs> <div class="flexible-tabbar"> <div for="{{(index, item) in tabItems}}" class="tab-item" onclick="clickTabBar(index)"> <image class="tab-icon" src="{{item.icon[currentIndex === index ? 1 : 0]}}"></image> <text class="{{currentIndex === index ? 'active' : 'tab-text'}}">{{item.text}}</text> </div> </div> </div> </div> </template> <import name="home" src=".. /Home/index"></import> <import name="classify" src=".. /Classify/index"></import> <script> import router from '@system.router' export default { data() { return { currentIndex: 0, tabItems: [{text: 'home ', icon: ['.. / Common/images/icon_home. PNG ', '.. / Common/images/icon_home_select. PNG ']}, {text: 'system' icon: ['../Common/Image/icon_classify.png', '../Common/Image/icon_classify_select.png'] } ] } }, changeTabactive (evt) { this.changeCurrent(evt.index) }, clickTabBar (index) { this.changeCurrent(index) }, changeCurrent(index) { this.$page.setTitleBar({ text: this.tabItems[index].text }) this.currentIndex = index } } </script>Copy the code

The tabs component is used. Originally, TAB and tab-content are used together. However, when clicking TAB, there will always be a lag phenomenon. The page is simple, with a bottom Tabs button and a Content display, a Home component and a false component, respectively.

4. Home components

<list-item type="banner">
	<swiper class="banner" autoplay="true" interval="4000">
		<stack class="banner" for="{{bannerlist}}">
			<image class="banner-image" src="{{$item.imagePath}}" onclick="openArticle($item.url, '', $item.title)"></image>
			<text class="banner-title">{{$item.title}}</text>
		</stack>
	</swiper>
</list-item>
Copy the code

<! $item.link, $item.link, $item.link, $item.link, $item.link, $item.link, $item.link $item.projectLink, $item. The title) "> < div > < text class =" tag "show =" {{$item. Fresh}} "> new < / text > < text class =" text - the title "> {{$item. The title}} < / text > </div> <div class="article-tip"> <text class="tip"> {{$item.superChapterName}}/{{$item.chapterName}}</text> </div> <div class="article-tip"> <text class="tip"> {{$item.author}}</text> <text class="time">{{$item.niceDate}}</text> </div> </list-item> </block>Copy the code

<! -- Load more, LoadMore --> <list-item type="loadMore" class="load-more"> <progress type="circular" The show = "{{hasMoreData}}" > < / progress > < text show = "{{hasMoreData}}" > load more < / text > < text show = "{{! HasMoreData}}"> No more ~</text> </list-item>Copy the code

5. The classify components

This component displays a list of categories and corresponding articles, which is essentially three lists.

6. The webview page

<web src="{{ url }}" id="web"></web>
Copy the code

7. About network requests

Json declaration interface {“name”: “system.fetch”} code, here is the code to fetch the banner, the rest can be viewed in the project

<script> import fetch from '@system.fetch' ... getBanner() { fetch.fetch({ url:"http://www.wanandroid.com/banner/json", success:function(data){ this.bannerlist = JSON.parse(data.data).data; }.bind(this), fail: function(data, code) { console.log("handling fail, code=" + code); }})}...Copy the code

Today I wrote so much code by myself. Project address: github.com/CB-ysx/wana…

Five, the summary