小程序注冊(cè)
-
小程序注冊(cè)
小程序相關(guān)注冊(cè)信息可以在這里找到尉剩，我注冊(cè)的也是個(gè)人小程序。
每日任務(wù)小程序
我的項(xiàng)目結(jié)構(gòu)
index頁(yè)面是登錄入口,main是主頁(yè)面,done和fail是已完成和失敗頁(yè)面烤礁。
Index頁(yè)面
index.wxml
<view class="container">
<view>
<image class="user-avatar" src="{{userData.avatarUrl}}"></image>
</view>
<view class="user-content">
<text>你好,{{userData.nickName}}</text>
</view>
<view class="user-btn">
<button size="default" bindtap="start">開(kāi)始</button>
</view>
</view>
index.wxml內(nèi)容, userData是使用微信的API獲取的用戶信息。
index.js
Page({
data: {
userData: {}
},
start: ()=> {
wx.redirectTo({
url: '/pages/main/main'
})
},
onLoad(){
wx.getUserInfo({
success: (res) => {
var userInfo = res.userInfo
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
var gender = userInfo.gender //性別 0：未知巍耗、1：男令哟、2：女
var province = userInfo.province
var city = userInfo.city
var country = userInfo.country
this.setData({
userData: {
userInfo,
nickName,
avatarUrl,
gender,
province,
city,
country
}
})
}
})
}
})
index.wxss
.container {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
align-items: center;
background: #6CA8E3;
}
.user-avatar {
margin-top: 200rpx;
width: 200rpx;
height: 200rpx;
border-radius: 50%;
}
.user-content {
margin-top: 200rpx;
}
.user-content text {
font-size: 22px;
color: #fff;
}
.user-btn {
margin-top: 300rpx;
width: 150px;
}
.user-btn button {
background-color: #FAFB8D;
color: #333;
}
注：要看到index頁(yè)面，需要在app.json里面配置index的頁(yè)面入口
app.json
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#6CA8E3" //導(dǎo)航顏色
}
}
app.wxss
page {
width: 100%;
height: 100%;
font-family: '微軟雅黑','Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
完成后的樣子
main頁(yè)面
main.wxml
<import src="../template/task/task"/>
<import src="../template/pop/pop"/>
<view class="main">
<view class="task-list">
<view class="task" wx:for="{{taskData}}">
<template is="task" data="{{item,now}}"></template>
</view>
</view>
<view class="is-empty" wx:if="{{!taskData.length}}">
<text>任務(wù)為空</text>
</view>
<view class="add-task">
<button bindtap="showPop">點(diǎn)擊添加</button>
</view>
<view class="pop-wrap" wx:if="{{isShow}}">
<template is="pop" data="{{target,now}}"></template>
</view>
<view class="footer-block"></view>
<view class="footer">
<view class="footer-left" bindtap="switchDone">已完成</view>
<view class="footer-right" bindtap="switchFail">未完成</view>
</view>
</view>
main.wxss
@import "../template/task/task.wxss";
@import "../template/pop/pop.wxss";
/*頁(yè)面設(shè)置*/
.main {
width: 100%;
height: 100%;
background-color: #f7f7f7;
padding-top: 1px;
}
/*添加按鈕*/
.main .add-task {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 40rpx;
width: 100%;
}
.main .add-task button {
width: 350rpx;
color: #fff;
background-color: #169BD5;
}
/*底部導(dǎo)航條*/
.main .footer {
position:fixed;
bottom: 0;
display: flex;
flex-direction: row;
width: 100%;
height: 120rpx;
font-size: 16px;
background: #fff;
box-shadow: -1px 1px 6px #ccc;
z-index: 1;
}
.main .footer .footer-left,
.main .footer .footer-right {
text-align: center;
line-height: 120rpx;
width: 50%;
}
.main .footer .footer-left {
border-right: 1px solid #f2f2f2;
}
.footer-block {
height: 140rpx;
}
main.js
Page({
data: {
isShow: false,
taskData: [],
target: "",
now: ""
},
//顯示彈窗時(shí)設(shè)置當(dāng)前時(shí)間
onShow () {
let data = wx.getStorageSync("taskData");
let date = new Date();
let hour = date.getHours();
let min = date.getMinutes();
let now = hour + ":" + min;
this.setData({
taskData: data,
now: now
})
},
//顯示彈窗,并設(shè)置目標(biāo)時(shí)間為一小時(shí)后
showPop (event) {
let date = new Date();
date.setTime(date.getTime() + 60 * 60 * 1000);
let hour = date.getHours();
let min = date.getMinutes();
let target = hour + ":" + min;
this.setData({
isShow: true,
target: target
})
},
//改變時(shí)間
bindTimeChange (event) {
let newTime = event.detail.value;
this.setData({
target: newTime
})
},
//取消添加任務(wù)
cancel (event) {
this.setData({
isShow: false
})
},
//完成任務(wù)
finish (event) {
let idx;
let old = this.data.taskData.find((data,index) => {
if(data.id === event.target.dataset.id){
idx = index;
return data
}
})
if(old === undefined) {
console.log("完成失敗")
}else {
let data = this.data.taskData;
data.splice(idx,1);
this.setData({
taskData: data,
})
wx.setStorageSync("taskData", data);
old.type = "finish";
let taskData = wx.getStorageSync('finish')||[];
if(taskData.length != 0) {
let newData = taskData.concat(old);
wx.setStorageSync("finish", newData);
}else {
let arr =[];
arr.push(old);
wx.setStorageSync("finish", arr);
}
}
wx.showToast({
title: '已完成',
icon: 'success',
duration: 500
})
},
//未完成任務(wù)
unfinished (event) {
let idx;
let old = this.data.taskData.find((data, index) => {
if (data.id === event.target.dataset.id) {
idx = index;
return data
}
})
if (old === undefined) {
console.log("完成失敗")
} else {
let data = this.data.taskData;
data.splice(idx, 1);
this.setData({
taskData: data,
})
wx.setStorageSync("taskData", data);
old.type = "unfinished";
let taskData = wx.getStorageSync('unfinished') || [];
if (taskData.length != 0) {
let newData = taskData.concat(old);
wx.setStorageSync("unfinished", newData);
} else {
let arr = [];
arr.push(old);
wx.setStorageSync("unfinished", arr);
}
}
wx.showToast({
title: '成功添加至未完成',
icon: 'success',
duration: 500
})
},
//提交任務(wù)
formSubmit (event) {
let newData;
console.log(this.data.taskData)
if (this.data.taskData.length == 0){
newData = [];
}else {
newData = this.data.taskData;
}
let name = event.detail.value.taskName;
let time = event.detail.value.taskTime;
let level = !!event.detail.value.taskLevel;
let date = new Date();
let day = date.getDate();
let month = date.getMonth() + 1;
let year = date.getFullYear();
let hour = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();
let random = Math.floor(Math.random() * 10000);
let id ="0" + year + month + day + hour + min + sec + random;
if(!name) {
wx.showToast({
title: '請(qǐng)?zhí)顚?xiě)任務(wù)',
icon: 'loading',
duration: 300
})
return false;
}
newData.push({
id: id,
task: name,
time: time,
isUgrent: level
})
this.setData({
taskData:newData,
isShow: false
})
wx.setStorageSync("taskData", newData);
},
//跳轉(zhuǎn)到已完成頁(yè)面
switchDone: () => {
wx.navigateTo({
url: '/pages/done/done'
})
},
//跳轉(zhuǎn)到未完成頁(yè)面
switchFail: () => {
wx.navigateTo({
url: '/pages/fail/fail'
})
}
})
大家可能發(fā)現(xiàn)了一二行的import屈暗，這是我引用的兩個(gè)模板頁(yè)task和pop
template
要使用template需要聲明是哪一個(gè)
pop模板
<template name="pop">
<form bindsubmit="formSubmit">
<view class="pop animated bounceInLeft">
<view class="pop-title">
<text>添加任務(wù)</text>
</view>
<view class="pop-form">
<view class="form-task line">
<text>任務(wù)</text>
<input type="text" name="taskName" placeholder="請(qǐng)輸入填寫(xiě)任務(wù)" bindchange="name"/>
</view>
<view class="form-time line">
<text>時(shí)間</text>
<picker mode="time" name="taskTime" value="{{target}}" start="{{now}}" end="24:00" bindchange="bindTimeChange">
<view class="picker">
{{target}}
</view>
</picker>
</view>
<view class="form-type line">
<text>緊急</text>
<switch name="taskLevel"/>
</view>
<view class="form-btn">
<button class="done" form-type="submit">確定</button>
<button class="fail" bindtap="cancel">取消</button>
</view>
<view class="task-info">
<text>注:默認(rèn)時(shí)間為一小時(shí)</text>
</view>
</view>
</view>
</form>
</template>
pop.wxss
/*彈窗*/
.pop-wrap {
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 99;
}
.pop-wrap .pop {
width: 680rpx;
height: 800rpx;
margin: -100rpx auto 0 auto;
border-radius: 20rpx;
background: #fff;
}
.pop-wrap .pop .pop-title{
display: block;
text-align: center;
background: #6CA8E3;
padding: 20rpx 0;
border-radius: 20rpx 20rpx 0 0;
color: #fff;
}
.pop-wrap .pop .pop-form .form-task,
.pop-wrap .pop .pop-form .form-time,
.pop-wrap .pop .pop-form .form-type {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 140rpx;
}
.pop-wrap .pop .pop-form .form-task text,
.pop-wrap .pop .pop-form .form-time text,
.pop-wrap .pop .pop-form .form-type text {
display: flex;
flex-direction: row;
justify-content: center;
width: 30%;
}
.pop-wrap .pop .pop-form .form-time picker,
.pop-wrap .pop .pop-form .form-type switch {
display: flex;
flex-direction: row;
justify-content: center;
width: 70%;
}
.pop-wrap .pop .pop-form .form-task input {
border: 1px solid #ccc;
border-radius: 10rpx;
margin-right: 10%;
padding-left: 20rpx;
height: 68rpx;
}
.pop-wrap .pop .pop-form .form-btn {
margin-top: 20rpx;
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
}
.pop-wrap .pop .pop-form .form-btn button {
margin-top: 20rpx;
color: #fff;
width: 240rpx;
height: 80rpx;
font-size: 16px;
line-height: 80rpx;
}
.pop-wrap .pop .pop-form .task-info {
margin-top: 20rpx;
text-align: center;
font-size: 22rpx;
color: #666;
}
task.wxml
<template name="task">
<view class="task-left">
<view class="task-detail">
<text>任務(wù)</text>
<view>
<text class="blod">{{item.task}}</text>
</view>
</view>
<view class="task-time">
<text>時(shí)間</text>
<view>
<text class="blod">{{item.time}}</text>
</view>
</view>
</view>
<view class="task-right">
<view class="task-level">{{item.time>now?item.isUgrent?"緊急":
"正常":"已失敗"}}</view>
<view class="task-btn">
<block wx:if="{{item.type == undefined}}">
<button size="mini" class="done" bindtap="finish" data-id="{{item.id}}" disabled="{{item.time>now ?false:true}}">完成</button>
<button size="mini" class="fail" bindtap="unfinished" data-id="{{item.id}}">失敗</button>
</block>
<block wx:elif="{{item.type == 'unfinished'}}">
<button size="mini" class="done" bindtap="restart" data-id="{{item.id}}">重做</button>
<button size="mini" class="fail" bindtap="deleteUnFin" data-id="{{item.id}}">刪除</button>
</block>
<block wx:elif="{{item.type == 'finish'}}">
<button size="mini" class="done" bindtap="deleteFin" data-id="{{item.id}}">刪除</button>
</block>
</view>
</view>
</template>
task.wxss
/*任務(wù)列表樣式*/
.task-list .task {
display: flex;
flex-direction: row;
justify-content: center;
width: 640rpx;
height: 300rpx;
margin: 20rpx auto 0 auto;
padding: 40rpx;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 20rpx;
box-shadow: 1px 3px 6px #ccc;
background: #fff;
}
.task-list .task .task-left,
.task-list .task .task-right {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
.task-list .task .task-left .task-detail,
.task-list .task .task-left .task-time {
margin: 20rpx 0;
}
.task-list .task .task-right {
align-items: flex-end;
}
.task-level {
font-size: 26px;
font-weight: 600;
margin-bottom: 40rpx;
}
.task-list .task .task-right .task-btn button{
display: block;
margin-top: 10rpx;
width: 150rpx;
color: #fff;
}
template頁(yè)面需要用name來(lái)聲明, 引用也需要isimport相關(guān)頁(yè)面,css頁(yè)面也需要@import 相關(guān)頁(yè)面拆讯。
注:模板的數(shù)據(jù)需要來(lái)使用data引入
main的js頁(yè)面，data是用來(lái)提供數(shù)據(jù)的,onShow养叛、onHide等則是官方提供的函數(shù)方法种呐，其他的都是我設(shè)置的觸發(fā)事件函數(shù),
如需要點(diǎn)擊觸發(fā)，在樣式里寫(xiě)上bindtap樣式（還有catch等其他觸發(fā)方式）弃甥。
wx:if是根據(jù)設(shè)置的變量來(lái)控制元素的顯示爽室，如果需要事件觸發(fā)改變數(shù)據(jù)需要使用this.setData()來(lái)改變數(shù)據(jù)，直接使用this.data.isShow = false是不行的淆攻。
done和fail頁(yè)面
done.wxml
<import src="../template/task/task"/>
<view class="main">
<view class="task-list">
<view class="task" wx:for="{{doneList}}">
<template is="task" data="{{item}}"></template>
</view>
</view>
<view class="is-empty" wx:if="{{!doneList.length}}">
<text>任務(wù)為空</text>
</view>
</view>
done.wxss
@import "../template/task/task.wxss";
/*頁(yè)面設(shè)置*/
.main {
width: 100%;
height: 100%;
background-color: #f7f7f7;
padding-top: 1px;
}
done.js
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
doneList:[]
},
onShow: function () {
let data = wx.getStorageSync('finish');
this.setData({
doneList: data
})
},
deleteFin(event) {
let taskData = wx.getStorageSync('finish') || [];
let idx = taskData.findIndex((data) => {
data.id === event.target.dataset.id
})
if (idx === undefined) {
console.log("完成失敗")
} else {
taskData.splice(idx, 1);
wx.setStorageSync("finish", taskData);
this.setData({
doneList: taskData
})
}
wx.showToast({
title: '刪除成功',
icon: 'success',
duration: 500
})
}
})
fail.wxml
<import src="../template/task/task"/>
<view class="main">
<view class="task-list">
<view class="task" wx:for="{{doneList}}">
<template is="task" data="{{item,test}}"></template>
</view>
</view>
<view class="is-empty" wx:if="{{!doneList.length}}">
<text>任務(wù)為空</text>
</view>
</view>
fail.wxss
@import "../template/task/task.wxss";
/*頁(yè)面設(shè)置*/
.main {
width: 100%;
height: 100%;
background-color: #f7f7f7;
padding-top: 1px;
}
fail.js
Page({
data: {
doneList: []
},
onShow: function () {
let data = wx.getStorageSync('unfinished');
this.setData({
doneList: data
})
},
deleteUnFin (event) {
let taskData = wx.getStorageSync('unfinished') || [];
let idx = taskData.findIndex((data) => {
data.id === event.target.dataset.id
})
if (idx === undefined) {
console.log("完成失敗")
} else {
taskData.splice(idx, 1);
wx.setStorageSync("unfinished", taskData);
this.setData({
doneList: taskData
})
}
wx.showToast({
title: '刪除成功',
icon: 'success',
duration: 500
})
},
restart (event) {
let taskData = wx.getStorageSync('unfinished') || [];
let idx;
let data = taskData.find((data,index) => {
if(data.id === event.target.dataset.id) {
idx = index;
return data;
}
})
if (data === undefined) {
console.log("完成失敗")
} else {
let restart = taskData.splice(idx, 1)[0];
wx.setStorageSync("unfinished", taskData);
let newData = wx.getStorageSync("taskData")|| [];
let date = new Date();
date.setTime(date.getTime() + 60*60*1000);
let time = date.getHours() + ":" + date.getMinutes();
delete (restart.type);
restart.time = time;
newData.push(restart);
wx.setStorageSync("taskData", newData)
this.setData({
doneList: taskData
})
}
wx.showToast({
title: '成功',
icon: 'success',
duration: 500
})
}
})
done頁(yè)面和fail頁(yè)面相似阔墩。
結(jié)語(yǔ)
導(dǎo)航條等設(shè)置可以在json文件里設(shè)置。
相關(guān)代碼可以在我的 github上查看相關(guān)代碼瓶珊。
