preface

In September, I started to develop wechat applets, and I also investigated WEPY/MPvue. Considering cross-terminal requirements, I finally chose uni-App. This paper mainly introduces how to use UNI-App to build applets, and my supplement to the framework, including encapsulation of request interface. References to color-UI, dynamic setting of the bottom TAB page, etc., see below for details

Uni-app introduction (official website)

Uni-app is a framework for developing all front-end applications using vue.js. Developers write a set of code that can be published to iOS, Android, H5, and various small programs (wechat/Alipay/Baidu/Toutiao /QQ/ Dingding) and other platforms.

Uni-app is also a better applets development framework, even without cross-ends. As shown in the review

Advantages:

I use uni-App framework mainly for the development of wechat small programs. The advantages I feel are as follows:

  • uni-appDevelopment tools used by the frameworkHBuilderX.HBuilderXBuilt-in environment, out of the box, no configuration requirednodejs, what plug-ins can be downloaded directly, testing, packaging, release is particularly convenient.
  • uni-appusingVue.jsSyntax, basic supportvueMost grammars (vueDynamic component ofcomponentNot supported).
  • PCEnd usevueEncapsulated somejsMethods, as well as constructive ideas, are directly portable touni-appIn, for example: myselfpcIn the projectapiinterfacejsFiles that can be copied directly to the applets frameworkapiFolder (PS:apiFolder maintenance back-end request path)
  • uni-appThe surrounding area is rich in ecology,Plug-in marketThere are so many components available that you can wrap some of them yourself using vUE syntax.

Development Tools (HBuilderX)

  • HBuilderX: Official website IDE download address;
  • HBuilderXIs a common front-end development tool, but foruni-appIt was specially enhanced.
  • HBuilderXSome plug-ins are provided, which can be downloaded and installed directly, as shown below:tool > Plug-in installation

The project structure

First we go to HBuilderx > File > Project, select uni-app project, I selected the default template, of course you can choose other templates, then confirm to create, if you choose the default template, your folder should look like this:

I then added the following folders according to my own project requirements and to keep in touch with vue’s PC project structure

For specific code, please refer to personal GitHub– wechat Startup project

+ - API - page interface (path) | + -- login. Js | + -- tools. Js + - colorui - (color - UI style) + - common - js method (gm) + - components Components (gm) + - pages - (main page) + - services - services (gm) | + -- auth. Service. Js - (main encapsulates some save the user's token method) | + -- Config. Service. Js - deposit (gm's global variables) | + -- request. Service. Js - (encapsulates the uni. Request method) + - static - + - unpackage - (static files) +-- app.vue -- (Application configuration, Js -- (Vue initialization entry file) +-- manifest.json -- (App name, appID, logo, version and other packaging information) +-- pages Uni. SCSS -- (here are the common style variables built into UNI-app)Copy the code

Introduction to main documents:

  • apiFolder is stored in each page request path, introducedrequest.service.jsexposedapi.
  • coloruiUsing thecolor-uiStyle, I think the style is very beautiful, thank you very much, details:color-ui
  • commonStore universal JS methods
  • componentsHolds global components, includinguni-uiAnd self-encapsulated components
  • pagesMain page, whichpagesfolderindexOf a file that can be laid out at the bottomtabPage, viav-ifDetermine which TAB pages to display
  • servicesGeneric service file (I don’t know if this description is accurate, originally usedAngular4.AngularThe concept of service in Chinese has certain influence on me.
    • auth.service.jsThrough the use ofuni.setStorageSyncSimple encapsulation of some save usertokenmethods
    • config.service.jsSave global variables for example:apiUrlRequesting interfaceIP.storage_key 是tokenThe key value and global referenced variables can be defined in this file. If you need to change them later, you only need to change the values used in this file
    • request.service.jsusePromiserightuni.requestTo encapsulate, willget,post,deleteRequest mode exposed inapiReference this file in the folder can be usedget,post,deletemethods
  • staticStatic files, I mostly use for images
  • unpackage(Files running in the applet emulator)
  • AppApplication configuration, used to configure the App global style and listening

How to customize the bottom TAB page

In my project, I need to display different base TAB pages according to different roles. Therefore, the TAB page set in pages. Json is not flexible enough and not easy to expand

  • inpagesIn the folder, create a new oneindexFolder and create oneindex.vuePage, at the bottom of this page can be layouttab, depending on the clicktabDisplay the corresponding TAB page, as shown in the figure:

Note:

  • If each TAB click switches to a different view, this is equivalent to a single page application. When the page is more complex, the switching process may be stuck. So tabbar uses custom components to avoid too many complex pages.
  • Of course, the native Tabbar is a good experience, but not very customizable. This requires developers to balance their choices according to their own needs.

How to use Colorui

The introduction of

ColorUI is a CSS library!! You can call components based on class after you introduce styles

  • Download the source code and extract the/colorui-uniapp folder. Copy the /Colorui folder in the directory to your project root directory
  • App.vueThe introduction of the keyCss main.css icon.css
<style> @import "colorui/main.css"; @import "colorui/icon.css"; @import "app.css"; /* Your project CSS */.... </style>Copy the code

Now you can use the CSS styles provided by colorUI,

Because the documentation of colorUI is being improved, the specific style of the class name may not be clear, so you can download color-UI, use HBuilderX to run in the browser, open the debugging tool, find the corresponding node to get the corresponding class name, (of course you may have other good methods).

Customize the navigation bar with ColorUI

  • pages.jsonThe system navigation bar is deleted
"globalStyle": {
	"navigationStyle": "custom"
},
Copy the code
  • App.vueObtaining system information
onLaunch: function() {
    uni.getSystemInfo({
    	success: function(e) {
    		// #ifndef MP
    		Vue.prototype.StatusBar = e.statusBarHeight;
    		if (e.platform == 'android') {
    			Vue.prototype.CustomBar = e.statusBarHeight + 50;
    		} else {
    			Vue.prototype.CustomBar = e.statusBarHeight + 45;
    		};
    		// #endif
    		// #ifdef mp-weixin
    		Vue.prototype.StatusBar = e.statusBarHeight;
    		let custom = wx.getMenuButtonBoundingClientRect();
    		Vue.prototype.Custom = custom;
    		Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
    		// #endif		
    		// #ifdef MP-ALIPAY
    		Vue.prototype.StatusBar = e.statusBarHeight;
    		Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
    		// #endif}})},Copy the code
  • inmain.jsThe introduction ofcu-customcomponent
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
Copy the code
  • In the required page can be directly used, as follows:
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
	<block slot="backText">return</block>
	<block slot="content">The navigation bar</block>
</cu-custom>
Copy the code

Cross-side compatibility (how you don’t need to consider it if you’re just a single platform)

Uni-app provides conditional compilation for platform customization in a single project.

<view class="content">
  <! -- #ifdef APP-PLUS -->
  <view>Code that only appears on the 5+App platform</view>
  <! -- #endif -->

  <! -- #ifndef H5 -->
  <view>Code exists on all platforms except H5</view>
  <! -- #endif -->

   <! -- #ifdef H5 || MP-WEIXIN -->
  <view>Code that exists only on H5 platform or wechat small program platform</view>
  <! -- #endif -->
</view>
Copy the code

Release wechat mini program

  • The server domain name must be a valid HTTPS domain name

  • Enter the development page development > Development Settings and set the server domain name, as shown in the figure

  • Before publishing the mini program, you need to configure the appID, application name, and logo. You can log in to the wechat public platform and enter the Settings page to set the basic information of the mini program

  • Use HBuilderx find release > small program – WeChat, click will start after wait for a while and WeChat development tools, click on the upload WeChat development tools, fill in the upload information, it is uploaded to the WeChat public platform experience, are to be submitted version management > audit, wait backstage audit, audit through after, small program would be launched successfully, as shown in figure:

conclusion

This article mainly introduces the development of wechat applets using uni-App framework and its own supplement to the default template, including encapsulating request interface, referencing color-UI, dynamically setting the bottom TAB page, as well as the navigation bar component provided by color-UI and custom navigation bar. My ability of expression is limited. If there is a mistake in the writing process, please correct it. (PS: afraid of heart)

More information about UNI-App can be found in the official document uniapp.dcloud.io

Source of personal blog: shengchangwei. Making. IO/js – uni – app /