微信小程序学习小结

最近做了个微信小程序的小项目，类似于听歌识曲的小游戏。由于项目很紧，边学边用，现在有空了打算做个学习小结，这里总结小程序的整体框架，生命周期，路由，还有传值等，欢迎互相学习。

文件格式

.js： JS 文件，用于书写逻辑

.json：设置文件

.wxss：类似 Css 文件，用于设置样式

.wxml：类似 Html 文件，用于设置结构

目录结构

一个小程序的目录分为主体，页面以及其他资源

（1）主体：项目根目录，用于整个小程序的初始化

（2）页面：每个页面都有自己的结构、逻辑和数据

（3）其他资源：可放置插件或者图片等资源

生命周期

（1）主体周期

onLaunch – 监听小程序初始化

onShow – 监听小程序显示(当小程序启动，或从后台进入前台显示，会触发)

onHide – 监听小程序隐藏(小程序从前台进入后台，会触发)

onError – 错误监听函数

（2）页面生命周期

data --页面的初始数据

onLoad --监听页面加载

onReady --监听页面初次渲染完成

onShow --监听页面显示

onHide --监听页面隐藏

onUnload --监听页面卸载

（3）小程序生命周期完整版

路由

（1）页面栈

小程序的路由以栈的方式管理，后进先出

（2）跳转

1.wx.navigateTo({url:’./…/XXX’}),保留当前页面，跳转到应用内的某个页面

2.wx.redirectTo({url:’./…/XXX’}),关闭当前页面，跳转到应用内的某个页面

3.wx.navigateBack({ delta: X}),关闭当前页面，返回上一页面或多级页面

getCurrentPages() 函数用于获取当前页面栈的实例

例子（跳转新页面后，之前页面刷新）：

//在页面onLoad中
//使上一个页面刷新
var pages = getCurrentPages();
if (pages.length > 1) {//上一个页面实例对象  var prePage = pages[pages.length - 2];//触发上个界面， changeData为自己封装的刷新函数prePage.changeData()
}

传值

（1）跨页面传值

1.使用 navigator 标签或者 wx.navigator

1.1 navigator 标签(在url的页面地址后面加上“？”和参数)

<navigator url="/page/navigate/navigate?title=navigate&id=123456" hover-class="navigator-hover">跳转到新页面</navigator>

传递了参数： {title:‘navigate’,id=‘123456’}

在下个页面 onLoad 中获取

onLoad:function(options){this.setData({title:options.title,id：options.id})
}

i1.2 wx.navigator

wx.navigateTo({url: "/page/navigate/navigate?title=" + 参数
})

如果要传数组, 字典等复杂类型, 要先用 JSON.stringify() 把参数转成字符串传递

2.用 getCurrentPages() 获取栈中全部页面的, 然后把数据写入相应页面(只适合已生成的页面)

var pages = getCurrentPages();
wx.navigateBack({delta: 1，success:function(){var userInfo = {niceName: _this.data.niceName,avatarUrl: _this.data.avatarUrl}pages[pages.length - 2].setData({ userInfo: userInfo })}
})

3.写入本地, 跨页面取出来

//当前页面
wx.setStorageSync({ 'niceName',_this.data.niceName})
wx.setStorageSync({ 'avatarUrl',_this.data.avatarUrl})//下一页面
var niceName = wx.getSystemInfo({ 'niceName',_this.data.niceName})
var avatarUrl = wx.getSystemInfo({ 'avatarUrl',_this.data.avatarUrl})

（2）页面间传值

设置 id 或者 data-xx 传递

//.wxml
<view bindtap="bindTap" id="XXX" data-name="XXX"></view>//.js
bindTap:function(e){//idvar id = e.currentTarget.id//data-xxvar name = e.currentTarget.dataset.name
}

微信小程序小结之框架相关推荐

微信小程序python自动化测试_微信小程序的自动化测试框架
微信小程序的自动化测试框架微信发布了小程序的自动化测试框架Minium,提供了多种运行验证方式,其特点: 支持一套脚本,iOS & Android & 模拟器,三端运行提供丰富的页 ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
初尝微信小程序2-基本框架
基本框架: .wxml :页面骨架 .wxss :页面样式 .js :页面逻辑描述一些行为 .json :页面配置创建一个小程序之后,app.js,app.json,app.wxss是必须的 ...
用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
c++小程序代码_# 微信小程序的原生框架和taro对比 ##
微信小程序的原生框架和taro对比小程序历史(为什么会出现?) 2007年 iPhone H5 大家知道现在手机端主要是iOS.Android两大系统,实际上在早期有3大系统竞争,还有一个就是诺基亚 ...
python微信小程序自动化测试,微信小程序的自动化测试框架
微信发布了小程序的自动化测试框架Minium,提供了多种运行验证方式,其特点: 支持一套脚本,iOS & Android & 模拟器,三端运行提供丰富的页面跳转方式,看不到也能去得到 ...
微信小程序 python 自动化测试_微信小程序的自动化测试框架
微信小程序的自动化测试框架微信发布了小程序的自动化测试框架Minium,提供了多种运行验证方式,其特点: 支持一套脚本,iOS & Android & 模拟器,三端运行提供丰富的页 ...
微信小程序的自动化测试框架
微信小程序的自动化测试框架微信发布了小程序的自动化测试框架Minium,提供了多种运行验证方式,其特点: 支持一套脚本,iOS & Android & 模拟器,三端运行提供丰富的页 ...
原生微信小程序项目基础框架搭建
原生微信小程序项目基础框架搭建文件目录结构 1. 环境变量(开发环境, 线上环境,测试环境)便于在不同环境的切换接口的url webview的前缀url 埋点相关的环境参数本地存储的环境变量配置 ...

微信小程序小结之框架

微信小程序学习小结

文件格式

目录结构

生命周期

路由

传值

微信小程序小结之框架相关推荐

最新文章

热门文章