uniapp development (from shallow to deep)

1. Project construction

1.1 Scaffolding construction

• Install scaffolding globally

• npm install -g @vue/cli@4 ( remember to install version 4.xx )

• Create project

vue create -p dcloudio/uni-preset-vue my-project

• Default template
• Execution command referencepackage.json

1.2 HBuilderX steps to create uni-app project:

• Click File->New->Project in the toolbar
  

2. Package dependencies

2.1 uView

1. Install dependencies ( note: the project name cannot have Chinese characters )

   // 安装sass
   npm i sass -D
   
   // 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
   npm i sass-loader@10 -D
   
   // 安装uview-ui
   npm install uview-ui@2.0.31

2. Globally introduce uview js librarymain.js

   import uView from "uview-ui";
   Vue.use(uView);

3. Globally introduce uView’s global SCSS theme file

   /* uni.scss */
   @import 'uview-ui/theme.scss';

4. Globally introduce uview basic styles

   // 在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性
   <style lang="scss">
   	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
   	@import "uview-ui/index.scss";
   </style>

5. Configure easycom mode to introduce uview component

   // pages.json
   {
    
    
   	"easycom": {
    
    
   		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
   	},
   	// 此为本身已有的内容
   	"pages": [
   		// ......
   	]
   }

6. Configure vue.config.js file

   // vue.config.js，如没有此文件则手动创建 放入项目根目录下
   module.exports = {
    
    
       transpileDependencies: ['uview-ui']
   }

7. Use uview component

   <u-button type="primary" :disabled="disabled" text="禁用"></u-button>
   <u-button type="primary" loading loadingText="加载中"></u-button>
   <u-button type="primary" icon="map" text="图标按钮"></u-button>
   <u-button type="primary" shape="circle" text="按钮形状"></u-button>
   <u-button type="primary" size="small" text="大小尺寸"></u-button>

8. Document reference and bug handling

   Official document configuration reference
   example project reference
   注意点 : cnpm installation will cause package configuration errors

2.2 Use uni native ui plug-in

• Install sass and sass-loader

npm i sass -D
npm i sass-loader@10.1.1 -D

• Ansou uni-ui

npm install @dcloudio/uni-ui

• use

<script>
   import  {
    
    uniBadge}  from  '@dcloudio/uni-ui'
   export default  {
    
    
				components:   {
    
    uniBadge}
   }
</script>

2.3 uni-modules

• Install components individually through uni_modules (plug-in modular specification), or install a component on demand through uni_modules

• The difference between node_modules and uni_modules
  
• Specific reference introduction

2.4 vuex use

• vuex is a state management library based on the vue framework. It can manage the data status of complex applications, such as communication between sibling components, value transfer among multi-layer nested components, etc. Core concepts State, Getter, Mutation, Action, Module.
  
• Install

npm install vuex --save 先安装依赖

• Create new store/index.js

// 导入 vue 和 vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 以插件形式使用 vuex
Vue.use(Vuex)

// Vuex.Store 构造器选项
const store = new Vuex.Store({
    
    
  state: {
    
    
    username: 'foo',
    age: 18,
  },
})

export default store

• main.js introduction

import store from './store';
Vue.config.productionTip = false
Vue.use(uView);
App.mpType = 'app'

const app = new Vue({
    
    
  // 把 store 的实例注入所有的子组件
  store,
  ...App
})
app.$mount()

• For specific instructions, please refer to vuex

3. Cross-platform compatibility

3.1 Conditional compilation

• Different platforms display different features and functions
• Conditional compilation uses special comments as marks. During compilation, the code in the comments is compiled to different platforms based on these special comments.
• Official website configuration reference

Start #ifdef 或 #ifndef 加 %PLATFORM%with and #endifend with .
#ifdef: if defined only exists on a certain platform
#ifndef: if not defined exists on all platforms except a certain platform
%PLATFORM%: platform name

• uni.getSystemInfo differentiates Androidbetween andiOS

<template>
	<!-- 条件编译支持样式，支持js与Ui -->
	<view class="content">
		<!-- #ifdef H5 -->
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{
    
    {
    
    title}}</text>
		</view>
		<!-- 条件编译 -->
		<!-- #endif -->
		<!-- APP-PLUS有 多端用或|| -->
		<!-- #ifndef APP-PLUS || H5 -->
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				title: 'Hello'
			}
		},
		onLoad() {
    
    
			// 方法里面也一样使用
			// #ifdef APP-PLUS 
			// #endif
		switch(uni.getSystemInfoSync().platform){
    
    
   case 'android' :
  		console.log('运行在Android上')
  		break;
  case 'ios' :
  		console.log('运行在IOS上')
  		break;
  default :
  		console.log('运行在开发者工具上')
  		break;
  		}	  		

		},
	}
</script>

4.API usage

4.1 Forward and reverse parameter transfer

• index.vue

<template>
	<view class="content">
		<navigator url="/pages/home/home?name=admin">跳转</navigator>
		<button @click="hyChange()">事件跳转</button>
	</view>
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				title: 'Hello'
			}
		},
		methods: {
    
    
			hyChange() {
    
    
				uni.navigateTo({
    
    
					url: '/pages/home/home?name=admin&psd=12346678',
					// 触发这个事件成功时的传递参数
					success(res) {
    
    
						res.eventChannel.emit('hyPageHome', {
    
    
							data: '触发成功跳转传递的事件'
						})
					},
					events: {
    
    
						backEvent(data) {
    
    
							console.log('逆序参数', data);
						}
					}
				})
			}
		}
	}
</script>

<style>
</style>

• home.vue

<template>
	<view>
		<button type="default">home</button>
		<button type="warn" size="mini" @click="hyIndex">逆向传递</button>
	</view>
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    

			}
		},
		// 正向传参
		onLoad(options) {
    
    
			console.log('@参数', options);
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('hyPageHome', res => {
    
    
				console.log(res);
			})
		},

		methods: {
    
    
			// 逆向传参
			hyIndex() {
    
    
				uni.navigateBack()
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('backEvent', {
    
    
					name: 'admin',
					pad: 'password'
				})
			}
		}
	}
</script>

<style>

</style>

5. Interface encapsulation

• reference

6. Multi-terminal packaging

3.1 WeChat Mini Program

3.2 Package App

3.2.1 Own certificate-application

1. Download and install jre and configure environment variables (no configuration is done here)

bin\jlink.exe --module-path jmods --add-modules java.desktop --output jre

2. Use the keytool -genkey command to generate a certificate

estaliasIt is the certificate alias that needs to be filled in later on hbuilder.
test.keystoreIt is the certificate file that needs to be filled in later on hbuilder. The
keystore password you enter is the certificate private key password that needs to be filled in later on hbuilder (such as 123456).

3. View certificate

keytool -list -v -keystore test.keystore

4. Configuration注意导入的证书文件是test.keystore

3.2.3 Offline packaging configuration

Refer to the official website for offline packaging configuration

Refer to
the uniapp project practice written by the author of christian-dong and
the interface encapsulation written by Zhou_hui