微信小程序
2023-06-27 21:03:22 0 举报AI智能生成
学习
作者其他创作
大纲/内容
1、介绍
1、微信小程序发请求，因为小程序中没有 DOM，BOM，所以发请求要使用它自己的 API
2、小程序就是运行在微信中的一个 App
3、参考官方文档 https://developers.weixin.qq.com/miniprogram/introduction/
3、下载开发者工具地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2、app的生命周期
1、 onLaunch function 否 生命周期回调——监听小程序初始化。
2、 onShow function 否 生命周期回调——监听小程序启动或切前台。
3、 onHide function 否 生命周期回调——监听小程序切后台。
2、 onShow function 否 生命周期回调——监听小程序启动或切前台。
3、 onHide function 否 生命周期回调——监听小程序切后台。
2、参考官方文档 https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
3、getApp
1、App 实例全局只有一个，其它地方需要公共的数据，直接在app中定义数据，当作全局数据
// 数据
AppData:{
name:"我是app里面的数据"
},
AppData:{
name:"我是app里面的数据"
},
2、在其它页面.js文件中通过getApp获取实例，改变或者查询数据
// 获取app.js实例
const app=getApp()
// 加载事件
onLoad(){
//修改app中的数据数据
app.AppData.name="app"
console.log(app.AppData.name);
},
const app=getApp()
// 加载事件
onLoad(){
//修改app中的数据数据
app.AppData.name="app"
console.log(app.AppData.name);
},
4、data
1、定义data,被page函数包裹，其它页面也一起由入口函数包裹
Page({
data: {
name: 1
}
}）
data: {
name: 1
}
}）
2、可以通过this.data.属性名字操作data中的数据
1、操作的数据不会在视图中进行修改
2、代码实现
console.log(this.data.name)
this.data.name=1+1
this.data.name=1+1
3、可以通过this.setData（传递对象）操作data中的数据（特别重要）
1、操作的数据会在视图中进行修改
2、数据通讯原理原理
1、逻辑层获取数据进行序列化，异步传输的、非实时的
2、视图层需要进行反序列化获取数据，进行渲染
3、注意点：局部更新数据，不同线程或进程进行操作，微信小程序是单线程，数据需要更新所有使用最频繁、最容易引发性能问题的
4、官网原理：iOS/iPadOS/MacOS 上，数据传输是通过 evaluateJavascript 实现的，还会有额外 JS 脚本解析和执行的耗时
3、使用建议
1、只传递需要渲染的数据
2、控制使用的频率，不能以每毫秒使用一次，至少每秒
3、选择合适的更新范围，比如秒杀每一秒更新一次，更新功能封装成子模块
4、需要更新数组中的某一个数据，传递某个数据，不要传递全部数组
5、页面关闭，把使用setData的定时器关闭，不然很卡，玩微信都卡
4、代码实现
data: {
name: 1
}
// 改变视图
this.setData({
name: ++this.data.name
})
data: {
name: 1
}
// 改变视图
this.setData({
name: ++this.data.name
})
5、指令
1、插值表达式 {{ }}
data:{
badMans: [
{
id:1,name: '金轮法王',address:'蒙古'
},
{
id: 2,name: '欧阳锋',address: '西域'
},
{
id: 3,name: '杨过',address: '中都'
},
{
id: 4,name: '尹志平',address: '武当山'
}
]
},
<view>{{badMans[0].id}}</view>
data:{
badMans: [
{
id:1,name: '金轮法王',address:'蒙古'
},
{
id: 2,name: '欧阳锋',address: '西域'
},
{
id: 3,name: '杨过',address: '中都'
},
{
id: 4,name: '尹志平',address: '武当山'
}
]
},
<view>{{badMans[0].id}}</view>
2、条件渲染 wx:if wx:elif wx:else
data:{
badMans: [
{
id:1,name: '金轮法王',address:'蒙古'
},
{
id: 2,name: '欧阳锋',address: '西域'
},
{
id: 3,name: '杨过',address: '中都'
},
{
id: 4,name: '尹志平',address: '武当山'
}
]
},
<view wx:if="{{badMans[0].id>0}}">{{badMans[0].id}}</view>
<view wx:elif="{{badMans[0].id>1}}">{{badMans[0].name}}</view>
<view wx:else>{{badMans[1].address}}</view>
badMans: [
{
id:1,name: '金轮法王',address:'蒙古'
},
{
id: 2,name: '欧阳锋',address: '西域'
},
{
id: 3,name: '杨过',address: '中都'
},
{
id: 4,name: '尹志平',address: '武当山'
}
]
},
<view wx:if="{{badMans[0].id>0}}">{{badMans[0].id}}</view>
<view wx:elif="{{badMans[0].id>1}}">{{badMans[0].name}}</view>
<view wx:else>{{badMans[1].address}}</view>
3、wx:for 进行列表渲染
data:{
badMans: [
{
id:1,name: '金轮法王',address:'蒙古'
},
{
id: 2,name: '欧阳锋',address: '西域'
},
{
id: 3,name: '杨过',address: '中都'
},
{
id: 4,name: '尹志平',address: '武当山'
}
]
},
<block wx:for="{{badMans}}" wx:key="id" wx:for-item="person" wx:for-index="m">
<view>{{m+1}}:{{person.name}}:{{person.address}}</view>
</block>
badMans: [
{
id:1,name: '金轮法王',address:'蒙古'
},
{
id: 2,name: '欧阳锋',address: '西域'
},
{
id: 3,name: '杨过',address: '中都'
},
{
id: 4,name: '尹志平',address: '武当山'
}
]
},
<block wx:for="{{badMans}}" wx:key="id" wx:for-item="person" wx:for-index="m">
<view>{{m+1}}:{{person.name}}:{{person.address}}</view>
</block>
6、事件绑定和事件冒泡
1、如果要阻止冒泡，那么就把 bind 换成 catch
子主题
<view>处理事件冒泡：点击儿子父亲的点击事件不受影响</view>
<view catchtap="myTap" style="background-color: skyblue;">
父亲
<button data-name="我是button" data-age="{{18}}"style="background-color: black; color: white;" catchtap="myTap">
儿子
</button>
</view>
<view catchtap="myTap" style="background-color: skyblue;">
父亲
<button data-name="我是button" data-age="{{18}}"style="background-color: black; color: white;" catchtap="myTap">
儿子
</button>
</view>
7、事件传参
1、通过自定义属性传参数
<button data-name="我是button" data-age="{{18}}"style="background-color: black; color: white;" catchtap="myTap">
儿子
</button>
儿子
</button>
2、接受参数
myTap(e) {
console.log("传入的数据时", e.target.dataset);
}
myTap(e) {
console.log("传入的数据时", e.target.dataset);
}
8、样式导入
1、有两个 .wxss 文件，一个 .wxss 文件可以 @import '路径'; 去引用另一个 .wxss 文件
//demo1.wxss中
.index{
font-size: 100px;
color: blue;
}
//index.wxss中
@import './demo1.wxss';
.index{
font-size: 100px;
color: blue;
}
//index.wxss中
@import './demo1.wxss';
9、尺寸单位(rpx)
1、iPhone6 的设计稿是标准，因为这款机型是过度机型，有比它大的机型，有比它小的机型，进行像素大小转换方便，如果直接从100px转换为1px就会模糊
2、在 iPhone6 的设计稿 1px = 2rpx
10、页面生命周期函数
1、主要的生命周期函数
onLoad function 生命周期回调—监听页面加载
onShow function 生命周期回调—监听页面显示
onReady function 生命周期回调—监听页面初次渲染完成
onHide function 生命周期回调—监听页面隐藏
onUnload function 生命周期回调—监听页面卸载
onRouteDone function 生命周期回调—监听路由动画完成
onShow function 生命周期回调—监听页面显示
onReady function 生命周期回调—监听页面初次渲染完成
onHide function 生命周期回调—监听页面隐藏
onUnload function 生命周期回调—监听页面卸载
onRouteDone function 生命周期回调—监听路由动画完成
2、 执行一次的钩子：onLoad、onReady、onUnload
可能执行多次的：onShow、onHide
可能执行多次的：onShow、onHide
3、参考官网地址 https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
11、页面跳转
1、小程序中
1、使用 wx.navigateTo({
url: 'url'
})
url: 'url'
})
pageTo(){
wx.navigateTo({
// 地址要写全，不需要加后缀名
url: '/pages/demo/demo'
})
},
wx.navigateTo({
// 地址要写全，不需要加后缀名
url: '/pages/demo/demo'
})
},
2、参考官网地址 https://developers.weixin.qq.com/miniprogram/dev/api/
2、vue2
this.$router.push('地址')
3、vue3
const router = useRouter() router.push('地址')
12、页面栈
0 条评论
下一页
