在 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) -- 常用语法的更多相关文章

  1. 微信小程序WXML页面常用语法(讲解+示例)

    (一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...

  2. 支付宝小程序与微信小程序开发功能和语法糖不同

    最近开始负责公司webapp数据打通支付宝小程序,之前已经打通了微信小程序,现在根据支付宝小程序的开发文档在之前的模板上面做修改. 在修改模板的过程中,总结一下双方功能和语法糖的不同之处. 框架: a ...

  3. 微信小程序小结(1) ------ 前后端交互及wx.request的简易封装

    微信小程序的应用目前越来越多,不管喜欢与否我们都应该了解一些.废话不多,直接干货. 做项目自然避免不了前后端的交互,小程序在调试过程中需要在先在:小程序公众平台--设置--开发设置中,将要从后台请求的 ...

  4. 微信小程序小结

    前几日抽空看了下小程序,发现挺好玩的,mvvm的结构,语法比vue要简单,内置了一系列的组件,很方便.然后开发者工具直接上传代码,提交审核,然后发布,感觉挺好.虽然不打算做个工具类的,但是做个介绍类小 ...

  5. 微信小程序小结02-- 完整的demo

    小程序确实方便,在移动端方便小个体宣传,不需要服务器和域名,还有客服功能.按朋友的意思,做了一次调整,分成了首页.预约和我的三个页面. 下面说下遇到的几个问题. 01.客服功能 不得不说这个一条龙服务 ...

  6. 微信小程序小结(2) ------ 自定义组件

    在小程序中有模板跟组件的概念.但模板更多的用于内容的展示,更复杂的交互逻辑就没办法了.所以在小程序中也定义了一些组件来解决一些简单逻辑的功能. 但有时预定义的组件并不能满足我们的需求,这时就需要我们自 ...

  7. 微信小程序小结(4) -- 分包加载及小程序间跳转

    分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载(主要是空间不够用,哈哈~). 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中 ...

  8. 微信小程序小结(3) -- 使用wxParse解析html及多数据循环

    wxParse-微信小程序富文本解析组件:https://github.com/icindy/wxParse 支持Html及markdown转wxml可视化 使用 1.copy下载好的文件夹wxPar ...

  9. 微信小程序 - 视图层 | 基础语法

    视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 类似前端HTML 一.数据绑定 普通语法 test.wxml ...

随机推荐

  1. vim编辑 小笔记

    http://jingyan.baidu.com/article/495ba8410ff14d38b30ede01.html vim编辑器笔记 1.vi 文件名 打开文件 2.按 i 键 进入inse ...

  2. Azure CLI的版本问题

    Azure支持多种管理方法.命令行方法有: PowerShell,PowerShell只能运行在Windows上 Azure CLI,而Azure CLI可以运行在Windows.MAC以及Linux ...

  3. 第十四届华中科技大学程序设计竞赛决赛同步赛 A - Beauty of Trees

    A - Beauty of Trees 题意: 链接:https://www.nowcoder.com/acm/contest/119/A来源:牛客网 Beauty of Trees 时间限制:C/C ...

  4. Web项目安全相关博客日志大集合(仅供学习及参考)

    强制使用HTTPS --- Tomcat篇 ---通过在tomcat/conf/web.xml中进行配置,从而将http自动转为https.(即强制HSTS)http://blog.csdn.net/ ...

  5. 【转】前端上传组件Plupload使用指南

    http://www.cnblogs.com/2050/p/3913184.html Plupload有以下功能和特点: 1.拥有多种上传方式:HTML5.flash.silverlight以及传统的 ...

  6. Python函数(九)-装饰器(二)

    如果给被装饰器装饰的函数传递参数的话,需要在装饰器里修改 # -*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" import tim ...

  7. hibernate 延长加载范围

    1. 关闭延迟加载功能 lazy="false"2.修改抓取策略 fetch="join"直接查询关联数据,一个联接查询搞定3.使用Hibernate对象的in ...

  8. Oracle、SqlServer——临时表

    一.oracle 1.概述: oracle数据库的临时表的特点: 临时表默认保存在TEMP中: 表结构一直存在,直到删除:即创建一次,永久使用: 不支持主外键. 可以索引临时表和在临时表基础上建立视图 ...

  9. windows 修改端口数据及连接时间

    最近线上遇到windows机器访问其他机器的时候失败的情况.实际就是本地的端口不够用造成的. D:\>netsh interface ipv4 show dynamicportrange pro ...

  10. 部署和调优 3.3 dns安装配置-3

    只有一台DNS服务器是不保险的,现在给他配置个从服务器. 在另外一台虚拟机上安装配置DNS服务器.先查看虚拟机ip为:192.168.1.111 ifconfig 给从安装bind和dig命令 yum ...