小程序与网页开发的区别
小程序项目初始化
- app.js加载入口文件(应用本地文件存储,将全局应用的数据,存储到本地缓存。操作本地缓存的数据;获取用户信息)
- app.json整个项目配置文件(例如设置小程序的导航条、标题、窗口颜色等)
- app.wxss是整个项目的全局样式文件
1.每个具体文件由四个页面组成
page-name.js 当前页面的入口文件
page-name.json 当前页面的配置文件
page-name.wxml 当前页面的内容(相当于浏览器端的 HTML)WXML 语法
page-name.wxss 当前页面的样式文件,可写 CSS 代码WXSS语法
2.新建文件通过配置
新建页面文件,只需要在 app.json 中的 pages 字段中指定,然后保存 app.json
生命周期
周期主要指两个循环状态前台到后台;初始化到销毁
小程序生命周期分为项目生命周期和页面生命周期
项目生命周期
App({
onLaunch (options) {
//全局只调用一次(逻辑只执行一次)
},
onShow (options) {
//应用初始化完成,从后台切换到前台
},
onHide () {
// 从前台切换到后台(小程序应用转换成别的应用)
},
onError (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
页面生命周期
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 页面创建时执行,一个页面只会加载一次
},
onShow: function() {
// 页面出现在前台时执行,每次打开页面都会加载一次
},
onReady: function() {
// 页面首次渲染完毕时执行,一个页面只会调用一次
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行,当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack(),触发此方法,页面卸载(内存释放)
}
})
小程序启动流程
1、小程序初始化完成后,页面首次加载触发onLoad,只会触发一次。
2、当小程序进入到后台,先执行页面onHide方法再执行应用onHide方法。
3、当小程序从后台进入到前台,先执行应用onShow方法再执行页面onShow方法
云API
云API,是微信平台提供的,供小程序调用的接口,常用的云API有:
云 API 作用
wx.getUserInfo 获取用户信息
wx.login 调用接口获取登录凭证(code)
wx.getSetting 获取用户当前设置
wx.setStorageSync 将数据同步存储在本地缓存中
wx.getStorageSync 同步获取本地缓存中的数据
wx.navigateTo 保留当前页面,跳转到应用内的某个页面
页面跳转的方式
1.通过 navigator 组件的url属性
2.给组价通过bindtap属性绑定bindviewTap事件,在事件函数中通过wx.navigateTo进行跳转(事件触发)
3.在app.json中,通过tabBar字段指定tabBar详情
数据绑定
- 在 .js 文件中绑定数据
data 字段设置数据的初始值
this.setData 函数可以更新 data 中绑定的数据 - 在 .wxml 中展示绑定的数据
展示语法是 {{变量名}}
组件
小程序中的组件,对应HTML标签常用view、image、text、navigator
项目实践
1.进入小程序首页通过 wx.getLocation获取当前地理位置信息,需要在app.json中声明permission字段
生命周期
在uni-app中,生命周期函数分为应用生命周期(APP生命周期)和页面生命周期(Vue生命周期)。下面是它们的具体列表:
应用生命周期(APP生命周期)
onLaunch(options):应用初始化时触发,全局只触发一次。
onShow(options):应用启动或从后台进入前台显示时触发。
onHide():应用从前台进入后台时触发。
onError(err):应用发生错误时触发。
onUniNViewMessage(Object message):处理来自Native主动发送的数据。
onThemeChange(Object theme):系统主题改变时触发(仅App.vue可以监听)。
页面生命周期(Vue生命周期)
onLoad(options):页面加载时触发,其参数为上个页面传递过来的参数,用于页面传参。
onShow():页面显示/切入前台时触发。
onReady():页面初次渲染完成时触发。
onHide():页面隐藏/切入后台时触发。
onUnload():页面卸载时触发。
onPullDownRefresh():用户下拉刷新时触发。
onReachBottom():页面上拉触底时触发,用于下拉下一页数据。
onTabItemTap(Object item):点击 tab 时触发(仅适用于微信小程序)。
以上是uni-app中的主要生命周期函数,通过它们你可以控制应用和页面在不同阶段的行为,实现更加精细化的控制和操作。