微信小程序小结(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 ...
随机推荐
- Admin.Admin/Login --- 后台项目中的管理员及登录模块
管理员模块: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...
- java代码equals方法
package com.bc; public class Test_6 { // 我们知道java中的每个类都继承自Object类,equals是Object方法之一 String name; int ...
- codeforce -39E-What Has Dirichlet Got to Do with That?(博弈+dfs)
You all know the Dirichlet principle, the point of which is that if n boxes have no less than n + 1 ...
- 某个应用使cpu使用率100%
--CPU使用率 Linux是一个多任务的操作系统,将每个cpu的时间划分为很短的时间片,再通过调度器轮流分配给各个任务使用,因此造成多任务同时运行的错觉 为了维护cpu时间,linux通过事先定义的 ...
- paramiko监控 windows服务器 被监控服务器只需要安装openssh服务即可基于wmic完成大部分监控
#!/usr/bin/python #-*- coding: UTF-8 -*- #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...
- Firemonkey Android IOS 图标
图标很多
- 浅谈时钟的生成(js手写代码)(非原创)
在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数 用js在三角函数布置表盘的过程中有遇见到这种情况 ...
- struts-hibernate整合(1)配置环境
①加载jar包 创建类库: 在myeclipse中点击windows---Preference---Java---Build Path---User Libraries---new 输入创建类库名字s ...
- 自定义Android Studio方法注释模板
前言 你们从Eclipse转到Android Studio的时候,是不是会怀念Eclipse的方法注释模版? 敲/**加回车,模板就出来了,而Android Studio却不能自定义(或者我没有找到) ...
- ORACLE体系结构一 (实例(instance))--ORACLE_SID
数据库实例(也称为服务器Server)就是用来访问一个数据库文件集的一个存储结构及后台进程的集合.它使一个单独的数据库可以被多个实例访问(也就是ORACLE并行服务器-- OPS).实例在操作系统中用 ...