配置uniapp调试环境-Toy模板网

这篇具有很好参考价值的文章主要介绍了配置uniapp调试环境。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uni-app介绍

uni-app开发工具HBuilderX

创建项目前提条件

uni-app项目结构

配置mumu模拟器

uni-app生命周期

1.应用生命周期小程序规范

2.页面生命周期-小程序规范

3.组件生命周期 vue规范

uni-app登录按钮方法

uni-app发布安卓app

uni-app介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

官网地址：uni-app官网 (dcloud.io)

uni-app开发工具HBuilderX

官网地址：HBuilderX-高效极客技巧

创建项目前提条件

安装vue，

创建项目demo代码

vue create -p dcloudio/uni-preset-vue demo

uni-app项目结构

pages.json是全局配置，决定页面文件的路径，窗口样式，原生的导航栏，底部的原生tabbar等，类似于微信小程序中的app.json的页面管理部分

uni.scss是全局样式

App.vue:主组件

Main.js:入口文件

manifest.json:文件是应用的配置文件，用于指定应用的名称、图标、权限等。提供可视化操作

配置mumu模拟器

模拟器下载地址：https://mumu.163.com/

mumu模拟器的默认端口是7555

在uni-app里设置端口，在uni-app里打开“运行-->运行到手机或模拟器-->Android模拟器端口设置，

在“Android模拟器端口”输入框里输入“7555”

配置uniapp调试环境,小程序,uni-app

打开模拟器之后运行程序。

配置uniapp调试环境,小程序,uni-app

uni-app生命周期

uniapp中生命周期分类分为三大类

1.应用生命周期小程序规范

app.vue中控制

onLaunch 当uniapp初始化完成时触发（全局只触发一次）

onShow 当uniapp启动，或从后台进入前台显示

onhide 当uniapp从前台进入后台

onerror 当uniapp报错时触发

onUniNViewNessage 当nvue页面发送的数据进行监听，可参考nvue向vue铜须

onUnhandledRejection 对未处理的promise拒绝时间监听函数

onPageNotFound页面不存在监听函数

onThemeChange 监听系统主题变化

2.页面生命周期-小程序规范

onInit 只适用于百度小程序监听页面初始化

onLoad 监听页面加载

onShow 监听页面显示

onHide 监听页面隐藏

onUnload 监听页面卸载

onResize 监听窗口尺寸变化适用于app，微信小程序，快手小程序

onPullDownRefresh 监听用户下拉动作

onReady 监听页面初次渲染完成

onReachBottom 页面滚动到底部的事件

onTabitemTap 点击tab时触发，参数为objecct

3.组件生命周期 vue规范

参考vue的生命周期

uni-app登录按钮方法

common下request.js文件,配置不同的后端请求路由

const MicorPortUrl='http://192.168.11.149:8616/';
const Micorapi ='http://192.168.18.67:8999/';
const BackupApi ='http://192.168.11.153:8999/';
export default{
	MicorPortUrl,Micorapi,BackupApi
}

index.vue文件

//引入配置路由文件,在src下common目录下request.js文件中配置路由
import api from '@/common/request.js';
export default {
	data() {
		return {
			focus: true,
		  form:{
		    username: '',
		    // password: '',
		   },
		  imageURL: '../static/bg.png',
		  release: {
		   	 version: ''
		   	}
		}
	},
	methods: {
		submit() {
// 判断用户是否填写账号密码
				if(!this.form.username) {
//显示消息提示框。
				return	uni.showToast({
					 title: '请输入账户',
					 icon:'error',
					duration: 2000
				});
				} 
//请求数据
				uni.request({
					url: api.MicorPortUrl + 'Fuji/Login',
					method: 'post',
					data: {
						userName: this.form.username
					},
					success: res => {
						if (res.data.success == true) 
						{
//显示消息提示框。
							uni.showToast({
								title: '登录成功',
								duration: 1000,
								icon: 'success'
							});
//保存缓存，将数据存储到本地缓存中指定的key中，会覆盖原来key的内容，异步接口
							uni.setStorage({
								key:'login',
								data:{
									username:this.form.username,
								}
							});
//页面跳转
							uni.navigateTo({
								url: '../list/machineFeeding'
								});	
						} 
						else 
						{
//显示fail消息提示框。
							uni.showModal({
								title: '提示',
								content: `${res.data.msg}`,
								confirmColor: '#f9ae3d',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
									}
								}
							});
						}
					},
					fail: err => {
						console.log(err);
					}
				});
		}
	}
}

uni-app发布安卓app

采用云打包方式，首先获取appid
—1）DCloud 根据 appid 来判断用户是否有权限进行云打包。既不是所有者、又不是协作者，就无法打包；
—2）打包后的原生应用根据 appid 来管理本地资源。每个appid有独立的沙盒，存储是隔离的；
—3）热更新（wgt升级）通过 appid 来覆盖资源

配置uniapp调试环境,小程序,uni-app 文章来源地址https://www.toymoban.com/news/detail-678938.html