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