├── README.md ├── firendsCircle-server ├── index.js └── package.json └── firendsCircle ├── app.js ├── app.json ├── app.wxss ├── img ├── img.png ├── mind.png └── show.gif ├── lib └── iconfont │ ├── iconfont.woff │ └── iconfont.wxss ├── pages ├── edit │ ├── edit.js │ ├── edit.json │ ├── edit.wxml │ └── edit.wxss └── firendsCirle │ ├── firendsCircle.js │ ├── firendsCircle.json │ ├── firendsCircle.wxml │ └── firendsCircle.wxss └── project.config.json /README.md: -------------------------------------------------------------------------------- 1 | # 朋友圈 2 | ##### 技术栈：微信小程序 3 | 4 | ###### 页面截图 5 | ![功能截图](./firendsCircle/img/img.png) 6 | ###### 功能实现 7 | ![功能截图](./firendsCircle/img/show.gif) 8 | ###### 功能脑图 9 | ![功能截图](./firendsCircle/img/mind.png) 10 | ###### 调用API 11 | - [X] 获取用户信息（头像和昵称） wx.getSetting / wx.getUserInfo 12 | - [X] 本地服务器数据请求 wx.request 13 | - [X] 页面路由 wx.navigateTo / wx.navigateBack 14 | - [X] 图片全屏预览 wx.previewImage 15 | - [X] 弹窗显示 wx.showModal 16 | - [X] 图片选择（相册还是拍照） wx.chooseImage 17 | - [X] 打开地图选择位置 wx.chooseLocation 18 | ###### 本地服务器 19 | nodejs的express框架，使用中间件body-parser解析POST请求的数据。 20 | 21 | 22 | ###### 更新计划 23 | 数据请求方式和路径优化 24 | 25 | ## 本地运行 26 | ``` 27 | git clone https://github.com/xutao0793/firendsCircle-Dome.git 28 | cd firendsCircle-server 29 | npm install 30 | node index.js 31 | 32 | 在微信开发者工具中打开firendsCircle项目文件，编译预览 33 | ``` 34 | 35 | -------------------------------------------------------------------------------- /firendsCircle-server/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const bodyParser = require("body-parser"); 3 | const url = require("url"); 4 | let deliverInfo = []; 5 | let id = 0; 6 | 7 | const app = express(); 8 | app.use(bodyParser.urlencoded({extended:false})); 9 | 10 | app.listen(3000,(err)=>{ 11 | if(err){console.log("failed")} 12 | else{console.log("true:127.0.0.1:3000")} 13 | }) 14 | app.get("/api",function(req,res){ 15 | timeDuration(deliverInfo) 16 | res.json({"result":deliverInfo}) 17 | }) 18 | app.post("/api",function(req,res){ 19 | parseimgArr(req.body) 20 | deliverInfo.unshift(req.body); 21 | }) 22 | app.get("/zan",function(req,res){ 23 | let qs = url.parse(req.url,true).query; 24 | let idx = Number(qs.idx); 25 | let nickName = qs.nickName; 26 | 27 | if(deliverInfo[idx].zan){ 28 | deliverInfo[idx].zan += (", "+ nickName); 29 | }else{ 30 | deliverInfo[idx].zan = nickName; 31 | } 32 | }) 33 | 34 | //因为接收过来数据经过编码解码，body对象中的imgARR是字符串形式，所以需要转为数组形式。顺便加上接收时间 35 | function parseimgArr(obj){ 36 | if(obj.imgArr == 'null'){obj.imgArr=null} 37 | else { 38 | obj.imgArr = obj.imgArr.split(","); 39 | } 40 | obj.time = new Date(); 41 | } 42 | //前端get时计算这条信息已经过去的时长，调试经段暂用，后期优化此函数 43 | function timeDuration(obj){ 44 | let curTime = new Date(); 45 | for(let i=0; i= 60 && temp < 3600){obj[i].time = ~~temp/60 + "分钟前"} 50 | else if(temp >= 3600 && temp < 86400){obj[i].time = ~~temp/3600 + "小时前"} 51 | else if(temp >= 86400){obj[i].time = ~~temp/86400 + "天前"} 52 | } 53 | } -------------------------------------------------------------------------------- /firendsCircle-server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "firendscircle-server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "body-parser": "^1.18.3", 13 | "express": "^4.16.4" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /firendsCircle/app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | // 展示本地存储能力 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | 9 | // 登录 10 | wx.login({ 11 | success: res => { 12 | // 发送 res.code 到后台换取 openId, sessionKey, unionId 13 | } 14 | }) 15 | // 获取用户信息 16 | wx.getSetting({ 17 | success: res => { 18 | if (res.authSetting['scope.userInfo']) { //是否授权 19 | // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 20 | wx.getUserInfo({ 21 | success: res => { 22 | // 可以将 res 发送给后台解码出 unionId 23 | this.globalData.userInfo = res.userInfo 24 | 25 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 26 | // 所以此处加入 callback 以防止这种情况 27 | if (this.userInfoReadyCallback) { 28 | this.userInfoReadyCallback(res) 29 | } 30 | } 31 | }) 32 | } 33 | } 34 | }) 35 | }, 36 | globalData: { 37 | userInfo: null, 38 | baseUrl: "http://127.0.0.1:3000/" 39 | } 40 | }) -------------------------------------------------------------------------------- /firendsCircle/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/firendsCirle/firendsCircle", 4 | "pages/edit/edit" 5 | ], 6 | "window": { 7 | "backgroundTextStyle": "light", 8 | "navigationBarBackgroundColor": "#fff", 9 | "navigationBarTextStyle": "black" 10 | } 11 | } -------------------------------------------------------------------------------- /firendsCircle/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | 3 | -------------------------------------------------------------------------------- /firendsCircle/img/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xut0793/firendsCircle-Dome/eaf654b7a063f4eab2f69a951de3e58bbb6a02b3/firendsCircle/img/img.png -------------------------------------------------------------------------------- /firendsCircle/img/mind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xut0793/firendsCircle-Dome/eaf654b7a063f4eab2f69a951de3e58bbb6a02b3/firendsCircle/img/mind.png -------------------------------------------------------------------------------- /firendsCircle/img/show.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xut0793/firendsCircle-Dome/eaf654b7a063f4eab2f69a951de3e58bbb6a02b3/firendsCircle/img/show.gif -------------------------------------------------------------------------------- /firendsCircle/lib/iconfont/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xut0793/firendsCircle-Dome/eaf654b7a063f4eab2f69a951de3e58bbb6a02b3/firendsCircle/lib/iconfont/iconfont.woff -------------------------------------------------------------------------------- /firendsCircle/lib/iconfont/iconfont.wxss: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'); 4 | } 5 | 6 | .iconfont { 7 | font-family:"iconfont" !important; 8 | font-size:16px; 9 | font-style:normal; 10 | -webkit-font-smoothing: antialiased; 11 | -moz-osx-font-smoothing: grayscale; 12 | } 13 | 14 | .icon-jinyanjinliao206:before { content: "\e61e"; } 15 | 16 | .icon-sousuo:before { content: "\e629"; } 17 | 18 | .icon-pinglun:before { content: "\e6a3"; } 19 | 20 | .icon-zuobiaonormal:before { content: "\e610"; } 21 | 22 | .icon-qqkongjian:before { content: "\e600"; } 23 | 24 | .icon-pinglun1:before { content: "\e650"; } 25 | 26 | .icon-xiangji:before { content: "\e68c"; } 27 | 28 | .icon-plus:before { content: "\e601"; } 29 | 30 | .icon-qq:before { content: "\e60e"; } 31 | 32 | .icon-touxiang:before { content: "\e658"; } 33 | 34 | .icon-arrow-right:before { content: "\e602"; } 35 | 36 | .icon-sousuo1:before { content: "\e603"; } 37 | 38 | .icon-at:before { content: "\e65e"; } 39 | 40 | .icon-arrow-right1:before { content: "\e61f"; } 41 | 42 | .icon-xin:before { content: "\e63f"; } 43 | 44 | .icon-zuobiao:before { content: "\e6aa"; } 45 | 46 | -------------------------------------------------------------------------------- /firendsCircle/pages/edit/edit.js: -------------------------------------------------------------------------------- 1 | // pages/edit/edit.js 2 | const app = getApp(); 3 | Page({ 4 | /*** 页面的初始数据*/ 5 | data: { 6 | textareaTxt:null, 7 | imgArr:null, 8 | location:null 9 | }, 10 | saveEditOrNot(){ 11 | wx.showModal({ 12 | title: '将此次编辑保留', 13 | content: '', 14 | cancelText: '不保留', 15 | confirmText: '保留', 16 | success(res) { 17 | if (res.confirm) { 18 | console.log('用户点击确定') 19 | } else if (res.cancel) { 20 | wx.navigateBack({ 21 | delta:1 22 | }) 23 | } 24 | } 25 | }) 26 | }, 27 | getInputValue(e){ 28 | this.setData({ 29 | textareaTxt: e.detail.value 30 | }) 31 | }, 32 | chooseImage(){ 33 | let self = this; 34 | wx.chooseImage({ 35 | count: 9, 36 | sizeType: 'compressed', 37 | sourceType: ['album', 'camera'], 38 | success(res) { 39 | // tempFilePath可以作为img标签的src属性显示图片 40 | self.setData({ 41 | imgArr: res.tempFilePaths 42 | }) 43 | } 44 | }) 45 | }, 46 | chooseLocation(){ 47 | let self = this 48 | wx.chooseLocation({ 49 | success(res) { 50 | self.setData({ 51 | location: res.name 52 | }) 53 | 54 | } 55 | }) 56 | }, 57 | postData(){ 58 | wx.navigateBack({ 59 | delta:1 60 | }) 61 | wx.request({ 62 | url: app.globalData.baseUrl+"api", 63 | method: "POST", 64 | data: { 65 | avatarUrl: app.globalData.userInfo.avatarUrl, 66 | nickName: app.globalData.userInfo.nickName, 67 | textareaTxt:this.data.textareaTxt, 68 | imgArr: this.data.imgArr, 69 | location: this.data.location 70 | }, 71 | header: { 72 | 'content-type':'application/x-www-form-urlencoded' 73 | } 74 | }) 75 | } 76 | }) -------------------------------------------------------------------------------- /firendsCircle/pages/edit/edit.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /firendsCircle/pages/edit/edit.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 取消 5 | 发表 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 所在位置 20 | 21 | 22 | 23 | 24 | 谁可以看 25 | 26 | 27 | 28 | 29 | 提醒谁看 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /firendsCircle/pages/edit/edit.wxss: -------------------------------------------------------------------------------- 1 | /* pages/edit/edit.wxss */ 2 | @import '../../lib/iconfont/iconfont.wxss'; 3 | .edit-header { 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | padding: 0 30rpx; 8 | height: 30pt; 9 | font-size: 11pt; 10 | } 11 | .header-delive { 12 | color: #09BB07; 13 | } 14 | .edit-main, 15 | .edit-footer { 16 | padding: 60rpx 60rpx; 17 | } 18 | .edit-text { 19 | /* min-height: 100rpx; */ 20 | height: 180rpx; 21 | overflow-y: scroll; 22 | font-size: 13pt; 23 | line-height: 20pt; 24 | color: #353535 25 | } 26 | .edit-img { 27 | display: flex; 28 | flex-wrap: wrap; 29 | justify-content: flex-start; 30 | align-content: space-between; 31 | } 32 | .edit-img image { 33 | width: 200rpx; 34 | height: 200rpx; 35 | margin: 0 10rpx 10rpx 0; 36 | } 37 | .icon-plus { 38 | width: 200rpx; 39 | height: 200rpx; 40 | background-color: rgba(87,107,149,0.1); 41 | font-size: 40pt; 42 | color: #888; 43 | line-height: 200rpx; 44 | text-align: center; 45 | } 46 | .footer-row { 47 | display: flex; 48 | justify-content: space-between; 49 | align-items: center; 50 | height: 100rpx; 51 | font-size: 13pt; 52 | border-top: 1rpx solid rgba(87,107,149,0.1); 53 | } 54 | .footer-row>text:nth-child(2){ 55 | flex-grow: 1; 56 | text-indent: 0.5rem; 57 | } 58 | .icon-zuobiaonormal, 59 | .icon-touxiang, 60 | .icon-at, 61 | .icon-arrow-right { 62 | font-size: 16pt; 63 | } 64 | .iconfont { 65 | color: #888; 66 | } 67 | .icon-qqkongjian, 68 | .icon-qq { 69 | font-size: 18pt; 70 | } 71 | .mask { 72 | position: absolute; 73 | top: 0; 74 | left: 0; 75 | width: 100vw; 76 | height: 100vh; 77 | background-color: rgba(136,136,136,0.3); 78 | } 79 | .choose { 80 | position: absolute; 81 | bottom: 0; 82 | left: 0; 83 | width: 100%; 84 | } 85 | .chooseBar { 86 | width: 100%; 87 | height: 120rpx; 88 | line-height: 120rpx; 89 | text-align: center; 90 | font-size: 16pt; 91 | border-bottom: 1rpx solid rgba(87,107,149,0.1); 92 | background-color: white; 93 | } 94 | .mask-header { 95 | width: 100%; 96 | height: calc(100% - 360rpx); 97 | } -------------------------------------------------------------------------------- /firendsCircle/pages/firendsCirle/firendsCircle.js: -------------------------------------------------------------------------------- 1 | // pages/firendsCirle/firendsCircle.js 2 | const app = getApp() //获取小程序实例 3 | function getAllData(self){ 4 | wx.request({ 5 | url: app.globalData.baseUrl + "api", 6 | method: "GET", 7 | success(res) { 8 | self.setData({ 9 | deliverData: res.data.result 10 | }) 11 | } 12 | }) 13 | } 14 | Page({ 15 | 16 | /** 17 | * 页面的初始数据 18 | */ 19 | data: { 20 | userInfo: {}, 21 | hasUserInfo: false, 22 | canIUse: wx.canIUse('button.open-type.getUserInfo'), 23 | deliverData: {}, 24 | showZanAndPinglunNum: null, 25 | isShowOrHideComtent: false, 26 | allOrPart: "全文" 27 | }, 28 | // 点击头部相册图标,打开发朋友圈编辑页面 29 | showEditPage() { 30 | wx.navigateTo({ 31 | url: '../edit/edit' 32 | }) 33 | }, 34 | //朋友圈正文内容显示或收起,逻辑是通过style动态设置max-height样式 35 | ShowOrHideComtent(){ 36 | if (this.data.allOrPart === "全文"){ 37 | this.setData({ 38 | isShowOrHideComtent: true, 39 | allOrPart: "收起" 40 | }) 41 | } else if (this.data.allOrPart === "收起"){ 42 | this.setData({ 43 | isShowOrHideComtent: false, 44 | allOrPart: "全文" 45 | }) 46 | } 47 | }, 48 | //点击朋友圈图片,弹出框预览大图 49 | showImg(e){ 50 | let outidx = e.currentTarget.dataset.outidx; 51 | let imgidx = e.target.dataset.imgidx; 52 | let imgArr = this.data.deliverData[outidx].imgArr; 53 | wx.previewImage({ 54 | current: imgArr[imgidx], // 当前显示图片的http链接 55 | urls: imgArr // 需要预览的图片http链接列表 56 | }) 57 | }, 58 | //点击评论图标,显示点赞和评论按钮 59 | showZanAndPinglun(e){ 60 | this.setData({ 61 | showZanAndPinglunNum: e.currentTarget.dataset.idx 62 | }) 63 | }, 64 | //点选和评论的隐藏通过事件委托到全页面(暂时只实现当条朋友所在区域,全页面和滚动时也隐藏在考虑实现) 65 | hideZanAndPinglun(){ 66 | this.setData({ 67 | showZanAndPinglunNum: null 68 | }) 69 | }, 70 | //点赞 71 | dianzan(e){ 72 | this.setData({ showZanAndPinglunNum:null}) 73 | let idx = e.currentTarget.dataset.idx; 74 | let nickName = app.globalData.userInfo.nickName; 75 | wx.request({ 76 | url: app.globalData.baseUrl + "zan", 77 | method: "get", 78 | data: { 79 | idx, 80 | nickName 81 | } 82 | }); 83 | getAllData(this); 84 | }, 85 | /** 86 | * 生命周期函数--监听页面加载 87 | */ 88 | onLoad: function (options) { 89 | if (app.globalData.userInfo) { //全局数据用户信息是否存在 90 | //全局已获取用户信息，则用获取全局数据（主要是用户昵称和头像） 91 | this.setData({ 92 | userInfo: app.globalData.userInfo, 93 | hasUserInfo: true 94 | }) 95 | } else if (this.data.canIUse) { //否则判断是否可以命名使用用户信息 96 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 97 | // 所以此处加入 callback 以防止这种情况 98 | app.userInfoReadyCallback = res => { 99 | this.setData({ 100 | userInfo: res.userInfo, 101 | hasUserInfo: true 102 | }) 103 | } 104 | } else { 105 | // 在没有 open-type=getUserInfo 版本的兼容处理，在之前版本中是默认获取用户头像和昵称的，所以上面canIUse=false时自动获取。 106 | wx.getUserInfo({ 107 | success: res => { 108 | app.globalData.userInfo = res.userInfo 109 | this.setData({ 110 | userInfo: res.userInfo, 111 | hasUserInfo: true 112 | }) 113 | } 114 | }) 115 | }; 116 | //如果朋友圈页面显示，则向服务器发送请求所有数据。 117 | // if (this.data.hasUserInfo && this.data.canIUse){ 118 | // console.log(1) 119 | // getAllData(this); 120 | // } 121 | }, 122 | //首次使用点击按钮获取用户头像和昵称授权 123 | tapBtnToGetUserInfo: function (e) { 124 | app.globalData.userInfo = e.detail.userInfo 125 | this.setData({ 126 | userInfo: e.detail.userInfo, 127 | hasUserInfo: true 128 | }) 129 | }, 130 | 131 | /** 132 | * 生命周期函数--监听页面初次渲染完成 133 | */ 134 | onReady: function () { 135 | 136 | }, 137 | 138 | /** 139 | * 生命周期函数--监听页面显示 140 | */ 141 | onShow: function () { 142 | getAllData(this); 143 | }, 144 | 145 | /** 146 | * 生命周期函数--监听页面隐藏 147 | */ 148 | onHide: function () { 149 | 150 | }, 151 | 152 | /** 153 | * 生命周期函数--监听页面卸载 154 | */ 155 | onUnload: function () { 156 | 157 | }, 158 | 159 | /** 160 | * 页面相关事件处理函数--监听用户下拉动作 161 | */ 162 | onPullDownRefresh: function () { //下拉刷新数据 163 | // getAllData(); 164 | }, 165 | 166 | /** 167 | * 页面上拉触底事件的处理函数 168 | */ 169 | onReachBottom: function () { 170 | 171 | }, 172 | 173 | /** 174 | * 用户点击右上角分享 175 | */ 176 | onShareAppMessage: function () { 177 | 178 | } 179 | }) -------------------------------------------------------------------------------- /firendsCircle/pages/firendsCirle/firendsCircle.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /firendsCircle/pages/firendsCirle/firendsCircle.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 发现 5 | 朋友圈 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | {{item.nickName}} 14 | 15 | 16 | {{item.textareaTxt}} 17 | 18 | {{allOrPart}} 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | {{item.location}} 28 | 29 | 30 | {{item.time}} 31 | 32 | 33 | 赞 34 | 评论 35 | 36 | 37 | 38 | 39 | 40 | 44 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /firendsCircle/pages/firendsCirle/firendsCircle.wxss: -------------------------------------------------------------------------------- 1 | /* pages/firendsCirle/firendsCircle.wxss */ 2 | @import '../../lib/iconfont/iconfont.wxss'; 3 | .header { 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | padding: 0 30rpx; 8 | /* background-color: rgba(87,107,149,0.1); */ 9 | height: 30pt; 10 | } 11 | .header > text:nth-child(2){ 12 | font-size: 14pt; 13 | font-weight: bold; 14 | } 15 | button { 16 | margin: 100rpx 50rpx; 17 | } 18 | .single { 19 | display: flex; 20 | justify-content: flex-start; 21 | align-content: flex-start; 22 | padding: 40rpx 30rpx; 23 | border-bottom: 1rpx solid rgba(87,107,149,0.1); 24 | } 25 | .avatar { 26 | width: 100rpx; 27 | height: 100rpx; 28 | margin-right: 30rpx; 29 | background-color: blue; 30 | } 31 | .main { 32 | flex-grow: 1; 33 | width: calc(100% - 180rpx); 34 | } 35 | .nickname { 36 | font-size: 13pt; 37 | font-weight: bold; 38 | color: #576b95; 39 | line-height: 1.5rem; 40 | } 41 | .main-comtent { 42 | font-size: 13pt; 43 | line-height: 20pt; 44 | overflow: hidden; 45 | } 46 | .comtent-showOrHide { 47 | font-size: 13pt; 48 | color: #576b95; 49 | } 50 | .imgArea { 51 | display: flex; 52 | flex-wrap: wrap; 53 | padding-right: 30rpx; 54 | } 55 | .imgArea image { 56 | width: 160rpx; 57 | height: 160rpx; 58 | margin: 0 10rpx 10rpx 0; 59 | } 60 | .location { 61 | font-size: 8pt; 62 | line-height: 16pt; 63 | color: #576b95; 64 | } 65 | .timeArea { 66 | font-size: 8pt; 67 | line-height: 20pt; 68 | color: #888; 69 | position: relative; 70 | /* display: flex; 71 | justify-content: space-between; */ 72 | } 73 | .timeArea-right { 74 | float: right; 75 | } 76 | .timeArea .icon-pinglun1 { 77 | font-size: 16pt; 78 | color: #576b95; 79 | } 80 | .zan-pinglun { 81 | position: absolute; 82 | bottom: 0; 83 | right: 60rpx; 84 | display: block; 85 | background-color: #4C5154; 86 | height: 20pt; 87 | border-radius: 10rpx; 88 | font-size: 13pt; 89 | color: white; 90 | line-height: 20pt; 91 | text-align: center; 92 | padding: 20rpx 0; 93 | } 94 | .zan-pinglun > .iconfont { 95 | display: inline-block; 96 | width: 60pt; 97 | } 98 | .zan-pinglun > .icon-xin { 99 | border-right: 1rpx solid #353535; 100 | } 101 | .commentArea { 102 | font-size: 11pt; 103 | line-height: 20pt; 104 | background-color: rgba(87,107,149,0.1); 105 | position: relative; 106 | } 107 | /* .commentArea:before { 108 | content: ""; 109 | display: block; 110 | border: 5rpx solid transparent; 111 | border-bottom-color: rgba(87,107,149,0.1); 112 | position: absolute; 113 | top: 0; 114 | left: 0; 115 | } */ 116 | .like { 117 | color: #576b95; 118 | font-weight: bold; 119 | border-bottom: 1rpx solid rgba(87,107,149,0.2); 120 | padding: 0 20rpx; 121 | 122 | } 123 | .like .icon-xin { 124 | font-size: 10pt; 125 | margin-right: 10rpx; 126 | } 127 | .comment-nickname { 128 | padding: 0 20rpx; 129 | color: #576b95; 130 | font-weight: bold; 131 | } -------------------------------------------------------------------------------- /firendsCircle/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": false, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true 12 | }, 13 | "compileType": "miniprogram", 14 | "libVersion": "2.3.1", 15 | "appid": "wx069f08dc04f0dcb2", 16 | "projectname": "firendsCircle", 17 | "debugOptions": { 18 | "hidedInDevtools": [] 19 | }, 20 | "isGameTourist": false, 21 | "condition": { 22 | "search": { 23 | "current": -1, 24 | "list": [] 25 | }, 26 | "conversation": { 27 | "current": -1, 28 | "list": [] 29 | }, 30 | "game": { 31 | "currentL": -1, 32 | "list": [] 33 | }, 34 | "miniprogram": { 35 | "current": -1, 36 | "list": [] 37 | } 38 | } 39 | } --------------------------------------------------------------------------------