一、最終效果 二、項(xiàng)目開(kāi)發(fā) 1、開(kāi)發(fā)準(zhǔn)備開(kāi)發(fā)前我們先下載好微信web開(kāi)發(fā)者工具并安裝好,下載地址,下載安裝完成后打開(kāi)(前幾次打開(kāi)后會(huì)讓自己掃碼): 單擊添加項(xiàng)目后填寫(xiě)AppID和相關(guān)的設(shè)置后,我們會(huì)得到一個(gè) ...
一、最終效果
1、開(kāi)發(fā)準(zhǔn)備
開(kāi)發(fā)前我們先下載好微信web開(kāi)發(fā)者工具并安裝好,下載地址,下載安裝完成后打開(kāi)(前幾次打開(kāi)后會(huì)讓自己掃碼):
單擊添加項(xiàng)目后填寫(xiě)AppID和相關(guān)的設(shè)置后,我們會(huì)得到一個(gè)示例demo:
app.js是小程序的腳本代碼,app.json是對(duì)整個(gè)小程序的全局配置,包括頁(yè)面路徑、窗口表現(xiàn)、tabbar、網(wǎng)絡(luò)超時(shí)設(shè)置、debug等,app.wxss是全局的樣式文件,小程序默認(rèn)每個(gè)頁(yè)面的樣式是獨(dú)立的,pages文件夾就是我們整個(gè)小程序的頁(yè)面, utils顧名思義就是存放相關(guān)的工具函數(shù),小程序主張代碼模塊化,才是module.exports、require的形式實(shí)現(xiàn)。其中wxml文件是對(duì)HTML5的封裝,wxss是對(duì)css的封裝。每個(gè)頁(yè)面可以分為視圖層和邏輯層。
2、計(jì)算界面開(kāi)發(fā)
小程序的wxml是對(duì)HTML5的封裝組件化,分為以下幾類(lèi):
我們先開(kāi)發(fā)計(jì)算頁(yè)面,整個(gè)項(xiàng)目的目錄如下,進(jìn)行相關(guān)修改即可:
在cal文件夾下的cal.wxml文件寫(xiě)入:
<view class="content">
<image class="main-bg" src="../asserts/img/bg.png"></image>
<view class="screen-container">
<view class="screen">
{{screenData}}
</view>
</view>
<view class="btnGroup">
<view class="item orange" bindtap="clickButton" id="{{id1}}">退格</view>
<view class="item orange" bindtap="clickButton" id="{{id2}}">清屏</view>
<view class="item orange" bindtap="clickButton" id="{{id3}}">+/-</view>
<view class="item orange" bindtap="clickButton" id="{{id4}}">+ </view>
</view>
<view class="btnGroup">
<view class="item blue" bindtap="clickButton" id="{{id5}}">9</view>
<view class="item blue" bindtap="clickButton" id="{{id6}}">8</view>
<view class="item blue" bindtap="clickButton" id="{{id7}}">7</view>
<view class="item orange" bindtap="clickButton" id="{{id8}}">-</view>
</view>
<view class="btnGroup">
<view class="item blue" bindtap="clickButton" id="{{id9}}">6</view>
<view class="item blue" bindtap="clickButton" id="{{id10}}">5</view>
<view class="item blue" bindtap="clickButton" id="{{id11}}">4</view>
<view class="item orange" bindtap="clickButton" id="{{id12}}">×</view>
</view>
<view class="btnGroup">
<view class="item blue" bindtap="clickButton" id="{{id13}}">3</view>
<view class="item blue" bindtap="clickButton" id="{{id14}}">2</view>
<view class="item blue" bindtap="clickButton" id="{{id15}}">1</view>
<view class="item orange" bindtap="clickButton" id="{{id16}}">÷</view>
</view>
<view class="btnGroup">
<view class="item blue" bindtap="clickButton" id="{{id17}}">0</view>
<view class="item blue" bindtap="clickButton" id="{{id18}}">.</view>
<view class="item blue" bindtap="history" id="{{id19}}">歷史</view>
<view class="item orange" bindtap="clickButton" id="{{id20}}">=</view>
</view>
</view>
cal.wxss文件寫(xiě)入:
page{
height:100%;
}
.content{
min-height:100%;
display:flex;
flex-direction:column;
align-items:center;
box-sizing:border-box;
position:relative;
}
.main-bg{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:-1;
}
.screen-container{
padding-top:30rpx;
padding-left:5rpx;
padding-right:5rpx;
}
.screen{
background-color:#fff;
border-radius:3px;
text-align:right;
width:720rpx;
height:100rpx;
line-height:100rpx;
padding-left:10rpx;
padding-right:10rpx;
margin-bottom:30rpx;
}
.btnGroup{
display:flex;
flex-direction:row;
}
.item{
width:160rpx;
min-height:10rpx;
margin:10rpx;
text-shadow:0 1px 1px rgba(0,0,0,.3);
border-radius:5px;
text-align:center;
line-height:150rpx;
display:inline-block;
}
.orange{
color:#fef4e9;
border:solid 1px #da7c0c;
background:#f78d1d;
}
.blue{
color:#d9eef7;
border:solid 1px #0076a3;
background:#0095cd;
}
在cal.js文件中寫(xiě)入:
//index.js
//獲取應(yīng)用實(shí)例
var rpn = require("../../utils/rpn.js");
var app = getApp()
Page({
data: {
id1:"back",
id2:"clear",
id3:"negative",
id4:"+",
id5:"9",
id6:"8",
id7:"7",
id8:"-",
id9:"6",
id10:"5",
id11:"4",
id12:"×",
id13:"3",
id14:"2",
id15:"1",
id16:"÷",
id17:"0",
id18:".",
id19:"history",
id20:"=",
screenData:"0",
lastIsOperator: false,
logs: []
},
//事件處理函數(shù)
onLoad: function () {
},
onReady: function () {
},
onShow: function () {
},
onHide: function () {
},
onUpload: function () {
},
history: function () {
wx.navigateTo({
url:'../list/list'
})
},
clickButton: function (event) {
console.log(event);
var data = this.data.screenData.toString();
var id = event.target.id;
if(id == this.data.id1) {
if(data == 0){
return;
}
console.log(data);
console.log("data.substring(0,data.length-1)"+data.substring(0,data.length-1));
var data = data.substring(0,data.length-1);
console.log(data);
} else if(id == this.data.id2) {
data = 0;
} else if (id == this.data.id3) {
var firstWord = data.substring(0,1);
if(firstWord != '-'){
data = '-' + data;
} else {
data = data.substring(1);
}
} else if (id == this.data.id20){
if(data == 0) {
return;
}
var lastWord = data.substring(data.length-1, data.length);
if(isNaN(lastWord)) {
return;
}
console.log("parseFloat(data)"+parseFloat(data));
console.log("data"+data)
if(parseFloat(data) == data){
return;
}
var log = data;
var data = rpn.calCommonExp(data);
log = log + '=' +data;
this.data.logs.push(log);
wx.setStorageSync('callogs',this.data.logs);
} else {
if(id == this.data.id4 || id == this.data.id8 || id == this.data.id12 || id == this.data.id16) {
if(this.data.lastIsOperator || data == 0) {
return;
}
}
if(data == 0) {
data = id;
} else {
data = data + id
}
if(id == this.data.id4 || id == this.data.id8 || id == this.data.id12 || id == this.data.id16) {
this.setData({lastIsOperator:true});
} else {
this.setData({lastIsOperator:false})
}
}
this.setData({
screenData:data
})
}
})
cal.js就是整個(gè)頁(yè)面的邏輯處理,其中Page用來(lái)注冊(cè)一個(gè)頁(yè)面,接受一個(gè)對(duì)象作為參數(shù),data就是初始化的數(shù)據(jù),在前臺(tái)界面通過(guò){{data}}形式展現(xiàn),而界面元素通過(guò)類(lèi)似于onclick的形式綁定事件,如上面代碼中的bindTap,事件處理的邏輯作為Page參數(shù)的一個(gè)屬性處理,其中上面代碼中的this是指這個(gè)頁(yè)面。需要注意的是小程序禁止了eval函數(shù),所以上面我引入了rpn.js庫(kù)處理,github地址是https://github.com/huruji/rpn.js。頁(yè)面之間的跳轉(zhuǎn)可以使用wx.navigateTo(object)方法實(shí)現(xiàn)。
2、歷史界面的開(kāi)發(fā)
在list.js文件寫(xiě)入
var app = getApp()
Page({
data: {
logs:[]
},
onLoad: function () {
var logs =wx.getStorageSync('callogs');
this.data.logs=logs;
}
})
在list.wxml中寫(xiě)入
<view class="content">
<image class="main-bg" src="../asserts/img/bg.png"></image>
<block wx:for="{{logs}}">
<view class="item">{{item}}</view>
</block>
</view>
在list.wxss中寫(xiě)入:
page{
min-height:100%;
height:100%;
}
.content{
height:100%;
display:flex;
flex-direction:column;
align-items:center;
box-sizing:border-box;
position:relative;
}
.item{
width:90%;
line-height:100rpx;
margin-top:3rpx;
margin-bottom:3rpx;
border-radius:3px;
color:#fef4e9;
border:1px solid #da7c0c;
background:#f78d1d;
display:block;
margin-right:auto;
margin-left:auto;
}
.main-bg{
height:100%;
width:100%;
min-height:100%;
position:absolute;
top:0;
left:0;
z-index:-1;
}
在list.json中寫(xiě)入
{
"navigationBarTitleText": "計(jì)算記錄"
}
這時(shí)我們可以看到相關(guān)的界面了,我們點(diǎn)擊項(xiàng)目后點(diǎn)擊預(yù)覽之后掃描二維碼就可以真機(jī)體驗(yàn)了
3、防入坑指南
1、千萬(wàn)不要用background-image或者使用background設(shè)置背景圖片,開(kāi)發(fā)工具里可以顯示,真機(jī)不能顯示,替換采用image標(biāo)簽
2、當(dāng)真機(jī)中元素沒(méi)有辦法橫向排列時(shí),試著改變一下display為inline-block
3、頁(yè)面沒(méi)有辦法鋪滿整個(gè)手機(jī)屏幕時(shí),添加page{height;100%;}
4、wxss文件里的樣式并不會(huì)覆蓋,而是先聲明的有效,后聲明的無(wú)效
5、不要大量使用本地圖片,小程序有規(guī)定大小,超過(guò)875kb無(wú)法預(yù)覽
6、永遠(yuǎn)以真機(jī)效果為準(zhǔn),開(kāi)發(fā)者工具預(yù)覽和真機(jī)偏差樣式方面有可能偏差很大
項(xiàng)目github地址:https://github.com/huruji/Wechat-WeAPP
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)