用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序入门实例:简易计算器

天下雪 2017-3-21 00:04

作者:不应有的淡定,来自原文地址今天继续玩一些微信小程序的api来做例子,感觉自己可能创造力不很足,只能模仿着别人的例子来做一个自己的计算器了。老规矩,github源码地址我会附在文章末尾,供大家参考。用微信 ...

作者:不应有的淡定,来自原文地址 
今天继续玩一些微信小程序的api来做例子,感觉自己可能创造力不很足,只能模仿着别人的例子来做一个自己的计算器了。老规矩,github源码地址我会附在文章末尾,供大家参考。用微信开发者工具新建的项目,index.wxss我也不去改了。只在index.wxml界面加一个到计算器页面的入口。index.js里面加入一个参数. 
下面是index.wxml

  1. <view class="container">
  2. <view bindtap="bindViewTap" class="userinfo">
  3. <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  4. <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  5. </view>
  6. <view class="usermotto">
  7. <!--<text class="user-motto">{{motto}}</text>-->
  8. <button type="default" size="{{defaultSize}}" plain="{{plain}}" hover-class="button-hover" disabled="{{disabled}}" bindtap="toCalc">{{motto}}</button>
  9. </view>
  10. </view>

然后是index.js

  1. //index.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5. data: {
  6. motto: '简易计算器',
  7. userInfo: {},
  8. defaultSize:'default',
  9. disabled:false,
  10. iconType:'info_cycle'
  11. },
  12. //事件处理函数
  13. bindViewTap: function() {
  14. wx.navigateTo({
  15. url: '../logs/logs'
  16. })
  17. },
  18. onLoad: function () {
  19. console.log('onLoad')
  20. var that = this
  21. //调用应用实例的方法获取全局数据
  22. app.getUserInfo(function(userInfo){
  23. //更新数据
  24. that.setData({
  25. userInfo:userInfo
  26. })
  27. })
  28. },
  29. //到计算器界面
  30. toCalc:function(){
  31. wx.navigateTo({
  32. url: '../cal/cal'
  33. })
  34. }
  35. })

这里给大家附上一张丑丑的界面图。可以看到我这里是新建了cal这个文件夹,里面放上cal.js cal.wxml cal.wxss三个文件 

记得在这里你新建好了一个wxml,你就需要在app.json去做页面的配置,不然你是访问不到的。所以下面放一下app.json(由于有历史功能,待会再加一遍)

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 不应有的淡定 来自: 原文地址

相关阅读

推荐阅读

    最新Demo