网站建设与管理 规划书,投诉举报网站 建设方案,做网站能赚吗,wordpress实现分页目录 uni-app介绍 uni-app开发工具HBuilderX 创建项目前提条件 uni-app项目结构 配置mumu模拟器 uni-app生命周期 1.应用生命周期 小程序规范 2.页面生命周期-小程序规范 3.组件生命周期 vue规范 uni-app登录按钮方法 uni-app发布安卓app uni-app介绍 uni-app 是一个…目录 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” 打开模拟器之后运行程序。 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 MicorPortUrlhttp://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 —1DCloud 根据 appid 来判断用户是否有权限进行云打包。既不是所有者、又不是协作者就无法打包 —2打包后的原生应用根据 appid 来管理本地资源。每个appid有独立的沙盒存储是隔离的 —3热更新wgt升级通过 appid 来覆盖资源