I pay so much, how do you surpass me 👨🔧

Introduction (Why uni-app is used)

  • A set of code can be published to a small program,app.h5And so on. Currently supports almost all platforms of small procedures 😏
  • Only need to masterVueGrammar can, start very fast 🤔
  • No need for app native developers, reduce costs.

Preparatory work

  • Create projects and package as much as possibleHbuilderXThe development toolsHubilderXComes withuni-app🌮, including the follow-up ifuni-appTo upgrade you just need to update the editor always keep it up to date ✨. And then the code logic is recommended to use their own familiar editor 🍤.
  • Create a project and familiarize yourself with the directory structure 🍵.
  • Learn the meaning of each parameter in the manifest.json file in detail 🍐

Component/plug-in introduction and usage

How earlier components are referenced

In fact, this kind of reference is clear enough 🎏, but there are always some friends feel trouble 🎍.

  • importImported components
  • componentsRegister component in
  • templateUsing components in

The current way of referencing

As long as the component is installed in the components or uni_modules directory of the project and conforms to the components/ component name/component name. vue directory structure ✨. It can be used directly in the page without reference, registration (easycom component specification HBuilderX 2.5.5 support)

UI components

Uview 👓

There are two options for installation!
  • Plug-in marketplace for installation (offers a wealth of plug-ins)
  • throughnpmInstall (Use the plugin market to install plugin packages as much as possible, there may be somenpmPackages provided,uni-appNot very well supported)

Native Components Native components also provide many useful components 👓

Problems encountered during development

Routing hop
  • Jump between pages:uni.navigateTo
  • tabBarJump between:uni.switchTab

NavigateTo You should use uni. NavigateBack You are advised to use the route provided in uView to switch to navigateBack

Arbitrary component communication
uni.$emit('Event name',{params}) // Initiate an event
uni.$on('Event name'.(params) = >{}) // Listen on events
uni.$once('Event name'.(params) = >{}) // Only listen for events once
uni.$off('Remove event') // Remove the event
Copy the code
Version compatibility issues

When an app is packaged or run in an editor, you may encounter the problem shown above. There are two solutions: 🎐.

  • Upgrade HubilderX’s version 🎊(ensure that the version of the local environment is the same as the version packaged online)
  • Using the version ignore 🎃 (not recommended, because after all, the version is not uniform, may cause exceptions)

Ignore this reminder in the source view of the manifest.json file and add the configuration under the “app-plus” ->”compatible” node

{"app-plus": {"compatible": {"ignoreVersion": true //true indicates that the version check prompt box is ignored. HBuilderX1.9.0 and later support}, //.... }}Copy the code
Mobile terminal start animation, how to compatible with various mobile phone resolution adaptation.

Use.9png and there are specific production methods

We can also ask the design department to help us produce a.9png picture.

plus is not defined

Plus is an internal object of 5+Runtime. Uni. GetSystemInfoSync (). Platform

Why use local packaging?

Package name specification (packaging helps us to generate APK, IPA files)

  • The package name must contain at least two segments separated by one or more dots. Such as:com.abc.tencent.qq.mm;
  • The characters in each segment must be lowercase letters, digits, or underscores[a-z0-9_]Composition;

Each paragraph must begin with a letter

Certificate of Android

1.Installing the JRE2.	keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore
3.The testAlias is the certificate alias. You can set the testAlias to the character you want. You are advised to use letters and digits4.Test. keystore is the name of the certificate file. You can change it to the desired file name or specify the full file path5.	36500Is the validity period of the certificate100The validity period is in days. You are advised to set the validity period to a longer period to avoid certificate expiration6.	keytool -list -v -keystore test.keystore   // View the certificate information
7.	Enter keystore password: // Enter the password and press Enter
Copy the code

Why use local packaging? If one day you need to connect to a third-party SDK such as an NFC id scanning function 🧵, the SDK provided by the other party is jar package, which cannot be implemented in uni-app (of course, it may be because I am not good enough 🤦♂️), This can only be implemented in native Android in the form of native packaging. For the rest of the case, cloud packaging is very convenient 🛒.

How is communication between UNI-app and JAR packages implemented?
  • Create a new implementation class in the offline packaged project
  • The SDK provided by a third-party JAR package is invoked in the implementation class
  • The method of the implementation class is invoked in uni-app to communicate
Package com.hji.test; Public class AddCount {public int androidAdd(int a, int b) {return a + b; }} uni-app: addUniApp(){var AddCount = plus.android.importClass(' com.hji.test.addcount '); var addCount = new AddCount(); This. Result1 = androidAdd. Add (1, 2); }Copy the code

Native.js

If you want to interact with native Android, you must use native.js as the official website says 🎯; If Node.js extends JS to the server world 🚘, then native. js extends JS to the Native world of mobile App. Therefore, to master uni-app native. js, you still need to have a certain understanding of 🍣.

Obtain Chinese geographic location information (using Autonavi map) on the open platform of Autonavi map, notify uniPush by APP phone, and resident at the background.

Above things with a lot of pit, one description is still very difficult 🎃, if there is a small partner interested, you can leave a message we progress together 🙆♂️

conclusion

Uni-app is a framework for learning the syntax of vUE 🍗, vue3.0 is now supported, how can we not work hard 🎨. Come on! 🍝