uniapp personal experience

what is uniapp

Uniapp officially means that a set of codes based on vue syntax can compile a multi-terminal h5 app applet. Well, it looks very good, but it is recommended that if you make a product, you should choose the corresponding technology. From the official code, you can only pass# If #end and the like force separation and write h5, use your own scaffolding applet. There is also an official demo.

In order to understand the following installation environment, I still want to introduce what I personally understand as uniapp. It is actually probably the public version of the small program (public version of the graphics card).

WeChat mini programs, Alipay mini programs, etc. are based on the public version with some unique features of their own, so the syntax is very similar. From an app perspective, it is an empty App that supports mini program functions but does not have any page display ( Officially referred to as the standard base) It can be understood that WeChat only has the function of mini program. All the page functions we make are to make this mini program more and more enriched and powerful. In other words, if done well, even WeChat can imitate it, but from the user perspective Even if you can’t feel it, it still feels like it’s an app.

As mentioned earlier, the standard base is provided by the official. The official also provides a test certificate for experience, but the official is not so good as to configure a different base for each app. All new developers will see the same app icon. Only the inner pages of the startup interface can be modified by developers. In addition, some app cores such as push version upgrades, positioning and payment are difficult to experience on the official version. The official solution is also provided, which is a custom base. You can carry out advanced function customization on your own base. Correspondingly, you must have more development conditions, such as ios, Android certificate, xcode simulator, Android x86 simulator, etc.

Having said so much, it probably means that if you just want to see the performance of uniapp, you can make a demo to see the effect or use the official one for pure page development. But if you want to put it on the shelves, you must use a custom base to develop a special one. It is suitable for front-end development and does not know much about native. The official also provides a plug-in market that provides some practical plug-ins that can be used directly like vue plug-ins, but some of them cost money.

development environment

Basic

Hbuiler: packaging tool. Configure packaging parameters (I like apicloud for cloud packaging, which is a bit too bundled... to use their products, you need to install their software and register their account)
Real machine→The best Android: plug it in and run it and it’s ready to go
Android certificate: This can be applied for free online
Chrome: You don’t need a real machine when writing page layouts

Technology stack (front-end biased)

Vue family bucket route Vuex route jump event storage distribution props slot emit parent-child component delivery
EventBus event listening distribution cancel listening
Es6 knows the import export this scope prototype promise, can write recursive deduplication functions, and can encapsulate its own util such as time encryption and decryption.
Version number concept wgt upgrade (hot update) and whole package upgrade
It is best to understand that mini programs have the concepts of global variables and local variables.
Ability to write less scss maintenance files for medium-sized projects. Because most of the UI is still drawn by oneself, third-party vue ui cannot be used directly. It can also be modified based on the official ui.
Iconfont icon set is really a waste if it’s not necessary or it’s vector.
Webview (know how native and h5 interact with each other)
If the business uses part of h5 to implement it, it must master various mobile UIs and adaptations.
Understand some basic app life cycles such as onLaunch onShow onHide transactions and also understand the push pop stack of the page

C-side architecture

The C-side is roughly composed of various pages (basic units), which are the interface elements that users see. There are three options when writing page pages:

.vue is basically not much different from h5 vue. div is replaced with view and span is replaced with text. There are some more special hooks. The small program writing method supports most css3 built-in plus+ objects.
.nvue is similar to .vue, but the rendering engine is weex, so it is more rigorous. For example, you cannot use background but background-color. The css3 pseudo-class can only be static, absolute or elastic layout. Of course, the experience will be closer to the native built-in plus+ object.
The h5 in webview is literally the same as ordinary html and requires manual plus+ objects.

What is a plus+ object? To put it simply, like wx-jsk, you must inject the object into the page before you can call some unique APIs, such as plus.runtime.version getting the current version number, plus.storage local storage, plus.nativeUInative interface, etc.

Uniapp has a built-in plus object, but on this basis there is an encapsulation layer. The api interface starting with uni is for compatibility with small programs and apps. So the bottom layer is still the same thing

The Webview
page directly displays the URL or the content of the local page. You can communicate with the shell through the plus object, such as obtaining the user information of the app to initiate native functions, etc.

There are some features of webview in uniapp

App passes data to h5 mainly by obtaining the webview object and then using the object evalJS method. If you want to be event-driven, you need to use EventBus.
h5 passes data to App mainly by getting the webview tag . @message

By default, the official title bar (based on the title in the web) is used + the web page sets the titleNView object in pages.json

If you need to customize the title bar, set "navigationStyle": "custom", and then get the webview object and set it manually
```
wv.setStyle({titleNView:{"titleText": "自定义标题,})
```
App storage and h5 plus storage are interoperable

So after you have a general understanding of the basic units and features, you start to think about how many pages will be written with native Vue if you want to develop an app. How many pages will be written with WebView. Of course, you can also use 100% native Vue to write. But if it is very troublesome to maintain and iterate ( In the future, if some businesses need to add new pages, they will need to update the version) or 100% webview page (wap2App experience is not good), which will affect the user experience to some extent.

In order to achieve a good APP experience, it is necessary to reasonably allocate in the early stage, such as the first-level page Tabbar, cold data page, etc., use native vue.h5 to undertake hot data activities or a certain business, but ensure that the App can also be accessed when the server h5 page cannot be accessed. Friendly access to other App version upgrades and push login. It is best to handle it natively. It depends on the business needs of the industry the App belongs to.

It is recommended that the project is best divided into 2 parts

1 uniapp 1 h5 can use technical means such as a scss class and request.js to make the development experience consistent. It is best to encapsulate a native.js tool class to interact with the native through the plus object, such as initiating a scan code directly in h5 Just call the method. For novices, just focus on function development. For veterans, you can further improve using uniapp features and some plug-ins to write high-quality method classes to improve user experience. app.scan(callback)

Experience

onLaunch Only declare other pages in App.vue and use onShow onLoad them onLoadto trigger only once, which onShow can be unlimited.
The native plug-ins in the plug-in market are only for custom bases. If you open an office file and bind the plug-in to the package name, be sure to make sure the certificate is valid.
For example, the page layout interface docking can be done in chrome mode to test the sdk function. After debugging and developing using the simulator, running it on a real machine can improve efficiency.
Before layout, consider their uni-ui uni-ui
Mescroll is a very good pull-up, scroll, and pull-down refresh plug-in. It is recommended not to write it manually.
When webviewiw setStyle, you need to setTimeout for a while, and you need to set it in h5.document.addEventListener('plusready',plusReady,false);

Because the plus object may not be found in some Android machines during initialization, an error will be reported.
Or the initialization problem is based on opening a hidden webview in onLaunch and opening h5. The preloading effect has been achieved. If it is still slow, loading needs to be done.
In the web-view page, webviews = this.$scope.$getAppWebview() get the webview collection and then get the current webview wv = currentWebview.children()[0]
If you want to implement a web-view custom header button, for example, click the button in the upper right corner to jump to the page, use wv.setStyle({titleNView: {buttons:[btn1,btn2,...}) buttons configuration

However, the onclick of the button in Android seems to only accept string types, so a similar compatibility process needs to be done.

                                          //$h5 首先你需要定一个挂在对象 把EventBus挂在进去

	                                 if (plus.os.name=="Android"){
	                  			return "javascript:window.$h5.EventBus.dispatch('"+cbName+"','haha');"
					}else{
						return function(){
							var jsString='window.$h5.EventBus.dispatch("'+cbName+'","haha");'
							wv.evalJS(jsString);
						}
					}

Uniapp supports spa single-page applications, but you have to handle push and pop animations yourself.
Try to use the native vue+h5 mode to build the project and open the ratio to about 3-4 7-6 for easy upgrade.
There may be problems with black edges when packaging. Please prepare a startup image of the corresponding size.
Version detection should be divided into passive and active. Some scenarios require users to be forced to update.
It is recommended to use vector icons for unified icons . They are high quality and convenient. They can be used by h5 uniapp. After all, the path of each icon is very troublesome.
Effective utilization plus.storage and plus.sqlitelocal storage clearly distinguish what storage is better, such as detailed cold data and historical data. Of course, if done well, you can submit the server copy every time the key is used to make the app more friendly and improve the user experience.
uniapp is a big technology stack. You should never imitate the official all-in-one. At least if you want to make an app, just use the app. Either change the mini program or use it for the mini program. It is a very crude version at the beginning, but after iteration, it will be made into a market-level app. There is absolutely no problem. The prerequisite is to be good at each. class api sdk
The official also recommends wap2app. The actual effect is decent, but it is not as good as using webview to implement it yourself.