首页  思维导图  详情

微信小程序

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、参考官方文档  https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

3、getApp

1、App 实例全局只有一个，其它地方需要公共的数据，直接在app中定义数据，当作全局数据

// 数据   AppData:{     name:"我是app里面的数据"   },

2、在其它页面.js文件中通过getApp获取实例，改变或者查询数据

// 获取app.js实例 const app=getApp()   // 加载事件   onLoad(){     //修改app中的数据数据     app.AppData.name="app"     console.log(app.AppData.name);   },

4、data

1、定义data,被page函数包裹，其它页面也一起由入口函数包裹

Page({      data: {         name: 1      }     }）

2、可以通过this.data.属性名字操作data中的数据

1、操作的数据不会在视图中进行修改

2、代码实现

console.log(this.data.name) 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     })

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>

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>

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>

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>

7、事件传参

1、通过自定义属性传参数

<button data-name="我是button" data-age="{{18}}"style="background-color: black; color: white;" catchtap="myTap">     儿子   </button>

2、接受参数

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';

9、尺寸单位(rpx)

1、iPhone6 的设计稿是标准，因为这款机型是过度机型，有比它大的机型，有比它小的机型，进行像素大小转换方便，如果直接从100px转换为1px就会模糊

2、在   iPhone6 的设计稿 1px = 2rpx

10、页面生命周期函数

1、主要的生命周期函数

onLoad  function    生命周期回调—监听页面加载 onShow  function    生命周期回调—监听页面显示 onReady  function    生命周期回调—监听页面初次渲染完成 onHide  function    生命周期回调—监听页面隐藏 onUnload  function    生命周期回调—监听页面卸载 onRouteDone  function    生命周期回调—监听路由动画完成

2、执行一次的钩子：onLoad、onReady、onUnload       可能执行多次的：onShow、onHide

3、参考官网地址 https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

11、页面跳转

1、小程序中

1、使用   wx.navigateTo({   url: 'url' })

pageTo(){     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、页面栈