Signed-off-by: Yunlong.Zhang <[email protected]>

app.js

@@ -0,0 +1,86 @@
+//app.js
+App({
+ onLaunch: function () {
+ // 展示本地存储能力
+ var logs = wx.getStorageSync('logs') || []
+ logs.unshift(Date.now())
+ wx.setStorageSync('logs', logs)
+
+ // 登录
+ wx.login({
+ success: loginCode => 
+ {
+ // 发送 loginCode.code 到后台换取 openId, sessionKey, unionId
+ var that = this;
+ //得到登录用户的基本信息
+ wx.getUserInfo({
+ success: function (res) {
+ that.globalData.userInfo = res.userInfo;
+ console.log('个人信息的值:')
+ console.log(res.userInfo)
+ that.globalData.username = res.userInfo.nickName;
+ that.globalData.touxiang = res.userInfo.avatarUrl;
+ that.globalData.sex = res.userInfo.gender;
+ typeof cb == "function" && cb(that.globalData.userInfo);
+
+ //用户的登录
+ wx.request({
+ url: getApp().globalData.requesturl + "token/user",
+ method: 'POST',
+ header: {
+ "Content-Type": "application/x-www-form-urlencoded"
+ },
+ data: {
+ code: loginCode.code
+ },
+ success: function (jieguo) {
+ console.log("得到用户的信息:");
+ console.log(jieguo);
+ that.globalData.userid = jieguo.data.token.uid,//用户id
+ that.globalData.openid = jieguo.data.token.openid;//用户openID
+
+ //由于这里是网络请求，可能会在 Page.onLoad 之后才返回
+ // 所以此处加入 callback 以防止这种情况
+ if (that.isloginCallback) {
+ that.isloginCallback(that.globalData.openid);
+ }
+ //判断是否已经登录
+ }
+ })
+ //结束标识符
+ }
+ })
+ //结束标识符
+ }
+ })
+ // 获取用户信息
+ 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,//用户的信息
+ userid: 0,//用户id
+ openid: '',//OPENID
+ touxiang: '',//用户头像
+ username: '',//用户昵称
+ requesturl: '',//请求接口的地址
+ gifttu: '/resources/upload.png',//上传的礼品图片
+ }
+})

app.json

@@ -0,0 +1,22 @@
+{
+ "pages":[ 
+ "pages/index/index", 
+ "pages/chart/index", 
+ "pages/logs/logs",
+ "pages/modal/index",
+ "pages/pushrefresh/index",
+ "pages/wxParse/index",
+ "pages/map/index",
+ "pages/jietu/index",
+ "pages/cutInside/cutInside",
+ "pages/calendar/index",
+ "pages/calendarTemplate/index", 
+ "pages/datepickerTemplate/index"
+ ],
+ "window":{
+ "backgroundTextStyle":"light",
+ "navigationBarBackgroundColor": "#fff",
+ "navigationBarTitleText": "WeChat",
+ "navigationBarTextStyle":"black"
+ }
+}

app.wxss

@@ -0,0 +1,63 @@
+/**app.wxss**/
+/**引入weui样式文件**/
+@import 'styles/weui.wxss';
+/**引入常用的icon样式文件**/
+@import 'styles/icon.wxss';
+
+/*页面背景颜色的设置*/
+page{
+ background-color: #F8F8F8;
+ font-size: 16px;
+ font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
+}
+.page__hd {
+ padding: 40px;
+}
+.page__bd {
+ padding-bottom: 40px;
+}
+.page__bd_spacing {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.page__ft{
+ padding-bottom: 10px;
+ text-align: center;
+}
+
+.page__title {
+ text-align: left;
+ font-size: 20px;
+ font-weight: 400;
+}
+
+.page__desc {
+ margin-top: 5px;
+ color: #888888;
+ text-align: left;
+ font-size: 14px;
+}
+/**底部弹窗样式**/
+.commodity_screen {
+ width: 100%;
+ height: 80%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background: #000;
+ opacity: 0.2;
+ overflow: hidden;
+ z-index: 1000;
+ color: #fff;
+}
+.commodity_attr_box {
+ width: 100%;
+ overflow: hidden;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ z-index: 2000;
+ background: #fff;
+ padding-top: 20rpx;
+}

pages/calendar/index.js

@@ -0,0 +1,154 @@
+
+let chooseYear = null;
+let chooseMonth = null;
+const conf = {
+ data: {
+ hasEmptyGrid: false,
+ showPicker: false
+ },
+ onLoad() {
+ const date = new Date();
+ const curYear = date.getFullYear();
+ const curMonth = date.getMonth() + 1;
+ const weeksCh = [ '日', '一', '二', '三', '四', '五', '六' ];
+ this.calculateEmptyGrids(curYear, curMonth);
+ this.calculateDays(curYear, curMonth);
+ this.setData({
+ curYear,
+ curMonth,
+ weeksCh
+ });
+ },
+ getThisMonthDays(year, month) {
+ return new Date(year, month, 0).getDate();
+ },
+ getFirstDayOfWeek(year, month) {
+ return new Date(Date.UTC(year, month - 1, 1)).getDay();
+ },
+ calculateEmptyGrids(year, month) {
+ const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
+ let empytGrids = [];
+ if (firstDayOfWeek > 0) {
+ for (let i = 0; i < firstDayOfWeek; i++) {
+ empytGrids.push(i);
+ }
+ this.setData({
+ hasEmptyGrid: true,
+ empytGrids
+ });
+ } else {
+ this.setData({
+ hasEmptyGrid: false,
+ empytGrids: []
+ });
+ }
+ },
+ calculateDays(year, month) {
+ let days = [];
+
+ const thisMonthDays = this.getThisMonthDays(year, month);
+
+ for (let i = 1; i <= thisMonthDays; i++) {
+ days.push({
+ day: i,
+ choosed: false
+ });
+ }
+
+ this.setData({
+ days
+ });
+ },
+ handleCalendar(e) {
+ const handle = e.currentTarget.dataset.handle;
+ const curYear = this.data.curYear;
+ const curMonth = this.data.curMonth;
+ if (handle === 'prev') {
+ let newMonth = curMonth - 1;
+ let newYear = curYear;
+ if (newMonth < 1) {
+ newYear = curYear - 1;
+ newMonth = 12;
+ }
+
+ this.calculateDays(newYear, newMonth);
+ this.calculateEmptyGrids(newYear, newMonth);
+
+ this.setData({
+ curYear: newYear,
+ curMonth: newMonth
+ });
+ } else {
+ let newMonth = curMonth + 1;
+ let newYear = curYear;
+ if (newMonth > 12) {
+ newYear = curYear + 1;
+ newMonth = 1;
+ }
+
+ this.calculateDays(newYear, newMonth);
+ this.calculateEmptyGrids(newYear, newMonth);
+
+ this.setData({
+ curYear: newYear,
+ curMonth: newMonth
+ });
+ }
+ },
+ tapDayItem(e) {
+ const idx = e.currentTarget.dataset.idx;
+ const days = this.data.days;
+ days[ idx ].choosed = !days[ idx ].choosed;
+ this.setData({
+ days,
+ });
+ },
+ chooseYearAndMonth() {
+ const curYear = this.data.curYear;
+ const curMonth = this.data.curMonth;
+ let pickerYear = [];
+ let pickerMonth = [];
+ for (let i = 1900; i <= 2100; i++) {
+ pickerYear.push(i);
+ }
+ for (let i = 1; i <= 12; i++) {
+ pickerMonth.push(i);
+ }
+ const idxYear = pickerYear.indexOf(curYear);
+ const idxMonth = pickerMonth.indexOf(curMonth);
+ this.setData({
+ pickerValue: [ idxYear, idxMonth ],
+ pickerYear,
+ pickerMonth,
+ showPicker: true,
+ });
+ },
+ pickerChange(e) {
+ const val = e.detail.value;
+ chooseYear = this.data.pickerYear[val[0]];
+ chooseMonth = this.data.pickerMonth[val[1]];
+ },
+ tapPickerBtn(e) {
+ const type = e.currentTarget.dataset.type;
+ const o = {
+ showPicker: false,
+ };
+ if (type === 'confirm') {
+ o.curYear = chooseYear;
+ o.curMonth = chooseMonth;
+ this.calculateEmptyGrids(chooseYear, chooseMonth);
+ this.calculateDays(chooseYear, chooseMonth);
+ }
+
+ this.setData(o);
+ },
+ onShareAppMessage() {
+ return {
+ title: '小程序日历',
+ desc: '还是新鲜的日历哟',
+ path: 'pages/index/index'
+ };
+ }
+};
+
+Page(conf);

pages/calendar/index.json

@@ -0,0 +1,3 @@
+{
+ "navigationBarTitleText": "小历"
+}

pages/calendar/index.wxml

@@ -0,0 +1,38 @@
+<view class="flex box box-tb box-align-center">
+ <view class="calendar pink-color box box-tb">
+ <view class="top-handle fs28 box box-lr box-align-center box-pack-center">
+ <view class="prev box box-rl" bindtap="handleCalendar" data-handle="prev">
+ <view class="prev-handle box box-lr box-align-center box-pack-center">《</view>
+ </view>
+ <view bindtap="chooseYearAndMonth" class="date-area box box-lr box-align-center box-pack-center">{{curYear || "--"}} 年 {{curMonth || "--"}} 月</view>
+ <view class="next box box-lr" bindtap="handleCalendar" data-handle="next">
+ <view class="next-handle box box-lr box-align-center box-pack-center">》</view>
+ </view>
+ </view>
+ <view class="weeks box box-lr box-pack-center box-align-center">
+ <view class="flex week fs28" wx:for="{{weeksCh}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
+ </view>
+ <view class="days box box-lr box-wrap">
+ <view wx:if="{{hasEmptyGrid}}" class="grid white-color box box-align-center box-pack-center" wx:for="{{empytGrids}}" wx:key="{{index}}" data-idx="{{index}}">
+ </view>
+ <view class="grid white-color box box-align-center box-pack-center" wx:for="{{days}}" wx:key="{{index}}" data-idx="{{index}}" bindtap="tapDayItem">
+ <view class="day {{item.choosed ? 'border-radius pink-bg' : ''}} box box-align-center box-pack-center">{{item.day}}</view>
+ </view>
+ </view>
+ </view>
+</view>
+
+<view wx:if="{{showPicker}}" class="box box-tb">
+ <view class="picker-btns box box-lr box-pack-between box-align-center">
+ <view class="picker-btn picker-cancel" data-type="cancel" bindtap="tapPickerBtn">取消</view>
+ <view class="picker-btn picker-confirm" data-type="confirm" bindtap="tapPickerBtn">确定</view>
+ </view>
+ <picker-view class="flex" indicator-style="height: 50px;" style="width: 100%; height: 150px;" value="{{pickerValue}}" bindchange="pickerChange">
+ <picker-view-column>
+ <view class="picker-view" wx:for="{{pickerYear}}" wx:key="*this" style="line-height: 50px">{{item}}年</view>
+ </picker-view-column>
+ <picker-view-column>
+ <view class="picker-view" wx:for="{{pickerMonth}}" wx:key="*this" style="line-height: 50px">{{item}}月</view>
+ </picker-view-column>
+ </picker-view>
+</view>