页面跳转
wx.navigateTo(OBJECT):
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
wx.redirectTo(OBJECT):
关闭当前页面,跳转到应用内的某个页面。
wx.navigateBack(OBJECT):
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages( )获取当前的页面栈,决定需要返回几层。
wx.reLaunch(OBJECT):
关闭所有页面,打开到应用内的某个页面。
wx.switchTab(OBJECT)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
页面传值
示例代码:
传单个值
wx.navigateTo({
url: 'test?id=1'
})
传多个值
wx.navigateTo({
url: 'test?id=1&num=2'
})
用变量赋值后传值
wx.navigateTo({
url: 'test?id='+that.data.id+'&num='+that.data.num
})
接收传值
onLoad:function(options){
var id = options.id
}
编程示例:
对上面“事件”章节的程序稍作修改。
index.wxml
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
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
1.<view class="result">{{num}}</view>
log.js
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
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