微信小程序小结之框架
2018-01-15 16:58
197 查看
微信小程序学习小结
最近做了个微信小程序的小项目,类似于听歌识曲的小游戏。由于项目很紧,边学边用,现在有空了打算做个学习小结,这里总结小程序的整体框架,生命周期,路由,还有传值等,欢迎互相学习。文件格式
.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’}),关闭当
4000
前页面,跳转到应用内的某个页面
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){ //id var id = e.currentTarget.id //data-xx var name = e.currentTarget.dataset.name }
相关文章推荐
- 微信小程序wepy框架笔记小结
- [转]微信小程序支付简单小结与梳理
- 微信小程序模块化开发框架
- 微信小程序框架wxss(一)wxss概述
- 使用AUI框架开发微信小程序
- H5混合开发,框架MUI-H5+,微信小程序,Vue.js,PHP,JavaScript,ReactNative,
- 微信小程序中遇到的iOS兼容性问题小结
- 微信小程序-框架详解(1)
- 1.1微信小程序 框架(MINA)概述
- [置顶] 微信小程序开发—小程序框架详解(二)
- 微信小程序开发(二)-框架
- 微信小程序开发及相关设置小结
- 微信小程序框架——wepy使后感
- 微信小程序跳一跳小结
- 微信小程序框架集合
- 微信小程序开发系列六:微信框架API的调用
- 微信小程序之小程序UI组件、开发框架、实用库学习资源汇总-建议收藏
- 二次封装的缓存框架wCache(支持缓存时间、默认值)--微信小程序
- 微信小程序小结02-- 完整的demo
- 微信小程序入门二UI框架