This is the 18th day of my participation in the August Genwen Challenge.More challenges in August

I. Introduction (Learn about UNIAPP first)

Of all the cross-end development frameworks, I find UniApp relatively easy to use because I can vUE a lot.

Across the side frame

1. Page rendering mode:

1) Pure Web rendering: inoic

2) Pure native rendering: RN, WEEX

3) Hybrid rendering, which is a combination of Web and Native version: UniApp (WeeX rendering is optional)

2, uniapp:

Development tools: HbuilderX

Cross-terminal ability: it can cross 10 different platforms, develop ios APP without using MAC computer, Hbuilder can directly help you upload

Can use VUE can use UniApp, support cloud development

3. Nvue (Native VUE)

Uniapp has an improved native rendering engine based on WEEX built into the App side to provide native rendering capability. On the APP side, webView rendering is used for VUE pages, but native rendering is used for NVUE pages. Two types of pages can be used simultaneously in an app, such as NVUE for the home page and VUE for the details page. However, there are limits to how NVUE CSS can be written, so don’t use NVUE if you’re not going to develop an APP.

Second, actual combat development

Take a look at the file directory:

1. Public variables can be written to globalData in app.vue, which is globally accessible

App.vue <script> export default {globalData: {// Global variables serverUrl: 'https://abc.cn', token: '',}, // Lifecycle onShow: function(options) { console.log('onShow'); }} </script> // page access: getApp().globaldata.tokenCopy the code

2. Main.js introduces common JS files (encapsulated methods) that can be accessed globally

import Vue from 'vue' import App from './App' import utils from '@/utils/utils.js'; // Encapsulate the public js file vue.config. productionTip = false; Vue.prototype.$utils = utils; App.mpType = 'app' const app = new Vue({ ... App }) app.$mount()Copy the code

3, pages. Json configuration page routing, title, title background, tabbar, etc

{" pages ": / / / pages start page, said the first item in the array application reference: https://uniapp.dcloud.io/collocation/pages {" path" : "pages/home/home", "style" : {"navigationBarTitleText": "navigationBarTitleText": "navigationBarTitleText": "navigationBarTitleText": "navigationBarTitleText": "navigationBarTitleText": "navigationBarTitleText": "navigationBarTitleText": "# FFFFFF", / / set the navigation bar text color "navigationBarTitleText" : "hello uniapp", / / Settings page name "navigationBarBackgroundColor" : "#19AD78",// set the navigation bar backgroundColor" backgroundColor": "#F8F8F8"// set the backgroundColor}, // set the tabbar "tabbar ": {" selectedColor ":" # 19 ad78 ", "color" : "# A8A8A8", "a list" : [{" text ", "home page", "pagePath" : "pages/home/home", "iconPath" : "Static /images/a.png", "selectedIconPath": "static/images/ a_selectediconpath"},{"text": "message ", "pagePath": "pages/message/message", "iconPath": "static/images/b.png", "selectedIconPath": "Static /images/ b_selection. PNG"},{"text": "my ", "pagePath": "pages/mine/mine", "iconPath": "static/images/c.png", "selectedIconPath": "static/images/c_selected.png" } ] } }Copy the code

4, judge different platforms to use different code, the use of annotations to judge, ifDEF behind the platform name official website has a full can see uniAPP conditional compilation

Page:

<! -- #ifdef MP-WEIXIN --> <official-account></official-account> <! -- #endif -->Copy the code

This component is only shown in the wechat applet platform

Js:

                                // #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '/pages/login/login',
					});		
				// #endif
					
				// #ifdef H5
					uni.navigateTo({
						url: '/pages/loginH5/loginH5',
					});		
				// #endif	
Copy the code

Here JS judge whether it is wechat applet or H5 browser, jump to different login page, because the login and authorization style and function of wechat applet and H5 applet are not quite the same, I wrote two pages, if your page can almost use the same page, you can judge it in the inside.

CSS:

/* #endif */ * #endif */Copy the code

This style is only displayed on the wechat applet platform. It is not enabled on other platforms.

Write so much first, I feel uniApp is very easy to use very easy to use, recommend recommend.