微信小程序《难忘便签》开发记录

一，开发内容

便签

可以增添和删除便签来记录要做的事以及删除已经做完的事。

以后会尽量添加提醒功能以及网络上传的功能

二，时间记录日志

姓名：多文佳

日期	开始时间	结束时间	净时间	活动
2月3日	16:00	18:00	2小时	配置微信小程序开发环境
2月4日	16:00	16:30	30分钟	学习微信小程序的结构
2月5日	17:00	18:00	1小时	查看开发文档中开发小程序的基本插件并实践
2月7日	19:00	19:30	30分钟	查看公开课确定开发步骤
2月8日	14:00	15:50	1小时50分钟	开始做小程序logo以及基本界面
2月9日	16:30	19:00	2小时	开发页面与页面之间联系以及数据的储存以及数据显示
2月10日	14:00	16:40	2小时40分钟	修复不能实时刷新，没有清除浮动以及删除错误的bug

 

三，源代码展示

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

//app.json
{

  "pages":[
    "pages/index/index",
    "pages/bianqian/bianqian"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "登录",
    "navigationBarTextStyle":"black"
  }
}

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

//project.config.json
{
    "description": "项目配置文件。",
    "setting": {
        "urlCheck": true,
        "es6": true,
        "postcss": true,
        "minified": true,
        "newFeature": true
    },
    "compileType": "miniprogram",
    "libVersion": "1.9.8",
    "appid": "wx1cb90850521a0c61",
    "projectname": "%E9%9A%BE%E5%BF%98%E4%BE%BF%E7%AD%BE",
    "isGameTourist": false,
    "condition": {
        "search": {
            "current": -1,
            "list": []
        },
        "conversation": {
            "current": -1,
            "list": []
        },
        "game": {
            "currentL": -1,
            "list": []
        },
        "miniprogram": {
            "current": -1,
            "list": []
        }
    }
}

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    motto: '打开你记忆的大门',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../bianqian/bianqian'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view bindtap="bindViewTap" class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

        /**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

//bianqian.js
const app = getApp()
Page({
  data:{
    inputVal:'',
    msgData:[]  
  },
  changeInputVal(ev){
    this.setData({
      inputVal:ev.detail.value
    });
  },
  delMsg(ev){
    var n=ev.target.dataset.index;
    console.log(n);
    var list=this.data.msgData;
    list.splice(n,1);
    this.setData({
      msgData: list
    });
  },
  addMsg() {
    var list = this.data.msgData;
    list.push({
      msg: this.data.inputVal
    });
    this.setData({
      msgData: list,
      inputVal: ''
    })
  }

})

//bianqian.json
{
    "navigationBarTitleText": "便签",
    "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }}

<!--bianqian.wxml-->
<view class="msg-box">
  <!--输入框-->
  <view class="send-box"> 
    <input class="input" type="text" placeholder="请添加便签..."  bindinput="changeInputVal" placeholder-class="place-input" value="{{inputVal}}"></input>
    <button size="mini" type="primary" bindtap="addMsg">添加</button>
  </view>
  <!--无便签时-->
  <text class="msg-info" wx:if="{{msgData.length==0}}">暂无便签</text>
  <!--便签列表-->
  <view class="list-view">
    <view class="item"  wx:for="{{msgData}}" wx:key="{{bianqian}}">
      <text class="text1">{{item.msg}}</text>
      <icon bindtap="delMsg" class="close-btn" data-index="{{index}}" type="cancel"></icon>
    </view>
  </view>
</view>

/**bianqian.wxss**/
.list-view{
  margin:20px 0 0 0;
}
.input{
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
}
.msg-box{
  padding: 20px;

}
.msg-info{
  display:block;
  margin:10px 0 0 0;
  color:#ccc;
}
.send-box{
  display:flex;
}
.item{
  border-bottom: 1px dashed #ccc;
  height:30px;
  line-height:30px;
  overflow:hidden;
}
.text1{
  float:left;

}
.close-btn{
  float:right;
  margin: 5px 5px 0 0;
}
.place-input{
  color:#ccc;
}

四，小程序截图