微信小程序 getApp() 方法
小程序提供了全局的 getApp() 方法,可获取当前小程序实例,一般用于在子页面中获取顶层应用。
// app.js App({ globalData: 1 }); // page.js var app = getApp(); console.log(app.globalData); // 获取 globalData
一 整体结构
图片目录(images)、页面目录(pages)、公共脚本(utils)、全局配置(app.json、project.config.json)四个大的部分构成。
页面目录中,每个页面配置完成会自动生成4个文件(JS、JSON、WXSS、WXML)。页面逻辑,页面配置,页面样式,页面结构。
所有页面需要在app.json中的pages中进行配置注册。
导航栏的菜单配置需要在app.json中的tabBar中进行配置注册。
全局变量需要在app.js的globalData中进行定义,通过var app = getApp() 调用。
公共脚本需要将定义好的function在module.exports中进行暴露, 暴露模块接口。
二 微信小程序左右轮播(swiper)、上下轮播
autoplay、interval、duration....自动切换播放、播放间隔时间、播放动画时间。
比如banner的左右滚动、公告的上下滚动(设置vertical为true)。
三 微信小程序页面跳转、参数传递、接收参数
四种跳转方式
- wx.navigateTo 跳转新页面;
- wx.switchTab 跳转导航菜单页面;
- wx.redirectTo 关闭当前页面,跳转新页面;
页面标签跳转;
参数传递
wx.navigateTo({ url: '../activity/news/detail?id=' + activityid })
wx.switchTab({ url: '../../index/index' })
wx.redirectTo({ url: '../activity/news/detail?id=' + activityid })
接收参数
onLoad: function (options) { var id = options.id; }
数据传递
1、本地缓存
2、全局变量:
在 app.js 中的 this.globalData = { } 中放入要存储的数;
在组件.js 中, 头部 引入 const app = getApp(); 获取到全局变量;
直接使用 app.globalData.key 来进行赋值和获取值。
路由:
使用wx.navigateTo和wx.redirectTo时,可以通过在url后拼接 + 变量, 然后在目标页面 通过在onLoad周期中,通过参数来获取传递过来的值。
支付
接收时
function(e) { var objectId = e.currentTarget.dataset.objectId; var totalFee = e.currentTarget.dataset.totalFee;
四 微信小程序列表数据绑定
JS部分
wx.request({ url: app.globalData.requestUri + "/banners", header: { "Content-Type": "application/json" }, method: "GET", data: { start: start, maxResults: maxResults, bannerType: bannerType }, success: function (res) { that.setData({ bannerList: res.data.items }) } })
wx.request注意点
method 必须大写;
GET时"Content-Type": "application/json";
POST时"Content-Type": "application/x-www-form-urlencoded"
点击事件、传递参数
使用bindtap绑定方法。参数用data-*的形式传递。记得全部小写。默认会放在dataset中。
openActivity: function (event) { var params = event.currentTarget.dataset; //dataset中多个单词由连字符-链接,不能有大写(大写会自动转成小写) //底部菜单要使用wx.switchTab 来跳转界面 var type = params.type; var activityType = params.activitytype; var relativeId = params.relativeid; }
五 微信小程序详情数据绑定
js部分代码
onLoad: function (options) { var id = options.id; var that = this; wx.request({ url: app.globalData.requestUri + "/infos/" + id, header: { "Content-Type": "application/json" }, method: "GET", success: function (res) { that.setData({ news: res.data, imgurl: app.globalData.domain + res.data.imgurl, publishTime: util.formatTime1(res.data.publishTime,'Y-M-D h:m:s') }) } }) }
页面部分代码
{{news.title}} {{publishTime}}
页面引用公用js
var util = require("../../../utils/util.js"); var app = getApp();
六 微信小程序上拉刷新、下拉加载
上拉刷新
onPullDownRefresh: function () { var that = this; //下拉刷新,将pageNumber和pageSize分别设置成0和10,并初始化数据,让数据重新通过loadRoom()获取 that.setData({ start: 0, maxResults: 10, infoList: [] }) that.loadRooms(); wx.stopPullDownRefresh(); }
下拉加载
onReachBottom: function () { //上拉分页,将页码加1,然后调用分页函数 var that = this; var start = that.data.start; that.setData({ start: ++start }); setTimeout(function () { wx.showToast({ title: '加载中..', }), that.loadRooms(); }, 1000) }
需要在json中配置启用下拉事件
{ "enablePullDownRefresh": true }
七 微信小程序表单提交
表单提交注意点
bindsubmit表单提交事件;
bindinput输入框监控事件;
获得表单提交数据
formSubmit: function (e) { //获得表单数据 var objData = e.detail.value; var password = objData.password; var mobile = objData.mobile; var code = objData.code; }
八 微信小程序缓存数据读取
缓存写入
wx.setStorageSync('password', password); wx.setStorageSync('mobile', mobile);
缓存读取、移除、清除所有
var mobile = wx.getStorageSync('mobile'); wx.removeStorageSync('mobile'); wx.clearStorage();
九 微信小程序提示信息,弹出框
提示信息和弹框,有icon时最多显示7个字,icon为none时可显示全部信息。
wx.showToast({ title: '登录成功', success: function() { setTimeout(function() { //要延时执行的代码 //跳转到成功页面 wx.switchTab({ url: '../index/index' }) }, 2000) //延迟时间 } })
微信小程序模态框,确认取消对话框
wx.showModal({ title: '确认', content: '确认提交订单', success: function(res) { if (res.confirm) { console.log('确定') } else { console.log(取消') } } })
十 微信小程序分享功能
分享,imageUrl非必填
onShareAppMessage: function() { return { title: '金算子', desc: '新闻资讯', imageUrl: '../../images/home/home-add-01.png', path: '../activity/news/detail', success: function(res) { }, fail: function() { } } }
十一 微信小程序打电话
打电话调用wx.makePhoneCall
phoneCall: function(mpbile) { wx.makePhoneCall({ phoneNumber: "13724201432" }) }
1、组件也有它的生命周期(lifetimes)
自小程序基础版本2.2.3起,组件的生命周期可以在lifetimes字段中声明(这是推荐的方式,优先级最高)
lifetimes: { created: function() { // 组件实例化,但节点树还未导入,因此这时不能用setData }, attached: function() { // 在组件实例进入页面节点树时执行 // 节点树完成,可以用setData渲染节点,但无法操作节点 }, ready: function() { // 组件布局完成,这时可以获取节点信息,也可以操作节点 }, move: function() { // 组件实例被移动到树的另一个位置 }, detached: function() { // 在组件实例被从页面节点树移除时执行 }, }
程序生命周期
(1)onLaunch:初始化完成
(2)onHide:收起小程序到后台
(3)onShow:展开小程序到前台(热启动)
(4)onError:程序出错
globalData——全局数据
页面生命周期
(1)onLoad:页面冷启动后,初次加载(只有一次)
(2)onShow:每次切换页面,在之后的页面中触发
(3)onReady:页面被首次切换到(每个页面只有一次)
(4)onHide:每次切换页面,在之前的页面中触发
(5)onUnload:关闭当前页
用js控制标题:
wx.setNavigationBarTitle({ title: '这是NavigationBarTitle', })
返回上一页
wx.navigateBack(); //返回上一页 wx.navigateBack({ //返回的页面数,如果 delta 大于现有页面数,则返回到首页。 delta: 2 })
转发小程序:
onShareAppMessage: function() { return { title: '标题', path: '/zh_tcwq/pages/index/index',//打开的页面路径 success: function (res) { // 转发成功 }, fail: function (res) { // 转发失败 } } }
拨打电话
// 拨打电话 call_phone: function () { var that = this wx.makePhoneCall({ phoneNumber: that.data.dianhua//电话号码 }) },
尺寸单位:rpx
在小程序的里面,我们使用rpx来代替px,官方的定义如下:
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
微信小程序上拉加载
如果你使用的是
// wxml
// 你的代码 // wxss onScrollLower: function (event) { var nextUrl = this.data.requestUrl + "?start=" + this.data.totalCount + "&count=20"; util.http(nextUrl, this.processDoubanData) wx.showNavigationBarLoading() },
如果你使用
onReachBottom: function (event) { var nextUrl = this.data.requestUrl + "?start=" + this.data.totalCount + "&count=20"; // 请求借口,加载数据,并更新数据 util.http(nextUrl, this.processDoubanData); wx.showNavigationBarLoading(); // 显示loading },
微信小程序下拉刷新
在你需要的进行下拉刷新的页面的json文件里面:
{ "enablePullDownRefresh": true }
然后在js中,进行相应的数据操作:
onPullDownRefresh: function (event) { var refreshUrl = this.data.requestUrl + "?start=0&count=20"; this.data.movies = {}; this.data.isEmpty = true; this.data.totalCount = 0; util.http(refreshUrl, this.processDoubanData); wx.showNavigationBarLoading(); },
以上既是微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递,更多关于微信小程序的知识请查看下面的相关链接