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

Small program

  • Custom compilation you can customize the compilation page and some parameters

uniapp

1. Uniapp specification

  • Page files follow the VUE Single file Component (SFC) specification
  • Component labels are close to the applet specification
  • Interface capability (JS API) is close to wechat applets specification
  • Data binding and event handling are in accordance with the vue.js specification
  • It is recommended that you develop with a Flex layout for multiterminal compatibility
    • Forget about browser compatibility prefixes, the UNIApp framework takes care of these compatibility issues

2. Uniapp characteristics

  • Conditional compilation

    • The differences between platforms can cause a lot of redundancy if code is written in if-else form.

    • Uniapp provides a form of conditional compilation to reduce the redundancy mentioned above

      #ifdef app-plus requires conditional compilation of code #endif// Code that only appears in the App platform# ifndef H5 conditional compilation code #endif// All other platforms except H5# ifdef H5 | | MP - compiled code # endif WEIXIN need conditions/ / in the h5 platform or WeChat applet code (here only | |, there can be no &&, because there is no intersection)

Copy the code

  • App side Nvue development

NativeVue shorthand, in order to make the app end to do the native experience.

Nvue is built with Vexcor’s rendering engine, providing the App with native rendering capabilities. Nvue can use vexcor’s components and apis, vexcor’s components and apis, and UNIApp components and apis, which is equivalent to NVUE complements a large number of UNIApp components and apis for Vexcor

  • HTM5+

    HTM5+ engine can help us directly call the native plug-in on the APP side. Some complicated functions are difficult to be realized by pure front-end, so we can use HTML+ to call the native plug-in to achieve these functions. And h5+ has hundreds of thousands of apis built into it.

  • Nvue and H5 + can be used only on the APP side, but not on the Web side and small programs

3. Uniapp knowledge

component

Custom Components

Based on the component

api

Routing (page switching)

The life cycle

grammar

The layout style

4. Vue-cli create a project

  • vue create -p dcloudio/uni-preset-vue test-uniapp

5. Uniapp grammar speed pass

  • Template syntax is the same as VUE
  • Data binding is the same as VUE
  • The conditional judgment is the same as vUE
  • List rendering is the same as vue
  • Basic components use uniAPP officially provided components, such as ScrollView, input, picker, etc
    • These components provide many apis that you can try on your own.
  • Use of custom components (simple use)
    • Just like vUE defines components
  • Usage of the base API
    • For example, uni. GetSystemInfo ({})
  • Conditional compilation
    • Do not compile unqualified code at all
  • The page layout
    • Dimensions: px RPX (a unit that automatically adjusts to changes in screen width, based on a 750 screen, the screen is enlarged, and the RPX unit is increased in equal proportion) REM VH VW
    • Style import @import ‘path’
    • Flex is recommended for layout

6. Life cycle

  1. The application lifecycle (the entire application) is defined in app.vue — order is the order in which the code is executed

    onLaunch // Trigger once after application initialization, global trigger only once, can only be defined in app. vue, defined in the page has no effectYou can do some login things, get global variables and things like onShow// Triggered when the application starts, or when it enters the foreground from the background
onHide // Triggered when the application enters the background from the foreground
Copy the code

  2. Page life cycles are defined on each page — order is the order in which the code is executed

    onLoad // Listen for the page to load, triggered at the start of the load, the element has not yet started rendering - the page only executes once
onShow // Listen for the page display. Every time the page appears, this hook is triggered.
onReady // If the page is rendering fast (with too few elements), it will trigger before the page flip animation is complete -- the page only executes once
onHide // Listen for page hiding. Every time a page hides, this hook is triggered.Normal page jumps trigger the onHide hook onUnload// Listen to the page uninstallRedirection Redirects a redirect page to trigger onUnload Hook, which directly unloads the page. The page life cycle is executed again upon re-entryCopy the code

  3. Component lifecycle (as in VUE component lifecycle)

    beforeCreate
created
mounted
// mounted. destroyed// Vue destory
	// Official explanation - completely destroy an instance. Clean up its connections to other instances and unbind all its instructions and event listeners.
	// It also breaks the link between the virtual DOM and the real DOM
	// The rendered DOM element is not removed, and the $on event bus function is still executed, not destroyed
	// You can use v-if to simulate component destruction (DOM destruction) or call $destory to destory
Copy the code

  4. The order in which the three life cycles are initialized on the same page

    App Launch
App Show
page onLoad
page onShow
component beforeCreate
component created
component mounted
page onReady
/ / hide the start page
App Hide
page onHide
App Show
page onShow
//end hide
// start page onUnloadPage onUnload Component deStory -- Re-enter Component beforeCreate Component created Page onLoad Page onShow Component mounted page onReady// end onUnload
Copy the code

7. Overview of directory structure

  • Components – Directory for custom components
  • Pages – Directory for storing service pages
  • Static-static file resource directory
    • All images and fonts are placed in the static directory
    • Because static files are compiled into the project as is, you cannot put js files.
  • Unpackage – The directory where the compiled files are stored (regardless of the mode in which they are compiled)
  • Utils – Public utility classes
  • Common – A common file
  • App.vue – Entry to the page
    • OnLaunch user login project initialization
  • Main. js – The application entry has the same function as main.js in vue-CLI
  • Mainifest. Json – Project configuration
  • Pages. Json – Page configuration
    • Pages array: Each entry is a configuration for the page
    • GlobalStyle: Common configuration for all pages
  • Uni.scss defines style variables

8. tabBar

  • For iconPath, the image whose value is tabBar. There are some rules
    • Local image, maximum 40KB, recommended size 81 x 81px
  • Tabbar pages are cached when switched, and onLoad is not executed repeatedly
  • Tabbar clicking on a jump page triggers an onTabItemTap hook to the page.
    • There are some re-rendered hooks that can be done in this hook

9. uniCloud

  • It is a cloud development platform based on Serverless mode and JS programming for uniAPP developers

9.1 uniCloud Value

  • Develop the whole front and back business with JavaScript
  • Development costs have plummeted
  • Just focus on your business
  • If h5 is not released, use the server without domain name
  • For agile businesses, there is no need for separation of front and back ends (just division of business)
  • Cloud development in wechat/Alipay is the same at the bottom

9.2 uniCloud constitute

  • Cloud function

    • Running in a customized NodeJS environment, it has good performance and powerful functions. It can perform powerful operations, read noSQL data, read and write storage, and operate the network. Return data to the front end
    • Functions that run in the cloud (server) are written in the same way as normal JS functions, except that when called, they are run and called in the Node environment.
    Copy the code

  • Cloud database

    • You can read and write noSQL-based JSON databases in cloud functions.

  • Cloud storage and CDN

9.3 the use of

  • Select uniCloud when creating the project

  • Each record that the cloud database adds is in a standard JSON format.

    • Operations on the cloud database can only be performed in the cloud functions, not directly on the client

  • Operations on databases in cloud functions

    1. Create a reference to the database

      const db = uniCloud.database()

    2. Gets the specified collection (table)

      const collection = db.collection('user')

    3. Add records to a table – Add columns

      let res = collection.add({name: 'uni-app'})

    4. Add multiple records to a table

      const res = await collection.add([
    {
        name: 'react'.type: 'facebook'
    },
    {
        name: 'ng'}])Copy the code

    5. Find a record and delete it

      const res = await collection.doc('5ed21e2af97e82004ced5fd2').remove()
// Note:.doc is a reference to a found record. The.remove method removes the record
Copy the code

    6. Find a record and update it

      const res = await collection.doc('5ed21eb215bcf2004dcf34d8').update({
		name: 'vvue'
})
Copy the code

      or

      const res = await collection.doc('5ed21eb215bcf2004dcf34d8').set({
    name: 'vvue'
})
Copy the code

      So what’s the difference between this update and set

      If you update a record with a nonexistent ID, the update fails, but the set adds the nonexistent record.

      Update can only update existing records, while sets are updated if they exist and added if they don’t

    7. Find information about a record

      Returns the details of the record

      const res = await collection.doc('5ed21eb215bcf2004dcf34d8').get()

  • Doc can only be used with ids, not other fields

  • Use the where query keyword to query with other criteria

    1. Use other criteria to query information about a record

      const res= await collection.where({
    name: 'vvue'
}).get()
console.log(res)
Copy the code