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