Repository: tommenx/wxss Branch: master Commit: 7c3cd9345c35 Files: 189 Total size: 243.5 KB Directory structure: gitextract_uivxnbgl/ ├── LICENSE ├── README.md ├── checkin.sql ├── client/ │ ├── README.md │ ├── app.js │ ├── app.json │ ├── app.wxss │ ├── config.js │ ├── dist/ │ │ ├── app.js │ │ ├── app.json │ │ ├── app.wxss │ │ ├── example/ │ │ │ ├── actionsheet/ │ │ │ │ ├── actionsheet.js │ │ │ │ ├── actionsheet.wxml │ │ │ │ └── actionsheet.wxss │ │ │ ├── article/ │ │ │ │ ├── article.js │ │ │ │ ├── article.wxml │ │ │ │ └── article.wxss │ │ │ ├── badge/ │ │ │ │ ├── badge.js │ │ │ │ └── badge.wxml │ │ │ ├── button/ │ │ │ │ ├── button.js │ │ │ │ ├── button.wxml │ │ │ │ └── button.wxss │ │ │ ├── dialog/ │ │ │ │ ├── dialog.js │ │ │ │ ├── dialog.wxml │ │ │ │ └── dialog.wxss │ │ │ ├── flex/ │ │ │ │ ├── flex.js │ │ │ │ ├── flex.wxml │ │ │ │ └── flex.wxss │ │ │ ├── footer/ │ │ │ │ ├── footer.js │ │ │ │ ├── footer.wxml │ │ │ │ └── footer.wxss │ │ │ ├── gallery/ │ │ │ │ ├── gallery.js │ │ │ │ └── gallery.wxml │ │ │ ├── grid/ │ │ │ │ ├── grid.js │ │ │ │ └── grid.wxml │ │ │ ├── icons/ │ │ │ │ ├── icons.js │ │ │ │ ├── icons.wxml │ │ │ │ └── icons.wxss │ │ │ ├── images/ │ │ │ │ └── base64.js │ │ │ ├── index.js │ │ │ ├── index.wxml │ │ │ ├── index.wxss │ │ │ ├── input/ │ │ │ │ ├── input.js │ │ │ │ └── input.wxml │ │ │ ├── list/ │ │ │ │ ├── list.js │ │ │ │ └── list.wxml │ │ │ ├── loadmore/ │ │ │ │ ├── loadmore.js │ │ │ │ ├── loadmore.wxml │ │ │ │ └── loadmore.wxss │ │ │ ├── msg/ │ │ │ │ ├── msg.js │ │ │ │ ├── msg.wxml │ │ │ │ ├── msg.wxss │ │ │ │ ├── msg_fail.js │ │ │ │ ├── msg_fail.wxml │ │ │ │ ├── msg_fail.wxss │ │ │ │ ├── msg_success.js │ │ │ │ ├── msg_success.wxml │ │ │ │ └── msg_success.wxss │ │ │ ├── navbar/ │ │ │ │ ├── navbar.js │ │ │ │ ├── navbar.wxml │ │ │ │ └── navbar.wxss │ │ │ ├── panel/ │ │ │ │ ├── panel.js │ │ │ │ └── panel.wxml │ │ │ ├── picker/ │ │ │ │ ├── picker.js │ │ │ │ ├── picker.wxml │ │ │ │ └── picker.wxss │ │ │ ├── preview/ │ │ │ │ ├── preview.js │ │ │ │ ├── preview.wxml │ │ │ │ └── preview.wxss │ │ │ ├── progress/ │ │ │ │ ├── progress.js │ │ │ │ ├── progress.wxml │ │ │ │ └── progress.wxss │ │ │ ├── searchbar/ │ │ │ │ ├── searchbar.js │ │ │ │ ├── searchbar.wxml │ │ │ │ └── searchbar.wxss │ │ │ ├── slider/ │ │ │ │ ├── slider.js │ │ │ │ ├── slider.wxml │ │ │ │ └── slider.wxss │ │ │ ├── tabbar/ │ │ │ │ ├── tabbar.js │ │ │ │ └── tabbar.wxml │ │ │ ├── toast/ │ │ │ │ ├── toast.js │ │ │ │ ├── toast.wxml │ │ │ │ └── toast.wxss │ │ │ └── uploader/ │ │ │ ├── uploader.js │ │ │ └── uploader.wxml │ │ └── style/ │ │ ├── base/ │ │ │ ├── fn.wxss │ │ │ ├── mixin/ │ │ │ │ ├── setArrow.wxss │ │ │ │ ├── setOnepx.wxss │ │ │ │ └── text.wxss │ │ │ ├── reset.wxss │ │ │ └── variable/ │ │ │ ├── color.wxss │ │ │ ├── global.wxss │ │ │ ├── weui-button.wxss │ │ │ ├── weui-cell.wxss │ │ │ ├── weui-dialog.wxss │ │ │ ├── weui-grid.wxss │ │ │ ├── weui-msg.wxss │ │ │ └── weui-progress.wxss │ │ ├── weui.wxss │ │ └── widget/ │ │ ├── weui-agree/ │ │ │ └── weui-agree.wxss │ │ ├── weui-animate/ │ │ │ └── weui-animate.wxss │ │ ├── weui-button/ │ │ │ └── weui-button.wxss │ │ ├── weui-cell/ │ │ │ ├── weui-access.wxss │ │ │ ├── weui-cell.wxss │ │ │ ├── weui-check.wxss │ │ │ ├── weui-form/ │ │ │ │ ├── weui-form-preview.wxss │ │ │ │ ├── weui-form_common.wxss │ │ │ │ ├── weui-select.wxss │ │ │ │ └── weui-vcode.wxss │ │ │ ├── weui-form.wxss │ │ │ ├── weui-switch.wxss │ │ │ └── weui-uploader.wxss │ │ ├── weui-flex/ │ │ │ └── weui-flex.wxss │ │ ├── weui-footer/ │ │ │ └── weui-footer.wxss │ │ ├── weui-grid/ │ │ │ └── weui-grid.wxss │ │ ├── weui-loading/ │ │ │ └── weui-loading.wxss │ │ ├── weui-media-box/ │ │ │ └── weui-media-box.wxss │ │ ├── weui-page/ │ │ │ ├── weui-article.wxss │ │ │ └── weui-msg.wxss │ │ ├── weui-panel/ │ │ │ └── weui-panel.wxss │ │ ├── weui-progress/ │ │ │ └── weui-progress.wxss │ │ ├── weui-searchbar/ │ │ │ └── weui-searchbar.wxss │ │ ├── weui-tab/ │ │ │ ├── weui-navbar.wxss │ │ │ └── weui-tab.wxss │ │ └── weui-tips/ │ │ ├── weui-badge.wxss │ │ └── weui-loadmore.wxss │ ├── libs/ │ │ ├── amap-wx.js │ │ └── qqmap-wx-jssdk.js │ ├── pages/ │ │ ├── addLocation/ │ │ │ ├── addLocation.js │ │ │ ├── addLocation.json │ │ │ ├── addLocation.wxml │ │ │ └── addLocation.wxss │ │ ├── checkIn/ │ │ │ ├── checkIn.js │ │ │ ├── checkIn.json │ │ │ ├── checkIn.wxml │ │ │ └── checkIn.wxss │ │ ├── detail/ │ │ │ ├── detail.js │ │ │ ├── detail.json │ │ │ ├── detail.wxml │ │ │ └── detail.wxss │ │ ├── logs/ │ │ │ ├── logs.js │ │ │ ├── logs.json │ │ │ ├── logs.wxml │ │ │ └── logs.wxss │ │ ├── manage/ │ │ │ ├── manage.js │ │ │ ├── manage.json │ │ │ ├── manage.wxml │ │ │ └── manage.wxss │ │ ├── new/ │ │ │ ├── new.js │ │ │ ├── new.json │ │ │ ├── new.wxml │ │ │ └── new.wxss │ │ ├── search/ │ │ │ ├── search.js │ │ │ ├── search.json │ │ │ ├── search.wxml │ │ │ └── search.wxss │ │ ├── searchDetail/ │ │ │ ├── searchDetail.js │ │ │ ├── searchDetail.json │ │ │ ├── searchDetail.wxml │ │ │ └── searchDetail.wxss │ │ └── user/ │ │ ├── user.js │ │ ├── user.json │ │ ├── user.wxml │ │ └── user.wxss │ ├── project.config.json │ └── utils/ │ ├── getdistance.js │ ├── upload.js │ └── util.js └── server/ └── checkin/ ├── .idea/ │ ├── checkin.iml │ ├── jsLibraryMappings.xml │ ├── modules.xml │ ├── runConfigurations/ │ │ └── bin_www.xml │ └── workspace.xml ├── app.js ├── bin/ │ └── www ├── configs/ │ └── config.js ├── models/ │ ├── activity.js │ ├── apply.js │ ├── check.js │ └── person.js ├── package.json ├── public/ │ └── stylesheets/ │ └── style.css ├── routes/ │ ├── activity.js │ ├── check.js │ ├── index.js │ └── person.js ├── utils/ │ └── dbConnection.js └── views/ ├── error.ejs └── index.ejs ================================================ FILE CONTENTS ================================================ ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2019 zeng xiang Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # 活动考勤签到小程序 ## 效果图 ![](img/demo.jpg) ## 功能 #### 创建活动 1. 可以添加活动名称、简介等信息 2. 地点选择时有搜索建议并能够在地图上标注 3. 签到方式选择包括：照片（上传活动照片）、地点（在活动地点附近500米内）、人脸（本人签到） #### 活动搜索 1. 通过数据库的模糊搜索简单实现——每输入一个字都进行查询 2. 点击结果列表可以查看活动详情 #### 活动管理 1. 根据当前日期分成两个Tab：正在进行中、已结束 2. 点击可以进入活动详情界面 #### 活动详情 1. 查看活动的发起人、起止日期、活动地点、简介 2. 查看参与的人数 3. 活动的签到情况根据日期进行归档，点击日期可以查看当日的签到情况 #### 活动签到 1. 首先必须上传打卡照片，从相册中选择 2. 点击地点验证即可通过当前经纬度以及活动地点经纬度简单计算距离，小于500m认为在活动区域 3. 点击人脸验证，通过Face++的人脸对比接口，将上传的照片和个人信息页面的照片进行对比，置信度大于50可以认作是同一个人 4. 当所有的要求都满足后，完成活动的签到 #### 个人信息 1. 可以更改当前的照片 ## 相关技术 1. 数据库采用MySQL 2. 服务器基于Nodejs的Express4.0框架搭建，简单的接收JSON数据并返回，所有的活动信息、签到结果都记录在数据库中 3. 个人信息图片、签到图片都存储在腾讯云的cos中 4. 地理位置的推荐使用腾讯的地图接口 ## 项目部署 #### 客户端 1. 小程序客户端放在client文件夹，使用小程序开发工具打开 2. 填补client/checkin/config.js中的腾讯云对象存储的相关信息 3. 填补client/checkin/pages/checkIn/checkIn.js中相应的API的key等 #### 服务端 1. 安装Nodejs，执行 node app.js 2. 数据库的配置在server/checkin/congigs/config.js中 #### 数据库 执行SQL文件即可 ================================================ FILE: checkin.sql ================================================ /* Navicat Premium Data Transfer Source Server : localhost_3306 Source Server Type : MySQL Source Server Version : 50720 Source Host : localhost:3306 Source Schema : checkin Target Server Type : MySQL Target Server Version : 50720 File Encoding : 65001 Date: 31/03/2018 19:27:31 */ SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0; -- ---------------------------- -- Table structure for t_activity -- ---------------------------- DROP TABLE IF EXISTS `t_activity`; CREATE TABLE `t_activity` ( `F_ID` int(11) NOT NULL AUTO_INCREMENT, `F_CreaterId` int(11) NOT NULL, `F_Caption` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, `F_Desc` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, `F_Location` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, `F_Lat` float NULL DEFAULT NULL, `F_Lng` float NULL DEFAULT NULL, `F_StartDate` date NULL DEFAULT NULL, `F_EndDate` date NULL DEFAULT NULL, `F_IfFace` int(11) NULL DEFAULT NULL, `F_IfLocation` int(11) NULL DEFAULT NULL, `F_IfPhoto` int(11) NULL DEFAULT NULL, PRIMARY KEY (`F_ID`) USING BTREE, INDEX `F_CreaterId`(`F_CreaterId`) USING BTREE, CONSTRAINT `t_activity_ibfk_1` FOREIGN KEY (`F_CreaterId`) REFERENCES `t_user` (`F_ID`) ON DELETE RESTRICT ON UPDATE RESTRICT ) ENGINE = InnoDB AUTO_INCREMENT = 40 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic; -- ---------------------------- -- Table structure for t_apply -- ---------------------------- DROP TABLE IF EXISTS `t_apply`; CREATE TABLE `t_apply` ( `F_ID` int(11) NOT NULL AUTO_INCREMENT, `F_ApplyerId` int(11) NOT NULL, `F_ActivityId` int(11) NOT NULL, `F_ApplyDate` date NULL DEFAULT NULL, PRIMARY KEY (`F_ID`) USING BTREE, INDEX `F_ApplyerId`(`F_ApplyerId`) USING BTREE, INDEX `F_ActivityId`(`F_ActivityId`) USING BTREE, CONSTRAINT `t_apply_ibfk_1` FOREIGN KEY (`F_ApplyerId`) REFERENCES `t_user` (`F_ID`) ON DELETE RESTRICT ON UPDATE RESTRICT, CONSTRAINT `t_apply_ibfk_2` FOREIGN KEY (`F_ActivityId`) REFERENCES `t_activity` (`F_ID`) ON DELETE RESTRICT ON UPDATE RESTRICT ) ENGINE = InnoDB AUTO_INCREMENT = 16 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic; -- ---------------------------- -- Table structure for t_check -- ---------------------------- DROP TABLE IF EXISTS `t_check`; CREATE TABLE `t_check` ( `F_ID` int(11) NOT NULL AUTO_INCREMENT, `F_ActivityId` int(11) NULL DEFAULT NULL, `F_UserID` int(11) NULL DEFAULT NULL, `F_CheckDate` date NULL DEFAULT NULL, `F_PhotoUrl` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, PRIMARY KEY (`F_ID`) USING BTREE, INDEX `F_ActivityId`(`F_ActivityId`) USING BTREE, INDEX `F_UserID`(`F_UserID`) USING BTREE, CONSTRAINT `t_check_ibfk_1` FOREIGN KEY (`F_ActivityId`) REFERENCES `t_activity` (`F_ID`) ON DELETE RESTRICT ON UPDATE RESTRICT, CONSTRAINT `t_check_ibfk_2` FOREIGN KEY (`F_UserID`) REFERENCES `t_user` (`F_ID`) ON DELETE RESTRICT ON UPDATE RESTRICT ) ENGINE = InnoDB AUTO_INCREMENT = 30 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic; -- ---------------------------- -- Table structure for t_user -- ---------------------------- DROP TABLE IF EXISTS `t_user`; CREATE TABLE `t_user` ( `F_ID` int(11) NOT NULL AUTO_INCREMENT, `F_Name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, `F_PhotoUrl` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, PRIMARY KEY (`F_ID`) USING BTREE ) ENGINE = InnoDB AUTO_INCREMENT = 11 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic; -- ---------------------------- -- View structure for v_activity_info -- ---------------------------- DROP VIEW IF EXISTS `v_activity_info`; CREATE ALGORITHM = UNDEFINED DEFINER = `root`@`localhost` SQL SECURITY DEFINER VIEW `v_activity_info` AS select `t_activity`.`F_ID` AS `F_ActivityId`,`t_user`.`F_Name` AS `F_CreaterName`,`t_activity`.`F_Caption` AS `F_Caption`,`t_activity`.`F_Desc` AS `F_Desc`,`t_activity`.`F_Location` AS `F_Location`,`t_activity`.`F_Lat` AS `F_Lat`,`t_activity`.`F_Lng` AS `F_Lng`,`t_activity`.`F_StartDate` AS `F_StartDate`,`t_activity`.`F_EndDate` AS `F_EndDate`,`t_activity`.`F_IfFace` AS `F_IfFace`,`t_activity`.`F_IfLocation` AS `F_IfLocation`,`t_activity`.`F_IfPhoto` AS `F_IfPhoto` from (`t_activity` join `t_user` on((`t_activity`.`F_CreaterId` = `t_user`.`F_ID`))); -- ---------------------------- -- View structure for v_apply_activity -- ---------------------------- DROP VIEW IF EXISTS `v_apply_activity`; CREATE ALGORITHM = UNDEFINED DEFINER = `root`@`localhost` SQL SECURITY DEFINER VIEW `v_apply_activity` AS select `t_activity`.`F_ID` AS `F_ID`,`t_activity`.`F_CreaterId` AS `F_CreaterId`,`t_activity`.`F_Caption` AS `F_Caption`,`t_activity`.`F_Desc` AS `F_Desc`,`t_activity`.`F_Lat` AS `F_Lat`,`t_activity`.`F_Lng` AS `F_Lng`,`t_activity`.`F_StartDate` AS `F_StartDate`,`t_activity`.`F_EndDate` AS `F_EndDate`,`t_activity`.`F_IfFace` AS `F_IfFace`,`t_activity`.`F_IfLocation` AS `F_IfLocation`,`t_activity`.`F_IfPhoto` AS `F_IfPhoto`,`t_apply`.`F_ApplyDate` AS `F_ApplyDate`,`t_apply`.`F_ApplyerId` AS `F_ApplyerId`,`t_activity`.`F_Location` AS `F_Location` from (`t_apply` join `t_activity` on((`t_apply`.`F_ActivityId` = `t_activity`.`F_ID`))); -- ---------------------------- -- View structure for v_apply_info -- ---------------------------- DROP VIEW IF EXISTS `v_apply_info`; CREATE ALGORITHM = UNDEFINED DEFINER = `root`@`localhost` SQL SECURITY DEFINER VIEW `v_apply_info` AS select `t_activity`.`F_ID` AS `F_ID`,count(0) AS `F_ApplyNum`,`t_activity`.`F_Caption` AS `F_Caption`,`t_apply`.`F_ApplyerId` AS `F_ApplyerId` from (`t_activity` join `t_apply` on((`t_apply`.`F_ActivityId` = `t_activity`.`F_ID`))) group by `t_activity`.`F_ID`; -- ---------------------------- -- View structure for v_check_detail -- ---------------------------- DROP VIEW IF EXISTS `v_check_detail`; CREATE ALGORITHM = UNDEFINED DEFINER = `root`@`localhost` SQL SECURITY DEFINER VIEW `v_check_detail` AS select `t_check`.`F_ActivityId` AS `F_ActivityId`,`t_check`.`F_UserID` AS `F_UserId`,`t_check`.`F_PhotoUrl` AS `F_CheckPhotoUrl`,`t_user`.`F_Name` AS `F_UserName`,`t_check`.`F_CheckDate` AS `F_CheckDate` from (`t_user` join `t_check` on((`t_check`.`F_UserID` = `t_user`.`F_ID`))); SET FOREIGN_KEY_CHECKS = 1; ================================================ FILE: client/README.md ================================================ # checkin ================================================ FILE: client/app.js ================================================ //app.js var config = require('./config.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 // console.log(res.userInfo); // // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // // 所以此处加入 callback 以防止这种情况 // if (this.userInfoReadyCallback) { // this.userInfoReadyCallback(res) // } // } // }) // } // } // }) wx.getUserInfo({ success: res => { // 可以将 res 发送给后台解码出 unionId var that = this; that.globalData.userInfo = res.userInfo; wx.request({ url: config.url+'/person/', data: { 'username':res.userInfo.nickName }, method: 'POST', success: function(user_res){ that.globalData.user_id = user_res.data.userId that.globalData.avator_url = user_res.data.avatorUrl console.log(user_res.data); } }) // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res) } } }); }, globalData: { userInfo: null, users:null, user_id:null, avator_url:null }, data: { haveLocation: false, activity_lat: -1, activity_lng: -1, activity_location: "" } }) ================================================ FILE: client/app.json ================================================ { "pages": [ "pages/search/search", "pages/detail/detail", "pages/manage/manage", "pages/checkIn/checkIn", "pages/new/new", "pages/addLocation/addLocation", "pages/user/user", "pages/logs/logs", "pages/searchDetail/searchDetail" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "tabBar": { "color": "#9b9b9b", "selectedColor": "#2ba245", "borderStyle": "white", "position": "bottom", "list": [ { "pagePath": "pages/new/new", "text": "新建", "iconPath": "image/new_normal.png", "selectedIconPath": "image/new_pressed.png" }, { "pagePath": "pages/search/search", "text": "查找", "iconPath": "image/search_normal.png", "selectedIconPath": "image/search_pressed.png" }, { "pagePath": "pages/manage/manage", "text": "管理", "iconPath": "image/manage_normal.png", "selectedIconPath": "image/manage_pressed.png" }, { "pagePath": "pages/user/user", "text": "我的", "iconPath": "image/user_normal.png", "selectedIconPath": "image/user_pressed.png" } ] } } ================================================ FILE: client/app.wxss ================================================ /**app.wxss**/ @import "dist/style/weui.wxss"; .container { height: 100%; display: flex; flex-direction: column; align-items: center; } 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; } ================================================ FILE: client/config.js ================================================ //服务器地址 var url = '' //腾讯云对象存储鉴权地址 var cosSignatureUrl = ''; //腾讯云对象存储的区域：华东地区为sh var cosRegion = ''; //腾讯云对象存储cos的APPID var cosAPPID = '12XXXXXXXX'; //腾讯云COSSecretId var cosSecretId = ''; //腾讯云COSSecretKey var cosSecretKey = ''; //bucket var cosBucketName = ''; //dir路径 var cosDirName = ''; module.exports = { url: url, cosSignatureUrl: cosSignatureUrl, cosRegion: cosRegion, cosAPPID: cosAPPID, cosBucketName: cosBucketName, cosDirName: cosDirName } ================================================ FILE: client/dist/app.js ================================================ App({ onLaunch: function () { console.log('App Launch') }, onShow: function () { console.log('App Show') }, onHide: function () { console.log('App Hide') }, globalData: { hasLogin: false } }); ================================================ FILE: client/dist/app.json ================================================ { "pages": [ "example/index", "example/button/button", "example/list/list", "example/input/input", "example/slider/slider", "example/uploader/uploader", "example/article/article", "example/badge/badge", "example/flex/flex", "example/footer/footer", "example/gallery/gallery", "example/grid/grid", "example/icons/icons", "example/loadmore/loadmore", "example/panel/panel", "example/preview/preview", "example/progress/progress", "example/actionsheet/actionsheet", "example/dialog/dialog", "example/msg/msg", "example/msg/msg_success", "example/msg/msg_fail", "example/picker/picker", "example/toast/toast", "example/navbar/navbar", "example/tabbar/tabbar", "example/searchbar/searchbar" ], "window": { "navigationBarTextStyle": "black", "navigationBarTitleText": "WeUI for 小程序", "navigationBarBackgroundColor": "#f8f8f8", "backgroundColor": "#f8f8f8" }, "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 }, "debug": true } ================================================ FILE: client/dist/app.wxss ================================================ @import 'style/weui.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; } ================================================ FILE: client/dist/example/actionsheet/actionsheet.js ================================================ Page({ open: function(){ wx.showActionSheet({ itemList: ['A', 'B', 'C'], success: function(res) { if (!res.cancel) { console.log(res.tapIndex) } } }); } }); ================================================ FILE: client/dist/example/actionsheet/actionsheet.wxml ================================================ ActionSheet 弹出式菜单，采用小程序原生的actionsheet ================================================ FILE: client/dist/example/actionsheet/actionsheet.wxss ================================================ page{ background-color: #FFFFFF; } ================================================ FILE: client/dist/example/article/article.js ================================================ Page({}); ================================================ FILE: client/dist/example/article/article.wxml ================================================ Article 文章 大标题 章标题 1.1 节标题 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 1.2 节标题 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ================================================ FILE: client/dist/example/article/article.wxss ================================================ page{ background-color: #FFFFFF; } image{ margin: 4px 0; } ================================================ FILE: client/dist/example/badge/badge.js ================================================ Page({}); ================================================ FILE: client/dist/example/badge/badge.wxml ================================================ Badge 徽章 新消息提示跟摘要信息后，统一在列表右侧 单行列表 详细信息 未读数红点跟在主题信息后，统一在列表左侧 8 联系人名称 摘要信息 单行列表 8 单行列表 8 详细信息 单行列表 New ================================================ FILE: client/dist/example/button/button.js ================================================ Page({}); ================================================ FILE: client/dist/example/button/button.wxml ================================================ Button 按钮，WeUI采用小程序原生的按钮为主体，加入一些间距的样式。 ================================================ FILE: client/dist/example/button/button.wxss ================================================ .button-sp-area{ margin: 0 auto; padding-top: 15px; width: 60%; } .mini-btn{ margin-right: 5px; } ================================================ FILE: client/dist/example/dialog/dialog.js ================================================ Page({ openConfirm: function () { wx.showModal({ title: '弹窗标题', content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内', confirmText: "主操作", cancelText: "辅助操作", success: function (res) { console.log(res); if (res.confirm) { console.log('用户点击主操作') }else{ console.log('用户点击辅助操作') } } }); }, openAlert: function () { wx.showModal({ content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内', showCancel: false, success: function (res) { if (res.confirm) { console.log('用户点击确定') } } }); } }); ================================================ FILE: client/dist/example/dialog/dialog.wxml ================================================ Dialog 对话框，采用小程序原生的modal ================================================ FILE: client/dist/example/dialog/dialog.wxss ================================================ page{ background-color: #FFFFFF; } ================================================ FILE: client/dist/example/flex/flex.js ================================================ Page({}); ================================================ FILE: client/dist/example/flex/flex.wxml ================================================ Flex Flex布局 weui weui weui weui weui weui weui weui weui weui weui weui weui ================================================ FILE: client/dist/example/flex/flex.wxss ================================================ .placeholder{ margin: 5px; padding: 0 10px; text-align: center; background-color: #EBEBEB; height: 2.3em; line-height: 2.3em; color: #cfcfcf; } ================================================ FILE: client/dist/example/footer/footer.js ================================================ Page({}); ================================================ FILE: client/dist/example/footer/footer.wxml ================================================ Footer 页脚 Copyright © 2008-2016 weui.io 底部链接 Copyright © 2008-2016 weui.io 底部链接 底部链接 Copyright © 2008-2016 weui.io WeUI首页 Copyright © 2008-2016 weui.io ================================================ FILE: client/dist/example/footer/footer.wxss ================================================ /* 作为展示用的样式 */ .weui-footer{ margin-bottom: 50px; } .weui-footer_fixed-bottom{ margin-bottom: 0; } ================================================ FILE: client/dist/example/gallery/gallery.js ================================================ Page({}); ================================================ FILE: client/dist/example/gallery/gallery.wxml ================================================ Gallery 画廊，建议采用小程序原生的wx.previewImage来实现。详情请看小程序文档。 ================================================ FILE: client/dist/example/grid/grid.js ================================================ Page({ data: { grids: [0, 1, 2, 3, 4, 5, 6, 7, 8] } }); ================================================ FILE: client/dist/example/grid/grid.wxml ================================================ Grid 九宫格 Grid ================================================ FILE: client/dist/example/icons/icons.js ================================================ Page({}); ================================================ FILE: client/dist/example/icons/icons.wxml ================================================ Icons 图标 成功 用于表示操作顺利达成 提示 用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息 普通警告 用于表示操作后将引起一定后果的情况 强烈警告 用于表示操作后将引起严重的不可挽回的后果的情况 等待 用于表示等待 ================================================ FILE: client/dist/example/icons/icons.wxss ================================================ icon{ margin-right: 13px; } .page__bd { padding-left: 40px; padding-right: 40px; text-align: left; } .icon-box{ margin-bottom: 25px; display: flex; align-items: center; } .icon-box__ctn{ flex-shrink: 100; } .icon-box__title{ font-size: 20px; } .icon-box__desc{ margin-top: 6px; font-size: 12px; color: #888888; } .icon_sp_area { margin-top: 10px; text-align: left; } ================================================ FILE: client/dist/example/images/base64.js ================================================ module.exports = { icon20: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=", icon60: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" }; ================================================ FILE: client/dist/example/index.js ================================================ Page({ data: { list: [ { id: 'form', name: '表单', open: false, pages: ['button', 'list', 'input', 'slider', 'uploader'] }, { id: 'widget', name: '基础组件', open: false, pages: ['article', 'badge', 'flex', 'footer', 'gallery', 'grid', 'icons', 'loadmore', 'panel', 'preview', 'progress'] }, { id: 'feedback', name: '操作反馈', open: false, pages: ['actionsheet', 'dialog', 'msg', 'picker', 'toast'] }, { id: 'nav', name: '导航相关', open: false, pages: ['navbar', 'tabbar'] }, { id: 'search', name: '搜索相关', open: false, pages: ['searchbar'] } ] }, kindToggle: function (e) { var id = e.currentTarget.id, list = this.data.list; for (var i = 0, len = list.length; i < len; ++i) { if (list[i].id == id) { list[i].open = !list[i].open } else { list[i].open = false } } this.setData({ list: list }); } }); ================================================ FILE: client/dist/example/index.wxml ================================================ WeUI WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。 {{item.name}} {{page}} ================================================ FILE: client/dist/example/index.wxss ================================================ /*! * WeUI v1.1.1 (https://github.com/weui/weui-wxss) * Copyright 2017 Tencent, Inc. * Licensed under the MIT license */ .weui-flex{-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-cells{margin-top:0;opacity:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:.3s;transition:.3s}.weui-cells:after,.weui-cells:before{display:none}.weui-cells_show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.weui-cell:before{right:15px}.kind-list__item{margin:10px 0;background-color:#fff;border-radius:2px;overflow:hidden}.kind-list__item:first-child{margin-top:0}.kind-list__img{width:30px;height:30px}.kind-list__item-hd{padding:20px;-webkit-transition:opacity .3s;transition:opacity .3s}.kind-list__item-hd_show{opacity:.4}.kind-list__item-bd{height:0;overflow:hidden}.kind-list__item-bd_show{height:auto} ================================================ FILE: client/dist/example/input/input.js ================================================ Page({ data: { showTopTips: false, radioItems: [ {name: 'cell standard', value: '0'}, {name: 'cell standard', value: '1', checked: true} ], checkboxItems: [ {name: 'standard is dealt for u.', value: '0', checked: true}, {name: 'standard is dealicient for u.', value: '1'} ], date: "2016-09-01", time: "12:01", countryCodes: ["+86", "+80", "+84", "+87"], countryCodeIndex: 0, countries: ["中国", "美国", "英国"], countryIndex: 0, accounts: ["微信号", "QQ", "Email"], accountIndex: 0, isAgree: false }, showTopTips: function(){ var that = this; this.setData({ showTopTips: true }); setTimeout(function(){ that.setData({ showTopTips: false }); }, 3000); }, radioChange: function (e) { console.log('radio发生change事件，携带value值为：', e.detail.value); var radioItems = this.data.radioItems; for (var i = 0, len = radioItems.length; i < len; ++i) { radioItems[i].checked = radioItems[i].value == e.detail.value; } this.setData({ radioItems: radioItems }); }, checkboxChange: function (e) { console.log('checkbox发生change事件，携带value值为：', e.detail.value); var checkboxItems = this.data.checkboxItems, values = e.detail.value; for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) { checkboxItems[i].checked = false; for (var j = 0, lenJ = values.length; j < lenJ; ++j) { if(checkboxItems[i].value == values[j]){ checkboxItems[i].checked = true; break; } } } this.setData({ checkboxItems: checkboxItems }); }, bindDateChange: function (e) { this.setData({ date: e.detail.value }) }, bindTimeChange: function (e) { this.setData({ time: e.detail.value }) }, bindCountryCodeChange: function(e){ console.log('picker country code 发生选择改变，携带值为', e.detail.value); this.setData({ countryCodeIndex: e.detail.value }) }, bindCountryChange: function(e) { console.log('picker country 发生选择改变，携带值为', e.detail.value); this.setData({ countryIndex: e.detail.value }) }, bindAccountChange: function(e) { console.log('picker account 发生选择改变，携带值为', e.detail.value); this.setData({ accountIndex: e.detail.value }) }, bindAgreeChange: function (e) { this.setData({ isAgree: !!e.detail.value.length }); } }); ================================================ FILE: client/dist/example/input/input.wxml ================================================ Input 表单输入 错误提示 单选列表项 添加更多 复选列表项 添加更多 表单 qq 手机号 获取验证码 日期 {{date}} 时间 {{time}} 验证码 底部说明文字底部说明文字 表单报错 卡号 开关 标题文字 文本框 文本域