摘要:事件与自定义属性页面跳转参数传递与接收页面跳转的五种方式页面间参数传递与接收方法带参数发送方发送参数,带参数模式发送评接收方接收参数,通过生命周期函数中的参数获取参数页面间参数传递与接收方法全局参数发送方接收方页面间参数
事件与自定义属性 页面跳转、参数传递与接收
页面跳转的五种方式
1、wx.navigateTo(obj) 2、wx.redirectTo(obj) 3、wx.switchTab(obj) 4、wx.navigateBack(obj) 5、wx.reLaunch(obj)
页面间参数传递与接收----方法1:url带参数
//发送方:发送参数,url带参数模式发送评19
//接收方:接收参数,通过onLoad生命周期函数中的option参数获取参数 Page({ onLoad: function(options) { var duanziId = options.id } })
页面间参数传递与接收----方法2:全局参数
//发送方 var appInstance = getApp(); apppInstance.pageParams.xxx = val;
//接收方 apppInstance.pageParams.xxx;
页面间参数传递与接收----方法3:缓存
自适应与新单位 新布局:弹性盒模型下列是微信小程序中组件的类型
inline:、
什么是弹性盒模型?
Flex 布局语法教程
容器属性(display:flex)
flex-direction flex-wrap flex-flow justify-content align-items align-content
容器内元素属性
order flex-grow flex-shrink flex-basis flex align-selfTemplate模板引擎
模板定义
模板使用
1、导入模板wxml文件:2、导入模板wxss文件:@import "../../template/movie-list/movie-list-tpl.wxss"; 3、使用模板: 注意:data中...有含义,在模板文件中直接调用item下的属性
模板中嵌套模板
数据绑定{{title}} 更多
模板
页面JS
this.setData({});
注意事项
如果是在异步方法调用时才进行数据绑定,由于时机不可控必须在页面的data:{}中先定义数据,否则出错数据缓存
限制:每个小程序上限10M
特点:永久存储/同步与异步2种方式/不建议将关键信息存储
页面与APP生命周期 路径问题绝对路径(推荐)
相对路径(相对当前文件所在位置)
var util = require("../../utils/util.js");配置
全局配置(app.json)
可配置五项:pages/window/tabBar/networkTimeout/debug
局部配置(每个页面对应的json文件)
只可配置一项:window引用
引用wxml文件
1、import2、include
引用wxss文件
@import "common.wxss"; //支持相对路径
引用js文件
1、var common = require("common.js"); //require暂时只支持相对路径 2、import {Person} from "./person.js"; //es6提供的加载模块功能下拉刷新、上拉加载
实现方法2种
1、使用组件
2、使用Page中的onPullDownRefresh()与onReachBottom()回调方法【推荐】
方法2
##前期准备 在配置文件JSON中,必须开启 "enablePullDownRefresh": true ##分别实现2个回调方法 onPullDownRefresh()与onReachBottom()Q&A
this.data.xxx与this.setData()的区别
动态新增/修改数据绑定: this.data.xxx 已经不能使用 只能使用 this.setData()
异步与同步的区别
异步中的代码无法确定执行时机,而同步可以 1、异步代码易读性差 2、异步难调试 3、异步不阻塞 4、异步控制执行时机差,很难控制 5、同步会阻塞(推荐同步,异步要根据业务来决定)
异步调用如何获取数据
注意:异步调用方式不能使用同步获取数据,否则获取不到 解决方案:使用回调函数来获取变量 Page({ getBannerDate:function(id,callBack){ wx.require({ url:"", success:callBack }); }, callBack: function(res){ } }); ##ES6提供了一种简化方式(箭头函数),无须定义多个回调函数 Page({ getBannerDate:function(id,(res)=>{ }){ wx.require({ url:"", success:callBack }); } });
如何动态设置导航栏标题
##必须在onReady生命周期方法中调用wx.setNavigationBarTitle()方法 wx.setNavigationBarTitle({ title: "当前页面" });
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/83841.html
摘要:微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序 微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者...
摘要:微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源,方便查阅和学习,欢迎大家提交新的资源,完善和补充。 wechat-weapp-resource 微信应用号(小程序)资源汇总。 每天不定期整理和收集微信小程序相关资源,方便查阅和学习,欢迎大家提交新的资源,完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...
摘要:微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源,方便查阅和学习,欢迎大家提交新的资源,完善和补充。 wechat-weapp-resource 微信应用号(小程序)资源汇总。 每天不定期整理和收集微信小程序相关资源,方便查阅和学习,欢迎大家提交新的资源,完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...
阅读 1265·2021-11-24 09:39
阅读 1514·2021-09-07 09:59
阅读 3479·2019-08-30 15:54
阅读 2474·2019-08-30 11:00
阅读 2668·2019-08-29 15:06
阅读 2159·2019-08-26 13:52
阅读 427·2019-08-26 13:24
阅读 2488·2019-08-26 12:20