快速上手微信小程序（适合无前端开发经验者）（二）：页面跳转、页面传值、常用样式及页面布局、小程序开发实战

页面跳转

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