微信小程序开发1

2020年8月22日2020年10月31日 | by suyi | No comments

编写一个简单的备忘录微信小程序

先写简单的头部与联系界面,编写app.json文件

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#656e7f",
    "navigationBarTitleText": "备忘录",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

编写app.js部分

//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{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null,
    backgroundAudioPlaying:true
  }
})

书写index页面部分

编写index.js

//index.js
var dataUrl = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
var util = require("../../utils/util.js");

//更改数组 第三个参数是对象
function editArr(arr,i,editCnt){
  let newArr = arr,editingObj = newArr[i];   
    for (var x in editCnt){
      editingObj[x]= editCnt[x];
    }
  return newArr;
}

//获取应用实例
var app = getApp()
Page({
  data: {  
    userInfo: {},
    curIpt:'',
    showAll:true,
    lists:[],
    curRange:[],
    curBegin:0,
    curFinish:1,
    remind:[]
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    var that = this;
    //获取之前保留在缓存里的数据
    wx.getStorage({
      key: 'todolist',
      success: function(res) {
        if(res.data){
           that.setData({
            lists:res.data
          })
        }
      } 
    })
    //获取用户信息
    app.getUserInfo(function(userInfo){
      that.setData({
        userInfo:userInfo
      })
    })
  },
  iptChange(e){ 
    let timeArr = util.setTimeHalf();   
    this.setData({
      curIpt:e.detail.value,
      curRange:timeArr
    })
  },
  formReset(){
    this.setData({
      curIpt:'',
      curRange:[]
    })
  },
  formSubmit(){
    let cnt = this.data.curIpt,newLists = this.data.lists,i = newLists.length,begin=this.data.curRange[this.data.curBegin],finish = this.data.curRange[this.data.curFinish];
    if (cnt){
       newLists.push({id:i,content:cnt,done:false,beginTime:begin,finishTime:finish,editing:false});
       this.setData({
        lists:newLists,
        curIpt:''
      }) 
    }
  },
  showAll(){
    //显示全部事项
     this.setData({
      showAll:true   
    })
  },
  saveData(){
    let listsArr = this.data.lists;
    wx.setStorage({
      key:'todolist',
      data:listsArr
    })
  }
  // 修改功能后续完成
})

编写index.wxml

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="header">    
    欢迎<text class="userinfo-nickname">{{userInfo.nickName}}</text>使用
  </view>
<form bindsubmit="formSubmit" bindreset="formReset">
 <view class="input-wrap">    
      <input type="text" value='{{curIpt}}' returnKeyType='send' placeholder="请输入待做的事" class="ipt-main"  bindinput='iptChange' />     
      <view class="flex-row flex-time" wx:if="{{curIpt}}">
            <picker range='{{curRange}}' value='{{curBegin}}' bindchange='beginChange'  class="pick-time time">
                <text>
                    开始时间：{{curRange[curBegin]}}
                </text>
            </picker>  
            <picker range='{{curRange}}' value='{{curFinish}}' bindchange='finishChange'  class="pick-time time">
                <text>
                    结束时间：{{curRange[curFinish]}}
                </text>
            </picker>  
            <label class="time"><switch class="switch" checked bindchange="switch1Change" />提醒</label>
        </view>
        <view class="flex-row" wx:if="{{curIpt}}">        
          <button class="btn btn-submit" formType="submit" hover-class="btn-hover">提交</button>
          <button class="btn btn-cancel" formType="reset">清空</button>
       </view>
  </view>
  </form>
  <view class="list-wrap" wx:if="{{lists.length>0}}">
    <view wx:for="{{lists}}" wx:if="{{showAll ||(!showAll && !item.done)}}" id="{{item.id}}" class="{{item.done?'done list':'list'}}">        
        <text>{{index+1}}:</text>
        <text data-id ="{{index}}"  class="cnt" bindtap="toChange" >{{item.content}}</text>
        <view hidden="{{!item.editing}}" class="edit-wrap">
            <input class="ipt-edit" value="{{item.content}}"  data-id="{{index}}" bindinput='iptEdit' />
            <button class="btn btn-edit" data-id="{{index}}" bindtap="saveEdit">修改</button>
        </view>
        
        <text class="time"> {{item.beginTime}}-{{item.finishTime}}</text>
        <icon class="ico-done" bindtap="setDone" data-id="{{index}}" type="success_no_circle" size='18' color="{{item.done?'#d7d7d7':'#6fa6cf'}}" />
        <icon class="ico-delete" bindtap="toDelete" data-id="{{index}}" type='cancel' size='20' color="#6fa6cf" />
    </view>
    <view class="footer">
        <view class="ft-area">
            <text>{{lists.length}}条</text>
        </view>
         <view class="ft-area ft-mid">
            <text wx:if="{{showAll}}" bindtap="showUnfinished" class="ft-action">显示未完成</text>
            <text wx:else bindtap="showAll" class="ft-action">显示全部</text>
        </view>
        <view class="ft-area">
            <text bindtap="doneAll" class="ft-action">全部完成</text>
            <text bindtap="deleteAll" class="ft-action">全删</text>
        </view>
    </view>
  </view>
  <view class="input-wrap mt" wx:if="{{lists.length>0}}">
    <button class="btn btn-save" bindtap="saveData">保存数据</button>
  </view>
</view>

样式文件编写index.wxss

/**index.wxss**/
.header{
  text-align: center;
  font-size: 40rpx;
  color: #ae9e84;
  margin-bottom: 40px;
  width:100%;
  position: relative;
  height:50px;
}
.header::after{
  content:'TODOS';
  position: absolute;
  width: 20rem;
  z-index: 1;
  text-align: center;
  color: rgba(225,225,225,0.5);
  font-size: 120rpx;
  left: 0;
  bottom:-50px;
}

.userinfo-nickname {
  color: #a38e6d;
}
/*输入区域*/
.input-wrap{  
  margin: 30rpx 10rpx;
}
.flex-row{
  display: flex;
  margin: 10rpx 0;
  width: 670rpx;
  -webkit-box-pack: justify;
}
.pick-time{
  line-height: 40rpx;
  flex:1;
  margin:-20rpx 0 20rpx;  
}
.time{
  color: #777;
  font-size:12px;
}
.switch{
  transform: scale(0.5);
  vertical-align: middle;
}
.btn{  
  border-radius: 5px;
  font-size: 30rpx;
  line-height: 100rpx;
  display: block;
  background: #6fa6cf;
}
.btn-submit{
  color: #fff;
  flex: 1;
  margin-right:10rpx;
}
.btn-hover{
  background: #a2c7e2;
}
.btn-cancel{
  background: #fff;
}

.ipt-main{
  border: 1rpx solid #eee;
  border-radius: 5px;
  height: 80rpx;
  padding: 10rpx 15px;
  font-size: 30rpx;
  width: 610rpx;
  display: block;
}

/*展示列表区域*/
.list-wrap{
	text-align:left;
	width:670rpx;
  margin: 0 auto;	
  background: #fff;
  border:1px solid #e2e2e2;
  position:relative;
  border-radius:0 0 5rpx 5rpx;
}
.list-wrap::after{
  content:'';
  position: absolute;
  width: 98%;
  height: 100%;
  z-index: -1;
  border: 1px solid #e6e6e6;
  left: 1%;
  bottom:-5px;
  background: #fff;
  border-radius:0 0 5rpx 5rpx;
}
.list-wrap::before{
  content:'';
  position: absolute;
  width: 96%;
  height: 100%;
  z-index: -2;
  border: 1px solid #e6e6e6;
  left: 2%;
  bottom:-9px;
  background: #fff;
  border-radius:0 0 5rpx 5rpx;
}
.list{
  padding:10px;
  position:relative;
}
.done{
  background: #e6f1f8;
  color:#ccc;
}
.ico-done{
  position: absolute;
  right: 80rpx;  
}
.done .ico-done{color: red}
.ico-delete{
	position:absolute;
	right:10rpx;
}	
.red{
  color: red;
}
.cnt{
  width: 400rpx;
}
/*修改*/
.edit-wrap{
  position: absolute;
  background: #fff;
  left: 20px;
  height: 100%;
  width: 90%;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 6rpx;
}
.ipt-edit{
  flex:1;
  border: 1rpx solid #ddd;
  border-radius: 3px;
  padding: 5rpx;
  margin-right: 10rpx;
  font-size: 24rpx;
}
.btn-edit{
  line-height: 60rpx;
  font-size: 24rpx;
  color: #fff;
  height: 60rpx;
}

/*列表地步操作区*/
.footer{
  display: flex;
  justify-content:space-between;
  font-size: 10rpx;
  color: #a38e6d;
  border-top: 1px solid #eee;
}
.ft-action{
  color: #6fa6cf; 
  margin: 0 10rpx;
}
.ft-area{  
  padding: 20rpx;
 text-align:center;
}
.ft-mid{
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  flex:1;
}


.mt{
  margin-top: 100rpx;
}
.btn-save{
  width:300rpx;
  color: #fff;
}

后续背景音乐,颜色以及备忘部分功能后续完成及优化

发表评论取消回复

要发表评论，您必须先登录。

微信小程序开发1

微信小程序开发1

发表评论 取消回复

发表评论取消回复