Uni-app基础

一只大黑洋

已于 2024-02-23 10:04:29 修改

阅读量3k

点赞数 3

文章标签：小程序 js

于 2022-08-01 17:10:53 首次发布

本文链接：https://blog.csdn.net/H524268015wsw/article/details/126104328

版权

Uni-app基础

一、Uni-app是什么？

uni-app是一个使用Vue.js开发跨平台应用的前端框架；开发者编写一套代码，uni-app将其编译到iOS、Android、微信小程序等多个平台，保证其正确运行并达到优秀体验。

官网地址：uni-app官网 (dcloud.io)https://zh.uniapp.dcloud.io/

二、开发环境

1、开发使用软件Hbuilder X

下载地址：HBuilderX-高效极客技巧HBuilderX是当前最快的HTML开发工具，强大的代码助手帮你快速完成开发，最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛https://dcloud.io/hbuilderx.html

2、开发使用的视图工具

微信开发者工具：

下载 / 稳定版更新日志 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

三、创建项目

首先：打开下载好的Hbuildex 。

四、启动小程序

1、微信公众平台查看自己的小程序id 开发 → 开发管理 → 开发设置 → 找到appid微信公众平台 (qq.com)https://mp.weixin.qq.com/如图示例：

2、在uniapp 中进行配置目录下的manifest.json → 微信小程序配置 → 填写小程序appid

3、启动微信开发者工具

tips：其中会让登陆

五、创建的项目目录结构解析

├── pages # 页面（每个页面可以作为一个文件）
├── static # 静态资源（图片、音视频）
├── unpackage # 打包文件
├── App.vue # 主文件（可以定义全局方法、样式、变量）
├── main.js # 入口（引入插件）
├── pages.json # 页面路由
├── package.json # npm相关文件
└── uni.scss # 常用于定义全局样式变量、第三方ui库的样式（插件）

2.1、page

每在page中新建一个页面都需要在pages.json里配置，可以配置每个顶部导航栏的样式，亦或是全局的顶部导航栏样式。

一个页面的基础配置如图：

一般情况下足以开发更多请参考：uni-app官网

2.2、 app.vue

1.onLunch 只会在进入程序的时候执行一次，一般搭配搭建或等获取微信公众号的code ，想要app.vue调取methods 的方法记得用 getApp.方法名( )

2.globalData：常用于定义一些公共的变量、例如图片路径资源、手机是否是ios 或安卓。

使用：现在js中引入

(1) import app from '@/App.vue'

(2) platform: app.globalData.platform

(3) style 定义公共的全局样式例如垂直水平居中、布局、公共类目样式都可以定义

六、uniapp的写法与vue2的区别

写法上与vue2基本相同，不同的是部分标签、生命周期钩子函数。

1、标签不同

uniapp中的盒子标签使用的是view

2、生命周期

函数名	说明	执行时机	使用场景
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例	页面初始进入	只在初始化时使用一次
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面	每次进入	需要每次更新数据
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发	页面初始进入onLoad、onShow之后	更多根据搭配插件使用
onHide	监听页面隐藏	每次离开	更多于记录一些数据
onUnload	监听页面卸载	最后离开	卸载一些监听事件

onLoad生命周期会接受一个参数里面包含上个页面跳转传递的参数

例如A页面跳转B页面

A页面

jump(){
	uni.navigateTo({
		url:`/pages/index/pageB?id=${1}`
	})
}

B页面

onLoad(e) {
	console.log('接收参数',e.id);
}

DCloud 插件市场

介绍 - Vant Weapp (gitee.io)

总结

一只大黑洋

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Uni-app基础

uni-app是一个使用Vue.js开发跨平台应用的前端框架；开发者编写一套代码，uni-app将其编译到iOS、Android、微信小程序等多个平台，保证其正确运行并达到优秀体验。下载地址：HBuilderX-高效极客技巧1.微信公众平台查看自己的小程序id 开发 → 开发管理 → 开发设置 → 找到appid2.在uniapp 中进行配置目录下的manifest.json → 微信小程序配置 → 填写小程序appid ├── pages......
复制链接

扫一扫