快速上手微信小程序(适合无前端开发经验者)(二):页面跳转、页面传值、常用样式及页面布局、小程序开发实战
2018-07-17 20:29
447 查看
页面跳转
wx.navigateTo(OBJECT):
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
wx.redirectTo(OBJECT):
关闭当前页面,跳转到应用内的某个页面。
wx.navigateBack(OBJECT):
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages( )获取当前的页面栈,决定需要返回几层。
wx.reLaunch(OBJECT):
关闭所有页面,打开到应用内的某个页面。
wx.switchTab(OBJECT)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
页面传值
示例代码:
传单个值
[code]wx.navigateTo({ url: 'test?id=1' })
传多个值
[code]wx.navigateTo({ url: 'test?id=1&num=2' })
用变量赋值后传值
[code]wx.navigateTo({ url: 'test?id='+that.data.id+'&num='+that.data.num })
接收传值
[code]onLoad:function(options){ var id = options.id }
编程示例:
对上面“事件”章节的程序稍作修改。
index.wxml
[code]1.<!--index.wxml--> 2.<view class="container"> 3. 4. <button class="name-button" wx:for="{{array}}" bindtap='click' id="{{item.id}}"> 5. {{item.id}}、{{item.name}} 6. </button> 7. </view>
index.js
[code]1.//index.js 2.Page({ 3. data: { 4. array:[ 5. { 6. id:'A', 7. name:'张三' 8. }, 9. { 10. id:'B', 11. name:'李四' 12. }, 13. { 14. id:'C', 15. name:'王五' 16. }, 17. { 18. id:'D', 19. name:'赵六' 20. } 21. ], 22. }, 23. //事件处理函数 24. click:function(e){ 25. var num = e.currentTarget.id 26. wx.navigateTo({ 27. url: '../logs/logs?num='+num 28. }) 29. } })
log.wxml
[code]1.<view class="result">{{num}}</view>
log.js
[code]1.//logs.js 2.Page({ 3. data: { 4. num: '' 5. }, 6. onLoad: function (options) { 7. var n = options.num 8. this.setData({ 9. num:'You Choose : ' + n 10. }) 11. } 12.})
log.wxss
[code]1..result{ 2. position: absolute; 3. font-size: 20px; 4. left:30%; 5. top:45%; 6. color:pink; }
编译。当按钮点击发生时,id值传给了log页面,并且在log页面上输出了结果
常用样式及页面布局
定义在app.wxss中的样式为全局样式,作用于每一个页面。在page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器。
详细样式:
https://www.cnblogs.com/yang-shuai/p/6899430.html
flex布局:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
常用API:
https://developers.weixin.qq.com/miniprogram/dev/api/
小程序开发实战
两个刷题类微信小程序示范
https://github.com/ShangTouFan/Two-Mini-Program
阅读更多
相关文章推荐
- 微信小程序前端开发框架,快速自动生成前端页面
- 微信小程序前端布局页面工具,快速布局
- 前端开发---微信小程序中的页面代码中的模板的封装
- 微信小程序开发学习笔记003--微信小程序页面布局
- 微信小程序前端快速生成工具 -玉目智能超速众包开发平台
- 让微信小程序和页面界面 UI 统一:WeUI 前端样式库
- 微信小程序开发系列七:微信小程序的页面跳转
- 关于微信小程序开发跳转页面
- 微信小程序入门与实战 常用组件 API 开发技巧 项目实战
- 微信小程序一些常用代码(1)——tabar、页面跳转、分享、选项卡、radio
- 微信小程序开发2-点击列表中的某一行跳转到新的页面显示该列的详细信息
- 使用微信小程序开发前端【快速入门】
- 微信小程序开发平台新功能「云开发」快速上手体验
- 微信小程序快速点击两个按钮会跳转两个页面
- 微信小程序前端布局自动生成工具- 玉目智能超速众包开发平台
- 微信小程序开发常用技巧(2)——页面view高度计算
- 开发微信小程序 页面突然不跳转的原因及解决办法
- 看这一篇就够啦!微信小程序入门与实战,横扫常用组件API开发技巧(完整版包含全部源码)
- 慕课网 微信小程序入门与实战 常用组件API开发技巧项目实战 (完整版包含全部源码)