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

今天继续玩一些微信小程序的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（由于有历史功能，待会再加一遍）