微信小程序知识点梳理
文章目录
前言
一、窗口配置？
窗口配置其实在微信官方文档的小程序里面有详细的全局配置，最常用的就是路由，底部导航tabbar，导航栏的文本，背景颜色，窗口的背景色等，下面附上图片
在app.json中配置
效果图
二、小程序文件类型
每个页面都是由四个文件组成：分别为wxml(相当于html文件)，js、wxss(相当于css文件)、json，
作用：
wxml 相当于html文件,就是用来写也页面的内容
js 相当于script内写的内容，用来写页面的功能效果
wxss相当于css文件，主要是用来设置页面的样式
json主要用来配置路由，以及页面的基础配置，如果要用到UI组件，引入就引入在json文件中
三、小程序的生命周期以及页面的生命周期
小程序的生命周期：
每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
// app.js
App({
onLaunch (options) {
//生命周期函数–监听小程序初始化（当小程序初始化完成时，会触发 onLaunch（全局只触发一次）。）
// Do something initial when launch.
},
onShow (options) {
//生命周期函数–监听小程序显示（当小程序启动，或从后台进入前台显示，会触发 onShow）
// Do something when show.
},
onHide () {
//生命周期函数–监听小程序隐藏（当小程序从前台进入后台，会触发 onHide）
// Do something when hide.
},
onError (msg) {
//错误监听函数（当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息）
console.log(msg)
},
globalData: 'I am global data'// globalName是数据，这里面的函数和数据都是全局的。
})
页面的生命周期：
对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。
简单的页面可以使用 Page() 进行构造：
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台时执行
},
onReady: function() {
// 页面首次渲染完毕时执行
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行
},
onPullDownRefresh: function() {
// 触发下拉刷新时执行
},
onReachBottom: function() {
// 页面触底时执行
},
onShareAppMessage: function () {
// 页面被用户分享时执行
},
onPageScroll: function() {
// 页面滚动时执行
},
onResize: function() {
// 页面尺寸变化时执行
},
onTabItemTap(item) {
// tab 点击时执行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件响应函数
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
// 自由数据
customData: {
hi: 'MINA'
}
})
四、数据请求和封装
首先在根目录下创建一个http文件夹，在文件夹下分别创建：env.js,api.js,request.js三个文件。好了废话不多说直接上代码。
env.js代码如下
//设置公共访问的url，即环境变量
module.exports = {
// 开发环境
dev: {
baseUrl: 'http://localhost:3000'
},
// 测试环境
test: {
baseUrl: 'www.test.com'
},
// 线上环境
prod: {
baseUrl: 'https://api.it120.cc'
}
}
api.js代码如下:
// 引入request请求
const {
request
} = require('./request.js')
// 基于业务封装的接口
module.exports = {
/**
* 拿封装商品列表举例
*/
// url,method,data
getGoodsList: () => {
// console.log('获取商品列表方法')
return request('/shop/goods/list','POST',{
},true); //第一个参数为地址，第二个参数为请求方式，第三个参数为传递的参数，第四个参数为是否需要token
},
//.........可以根据自己的数据继续封装
;
request.js代码如下：
// 引入env中的url
const {
baseUrl
} = require('./env.js').prod
// 专属域名
const subDomain = 'agai'
module.exports = {
/**二次封装wx.request()
* url:请求的接口地址
* method:请求方式
* data传参
* */
request: (url, method = 'GET', data = {
}, isSubDomain) => {
// console.log(baseUrl)
let _url = `${
baseUrl}/${
isSubDomain?subDomain:''}${
url}`
return new Promise((resolve, reject) => {
wx.showLoading({
title:"正在加载"
})
wx.request({
url: _url,
data: data,
method: method,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: (res) => {
// console.log(res)
let {
code}=res.data
if(code==0){
wx.hideLoading()
resolve(res.data)
}else{
wx.showToast({
title: '数据请求失败',
})
}
}
})
})
}
}
五、路由跳转分类和路由跳转传递参数
小程序的路由跳转共有六种
wx.switchTab({
//1、跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
url: '/index'
})
wx.reLaunch({
//2、关闭所有页面，打开到应用内的某个页面
url: 'test?id=1'
})
wx.redirectTo({
//3、关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
url: 'test?id=1'
})
wx.navigateTo({
//4、保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
url: 'test?id=1',
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', {
data: 'test' })
}
})
wx.navigateBack({
//5、关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
delta: 2
})
//6、EventChannel页面间事件通信通道
//方法
EventChannel.emit(string eventName, any args)
//触发一个事件
EventChannel.on(string eventName, EventCallback fn)
//持续监听一个事件
EventChannel.once(string eventName, EventCallback fn)
//监听一个事件一次，触发后失效
EventChannel.off(string eventName, EventCallback fn)
//取消监听一个事件。给出第二个参数时，只取消给出的监听函数，否则取消所有监听函数
传递参数
简单的数据直接使用url传递
如：发送给跳转页面
wx.navigateTo({
url: '../detail/detail?id=1'
})
跳转页面在onLoad()函数会获取到一个option（自定义名）的参数，该参数就包含了
Page({
onLoad(options) {
console.log(options)
}
})
它会log出id
六、路由配置
配置路由：在app.json中配置，代码如下
"pages":[
"pages/home/home",
"pages/classify/classify",
"pages/shopcar/Shopcar",
"pages/mine/Mine",
"pages/index/index",
"pages/logs/logs",
"pages/home/homedetail/ShopDetail",
"pages/login/login"
],
其实可以直接配置路由，它就会根据你设置的路由，自动生成相对应的文件
七、点击获取参数
点击获取参数，就是在点击事件中获取参数，比如要获取id，代码如下注意data-id:
//shop.wxml
//用data-id传递id
<view class="recommend-item" wx:for="{
{goods}}" wx:key="index" bindtap="detail" data-id="{
{item.id}}">
<image src="{
{item.pic}}"></image>
<text class="name">{
{
item.name}}</text>
<view class="money">
<text>￥{
{
item.minPrice}}</text>
<text>￥{
{
item.originalPrice}}</text>
</view>
//js
detail:function(e){
let id=e.currentTarget.dataset.id//通过e.currentTarget.dataset接收到id(可以log一下e，看是否有你需要的参数)
wx.navigateTo({
url: "./homedetail/ShopDetail?id="+id,
})
},
八、本地存储的几种方式
小程序的本地存储主要有两种：同步和异步
同步：
try {
wx.setStorageSync('key', 'value')//1、存储值
} catch (e) {
}
try {
wx.removeStorageSync('key')//2、移除指定的值
} catch (e) {
// Do something when catch error
}
try {
var value = wx.getStorageSync('key')//3、 获取值
if (value) {
// Do something with return value
}
} catch (e) {
// Do something when catch error
}
try {
const res = wx.getStorageInfoSync()//4、 获取当前 storage 中所有的 key
console.log(res.keys)
console.log(res.currentSize)
console.log(res.limitSize)
} catch (e) {
// Do something when catch error
}
try {
wx.clearStorageSync()//5、清除所有的key
} catch(e) {
// Do something when catch error
}
异步
wx.setStorage({
//1、将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。
key:"key",
data:"value"})
wx.removeStorage({
//2、从本地缓存中移除指定 key
key: 'key',
success (res) {
console.log(res)
}})
wx.getStorageInfo({
// 3、获取当前 storage 中所有的 key
success (res) {
console.log(res.keys)
console.log(res.currentSize)
console.log(res.limitSize)
}
})
wx.getStorage({
//4、 获取值
key: 'key',
success (res) {
console.log(res.data)
}
})
wx.clearStorage()//5、清除所有的key
该处使用的url网络请求的数据。
总结
以上所述，为自己理解和经验，如果有不正确的地方，欢迎指正，本篇博客如果对你有用，希望可以关注一下哟~~