• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一,开发内容

便签

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

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

二,时间记录日志

姓名:多文佳

 

日期 开始时间 结束时间 净时间 活动
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;
}

 


四,小程序截图

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap