这里有新鲜出炉的微信小程序入门,程序狗速度看过来!
微信小程序(weixinxiaochengxu),简称小程序,缩写 XCX,英文名 mini program,是一种不需要下载安装即可使用的应用,它实现了应用 "触手可及" 的梦想,用户扫一扫或搜一下即可打开应用。
本篇文章主要介绍了微信小程序开发之——wx.showToast(OBJECT) 的使用,具有一定的参考价值,有兴趣的可以了解一下。
wx.showToast API 是显示消息提示框的作用。
先让我们看一下官方的文档说明:
注意:其中的图标,只支持 "success"、"loading"
示例代码:
- wx.showToast({
- title: '成功',
- icon: 'success',
- duration: 2000
- })
接下来演示如何使用,先打开微信 web 开发者工具,新建快速项目,删除掉首页没用的内容,保留如下部分。
添加两个按钮,同事添加点击事件。再在按钮上添加 navigator 导航,链接到默认的日志页面。代码如下:
- <navigator url="../logs/logs">
- <button type="primary" bindtap="logbtn">
- 登陆
- </button>
- </navigator>
- <view class="br">
- </view>
- <navigator url="../logs/logs">
- <button type="primary" bindtap="morebtn">
- 查看更多
- </button>
- </navigator>
index.js 代码如下:
- logbtn: function() {
- wx.showToast({
- title: '登陆成功',
- icon: 'success',
- duration: 1200
- })
- },
- morebtn: function() {
- wx.showToast({
- title: '加载中',
- icon: 'loading',
- duration: 1200
- })
- },
为了测试效果直观一些,我们在两个按钮中插入一块 view 标签,让两个按钮上下之间有间距。wxml 代码如下:
- <view class="br">
- </view>
wxss 文件代码如下:
- .br {
- width: 100 % ;
- height: 200rpx;
- }
最终的页面样式如下:
点击登陆的效果图:
点击查看更多的效果图:
来源: http://www.phperz.com/article/17/0718/328386.html