一、认识uni-app
官网:uni-app官网 (dcloud.io)
uni-app
是一个使用 Vue.js (opens new window)开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
DCloud
公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app(详见 (opens new window)),腾讯课堂官方为uni-app录制培训课程(详见 (opens new window)),开发者可以放心选择。
uni-app
在手,做啥都不愁。即使不跨端,uni-app
也是更好的小程序开发框架(详见 (opens new window))、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。
uniapp框架图
二、环境搭建
UniApp开发的环境搭建
下载及安装hbuilderx;https://www.dcloud.io/hbuilderx.html
解压安装打开即可
微信开发者工具:
https://developers.weixin.qq/miniprogram/dev/devtools/stable.html
傻瓜安装完就好了
去微信公众号平台: 微信公众平台 (qq)
注册生成你的AppID
点击开发设置
保存好你这组数据。
三、创建一个项目
文件--》新建--》项目--》输入你项目名,选择创建路径,默认模板
运行:选择你的浏览器,或者选择微信小程序运行
四、uni-app的生命周期
uni-app完整支持 Vue实例的生命周期,同时还新增应用生命周期及页面生命周期。
1、应用生命周期
函数名 | 说明 |
---|---|
onLaunch | 当uni-app 初始化完成时触发(全局只触发一次) |
onShow | 当 uni-app 启动,或从后台进入前台显示 |
onHide | 当 uni-app 从前台进入后台 |
onError | 当 uni-app 报错时触发 |
onUniNViewMessage | 对 nvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯(opens new window) |
onUnhandledRejection | 对未处理的 Promise 拒绝事件监听函数(2.8.1+) |
onPageNotFound | 页面不存在监听函数 |
onThemeChange | 监听系统主题变化 |
// 只能在App.vue里监听应用的生命周期
设置404跑丢页面
然后由这个页面会跳转到专门的404页
2、页面生命周期
onLoad | 监听页面加载,其参数为上个页面传递的数据,参数类型为object(用于页面传参) |
onShow | 监听页面显示 |
onReady | 监听页面初次渲染完成 |
onHide | 监听页面隐藏 |
onUnload | 监听页面卸载 |
onPullDownRefresh | 监听用户下拉动作时触发 |
onReachBottom | 页面上拉触底事件的处理函数 |
onShareAppMessage | 用户点击右上角分享 微信小程序时触发 |
onPageScroll | 监听页面滚动 |
onTabItemTap | 当前是 tab 页时,点击 tab 时触 |
onshow()
onPullDownRefresh(): 下拉刷新
onReachBottom(): 页面到达底部:
index.vue 代码
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<div class="aa"> 22222222</div>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onShow() {
console.log('首页在展示!')
},
onLoad(){
},
onPullDownRefresh(){
console.log('页面下拉刷新')
},
onReachBottom() {
console.log('页面到达底部')
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.aa{
height: 900px;
}
</style>
更多推荐
uni-app 小程序开发 (一)
发布评论