微信小程序小结(5) -- 常用语法
在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。
Page生命周期
属性 | 类型 | 描述 |
---|---|---|
onLoad | Function | 生命周期函数--监听页面加载。一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数。 |
onReady | Function | 生命周期函数--监听页面初次渲染完成。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。 |
onShow | Function | 生命周期函数--监听页面显示。每次打开页面都会调用一次。 |
onHide | Function | 生命周期函数--监听页面隐藏。当navigateTo或底部tab切换时调用。 |
onUnload | Function | 生命周期函数--监听页面卸载。当redirectTo或navigateBack的时候调用。 |
onPullDownRefresh | Function | 页面相关事件处理函数--监听用户下拉动作 |
onReachBottom | Function | 页面上拉触底事件的处理函数 |
onShareAppMessage | Function | 用户点击右上角转发 |
onPageScroll | Function | 页面滚动触发事件的处理函数 |
onTabItemTap | Function | 当前是 tab 页时,点击 tab 时触发 |
setData()
Page({
data: {
text: 'init data',
num: 0,
array: [{text: 'init data'}],
object: {
text: 'init data'
}
},
changeText: function() {
// this.data.text = 'changed data' // bad, it can not work
this.setData({
text: 'changed data'
})
},
changeNum: function() {
this.data.num = 1
this.setData({
num: this.data.num
})
},
changeItemInArray: function() {
// you can use this way to modify a danamic data path
this.setData({
'array[0].text':'changed data'
})
//or
var txt = 'array[' + i + '].text';
this.setData({
[txt]: 'adoctors'
})
},
changeItemInObject: function(){
this.setData({
'object.text': 'changed data'
});
},
})
导航
getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
navigateTo
, redirectTo
只能打开非 tabBar 页面。
switchTab
只能打开 tabBar 页面。
reLaunch
可以打开任意页面。
页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。
//使用组件,根据场景改变所需类型
<navigator open-type="navigateTo"/>
导航API
API | 说明 |
---|---|
wx.navigateTo(OBJECT) | 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。 |
wx.redirectTo(OBJECT) | 关闭当前页面,跳转到应用内的某个页面。 |
wx.reLaunch(OBJECT) | 关闭所有页面,打开到应用内的某个页面。如果跳转的页面路径是 tabBar 页面则不能带参数。 |
wx.switchTab(OBJECT) | 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 |
OBJECT 参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2' |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
wx.reLaunch({
url: 'test?id=1'
})
//获取
onLoad: function(option){
console.log(option.query)
}
//或
onLoad: function(options) {
console.log(options.id);
}
注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。
wx.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。
该方法只有一个参数
wx.navigateBack({
delta: 2 //相当于后退两步
})
数据缓存
每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync)
、wx.getStorage(wx.getStorageSync)
、wx.clearStorage(wx.clearStorageSync)
可以对本地缓存进行设置、获取和清理。同一个微信用户,同一个小程序 storage 上限为 10MB
。localStorage 以用户维度隔离,同一台设备上,A 用户无法读取到 B 用户的数据。
//设置
wx.setStorage({
key:"key",
data:"value"
})
try {
wx.setStorageSync('key', 'value')
} catch (e) {
}
//获取
wx.getStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})
try {
var value = wx.getStorageSync('key')
if (value) {
// Do something with return value
}
} catch (e) {
// Do something when catch error
}
消息提示(弹窗)
wx.showToast({
title: '成功',
icon: 'success', //success,loading,none
duration: 2000
})
多种配置,详见:https://developers.weixin.qq.com/miniprogram/dev/api/api-react.html#wxshowtoastobject
设置窗口背景
wx.setBackgroundColor({
backgroundColor: '#ffffff', // 窗口的背景色为白色
})
wx.setBackgroundColor({
backgroundColorTop: '#ffffff', // 顶部窗口的背景色为白色
backgroundColorBottom: '#ffffff', // 底部窗口的背景色为白色
})
也可再配置中设置全局的背景色
app.json
{
"window":{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "设置全局的背景色",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}
在此情况下,单独设置某个页面的背景色
demo.wxss
page{background-color:#f5f5f5;}
获取全局变量
//获取
const app = getApp().globalData;
console.log(app.baseURL)
//改变
app.unionId = res.data.userInfo.unionId;
按条件渲染及获取附带值(传参)
//切换类名
<view class="tp-option1 {{item.checked == true ? 'tp-option1-active' : ''}}" wx:key="item.itemName" data-index="{{index}}" wx:for="{{itemlist}}">
//获取点击选项附带的属性值
console.log(e.currentTarget.dataset.index)
//获取输入框输入的值
console.log(e.detail.value)
<image src="../../../../img/topic/r0.jpg" class="tp_answer_result" wx:if="{{result==0}}"></image>
<image src="../../../../img/topic/r1.jpg" class="tp_answer_result" wx:else></image>
//若直接传值则带上{{}}
ised="{{false}}" //若写成ised="false",则会因为是非空字符串一直为true
微信小程序小结(5) -- 常用语法的更多相关文章
- 微信小程序WXML页面常用语法(讲解+示例)
(一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...
- 支付宝小程序与微信小程序开发功能和语法糖不同
最近开始负责公司webapp数据打通支付宝小程序,之前已经打通了微信小程序,现在根据支付宝小程序的开发文档在之前的模板上面做修改. 在修改模板的过程中,总结一下双方功能和语法糖的不同之处. 框架: a ...
- 微信小程序小结(1) ------ 前后端交互及wx.request的简易封装
微信小程序的应用目前越来越多,不管喜欢与否我们都应该了解一些.废话不多,直接干货. 做项目自然避免不了前后端的交互,小程序在调试过程中需要在先在:小程序公众平台--设置--开发设置中,将要从后台请求的 ...
- 微信小程序小结
前几日抽空看了下小程序,发现挺好玩的,mvvm的结构,语法比vue要简单,内置了一系列的组件,很方便.然后开发者工具直接上传代码,提交审核,然后发布,感觉挺好.虽然不打算做个工具类的,但是做个介绍类小 ...
- 微信小程序小结02-- 完整的demo
小程序确实方便,在移动端方便小个体宣传,不需要服务器和域名,还有客服功能.按朋友的意思,做了一次调整,分成了首页.预约和我的三个页面. 下面说下遇到的几个问题. 01.客服功能 不得不说这个一条龙服务 ...
- 微信小程序小结(2) ------ 自定义组件
在小程序中有模板跟组件的概念.但模板更多的用于内容的展示,更复杂的交互逻辑就没办法了.所以在小程序中也定义了一些组件来解决一些简单逻辑的功能. 但有时预定义的组件并不能满足我们的需求,这时就需要我们自 ...
- 微信小程序小结(4) -- 分包加载及小程序间跳转
分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载(主要是空间不够用,哈哈~). 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中 ...
- 微信小程序小结(3) -- 使用wxParse解析html及多数据循环
wxParse-微信小程序富文本解析组件:https://github.com/icindy/wxParse 支持Html及markdown转wxml可视化 使用 1.copy下载好的文件夹wxPar ...
- 微信小程序 - 视图层 | 基础语法
视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 类似前端HTML 一.数据绑定 普通语法 test.wxml ...
随机推荐
- vim编辑 小笔记
http://jingyan.baidu.com/article/495ba8410ff14d38b30ede01.html vim编辑器笔记 1.vi 文件名 打开文件 2.按 i 键 进入inse ...
- Azure CLI的版本问题
Azure支持多种管理方法.命令行方法有: PowerShell,PowerShell只能运行在Windows上 Azure CLI,而Azure CLI可以运行在Windows.MAC以及Linux ...
- 第十四届华中科技大学程序设计竞赛决赛同步赛 A - Beauty of Trees
A - Beauty of Trees 题意: 链接:https://www.nowcoder.com/acm/contest/119/A来源:牛客网 Beauty of Trees 时间限制:C/C ...
- Web项目安全相关博客日志大集合(仅供学习及参考)
强制使用HTTPS --- Tomcat篇 ---通过在tomcat/conf/web.xml中进行配置,从而将http自动转为https.(即强制HSTS)http://blog.csdn.net/ ...
- 【转】前端上传组件Plupload使用指南
http://www.cnblogs.com/2050/p/3913184.html Plupload有以下功能和特点: 1.拥有多种上传方式:HTML5.flash.silverlight以及传统的 ...
- Python函数(九)-装饰器(二)
如果给被装饰器装饰的函数传递参数的话,需要在装饰器里修改 # -*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" import tim ...
- hibernate 延长加载范围
1. 关闭延迟加载功能 lazy="false"2.修改抓取策略 fetch="join"直接查询关联数据,一个联接查询搞定3.使用Hibernate对象的in ...
- Oracle、SqlServer——临时表
一.oracle 1.概述: oracle数据库的临时表的特点: 临时表默认保存在TEMP中: 表结构一直存在,直到删除:即创建一次,永久使用: 不支持主外键. 可以索引临时表和在临时表基础上建立视图 ...
- windows 修改端口数据及连接时间
最近线上遇到windows机器访问其他机器的时候失败的情况.实际就是本地的端口不够用造成的. D:\>netsh interface ipv4 show dynamicportrange pro ...
- 部署和调优 3.3 dns安装配置-3
只有一台DNS服务器是不保险的,现在给他配置个从服务器. 在另外一台虚拟机上安装配置DNS服务器.先查看虚拟机ip为:192.168.1.111 ifconfig 给从安装bind和dig命令 yum ...