小程序介绍,生命周期,封装数据请求,路由跳转传参,点击事件获取参数,本地存储

it2026-10-04  3

1.窗口配置

1.配置页面路径

"pages/home/home", "pages/goodDetail/goodDetail", "pages/classify/classify", "pages/shoppingTrolley/shoppingTrolley", "pages/mine/mine"

2.window 配置全局默认的窗口

"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "天使童装", "navigationBarTextStyle": "black" },

3.tabar 导航条

"tabBar": { "list": [{ "pagePath": "pages/home/home", "text": "首页", "iconPath": "image/nav/home-off.png", "selectedIconPath":"./image/nav/home-on.png" }, { "pagePath": "pages/classify/classify", "text": "分类", "iconPath": "image/nav/ic_catefory_normal.png", "selectedIconPath":"./image/nav/ic_catefory_pressed.png" }, { "pagePath": "pages/shoppingTrolley/shoppingTrolley", "text": "购物车", "iconPath": "image/nav/cart-off.png", "selectedIconPath":"./image/nav/cart-on.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "image/nav/my-off.png", "selectedIconPath":"./image/nav/my-on.png" }] },

2.小程序文件类型 每个页面由 4个文件组成

.wxml布局文件 .wxss样式文件 .js逻辑处理 .json配置文件

3.小程序生命周期 和 小程序页面的生命周期

小程序生命周期:

onLauch:首次打开小程序,全局只触发一次。 onShow:初始化完成后,触发监听小程序显示。 onHide:从前台进入后台触发。 onError:小程序后台运行一定时间,或系统资源占用过高,会被销毁

小程序页面的生命周期:

onLoad:页面加载时触发。一个页面只会调用一次 onShow:页面载入后触发onShow方法,显示页面,每次打开页面都会调用一次; onReady:首次显示页面,会触发onReady方法,渲染页面和样式,一个页面只会调用一次; onHide:当小程序后台运行或跳转到其他页面时,触发onHide方法; onUnload:页面卸载时触发。如redirecTo或navigteBack

4.数据请求和封装

数据请求:

wx.request({ url: 'https://api.it120.cc/skx/shop/goods/list', header: { ​ "Content-Type": "application/x-www-form-urlencoded" }, data:{ ​ x:"", y:"" }, success: (res)=> { ​ console.log(res) } })

封装

首先创建俩个js文件 分别是api.js和http.js 第一步在http.js封装get和post export function get(url,params){ return new Promise((resolve,reject)=>{ wx.request({ url: 'https://api.it120.cc/skx/'+url, data:params, header:{ "Content-Type": "application/x-www-form-urlencoded" }, method:"get", success:(res)=>{ resolve(res) }, fail:(err)=>{ reject(res) } }) }) } export function post(url,params){ return new Promise((resolve,reject)=>{ wx.request({ url: 'https://api.it120.cc/skx/'+url, data:params, header:{ "Content-Type": "application/x-www-form-urlencoded" }, method:"post", success:(res)=>{ resolve(res) }, fail:(err)=>{ reject(res) } }) }) } 然后在api.js中引入get和post的请求方式 import {get,post}from "./http" 接着请求接口使用封装好的方法 export function lieList(url,params){ return get(url,params) } 最后在页面中引入要使用的接口 import {lieList } from "../../utils/http/api"

5.路由跳转分类 和 路由跳转传递参数

路由跳转有四种方式,分别是:

1.wx.navigateTo(); 2.wx.redirectTo(); 3.wx.switchTab(); 4.wx.navigateBack();

navigateTo是将原来的页面保存在页面栈中,在跳入到下一个页面的时候目标页面也进栈,只有在这个情况下点击手机的返回按钮才可以跳转到上一个页面;

redirectTo和switchTab都是先清除栈中原来的页面,然后目标页面进栈,使用这两种跳转方式,都不能通过系统的返回键回到上一个页面,而是直接退出小程序;

redirectTo使用的时候一定要配合tabBar或是页面里面可以再次跳转按钮,否则无法回到上一个页面;

switchTab跳转的页面必须是tabBar中声明的页面;

tabBar中定义的字段不能超过5个页面,小程序的页面栈层次也不能超过5层。

navigateBack只能返回到页面栈中的指定页面,一般和navigateTo配合使用。

wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面

路由跳转示例代码

1.wx.navigateTo();

wx.navigateTo({ url: 'pages/home/home?id=1' })

2.wx.redirectTo()

wx.redirectTo({ url: 'pages/home/home?id=1' })

3.wx.switchTab()

wx.switchTab({ url: '/index' //tabBar中声明的页面 })

4.wx.navigateBack()

// 此处是A页面* wx.navigateTo({ url: 'B?id=1' }) *// 此处是B页面* wx.navigateTo({ url: 'C?id=1' }) *// 在C页面内 navigateBack,将返回A页面* //可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层 wx.navigateBack({ delta: 2 })

参数传递示例代码

wx.navigateTo({ url: 'pages/home/home?id=1' }) 参数与路径之间使用?分隔,参数与参数之用=相连,不同参数用&分隔 上面代码中id为参数键,1为参数值 在页面中onLoad()方法中option对象即为参数对象,可以通过参数键来取参数值

6.路由配置

路由配置如下

{ "pages": [ "pages/index/index", "pages/search/search", "pages/shopCart/shopCart", "pages/mine/mine" ] }

路由跳转如下

wx.navigateTo:打开新页面时调用,

wx.redirectTo:页面重定向调用,

wx.navigateBack页面返回调用或用户按左上角返回按钮,

wx.switchTab:Tab切换时调用或用户切换Tab

7.点击获取参数

wxml:

通过data-来传递

<view bindtap="getList" data-id="{{item.id}}"></view>

js:

通过e.currentTarget.dataset来接收后面跟的是data-后面的名字

getList(e){ console.log(e); var id=e.currentTarget.dataset['id']; }

8.本地存储的几种方式

一、同步

1.wx.setStorageSync()//存储值

1. try { 2. wx.setStorageSync('key', 'value') 3. }

2.wx.removeStorageSync()//移除指定的值

try { wx.removeStorageSync('key') }

3.wx.getStorageSync()//获取值

try { var value = wx.getStorageSync('key') }

4.wx.getStorageInfoSync()//获取当前storage中所有的key

try { const res = wx.getStorageInfoSync() console.log(res.keys) console.log(res.currentSize)//获取的key值 console.log(res.limitSize) }

5.wx.clearStorageSync()//清除所有的key

try { wx.clearStorageSync() }

二、异步

1.wx.setStorage()//存储值

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。数据存储生命周期跟小程序本身一致,即除非用户主动删除或超过一定时间被自动清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。

wx.setStorage({ key:"key", data:"value" })

2.wx.removeStorage(); // 移除指定的值

wx.removeStorage({ key: 'key', success (res) { console.log(res) }})

3.wx.getStorage(); // 获取值

wx.getStorage({ key: 'key', success (res) { console.log(res.data) }})

4.wx.getStorageInfo(); // 获取当前 storage 中所有的 key

wx.getStorageInfo({ success (res) { console.log(res.keys) console.log(res.currentSize) console.log(res.limitSize) }})

5.wx.clearStorage(); // 清除所有的key

wx.clearStorage()
最新回复(0)