微信小程序基础入门的知识点

it2026-08-29  4

微信小程序基础入门的知识点

1.窗口配置

**就是在我们app.json文件就是对我们微信小程序进行全局配置 ,它决定我们页面文件的路径 设置多个tab 1.1 pages设置页面的路径 数组的第一个就是我们小程序初始页面 文件名不需要我们写文件后缀 框架会自动去寻找路径 进行四个文件的整合

1.2 window 设置默认页面的窗口表现 设置小程序的状态栏。导航栏、标题、窗口背景色 1.3 tabBar 设置底部tab 导航栏 1.4 networkTimeout 设置网络超时时间 1.5 debug 设置是否开启debug模式 在开发者工具的控制台面板,调试信息以 info 的形式给出,其信息有Page的注册,页面路由,数据更新,事件触发 。 可以帮助开发者快速定位一些常见的问题。

如果排在我们第一位的话他就是我们默认的路由路径**

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

2.1 page.js 类似于我们的js 可以给页面添加各种监听事件 2.2 page.json 页面配置可以设置tab栏 导航栏 是一个json文件 2.3 page.wxml 是框架的一套标签语言 就类似于我们的html文件 2.4 page.wxss 是一套样式语言 用来描述wxml的组件样式 //查看下方超链接 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

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

//点击下方链接 https://blog.csdn.net/DJxyyy/article/details/109230579

4.数据请求和封装

//点击下方链接 https://blog.csdn.net/DJxyyy/article/details/109187775

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

//点击下方链接 https://blog.csdn.net/DJxyyy/article/details/109231101

6.路由配置

“tabBar”: { “selectedColor”:"#D81E06", //选中的颜色 “list”: [{ “pagePath”: “pages/home/home”, “text”: “首页”, //图标上方的文字 “iconPath”: “./images/home.png”, //我们默认的图标 “selectedIconPath”: “./images/home_1.png” //我们所选中的图标

}, { "pagePath": "pages/classify/classify", "text": "分类", "iconPath": "./images/fenleixuanzhong.png", "selectedIconPath": "./images/fenleixuanzhong_1.png" }, { "pagePath": "pages/carts/carts", "text": "购物", "iconPath": "./images/gouwu.png", "selectedIconPath": "./images/gouwu_1.png" }, { "pagePath": "pages/user/user", "text": "我的", "iconPath": "./images/wode.png", "selectedIconPath": "./images/wodedangxuan.png" } ]

}

}

7.点击获取参数

jumpIndex(e) { this.data.id = e.currentTarget.id this.userList = [] app.http.hotto({ categoryId: this.data.id }).then(res => { console.log(res.data.data); if (res.data.data == undefined) { wx.showToast({ title: '暂无数据', duration: 500 }) this.setData({ title: res.data.msg }) this.setData({ userList: [] }) } else { this.setData({ title: "", userList: res.data.data }) } })

8.本地存储的几种方式

1、wx.setStorageSync(string key, any data)

wx.setStorage({ key:"key", data:"value" }) try { wx.setStorageSync('key', 'value') } catch (e) { }

2、wx.setStorage(Object object) 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。

wx.setStorage({ key:"key", data:"value" }) try { wx.setStorageSync('key', 'value') } catch (e) { }

3、any wx.getStorageSync(string key)

wx.getStorage({ key: 'key', success (res) { console.log(res.data) } }) try { var value = wx.getStorageSync('key') if (value) { // Do something with return value } } catch (e) { // Do something when catch error }

4、wx.getStorage(Object object)

wx.getStorage({ key: 'key', success (res) { console.log(res.data) } }) try { var value = wx.getStorageSync('key') if (value) { // Do something with return value } } catch (e) { // Do something when catch error }
最新回复(0)