小程序与uniapp

小程序与网页开发的区别

小程序项目初始化

小程序项目管理后台

• 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详情

数据绑定

1. 在 .js 文件中绑定数据
   data 字段设置数据的初始值
   this.setData 函数可以更新 data 中绑定的数据
2. 在 .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中的主要生命周期函数，通过它们你可以控制应用和页面在不同阶段的行为，实现更加精细化的控制和操作。