微信小程序入门篇，制作简易小程序

Page({

data: {

idBack: "back",

idClear: "clear",

idPon: "+-",

idPlus: "+",

idMinus: "-",

idMult: "×",

idDiv: "÷",

id9: "9",

id8: "8",

id7: "7",

id6: "6",

id5: "5",

id4: "4",

id3: "3",

id2: "2",

id1: "1",

id0: "0",

idPoint: ".",

idIs: "=",

screenData: "0",

lastIsOperator: false,

arr: [],

logs:[]

},

onLoad: function (options) {

// 页面初始化 options为页面跳转所带来的参数

 

},

onReady: function () {

// 页面渲染完成

 

},

onShow: function () {

// 页面显示

 

},

onHide: function () {

// 页面隐藏

 

},

onUnload: function () {

// 页面关闭

 

},

history:function(){

wx.navigateTo({url:"../list/list"});

},

clientButton: function (event) {

var id = event.target.id;

var data = this.data.screenData;

if (id == this.data.idBack)//退格

{

if (data == "0")

return;

else {

data = data.substring(0, data.length - 1);

if (data == "" || data == "-") {

data = "0";

}

}

this.data.arr.pop();

this.setData({ screenData: data });

 

}

else if (id == this.data.idClear)//清屏

{

this.setData({ screenData: "0" });

this.data.arr.length = 0;

}

else if (id == this.data.idPon) {//正负号

if (data.substring(0, 1) == "-") {

data = data.substring(1, data.length);

this.data.arr.shift();

}

else {

data = "-" + data;

this.data.arr.unshift("-");

}

this.setData({ screenData: data });

}

else if (id == this.data.idIs) {//运算

var data = this.data.screenData;

if (data == "0") {

return;

}

// console.log(data);

//最后是操作符不合法返回

var lastWord = data.substring(data.length - 1, data.length);

// console.log("lastWord" + lastWord);

if (isNaN(lastWord)) {

return;

}

var num = "";//存解析后的数字

var optArr = [];

var arr = this.data.arr;

console.log(arr);

for (var i in arr) {//把字符进行拆分成数字和运算符存到数组里

if (isNaN(arr[i]) == false || arr[i] == this.data.idPon || arr[i] == this.data.idPoint) {

num += arr[i];

}

else {

optArr.push(Number(num));

optArr.push(arr[i]);

num = "";

}

}

optArr.push(Number(num));

console.log(optArr);

var result = Number(optArr[0]) * 1.0;//转换为带小数的结果

for (var i = 1; i < optArr.length; i++) {

if (isNaN(optArr[i])) {//非数字

if (optArr[i] == this.data.idPlus) {

result += Number(optArr[i + 1]);

}

else if (optArr[i] == this.data.idMinus) {

result -= Number(optArr[i + 1]);

}

else if (optArr[i] == this.data.idMult) {

result *= Number(optArr[i + 1]);

}

else if (optArr[i] == this.data.idDiv) {

result /= Number(optArr[i + 1]);

}

}

}

var log=data+"="+result;

this.data.logs.push(log)

wx.setStorageSync('callLogs',this.data.logs);

this.data.arr.length = 0;

this.data.arr.push(result);

this.setData({ screenData: result });

}

else {//数字及运算符

if (data == "0") {

if (id == this.data.idPlus ||

id == this.data.idMinus ||

id == this.data.idMult ||

id == this.data.idDiv) {

return;

}

this.setData({ screenData: event.target.id });

this.data.arr.push(id);

}

else {

if (id == this.data.idPlus ||

id == this.data.idMinus ||

id == this.data.idMult ||

id == this.data.idDiv) {//阻止连续输入多个运算符

if (this.data.lastIsOperator == true) {

return;

}

}

this.setData({ screenData: data + event.target.id });

this.data.arr.push(id);

// console.log(this.data.arr);

if (id == this.data.idPlus ||

id == this.data.idMinus ||

id == this.data.idMult ||

id == this.data.idDiv) {

this.setData({ lastIsOperator: true });

}

else {

this.setData({ lastIsOperator: false });

}

}

}

}

})

====================================================================================

<view class="content">

<view class="screen">

{{screenData}}

</view>

<view class='btnGroup'>

<view class="item orange" bindtap="clientButton" id="{{idBack}}">退格</view>

<view class="item orange" bindtap="clientButton" id="{{idClear}}">清屏</view>

<view class="item orange" bindtap="clientButton" id="{{idPon}}">+/-</view>

<view class="item orange" bindtap="clientButton" id="{{idPlus}}">+</view>

</view>

<view class='btnGroup'>

<view class="item blue" bindtap="clientButton" id="{{id9}}">9</view>

<view class="item blue" bindtap="clientButton" id="{{id8}}">8</view>

<view class="item blue" bindtap="clientButton" id="{{id7}}">7</view>

<view class="item orange" bindtap="clientButton" id="{{idMinus}}">-</view>

</view>

<view class='btnGroup'>

<view class="item blue" bindtap="clientButton" id="{{id6}}">6</view>

<view class="item blue" bindtap="clientButton" id="{{id5}}">5</view>

<view class="item blue" bindtap="clientButton" id="{{id4}}">4</view>

<view class="item orange" bindtap="clientButton" id="{{idMult}}">×</view>

</view>

<view class='btnGroup'>

<view class="item blue" bindtap="clientButton" id="{{id3}}">3</view>

<view class="item blue" bindtap="clientButton" id="{{id2}}">2</view>

<view class="item blue" bindtap="clientButton" id="{{id1}}">1</view>

<view class="item orange" bindtap="clientButton" id="{{idDiv}}">÷</view>

</view>

<view class='btnGroup'>

<view class="item blue" bindtap="clientButton" id="{{id0}}">0</view>

<view class="item blue" bindtap="clientButton" id="{{idPoint}}">.</view>

<view class="item blue" bindtap="history" >历史</view>

<view class="item orange" bindtap="clientButton" id="{{idIs}}">＝</view>

</view>

</view>

================================================================================

page{

height: 100%

}

.content{

margin: 0;

height: 100%;

display: flex;

flex-direction: column;

align-items: center;

box-sizing: border-box;

background:#d9eef7;

padding-top: 10rpx;

}

.screen

{

background-color: white;

border-radius: 3px;

text-align: right;

width: 720rpx;

height: 100rpx;

line-height:100rpx;

padding-right:10rpx;

margin-bottom: 10rpx;

background-image: "../assets/img/bg.jpg";

}

.btnGroup{

display: flex;

flex-direction: row;

}

.item{

width: 160rpx;

min-height: 150rpx;

margin: 10rpx;

text-shadow: 0 1px 1px rgba(0, 0, 0, .3);

border-radius: 5px;

text-align: center;

line-height: 150rpx;

}

.orange

{

color: #fef4e9;

border: solid 1px #da7c0c;

background: #f78d1d;

}

.blue{

color: #d9eef7;

border: solid 1px #0076a3;

background: #0095cd;

}

======================================================================================

//index.js

//获取应用实例

var app = getApp()

Page({

data: {

motto: 'Hello World',

userInfo: {}

},

//事件处理函数

bindViewTap: function() {

wx.navigateTo({

url: '../logs/logs'

})

},

onLoad: function () {

console.log('onLoad')

var that = this

//调用应用实例的方法获取全局数据

app.getUserInfo(function(userInfo){

//更新数据

that.setData({

userInfo:userInfo

})

})

}

})

====================================================

<!--index.wxml-->

<view class="container">

<view bindtap="bindViewTap" class="userinfo">

<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

<text class="userinfo-nickname">{{userInfo.nickName}}</text>

</view>

<view class="usermotto">

<text class="user-motto">{{motto}}</text>

</view>

</view>

=============================================================

Page({

data: {

logs: []

},

onLoad: function (options) {

// 页面初始化 options为页面跳转所带来的参数

this.setData({ logs: wx.getStorageSync('callLogs') });

},

onReady: function () {

// 页面渲染完成

 

},

onShow: function () {

// 页面显示

 

},

onHide: function () {

// 页面隐藏

 

},

onUnload: function () {

// 页面关闭

}

})

======================================================

<view class="content">

<block wx:for="{{logs}}" wx:for-item="log">

<view class="item">{{log}}</view>

</block>

</view>

===================================================

page{

height: 100%

}

.content{

margin: 0;

height: 100%;

display: flex;

flex-direction: column;

align-items: center;

box-sizing: border-box;

background:#d9eef7;

padding-top: 10rpx;

}

.item{

background-color: white;

border-radius: 3px;

text-align: right;

width: 720rpx;

height: 100rpx;

line-height:100rpx;

padding-right:10rpx;

margin-bottom: 10rpx;

background-image: "../assets/img/bg.jpg";

}

=============================================

//logs.js

var util = require('../../utils/util.js')

Page({

data: {

logs: []

},

onLoad: function () {

this.setData({

logs: (wx.getStorageSync('logs') || []).map(function (log) {

return util.formatTime(new Date(log))

})

})

}

})

===================================================================

function formatTime(date) {

var year = date.getFullYear()

var month = date.getMonth() + 1

var day = date.getDate()

 

var hour = date.getHours()

var minute = date.getMinutes()

var second = date.getSeconds()

 

return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')

}

 

function formatNumber(n) {

n = n.toString()

return n[1] ? n : '0' + n

}

 

module.exports = {

formatTime: formatTime

}

==================================================================

//app.js

App({

onLaunch: function () {

//调用API从本地缓存中获取数据

var logs = wx.getStorageSync('logs') || []

logs.unshift(Date.now())

wx.setStorageSync('logs', logs)

},

getUserInfo:function(cb){

var that = this

if(this.globalData.userInfo){

typeof cb == "function" && cb(this.globalData.userInfo)

}else{

//调用登录接口 hello

wx.login({

success: function () {

wx.getUserInfo({

success: function (res) {

that.globalData.userInfo = res.userInfo

typeof cb == "function" && cb(that.globalData.userInfo)

}

})

}

})

}

},

globalData:{

userInfo:null

}

})

====================================================================

{

"pages": [

"pages/cal/cal",

"pages/list/list"

],

"window": {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "计算器",

"navigationBarTextStyle": "black"

},

"sitemapLocation": "sitemap.json"

}

===============================================