微信小程序知识点梳理
文章目录
前言
一、窗口配置?
窗口配置其实在微信官方文档的小程序里面有详细的全局配置,最常用的就是路由,底部导航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网络请求的数据。
总结
以上所述,为自己理解和经验,如果有不正确的地方,欢迎指正,本篇博客如果对你有用,希望可以关注一下哟~~