微信小程序相关知识点
小程序的双向绑定
<!-- 输入框主要是通过 model:value="{{变量}}" 实现数据的双向绑定 -->
<view><view>keyword: {{keyword}}</view><input model:value="{{keyword}}" type="text" placeholder="输入搜索内容" />
</view>
小程序页面间有哪些传递数据的方法
- 使用全局变量实现数据传递 globaData
- 使用本地缓存 setSessionSync()
- 使用 wx.navigateTo 和 wx.redirectTo 的时候,可以将部分数据放在 url 里,并在新页面 onLoad 的时候初始化 onLoad(options)
小程序页面的生命周期函数及其App生命周期函数
页面声明周期函数:
- onLoad:监听页面加载,一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
- onReady:监听页面初次渲染完成,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
- onShow:监听页面显示
- onHide:监听页面隐藏,如 navigateTo 或底部 tab 切换到其他页面,小程序切入后台等。
- onUnload:监听页面卸载,如 redirectTo 或 navigateBack 到其他页面时。
APP 声明周期函数:
- onLaunch:监听小程序初始化,当小程序初始化完成时,会触发 onLaunch(全局只触发一次)。
- onShow:监听小程序启动或切前台,当小程序启动,或从后台进入前台显示,会触发 onShow。
- onHide:监听小程序切后台,当小程序从前台进入后台,会触发 onHide。
- onErro:错误监听函数,当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息。
微信小程序的优劣势
优势:
- 即用即走,不用安装,省流量,省安装时间,不占用桌面;
- 依托微信流量,天生推广传播优势;
- 开发成本比 App 低。
劣势: - 用户留存,即用即走是优势,也存在一些问题;
- 入口相对传统 App 要深很多;
- 限制较多,页面大小不能超过2M。不能打开超过10个层级的页面。
bindtap 和 catchtap 的区别
相同点:首先他们都是作为点击事件函数,就是点击时触发。在这个作用上他们是一样的,可以不做区分。
不同点:他们的不同点主要是 bindtap 是不会阻止冒泡事件的,catchtap 是阻止冒泡的。
简述下 wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别
wx.navigateTo():保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面 。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.redirectTo():关闭当前页面,跳转到新的页面(类似重定向)。但是不允许跳转到 tabbar 页面。
wx.switchTab():跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
wx.navigateBack():关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
wx.reLaunch():关闭所有页面,打开到应用内的某个页面。
小程序父子组件之间的传参
父向子(属性绑定): properties
子向父(自定义事件):triggerEvent
哪些方法可以用来提高微信小程序的应用速度
- 提高页面加载速度
- 用户行为预测
- 减少默认
data
的大小 - 组件化方案
- 分包
如何实现下拉刷新
- 首先在 app.json 中的 window 配置 enablePullDownRefresh
- 在 Page 中定义 onPullDownRefresh 钩子函数,到达下拉刷新条件后,该钩子函数执行,发起请求方法
- 请求返回后,调用 wx.stopPullDownRefresh 停止下拉刷新
登录流程
首次登录
- 先调用 wx.login 获取临时登录凭证 code;
- 将这个 code 传给后台服务器,获取微信用户唯一标识 openid 及本次登录的会话密钥(session_key、token)等;
- 拿到开发者服务器传回来的会话密钥(session_key、token)之后,前端要保存
wx.setStorageSync('sessionKey', 'value')
或者wx.setStorageSync('token', 'value')
。
wx.login({success (res) {if (res.code) {//发起网络请求wx.request({url: 'https://example.com/onLogin',data: {code: res.code}})} else {console.log('登录失败!' + res.errMsg)}}
})
二次验证
- 获取缓存中的session_key,
wx.getStorageSync('sessionKey')
- 如果缓存中存在session_key,那么调用小程序 api 接口 wx.checkSession() 来判断登录态是否过期,回调成功说明当前 session_key 未过期,回调失败说明 session_key 已过期。登录态过期后前端需要再调用 wx.login() 获取新的用户的 code,然后再向开发者服务器发起登录请求。
持久登录状态:session或者token信息存放在cookie或者header的Authorization中以请求头的方式带回给服务端,放到request.js里的wx.request的header里。
小程序支付的流程
查看登录,创建订单,发送请求,后台生成订单并返回参数,包括:时间戳、随机字符串、package(prepay_id)、签名等。再调取 wx.requestPayment
进行支付
wx.requestPayment({timeStamp: '',nonceStr: '',package: '',signType: 'MD5',paySign: '',success (res) { },fail (res) { }
})
支付宝支付流程
- 购物车页面点击购买按钮,将商品信息、金额等参数,传给后端服务器;
- 后台根据商品信息生成订单信息,返回给前端;
- 前端收到订单信息,向用户展示订单信息,用户确认无误后,点击支付,向后台发送支付请求;
- 后台根据订单号、金额向支付宝接口发送预支付请求;
- 支付宝收到请求,审核订单,根据订单信息,向后台返回支付链接;
- 后台收到支付链接,返回给前端;
- 前端收到支付链接,直接跳转到这个支付链接,进行支付。
授权
用户信息授权:wx.getUserProfile()
- 新版授权:每次点击按钮,不管是否授权过,都会弹出授权窗口。
wx.getUserProfile({desc: "获取微信头像昵称用于权限调用",success: (data) => {// 用户允许时触发console.log(data);this.setData({useInfo: data.userInfo,});},fail: (res) => {// 用户拒绝时触发console.log(res);wx.showToast({icon: "none",title: "需要授权请重新点击",});},
});
- 旧版授权:必须使用固定格式的 button 才可以弹起授权窗口,如果拒绝,下次点击还可以弹出授权窗口。如果允许授权,再次点击就不再弹出授权窗口了,可以通过 “清理授权数据” 将之前的授权信息清理。
// open-type="getUserInfo" 并结合bindgetuserinfo事件,可以获取到用户信息(是否授权)
<button open-type="getUserInfo" bindgetuserinfo="oldState">旧版本 getUserInfo API</button>// 先判断用户是否授权
wx.getSetting({ // wx.getSetting 方法获取用户的当前设置(查看是否授权)success(res) {//如果 res.authSetting['scope.userInfo'] 有值时,代表已授权if (res.authSetting["scope.userInfo"]) {wx.getUserInfo({success(data) {console.log(data);},fail(err) {console.log("--", err);},});} else {wx.showToast({icon: "none",title: "请先授权",});}},fail() {},
});
普通授权:定位、录音、收货地址等。使用 wx.authorize()
,这个 API 不能用于用户信息授权。
- wx.authorize() 会弹起授权窗口,用户 拒绝/同意 之后,再次调用不会弹出授权窗口了,需要使用 openSetting() 引导用户进入设置页面,对已经请求过的权限进行打开或关闭。
- 授权状态会一致保存在小程序后台,直到用户删除小程序,状态才会丢失。
- 在调用 wx.authorize() 之前,会先通过 getSetting() 获取当前授权状态,再决定是否进行授权。
wx.getSetting({success(res) {if (!res.authSetting["scope.record"]) {// 发现没有授权过,就可以弹出授权窗口了。wx.authorize({scope: "scope.record", // scope表示权限范围,你要申请什么权限success(res) {// console.log("授权结果: ", res);// 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问// wx.startRecord()},fail(res) {wx.showToast({icon: "none",title: '想重新授权,请在"设置-权限"中修改',});},});}},});
注意:1. wx.openSetting() 打开设置页面,对用户已经向小程序请求过的权限进行二次修改;没有向小程序申请过权限的是不会展示的;2. wx.getSetting() 获取用户权限设置列表,返回值中只包含用户已经向小程序请求过的权限和一些默认的权限信息,比如:通讯地址,发票抬头,发票等不需要 wx.authorize() 进行授权。
自定义 tabbar
- 在 app.json 中的 tabBar 项指定 custom 字段为 true,同时其余 tabBar 相关配置也补充完整。虽然原始的 tabbar 配置也要求配置完整,但是这些配置不会生效。
- 所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。
- 在项目根目录下添加入口文件夹: custom-tab-bar,并创建 Component,命名为 index。
- 在 Component 组件中添加 tabbar 配置和 methods(参考示例工程)。
- 将示例工程的 wxml 和 wxss 代码赋值到项目对应的文件中。
- 在每个 tabbar 的 page 页面中,补全 onShow 函数,设定 tabbar 的选中状态,否则会导致选中状态始终是同一个 tabbar。
分包
- 按照小程序分包文档配置项目目录结构,在 app.json 中配置 subpackages;
- 将分包后的页面路径,从 pages 配置中删除,同时页面导航跳转时,也修改为分包路径;
- tabbar 对应的 Page 必须放在主包内;
- subpackages 之外的页面默认打包到主包内部。
独立分包
- 独立分包不能依赖于主包和分包的内容:比如 wxss、template、js 等;
- 独立分包可以自主运行,不会去加载主包和分包内容,因此无法获取全局的 App 实例,小程序提供了解决方案;
- 只有从主包或者分包页面进入小程序,主包才会被加载,全局 App 才会被注册;
- 一般独立分包,应用于小程序的启动页。
分包预下载
- 在进入某个页面的时候,提前对页面内部的分包进行预下载,提升进入某个分包页面时的启动速度。
- 一个包预下载的限额是 2M,如果预下载的包内有多个页面,这些页面累计下载量不能超过 2M。
"preloadRule": {"pages/index/index": {"network": "all", // 什么网络进行与下载,all/wifi"packages": ["home", "cates"] // 要预下载的包名,每个包都有一个name属性。}
},
微信小程序相关知识点相关推荐
- 微信小程序相关知识点和云音乐项目制作遇到的问题及解决
小程序项目想下载项目的可以下载看看~ 下载地址 github地址: https://github.com/superBiuBiuMan/Wechat_NetEase_CloudMusic gitee地 ...
- 微信小程序开发知识点总结
微信小程序开发知识点总结 微信小程序的目录结构 1.外联公共样式的方法 根据微信的官方文档,是支持@import的方式一如外联的公共样式的 使用@import语句可以导入外联样式表,@import后跟 ...
- 关于微信小程序相关内容
微信小程序相关内容 1.简单描述下微信⼩程序的相关⽂件类型 首先,你在app.json里面的pages下面配置一个地址,它就会自动生成一个文件夹,写在最前面的就是默认的主页面. 自动生成的文件夹里面主 ...
- api 定位 微信小程序 精度_微信小程序开发知识点集锦
一 小程序的生命周期 代码生命周期就是一个对象的生老病死,通常指程序从创建.开始.暂停.唤起.停止.卸载的过程.小程序的生命周期又可分为应用生命周期和页面的生命周期,先单独分析,在结合两者分析 应用生 ...
- 微信小程序一些知识点
转载自:https://www.jianshu.com/p/f8f85757e90d 配置文件.json: 小程序的全局配置app.json和页面配置page.json 每单页页面也有相应的.json ...
- 微信小程序开发知识点
/*** pages页面组成* -- .js..json..wxml..wxss* * app.json: 全局配置* * WXML: 小程序的标签语言,用来构建小程序的UI结构,类似于HTML但是和 ...
- 随手记:小程序相关知识点
一.小程序生命周期 1.应用生命周期 App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数 (1)onLaunch: 初始化小程序时触发,全局只 ...
- 微信小程序—相关配置
目录 微信小程序介绍 什么是小程序? 小程序可以干什么? 相关资料 第一个小程序 申请帐号 测试号申请 安装开发工具 你的第一个小程序 编译预览 目录结构 JSON 配置 小程序配置 app.json ...
- 微信小程序常见知识点总结
目录 1.小程序中如何进行接口请求?会不会跨域,为什么 2.小程序的常用命令有哪些 3.你认为微信小程序的优点是什么,缺点是什么 4.微信小程序中的js和浏览器中和node中的区别 5.微信小程序中的 ...
最新文章
- 基于长短读长和参考基因组的组装错误检测算法的研究
- f-GAN简介:GAN模型的生产车间
- Java教程分享:五分钟了解一致性hash算法
- 应用程序框架实战三十六:CRUD实战演练介绍
- form表单,submit,ajax提交
- 14-angular.isDefined
- Linux理论05:Linux的目录结构
- Android异常总结---res\layout\addUser.xml: Invalid file name: must contain only [a-z
- 微信公众平台开发中提示“该公众号提供的服务出现故障”问题解决
- mysql模式匹配详解_老生常谈MYSQL模式匹配 REGEXP和like的用法
- 3-unit2 高级网络配置
- 中国城市群产业建设风险与投资发展决策建议报告2022版
- 液晶电视面板的类型、等级及鉴别方法
- 集成 FileDownloader 总结
- Ubuntu 20.04 + mysql 8.0.27 用户名和密码修改(非常实用)
- 锁屏密码锁、图案锁忘记怎么办?简单利用adb删除(部分机型可用)
- 2021最新 JDK17 之 JAVA基础 Stream 流
- 全国计算机等级四级计算机网络第6套答案,全国计算机等级考试四级计算机网络第6套试题(2)...
- 纯JS实现房贷利率报表对比
- MHD-UH40RK4K高清视频会议摄像头
热门文章
- 自媒体账号应该如何涨粉获得更多的流量呢?这四点很重要
- 每日新闻丨​电池8吨 自重45吨!全球最大的电动汽车面世:还不用充电
- 【解决方案】视频字幕生成+自动翻译字幕(中英,中法视频,双语字幕制作)
- 记一次批量插入数据库脚本练习
- CenterNet:Objects as Points论文学习笔记+代码复现(demo+训练数据)【检测部分】
- linux mint 下安装matplotlib
- win10添加环境变量后没用_Win10系统配置的环境变量未生效怎么办
- 2022SDUT知到/智慧树----C语言第八章测试题解
- 【实践】对于绑定变量看执行计划
- vue里页面的缓存详解