在 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. Admin.Admin/Login --- 后台项目中的管理员及登录模块

    管理员模块: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...

  2. java代码equals方法

    package com.bc; public class Test_6 { // 我们知道java中的每个类都继承自Object类,equals是Object方法之一 String name; int ...

  3. 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  ...

  4. 某个应用使cpu使用率100%

    --CPU使用率 Linux是一个多任务的操作系统,将每个cpu的时间划分为很短的时间片,再通过调度器轮流分配给各个任务使用,因此造成多任务同时运行的错觉 为了维护cpu时间,linux通过事先定义的 ...

  5. paramiko监控 windows服务器 被监控服务器只需要安装openssh服务即可基于wmic完成大部分监控

    #!/usr/bin/python #-*- coding: UTF-8 -*- #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...

  6. Firemonkey Android IOS 图标

    图标很多

  7. 浅谈时钟的生成(js手写代码)(非原创)

    在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数 用js在三角函数布置表盘的过程中有遇见到这种情况 ...

  8. struts-hibernate整合(1)配置环境

    ①加载jar包 创建类库: 在myeclipse中点击windows---Preference---Java---Build Path---User Libraries---new 输入创建类库名字s ...

  9. 自定义Android Studio方法注释模板

    前言 你们从Eclipse转到Android Studio的时候,是不是会怀念Eclipse的方法注释模版? 敲/**加回车,模板就出来了,而Android Studio却不能自定义(或者我没有找到) ...

  10. ORACLE体系结构一 (实例(instance))--ORACLE_SID

    数据库实例(也称为服务器Server)就是用来访问一个数据库文件集的一个存储结构及后台进程的集合.它使一个单独的数据库可以被多个实例访问(也就是ORACLE并行服务器-- OPS).实例在操作系统中用 ...