uni-app: It only takes 2 hours to learn + get started

1. Introduction of UniAPP

1. What is UniAPP?

  uni-app is a framework for developing all front-end applications using Vue.js. Developers write a set of codes that can be published to iOS, Android, H5, and various small programs (WeChat/Alipay/Baidu/Toutiao/QQ/DingTalk ) and other platforms, it is convenient for developers to deliver quickly, without changing development thinking or changing development habits.

2. Why choose UniAPP?

1、开发者/案例数量更多
2、平台能力不受限
3、性能体验优秀
4、周边生态丰富
5、学习成本低

2. UniAPP initialization related configuration

1. Project directory structure

  A uni-app project is a Vue project. You can quickly create a uni-app project through HBuilderX or cli. For details, see: Quick Start .

2. Application configuration manifest.json

3. Compile and configure vue.config.js

4. Global configuration page.json

决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 

5. Global style uni.scss

6. Main component App.vue

调用应用生命周期函数、配置全局样式、配置全局的存储globalData

7. The entry file main.js

	因为大家都是初学者或者是需要快速上手项目，所以上面的内容尽可能先了解，
我们从最简单的uniapp的基础指令等相关的学习，等到有一定的开发经验和更加熟悉
小程序之后咱们就可以对上面的部分内容进行系统的学习。初学者只做大致了解即可

3. UniAPP life cycle

    uni-appFully supports the life cycle of Vueinstances , and also adds 应用生命周期and页面生命周期

1. Application life cycle

1.1 Introduction to application life cycle

The application life cycle is:小程序注册时触发的生命周期钩子函数

1. Triggered when the user opens the applet for the first time onLaunch(only triggered once globally).
2. After the initialization of the applet is completed, onShowthe method is triggered to monitor the display of the applet.
3. The applet enters the background from the foreground and triggers onHidethe method .
4. The applet enters the foreground display from the background and triggers onShowthe method .
5. If the applet runs in the background for a certain period of time, or if the system resource usage is too high, it will be destroyed.

前台、后台定义: When the user clicks the upper left corner to close, or presses the Home button of the device to leave the WeChat applet, it is not directly destroyed, but enters the background; when re-entering WeChat or opening the applet again, it will enter the foreground from the background.

1.2 Code example

App({
  onLaunch (options) {
  	//小程序初始化完成时触发，全局只触发一次
  },
  onShow (options) {
  	//小程序启动，或从后台进入前台显示时触发
  },
  onHide () {
  	//小程序从前台进入后台时触发
  },
  onError (msg) {
  	//小程序发生脚本错误或 API 调用报错时触发
  },
  onPageNotFound(){
  	//小程序要打开的页面不存在时触发
  },
  onThemeChange(){
  	//系统切换主题时触发
  },
  //存储全局变量
  globalData: {
    userInfo: null,
    urlFirst:''
  }
  //globalData: 'I am global data'
})

2. Page life cycle

1.1 Introduction to the page life cycle

The page life cycle is:页面从创建到销毁的过程

1. After the applet is registered, load the page and trigger onLoadthe method.
2. The method is triggered after the page is loaded onShowto display the page.
3. When the page is displayed for the first time, the method will be triggered onReadyto render page elements and styles, and a page will only be called once.
4. The method is triggered when the applet runs in the background or jumps to other pages onHide.
5. The method is triggered when the applet enters the foreground from the background or re-enters the page onShow.
6. Fired when using redirect method wx.redirectTo(OBJECT)or closing the current page and returning to the previous page .wx.navigateBack()onUnload

1.2 Code example

Function name	illustrate
onLoad	Monitor page loading, its parameter is the data passed on the previous page, the parameter type is Object (used for page parameter passing), refer to the example
onShow	The monitoring page is displayed. Triggered every time a page appears on the screen, including returning from a subordinate page to reveal the current page
onReady	Monitor the completion of the initial rendering of the page. Note that if the rendering speed is fast, it will be triggered before the page enters the animation
onHide	Listening page hidden
onUnload	Monitor page unload
onResize	Monitor window size changes
onPullDownRefresh	Monitor the user's pull-down action, generally used for pull-down refresh, refer to the example
onReachBottom	The event that the page scrolls to the bottom (not the scroll-view scrolls to the bottom), which is often used to pull down the next page of data. For details, see the following notes
onTabItemTap	Triggered when the tab is clicked, the parameter is Object, see the notes below for details
onShareAppMessage	The user clicks on the upper right corner to share
onPageScroll	Monitor page scrolling, the parameter is Object
onNavigationBarButtonTap	Listen to the click event of the native title bar button, the parameter is Object
onBackPress	Monitor page returns
onNavigationBarSearchInputChanged	Listen to the input content change event of the native title bar search input box
onNavigationBarSearchInputConfirmed	Listen to the search event of the native title bar search input box, which is triggered when the user clicks the "Search" button on the soft keyboard.
onNavigationBarSearchInputClicked	Listen to the click event of the native title bar search input box
onShareTimeline	Monitor users click on the upper right corner to forward to Moments
onAddToFavorites	Listen to the user click on the favorite in the upper right corner

3. Application life cycle VS page life cycle

页面展示时的逻辑：
应用onlaunch==》应用onshow（前台运行）==》页面onluad==》
页面onshow==〉页面onready（页面首次渲染）==》
页面onhide（页面隐藏）==》应用onhide（后台运行）==》
页面unload（页面卸载）

As shown below:

4. UniAPP routing configuration and page jump

1. Routing configuration

Developers need to configure the path and page style of each routing page in pages.json

"pages": [
        {
            "path": "pages/index",
            "style": {
                "navigationBarTitleText": "路由配置",
                "navigationBarBackgroundColor": "#FFFFFF",
                "navigationBarTextStyle": "black",
                "backgroundColor": "#FFFFFF",
                "enablePullDownRefresh": true
            }
        },
        {
            "path": "pages/user",
            "style": {
                "navigationBarTitleText": "路由配置",
                "navigationBarBackgroundColor": "#FFFFFF",
                "navigationBarTextStyle": "black",
                "backgroundColor": "#FFFFFF",
                "enablePullDownRefresh": true
            }
        }
]

2. Routing jump navigation

There are two ways of routing navigation: 标签式导航and编程式导航

routing method	page stack performance	Tabbed	programmatic
initialization	push new page
open new page	push new page	<navigator open-type="navigate" />	uni.navigateTo({})
page redirection	The current page is popped from the stack, and the new page is pushed into the stack	<navigator open-type="redirect" />	uni.redirectTo({})
page back	The page keeps popping off the stack until the target returns to the page	<navigator open-type="navigateBack" />	uni.navigateBack({})
tab switch	All the pages are popped out of the stack, leaving only the new Tab page	<navigator open-type="switchTab" />	uni.switchTab({})
reload	All pages are popped out of the stack, leaving only new pages	<navigator open-type="reLaunch" />	uni.reLaunch({})

3. The Mini Program Routing Pass Participation Accepts Parameters

//页面跳转并传递参数
uni.navigateTo({
    url: 'page2?name=liy&message=Hello'
});

// 页面 2 接收参数
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
    console.log(option.name); //打印出上个页面传递的参数。
    console.log(option.message); //打印出上个页面传递的参数。
}

Five, uniapp important instructions

1. uni-app uses vue's data binding method to solve the problem of js and DOM interface interaction

<text>{
   
   {textvalue}}</text><!-- 这里演示了组件值的绑定 -->  
<button :type="buttontype" @click="changetextvalue()">修改为789</button><!-- 这里演示了属性和事件的绑定 -->  

2. Sometimes it is also necessary to access the original DOM event in the inline statement processor. It can be $eventpassed :

3. Event mapping table

// 事件映射表，左侧为 WEB 事件，右侧为 ``uni-app`` 对应事件
	{
		click: 'tap',
		touchstart: 'touchstart',
		touchmove: 'touchmove',
		touchcancel: 'touchcancel',
		touchend: 'touchend',
		tap: 'tap',
		longtap: 'longtap', //推荐使用longpress代替
		input: 'input',
		change: 'change',
		submit: 'submit',
		blur: 'blur',
		focus: 'focus',
		reset: 'reset',
		confirm: 'confirm',
		columnchange: 'columnchange',
		linechange: 'linechange',
		error: 'error',
		scrolltoupper: 'scrolltoupper',
		scrolltolower: 'scrolltolower',
		scroll: 'scroll'
	}

4. Form components

• H5 selecttags pickerare replaced with components
• Form radioelements radio-groupare replaced with components

<radio-group class="radio-group" @change="radioChange">
	<label class="radio" v-for="(item, index) in items" :key="item.name">
	<radio :value="item.name" :checked="item.checked" /> {
   
   {item.value}}</label>
</radio-group>

6. UniAPP custom components and communication

1. Custom components

组件可以使用「全局注册」和「页面引入」两种方式进行使用，使用分为三步：

导入 import xxx from 'xxx'
注册 Vue.use('xx',xx) components:{ xxx }
使用 <xx />

2. Parent-child component communication

父组件通过自定义属性向子组件传递数据
子组件通过 props 接收父组件传递的数据

父组件通过自定义事件标签向子组件传递事件
子组件通过触发父组件定义事件方式修改父组件数据

7. Advanced understanding of the project