├── README.md ├── cardSlideAround ├── GIF.gif ├── README.md ├── app.js ├── app.json ├── app.wxss ├── pages │ └── slideCard │ │ ├── slideCard.js │ │ ├── slideCard.json │ │ ├── slideCard.wxml │ │ └── slideCard.wxss └── project.config.json ├── dailyNewsScroll ├── README.md ├── gif │ ├── 1.gif │ ├── 2.gif │ └── 3.gif ├── scroll-view │ ├── app.js │ ├── app.json │ ├── app.wxss │ ├── pages │ │ └── index │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.wxml │ │ │ └── index.wxss │ └── project.config.json └── swiper │ ├── app.js │ ├── app.json │ ├── app.wxss │ ├── pages │ └── index │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ └── project.config.json ├── ele-mock ├── .babelrc ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── logo.png │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── index.html ├── outlook.png ├── package-lock.json ├── package.json ├── src │ ├── App.vue │ ├── api │ │ ├── api.js │ │ └── index.js │ ├── assets │ │ ├── admin.jpg │ │ └── logo.png │ ├── components │ │ └── navItem.vue │ ├── main.js │ ├── mock │ │ └── mock.js │ ├── router │ │ └── index.js │ ├── utils │ │ ├── dateFormat.js │ │ ├── permission.js │ │ └── validate.js │ ├── views │ │ ├── home.vue │ │ ├── login.vue │ │ └── nav1 │ │ │ ├── form.vue │ │ │ └── table.vue │ └── vuex │ │ ├── actions.js │ │ ├── getters.js │ │ ├── index.js │ │ ├── mutation-types.js │ │ ├── mutations.js │ │ └── state.js └── static │ ├── .gitkeep │ └── normalize.css ├── leftMenu ├── GIF.gif ├── README.md ├── material-component │ ├── app.js │ ├── app.json │ ├── app.wxss │ ├── components │ │ └── menu │ │ │ ├── menu.js │ │ │ ├── menu.json │ │ │ ├── menu.wxml │ │ │ └── menu.wxss │ ├── imgs │ │ ├── left.png │ │ ├── more.png │ │ └── top.jpg │ ├── pages │ │ ├── index │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ └── logs │ │ │ ├── logs.js │ │ │ ├── logs.json │ │ │ ├── logs.wxml │ │ │ └── logs.wxss │ └── utils │ │ └── util.js ├── material-css3 │ ├── app.js │ ├── app.json │ ├── app.wxss │ ├── imgs │ │ ├── left.png │ │ ├── more.png │ │ └── top.jpg │ ├── pages │ │ ├── index │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ └── logs │ │ │ ├── logs.js │ │ │ ├── logs.json │ │ │ ├── logs.wxml │ │ │ └── logs.wxss │ └── utils │ │ └── util.js └── material │ ├── app.js │ ├── app.json │ ├── app.wxss │ ├── imgs │ ├── left.png │ ├── more.png │ └── top.jpg │ ├── pages │ ├── index │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ └── logs │ │ ├── logs.js │ │ ├── logs.json │ │ ├── logs.wxml │ │ └── logs.wxss │ └── utils │ └── util.js ├── sellFood-vue ├── README.md └── sellfood │ ├── .babelrc │ ├── .editorconfig │ ├── .gitignore │ ├── .postcssrc.js │ ├── README.md │ ├── build │ ├── build.js │ ├── check-versions.js │ ├── logo.png │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js │ ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js │ ├── data.json │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── App.vue │ ├── common │ │ ├── fonts │ │ │ ├── sell-icon.eot │ │ │ ├── sell-icon.svg │ │ │ ├── sell-icon.ttf │ │ │ └── sell-icon.woff │ │ ├── js │ │ │ ├── date.js │ │ │ ├── store.js │ │ │ └── util.js │ │ └── stylus │ │ │ ├── icon.styl │ │ │ └── style.css │ ├── components │ │ ├── cartcontrol │ │ │ └── cartcontrol.vue │ │ ├── food │ │ │ └── food.vue │ │ ├── goods │ │ │ ├── decrease_1@2x.png │ │ │ ├── discount_1@2x.png │ │ │ ├── goods.vue │ │ │ ├── guarantee_1@2x.png │ │ │ ├── invoice_1@2x.png │ │ │ └── special_1@2x.png │ │ ├── header │ │ │ ├── brand@2x.png │ │ │ ├── bulletin@2x.png │ │ │ ├── decrease_1@2x.png │ │ │ ├── discount_1@2x.png │ │ │ ├── guarantee_1@2x.png │ │ │ ├── header.vue │ │ │ ├── invoice_1@2x.png │ │ │ └── special_1@2x.png │ │ ├── ratings │ │ │ └── ratings.vue │ │ ├── ratingselect │ │ │ └── ratingselect.vue │ │ ├── seller │ │ │ ├── decrease_4@2x.png │ │ │ ├── discount_4@2x.png │ │ │ ├── guarantee_4@2x.png │ │ │ ├── invoice_4@2x.png │ │ │ ├── seller.vue │ │ │ └── special_4@2x.png │ │ ├── shopcart │ │ │ └── shopcart.vue │ │ ├── split │ │ │ └── split.vue │ │ └── star │ │ │ ├── star.vue │ │ │ ├── star24_half@2x.png │ │ │ ├── star24_off@2x.png │ │ │ ├── star24_on@2x.png │ │ │ ├── star36_half@2x.png │ │ │ ├── star36_off@2x.png │ │ │ ├── star36_on@2x.png │ │ │ ├── star48_half@2x.png │ │ │ ├── star48_off@2x.png │ │ │ └── star48_on@2x.png │ ├── main.js │ └── router │ │ └── index.js │ └── static │ ├── .gitkeep │ └── css │ └── reset.css ├── slideDelete ├── GIF.gif ├── README.md ├── slideDeleteScroll │ ├── app.js │ ├── app.json │ ├── app.wxss │ ├── pages │ │ └── index │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.wxml │ │ │ └── index.wxss │ └── project.config.json └── slideDeleteView │ ├── app.js │ ├── app.json │ ├── app.wxss │ ├── pages │ └── index │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ └── project.config.json └── starbook ├── README.md ├── book.png ├── server ├── app.js ├── lib │ └── mongoose.js ├── models │ ├── book.server.js │ └── user.server.js ├── package.json └── routes │ ├── addFeel.js │ ├── getbook.js │ ├── index.js │ ├── mybook.js │ ├── nearbook.js │ ├── onebookroad.js │ ├── register.js │ └── sharebook.js └── wxApp ├── app.js ├── app.json ├── app.wxss ├── data ├── bookStore.js ├── feel.js ├── myself.js └── nearBook.js ├── images ├── bookStore │ ├── book1.jpg │ ├── book2.jpg │ ├── book3.jpg │ ├── book4.jpg │ ├── book5.jpg │ ├── book6.jpg │ ├── book7.jpg │ ├── book8.jpg │ ├── sort1.png │ ├── sort2.png │ ├── sort3.png │ ├── sort4.png │ ├── swiper1.jpg │ ├── swiper2.jpg │ └── swiper3.jpg ├── more │ └── back.jpg ├── myself │ ├── aboutUs.png │ ├── book.png │ ├── bookTime.png │ ├── chat.png │ ├── myFeel.png │ └── myTip.png ├── nearBook │ ├── avatar1.png │ ├── avatar2.png │ ├── avatar3.png │ └── avatar4.png └── tabBar │ ├── bookStore.png │ ├── bookStoreSelect.png │ ├── feel.png │ ├── feelSelect.png │ ├── more.png │ ├── moreSelect.png │ ├── myself.png │ ├── myselfSelect.png │ ├── nearBook.png │ └── nearBookSelect.png ├── pages ├── bookStore │ ├── bookItem │ │ ├── bookItem.js │ │ ├── bookItem.json │ │ ├── bookItem.wxml │ │ └── bookItem.wxss │ ├── bookMore │ │ ├── bookMore.js │ │ ├── bookMore.json │ │ ├── bookMore.wxml │ │ └── bookMore.wxss │ ├── bookSortMore │ │ ├── bookSortMore.js │ │ ├── bookSortMore.json │ │ ├── bookSortMore.wxml │ │ └── bookSortMore.wxss │ ├── bookStore.js │ ├── bookStore.json │ ├── bookStore.wxml │ └── bookStore.wxss ├── feel │ ├── feel.js │ ├── feel.json │ ├── feel.wxml │ └── feel.wxss ├── login │ ├── login.js │ ├── login.json │ ├── login.wxml │ ├── login.wxss │ └── loginConform │ │ ├── loginConform.js │ │ ├── loginConform.json │ │ ├── loginConform.wxml │ │ └── loginConform.wxss ├── more │ ├── getBook │ │ ├── getBook.js │ │ ├── getBook.json │ │ ├── getBook.wxml │ │ └── getBook.wxss │ ├── more.js │ ├── more.json │ ├── more.wxml │ ├── more.wxss │ ├── shareBook │ │ ├── shareBook.js │ │ ├── shareBook.json │ │ ├── shareBook.wxml │ │ └── shareBook.wxss │ └── shareFeel │ │ ├── shareFeel.js │ │ ├── shareFeel.json │ │ ├── shareFeel.wxml │ │ └── shareFeel.wxss ├── myself │ ├── aboutUs │ │ ├── aboutUs.js │ │ ├── aboutUs.json │ │ ├── aboutUs.wxml │ │ └── aboutUs.wxss │ ├── book │ │ ├── book.js │ │ ├── book.json │ │ ├── book.wxml │ │ └── book.wxss │ ├── bookTime │ │ ├── bookTime.js │ │ ├── bookTime.json │ │ ├── bookTime.wxml │ │ └── bookTime.wxss │ ├── myFeel │ │ ├── myFeel.js │ │ ├── myFeel.json │ │ ├── myFeel.wxml │ │ └── myFeel.wxss │ ├── myTip │ │ ├── myTip.js │ │ ├── myTip.json │ │ ├── myTip.wxml │ │ └── myTip.wxss │ ├── myself.js │ ├── myself.json │ ├── myself.wxml │ └── myself.wxss └── nearBook │ ├── nearBook.js │ ├── nearBook.json │ ├── nearBook.wxml │ ├── nearBook.wxss │ └── nearBookList │ ├── nearBookList.js │ ├── nearBookList.json │ ├── nearBookList.wxml │ └── nearBookList.wxss └── utils └── util.js /README.md: -------------------------------------------------------------------------------- 1 | # vue前端和微信小程序项目 2 | ## 点击如下链接进入具体的项目README 3 | ## 微信小程序部分 4 | - [侧边抽屉导航](https://github.com/seven-share/vueAndMiniApp/tree/master/leftMenu) 5 | - [卡片滑动切换](https://github.com/seven-share/vueAndMiniApp/tree/master/cardSlideAround) 6 | - [仿今日头条滚动](https://github.com/seven-share/vueAndMiniApp/tree/master/dailyNewsScroll) 7 | - [侧滑删除](https://github.com/seven-share/vueAndMiniApp/tree/master/slideDelete) 8 | - [图书分享小程序](https://github.com/seven-share/vueAndMiniApp/tree/master/starbook) 9 | ## vue部分 10 | - [仿饿了么](https://github.com/seven-share/vueAndMiniApp/tree/master/sellFood-vue) 11 | - [elementUI后台项目](https://github.com/seven-share/vueAndMiniApp/tree/master/ele-mock) 12 | -------------------------------------------------------------------------------- /cardSlideAround/GIF.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/cardSlideAround/GIF.gif -------------------------------------------------------------------------------- /cardSlideAround/README.md: -------------------------------------------------------------------------------- 1 | # 卡片滑动切换特效 2 | ## 可以改造为探探等卡片切换效果 3 | - 效果图如下 4 | ![](GIF.gif) 5 | ## 效果简述 6 | - 上下左右均可移动随点击移动 7 | - 在上下左右一定的范围内移动后会返回原来的位置，不会切换 8 | - 只有大于一定范围才会产生切换，同时切换效果随移动方向不同，产生不同的切换效果 9 | ## 代码解析 10 | - wxml 11 | - wxml里有两个卡片，相互重叠 12 | - 卡片绑定touch的开始，移动和结束方法，获取点击的位置 13 | - 绑定动画，方便之后的动画操作 14 | - js 15 | - 在touch的开始方法里，绑定点击的初始位置 16 | - 设置卡片绝对定位，在touch移动的方法里，绑定top和left值，实现随点击点移动而移动 17 | - 在点击的结束方法里获取最后的点击位置，和初始位置做对比，如果x，y移动的大小在一定的范围内，则恢复绝对定位的初始值 18 | - 如果大于x，y设定的范围则实现切换效果 19 | - 特效 20 | - 微信的js动画特效是根据css3封装而来，我当时尝试用css3实现，但结合一些动画出发要求等原因，使用微信的js东特特效还是相对方便 21 | - 绑定了z-index，基本实现两张卡片的相互切换 22 | - 模仿微信小程序文档写了动画的效果，注意的就是translate移动之后，一定要再移动回0，这样才能在之后回到卡片初始位置 23 | - 卡片绑定了透明度的变量，根据移动所占百分比，来显示底层的透明度 24 | - movebox原本分1,2。目前已经合并为一个函数，其他1,2的控制动效控制函数可以适当合并 25 | ## 后续 26 | - 这个源码，可以在卡片内插入任意内容，相互切换 27 | - 我自己使用的情况是去除了移动，直接切换，1、2卡片绑定的是同一个变量，由于不能移动，所以看不到下面的内容，一旦成功切换卡片，同时绑定的变量也会切换，达到了内容随卡片切换的效果 28 | - 如果不去除移动的话，就不能1、2卡片绑定同一个变量，因为移动上面卡片会看到下面的卡片 29 | - 解决方法1（个人思考，如果有更好的欢迎交流） 30 | - 绑定两个变量，切换卡片的同时，更新该卡片绑定的数据 31 | - 解决方法2（个人思考，如果有更好的欢迎交流） 32 | - 1、2卡片绑定一个数组变量，同时1、2绑定的固定的数组0位和1位数据 33 | - 一旦切换，则分别使用pop或shift，push或unshift进行数组变量的数据更新 34 | - 这样保证了数组数据切换时，卡片数据的相对固定 -------------------------------------------------------------------------------- /cardSlideAround/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 | globalData: { 10 | userInfo: null 11 | } 12 | }) -------------------------------------------------------------------------------- /cardSlideAround/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/slideCard/slideCard" 4 | ], 5 | "window": { 6 | "backgroundTextStyle": "light", 7 | "navigationBarBackgroundColor": "#fff", 8 | "navigationBarTitleText": "WeChat", 9 | "navigationBarTextStyle": "black" 10 | }, 11 | "window": { 12 | "navigationBarBackgroundColor": "#ffffff", 13 | "navigationBarTextStyle": "black", 14 | "navigationBarTitleText": "卡片" 15 | 16 | } 17 | } -------------------------------------------------------------------------------- /cardSlideAround/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | page{ 3 | background-color: rgb(231, 240, 255); 4 | } 5 | .container { 6 | height: 100%; 7 | width: 100%; 8 | /* box-sizing: border-box; */ 9 | } 10 | -------------------------------------------------------------------------------- /cardSlideAround/pages/slideCard/slideCard.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /cardSlideAround/pages/slideCard/slideCard.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 1111111 5 | 6 | 7 | 2222222 8 | 9 | -------------------------------------------------------------------------------- /cardSlideAround/pages/slideCard/slideCard.wxss: -------------------------------------------------------------------------------- 1 | /* pages/slideCard/slideCard.wxss */ 2 | .card { 3 | width: 664rpx; 4 | height: 950rpx; 5 | box-sizing: border-box; 6 | background-color: white; 7 | padding: 0rpx 40rpx; 8 | text-align: center; 9 | box-shadow: 2px 2px 8px #aaa; 10 | } 11 | .card-content{ 12 | height: 600rpx; 13 | overflow: hidden; 14 | overflow-y: scroll; 15 | } 16 | .card .word { 17 | font-size: 35px; 18 | font-weight: bolder; 19 | margin: 80rpx 0 40rpx; 20 | } -------------------------------------------------------------------------------- /cardSlideAround/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true 12 | }, 13 | "compileType": "miniprogram", 14 | "libVersion": "2.0.8", 15 | "appid": "wx1ed9ac6f29a707c1", 16 | "projectname": "tt", 17 | "isGameTourist": false, 18 | "condition": { 19 | "search": { 20 | "current": -1, 21 | "list": [] 22 | }, 23 | "conversation": { 24 | "current": -1, 25 | "list": [] 26 | }, 27 | "plugin": { 28 | "current": -1, 29 | "list": [] 30 | }, 31 | "game": { 32 | "currentL": -1, 33 | "list": [] 34 | }, 35 | "miniprogram": { 36 | "current": 2, 37 | "list": [ 38 | { 39 | "id": -1, 40 | "name": "wordsCategory", 41 | "pathName": "pages/wordsCategory/wordsCategory", 42 | "query": "" 43 | }, 44 | { 45 | "id": -1, 46 | "name": "myPage", 47 | "pathName": "pages/my/my", 48 | "query": "" 49 | }, 50 | { 51 | "id": 2, 52 | "name": "slideCard", 53 | "pathName": "pages/slideCard/slideCard", 54 | "query": "type=\"continue\"&logo=\"'cet4\"" 55 | }, 56 | { 57 | "id": -1, 58 | "name": "contactUs", 59 | "pathName": "pages/my/contactUs/contactUs", 60 | "query": "" 61 | } 62 | ] 63 | } 64 | } 65 | } -------------------------------------------------------------------------------- /dailyNewsScroll/README.md: -------------------------------------------------------------------------------- 1 | # 仿今日头条的滚动栏的微信小程序 2 | ### 我搜索了网上源码，发现有两种实现方式，尽可能的减少不必要的变量，仿写了一下 3 | ### 先上个效果图，两种方式实现的效果其实是一样的 4 | ![](gif/1.gif) 5 | ### 核心数据 6 | - 核心的驱动数据是currentTab，上下两部分都根据这个数据进行切换 7 | ### 顶部切换设置 8 | - 顶部的滚动，我使用的是flex布局，原本flex后view长度是100%和屏幕一样宽，所以使用width:fit-content,根据内容撑开view 9 | - 顶部左右滚动过程中，如果栏目标题不在屏幕内，则移动一格使其进入屏幕，原本的判断方法是通过判断栏目是第几个进行左右移动，这样的可以实现效果，但有个小bug，当不在屏幕内的栏目标题，滑动下面内容部分使其进入屏幕之前，手动滑动顶部的栏目，使其出现在屏幕内，此时再滑动下面内容部分，会有一个跳动，使栏目标题在固定的右边第二个 10 | ![](gif/2.gif) 11 | - 因为其方法是判断该栏目是第几个，如果是超过屏幕的栏目，则移动固定的距离，所以会有跳动，使其在固定位置 12 | - ### 小改进 13 | - 获取顶部sroll-view下面的栏目标题变红的dom位置，如果小于0，则右移，如果超过屏幕宽度，则左移，此时手动滑动顶部栏目，再滑动下面部分，不会出现顶部栏目跳动的bug 14 | ![](gif/3.gif) 15 | - 小细节，是在修改标题栏变红后，获取该dom的位置 16 | 17 | ### 内容部分 18 | ### 1. swiper方式 19 | - 通过currentTab和顶部栏目进行联动即可 20 | ### 2. scroll-view方式 21 | - 通过手指滑动事件，获取到坐标，进行前后对比，得出左滑还是右滑，修改currentTab进行联动即可 22 | ### 思考 23 | - 如何实现懒加载？ 24 | - 目前的思路是当切换的时候，获取到currentTab，此时访问后端获取数据，再进行绑定显示 25 | ### 仿写思路教程 26 | - 首先将wxml和wxss复制过去，实现上下均可滚动效果 27 | - 之后进行顶部栏目滚动的函数的绑定 28 | - 进一步设计下面内容部分滚动 29 | - 上下的滚动都由currentTab一个数据驱动，所以实现了联动 30 | ### 参考教程，表示感谢 31 | [参考教程1](https://blog.csdn.net/qq_31383345/article/details/52900835) 32 | [参考教程2](https://www.jianshu.com/p/fe5756b541d8) 33 | -------------------------------------------------------------------------------- /dailyNewsScroll/gif/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/dailyNewsScroll/gif/1.gif -------------------------------------------------------------------------------- /dailyNewsScroll/gif/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/dailyNewsScroll/gif/2.gif -------------------------------------------------------------------------------- /dailyNewsScroll/gif/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/dailyNewsScroll/gif/3.gif -------------------------------------------------------------------------------- /dailyNewsScroll/scroll-view/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 | } 39 | }) -------------------------------------------------------------------------------- /dailyNewsScroll/scroll-view/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index" 4 | ], 5 | "window": { 6 | "backgroundTextStyle": "light", 7 | "navigationBarBackgroundColor": "#fff", 8 | "navigationBarTitleText": "WeChat", 9 | "navigationBarTextStyle": "black" 10 | } 11 | } -------------------------------------------------------------------------------- /dailyNewsScroll/scroll-view/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | page { 3 | height: 100%; 4 | } 5 | .container{ 6 | width: 100%; 7 | height: 100%; 8 | } -------------------------------------------------------------------------------- /dailyNewsScroll/scroll-view/pages/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /dailyNewsScroll/scroll-view/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{item.text}} 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | {{item.text}} 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /dailyNewsScroll/scroll-view/pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | .navbar{ 2 | border-bottom: 2rpx solid #777777; 3 | line-height: 80rpx; 4 | } 5 | .navbar .navbar-container{ 6 | display: flex; 7 | width: fit-content; 8 | } 9 | .navbar .navbar-container view{ 10 | padding: 0 10rpx; 11 | width: 100rpx; 12 | text-align: center; 13 | } 14 | .navbar .navbar-container .active{ 15 | color: red; 16 | border-bottom: 2px red solid 17 | } 18 | .scroll{ 19 | height: 100% 20 | } 21 | .scroll .scroll-content{ 22 | display: flex; 23 | width: fit-content; 24 | } 25 | .scroll .scroll-content view{ 26 | width: 750rpx; 27 | height: 100%; 28 | text-align: center; 29 | } -------------------------------------------------------------------------------- /dailyNewsScroll/scroll-view/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "setting": { 4 | "urlCheck": true, 5 | "es6": true, 6 | "postcss": true, 7 | "minified": true, 8 | "newFeature": true 9 | }, 10 | "compileType": "miniprogram", 11 | "libVersion": "1.9.94", 12 | "appid": "wx1ed9ac6f29a707c1", 13 | "projectname": "try-scroll", 14 | "isGameTourist": false, 15 | "condition": { 16 | "search": { 17 | "current": -1, 18 | "list": [] 19 | }, 20 | "conversation": { 21 | "current": -1, 22 | "list": [] 23 | }, 24 | "game": { 25 | "currentL": -1, 26 | "list": [] 27 | }, 28 | "miniprogram": { 29 | "current": -1, 30 | "list": [] 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /dailyNewsScroll/swiper/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 | } 39 | }) -------------------------------------------------------------------------------- /dailyNewsScroll/swiper/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index" 4 | ], 5 | "window": { 6 | "backgroundTextStyle": "light", 7 | "navigationBarBackgroundColor": "#fff", 8 | "navigationBarTitleText": "WeChat", 9 | "navigationBarTextStyle": "black" 10 | } 11 | } -------------------------------------------------------------------------------- /dailyNewsScroll/swiper/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | page { 3 | height: 100%; 4 | } 5 | .container{ 6 | width: 100%; 7 | height: 100%; 8 | } -------------------------------------------------------------------------------- /dailyNewsScroll/swiper/pages/index/index.js: -------------------------------------------------------------------------------- 1 | // pages/index/index.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | navbarArray: [ 9 | { 10 | text: '推荐', 11 | tabActive: true 12 | }, 13 | { 14 | text: '热点', 15 | tabActive: false 16 | }, 17 | { 18 | text: '视频', 19 | tabActive: false 20 | }, 21 | { 22 | text: '图片', 23 | tabActive: false 24 | }, 25 | { 26 | text: '段子', 27 | tabActive: false 28 | }, 29 | { 30 | text: '社会', 31 | tabActive: false 32 | }, 33 | { 34 | text: '娱乐', 35 | tabActive: false 36 | }, 37 | { 38 | text: '科技', 39 | tabActive: false 40 | }, 41 | { 42 | text: '体育', 43 | tabActive: false 44 | } 45 | ], 46 | currentTab:0, 47 | leftDistance:0, 48 | screenWidth: 0, 49 | }, 50 | 51 | /** 52 | * 生命周期函数--监听页面加载 53 | */ 54 | onLoad: function (options) { 55 | var that=this 56 | wx.getSystemInfo({ 57 | success: function(res) { 58 | that.setData({screenWidth : res.windowWidth}) 59 | }, 60 | }) 61 | }, 62 | 63 | /** 64 | * 生命周期函数--监听页面初次渲染完成 65 | */ 66 | onReady: function () { 67 | 68 | }, 69 | switchText:function(event){ 70 | this.setData({ currentTab: event.currentTarget.dataset.index }); 71 | this.activeTab(this.data.currentTab) 72 | }, 73 | 74 | 75 | activeTab:function(index){ 76 | var navbarArrayData = this.data.navbarArray 77 | for (var i in navbarArrayData) { 78 | if (i == index) { 79 | navbarArrayData[i].tabActive = true; 80 | } else { 81 | navbarArrayData[i].tabActive = false 82 | } 83 | } 84 | 85 | this.setData({ 86 | navbarArray: navbarArrayData 87 | }) 88 | 89 | var that=this 90 | wx.createSelectorQuery().selectAll('.active').boundingClientRect(function (res) { 91 | var left=res[0].left 92 | if (left > that.data.screenWidth-60){ 93 | var leftDistanceData = that.data.leftDistance+60; 94 | that.setData({ 95 | leftDistance: leftDistanceData 96 | }) 97 | } 98 | if (left < 0){ 99 | var leftDistanceData = that.data.leftDistance - 60; 100 | that.setData({ 101 | leftDistance: leftDistanceData 102 | }) 103 | } 104 | 105 | }).exec() 106 | }, 107 | 108 | bindChange:function(event){ 109 | this.setData({ currentTab: event.detail.current}) 110 | this.activeTab(this.data.currentTab) 111 | } 112 | }) -------------------------------------------------------------------------------- /dailyNewsScroll/swiper/pages/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /dailyNewsScroll/swiper/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{item.text}} 6 | 7 | 8 | 9 | 10 | 11 | 12 | {{item.text}} 13 | 14 | 15 | -------------------------------------------------------------------------------- /dailyNewsScroll/swiper/pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | .navbar{ 2 | border-bottom: 2rpx solid #777777; 3 | line-height: 80rpx; 4 | } 5 | .navbar .navbar-container{ 6 | display: flex; 7 | width: fit-content; 8 | } 9 | .navbar .navbar-container view{ 10 | padding: 0 10rpx; 11 | width: 100rpx; 12 | text-align: center; 13 | } 14 | .navbar .navbar-container .active{ 15 | color: red; 16 | border-bottom: 2px red solid 17 | } 18 | swiper{ 19 | height: 100% 20 | } 21 | .swiper-content{ 22 | text-align: center; 23 | } -------------------------------------------------------------------------------- /dailyNewsScroll/swiper/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "setting": { 4 | "urlCheck": true, 5 | "es6": true, 6 | "postcss": true, 7 | "minified": true, 8 | "newFeature": true 9 | }, 10 | "compileType": "miniprogram", 11 | "libVersion": "1.9.94", 12 | "appid": "wx1ed9ac6f29a707c1", 13 | "projectname": "swiper-try", 14 | "isGameTourist": false, 15 | "condition": { 16 | "search": { 17 | "current": -1, 18 | "list": [] 19 | }, 20 | "conversation": { 21 | "current": -1, 22 | "list": [] 23 | }, 24 | "game": { 25 | "currentL": -1, 26 | "list": [] 27 | }, 28 | "miniprogram": { 29 | "current": -1, 30 | "list": [] 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /ele-mock/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /ele-mock/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /ele-mock/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /ele-mock/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /ele-mock/README.md: -------------------------------------------------------------------------------- 1 | # ele-mock 后台搭建小试 2 | ![](outlook.png) 3 | ### DEMO简介 4 | - 实现功能后台管理界面简单搭建 5 | - 登录登出功能，根据登录权限的不同，显示不同的内容 6 | - 实现了数据的增删改查 7 | - 目前使用的是静态路由，通过vue-router和权限达到不同权限，显示的内容不同，下一步希望改进为动态路由 8 | - 参考众多成熟的后台源码，目前仅仅是走出自己搭建后台的第一步，还有很多不太严谨的地方，我觉得可能对和我一样搭建后台的入门者可能会有帮助，先静态路由，然后过渡到动态路由 9 | - 使用：npm install 之后 npm run dev即可 10 | ### DEMO框架搭建 11 | - vue 12 | - element-ui 13 | - vue-router 14 | - vuex 15 | - mock.js 16 | ### DEMO注意点 17 | - 本项目的主要功能难点在于登录和权限 18 | - 个人建议登录的搭建过程 19 | - 首先使用vue-router把路由搭建好，把router.beforeEach的限制写一部分，达到没有登录和一定权限不能访问除login以外页面的效果 20 | - 写登录界面，封装axios，将请求回来的mock.js的模拟身份和权限储存在vuex和localstorage 21 | - 此时可以进一步封装axios，使其每次访问均携带人份token 22 | - 之后在vue.beforeEach中读取vuex中的身份和权限，判断是否可以访问该路由 23 | - 页面侧边栏渲染的时候，获取路由信息，根据身份和权限，筛选可显示的路由，此为页面级控制 24 | - 由于每次携带token访问后台，后台可以根据token判断是否有权限进行操作，此为按钮控制级别 25 | - 本demo的权限使用的scope，值为数字，用户的scope大于该路由所需scope，即可访问，和其他案例中路由所需判断用户身份过程基本一样 26 | 27 | - 动态路由的注意点 28 | - 之前尝试了动态路由，我执意把router.beforeEach放在router的index.js里，在动态添加路由的时候，不成功，发现会无限循环，其他的案例里好像都是放在main.js里，希望有人可以告诉我原因？ 29 | - mock.js 30 | - 我用之前很好奇如何达到mock.js是如何达到增删改查的，原来模拟数据在一次访问时会保存下来，将模拟数据作为数据库即可。刷新页面，模拟数据也会刷新 31 | - 后台优秀源码资料分享 32 | - [简单登录入门---个人十分喜欢](https://github.com/superman66/vue-axios-github) 33 | - [后台源码参考一](https://blog.csdn.net/harsima/article/details/77949448) 34 | - [后台源码参考二](https://segmentfault.com/a/1190000009506097) 35 | - [后台源码参考三](https://www.cnblogs.com/taylorchen/p/6083099.html) 36 | - [后台源码参考四](https://github.com/lin-xin/vue-manage-system) 37 | -------------------------------------------------------------------------------- /ele-mock/build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /ele-mock/build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /ele-mock/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/ele-mock/build/logo.png -------------------------------------------------------------------------------- /ele-mock/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /ele-mock/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | 12 | 13 | module.exports = { 14 | context: path.resolve(__dirname, '../'), 15 | entry: { 16 | app: './src/main.js' 17 | }, 18 | output: { 19 | path: config.build.assetsRoot, 20 | filename: '[name].js', 21 | publicPath: process.env.NODE_ENV === 'production' 22 | ? config.build.assetsPublicPath 23 | : config.dev.assetsPublicPath 24 | }, 25 | resolve: { 26 | extensions: ['.js', '.vue', '.json'], 27 | alias: { 28 | '@': resolve('src'), 29 | } 30 | }, 31 | module: { 32 | rules: [ 33 | { 34 | test: /\.vue$/, 35 | loader: 'vue-loader', 36 | options: vueLoaderConfig 37 | }, 38 | { 39 | test: /\.js$/, 40 | loader: 'babel-loader', 41 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] 42 | }, 43 | { 44 | test: /\.sass$/, 45 | loaders: ['style', 'css', 'sass'] 46 | }, 47 | { 48 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 49 | loader: 'url-loader', 50 | options: { 51 | limit: 10000, 52 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 53 | } 54 | }, 55 | { 56 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 57 | loader: 'url-loader', 58 | options: { 59 | limit: 10000, 60 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 61 | } 62 | }, 63 | { 64 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 65 | loader: 'url-loader', 66 | options: { 67 | limit: 10000, 68 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 69 | } 70 | } 71 | ] 72 | }, 73 | node: { 74 | // prevent webpack from injecting useless setImmediate polyfill because Vue 75 | // source contains it (although only uses it if it's native). 76 | setImmediate: false, 77 | // prevent webpack from injecting mocks to Node native modules 78 | // that does not make sense for the client 79 | dgram: 'empty', 80 | fs: 'empty', 81 | net: 'empty', 82 | tls: 'empty', 83 | child_process: 'empty' 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /ele-mock/config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /ele-mock/config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | 24 | /** 25 | * Source Maps 26 | */ 27 | 28 | // https://webpack.js.org/configuration/devtool/#development 29 | devtool: 'cheap-module-eval-source-map', 30 | 31 | // If you have problems debugging vue-files in devtools, 32 | // set this to false - it *may* help 33 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 34 | cacheBusting: true, 35 | 36 | cssSourceMap: true 37 | }, 38 | 39 | build: { 40 | // Template for index.html 41 | index: path.resolve(__dirname, '../dist/index.html'), 42 | 43 | // Paths 44 | assetsRoot: path.resolve(__dirname, '../dist'), 45 | assetsSubDirectory: 'static', 46 | assetsPublicPath: '/', 47 | 48 | /** 49 | * Source Maps 50 | */ 51 | 52 | productionSourceMap: true, 53 | // https://webpack.js.org/configuration/devtool/#production 54 | devtool: '#source-map', 55 | 56 | // Gzip off by default as many popular static hosts such as 57 | // Surge or Netlify already gzip all static assets for you. 58 | // Before setting to `true`, make sure to: 59 | // npm install --save-dev compression-webpack-plugin 60 | productionGzip: false, 61 | productionGzipExtensions: ['js', 'css'], 62 | 63 | // Run the build command with an extra argument to 64 | // View the bundle analyzer report after build finishes: 65 | // `npm run build --report` 66 | // Set to `true` or `false` to always turn it on or off 67 | bundleAnalyzerReport: process.env.npm_config_report 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /ele-mock/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /ele-mock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ele-mock 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /ele-mock/outlook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/ele-mock/outlook.png -------------------------------------------------------------------------------- /ele-mock/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ele-mock", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "seven-share <1933592511@qq.com>", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "axios": "^0.18.0", 14 | "element-ui": "^2.4.1", 15 | "vue": "^2.5.2", 16 | "vue-router": "^3.0.1", 17 | "vuex": "^3.0.1" 18 | }, 19 | "devDependencies": { 20 | "autoprefixer": "^7.1.2", 21 | "babel-core": "^6.22.1", 22 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 23 | "babel-loader": "^7.1.1", 24 | "babel-plugin-syntax-jsx": "^6.18.0", 25 | "babel-plugin-transform-runtime": "^6.22.0", 26 | "babel-plugin-transform-vue-jsx": "^3.5.0", 27 | "babel-preset-env": "^1.3.2", 28 | "babel-preset-stage-2": "^6.22.0", 29 | "chalk": "^2.0.1", 30 | "copy-webpack-plugin": "^4.0.1", 31 | "css-loader": "^0.28.0", 32 | "extract-text-webpack-plugin": "^3.0.0", 33 | "file-loader": "^1.1.4", 34 | "friendly-errors-webpack-plugin": "^1.6.1", 35 | "html-webpack-plugin": "^2.30.1", 36 | "mockjs": "^1.0.1-beta3", 37 | "node-notifier": "^5.1.2", 38 | "node-sass": "^4.9.0", 39 | "optimize-css-assets-webpack-plugin": "^3.2.0", 40 | "ora": "^1.2.0", 41 | "portfinder": "^1.0.13", 42 | "postcss-import": "^11.0.0", 43 | "postcss-loader": "^2.0.8", 44 | "postcss-url": "^7.2.1", 45 | "rimraf": "^2.6.0", 46 | "sass-loader": "^7.0.3", 47 | "semver": "^5.3.0", 48 | "shelljs": "^0.7.6", 49 | "uglifyjs-webpack-plugin": "^1.1.1", 50 | "url-loader": "^0.5.8", 51 | "vue-loader": "^13.3.0", 52 | "vue-style-loader": "^3.0.1", 53 | "vue-template-compiler": "^2.5.2", 54 | "webpack": "^3.6.0", 55 | "webpack-bundle-analyzer": "^2.9.0", 56 | "webpack-dev-server": "^2.9.1", 57 | "webpack-merge": "^4.1.0" 58 | }, 59 | "engines": { 60 | "node": ">= 6.0.0", 61 | "npm": ">= 3.0.0" 62 | }, 63 | "browserslist": [ 64 | "> 1%", 65 | "last 2 versions", 66 | "not ie <= 8" 67 | ] 68 | } 69 | -------------------------------------------------------------------------------- /ele-mock/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /ele-mock/src/api/api.js: -------------------------------------------------------------------------------- 1 | import axios from './index'; 2 | 3 | 4 | export const requestLogin=function(params){ 5 | return axios.post('/login',params) 6 | } 7 | // export const requestLogin = params => { return axios.post(`${base}/login`, params).then(res => res.data); }; 8 | 9 | export const getUserByPage=function(page){ 10 | return axios.post('/getUserByPage',page) 11 | } 12 | 13 | export const removeUser=function(uid){ 14 | return axios.post('/removeUser',uid) 15 | } 16 | export const editUser=function(user){ 17 | return axios.post('/editUser',user) 18 | } 19 | export const batchRemoveUser=function(ids){ 20 | return axios.post('/batchRemoveUser',ids) 21 | } 22 | export const addUser=function(user){ 23 | return axios.post('/addUser',user) 24 | } -------------------------------------------------------------------------------- /ele-mock/src/api/index.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import store from '@/vuex/index' 3 | 4 | axios.defaults.timeout = 5000; 5 | axios.defaults.baseURL = ''; 6 | 7 | 8 | axios.interceptors.request.use( 9 | config => { 10 | if (true) { 11 | config.headers.Authorization = `token ${store.getters.token}` 12 | } 13 | return config 14 | }, 15 | err => { 16 | return Promise.reject(err) 17 | }, 18 | ) 19 | export default axios -------------------------------------------------------------------------------- /ele-mock/src/assets/admin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/ele-mock/src/assets/admin.jpg -------------------------------------------------------------------------------- /ele-mock/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/ele-mock/src/assets/logo.png -------------------------------------------------------------------------------- /ele-mock/src/components/navItem.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 34 | -------------------------------------------------------------------------------- /ele-mock/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import router from './router' 4 | import '../static/normalize.css' /*引入公共样式*/ 5 | import ElementUI from 'element-ui'; 6 | import 'element-ui/lib/theme-chalk/index.css'; 7 | import store from './vuex/index.js'; 8 | 9 | 10 | Vue.config.productionTip = false 11 | Vue.use(ElementUI); 12 | 13 | import '@/mock/mock.js'; 14 | 15 | /* eslint-disable no-new */ 16 | new Vue({ 17 | el: '#app', 18 | store, 19 | router, 20 | render: h => h(App) 21 | }) 22 | -------------------------------------------------------------------------------- /ele-mock/src/mock/mock.js: -------------------------------------------------------------------------------- 1 | const Mock = require('mockjs') 2 | let Random = Mock.Random 3 | let users = [] 4 | for (let i = 0; i < 90; i++) { 5 | users.push(Mock.mock({ 6 | id: i + 1, 7 | name: Random.cname(), 8 | addr: Random.county(true), 9 | sex: Random.integer(0, 1), 10 | birth: Mock.Random.date(), 11 | age: Random.integer(18, 60) 12 | })) 13 | } 14 | 15 | 16 | 17 | Mock.mock('/login', 'post', function (options) { 18 | const params = JSON.parse(options.body) 19 | const username = params.username; 20 | const psw = params.password; 21 | if (username == 'admin') { 22 | return { 'token': 1, 'scope': 32 } 23 | } else { 24 | return { 'token': 2, 'scope': 16 } 25 | } 26 | }); 27 | Mock.mock('/getUserByPage', 'post', function (options) { 28 | const page = JSON.parse(options.body) 29 | 30 | const mockUser = users.filter((u, index) => { 31 | return index < page * 20 && index >= 20 * (page - 1) 32 | }) 33 | // console.log(mockUser) 34 | 35 | return { 36 | // 'page':page, 37 | // 'users':mockUser 38 | 'users': mockUser, 39 | 'page': page 40 | } 41 | }) 42 | Mock.mock('/removeUser', 'post', function (options) { 43 | const uid = JSON.parse(options.body) 44 | 45 | users = users.filter(u => u.id !== uid) 46 | return { 47 | 'msg': '删除成功', 48 | 'code': 200 49 | } 50 | }) 51 | 52 | Mock.mock('/editUser', 'post', function (options) { 53 | const oneUser = JSON.parse(options.body) 54 | users.some(u => { 55 | if (u.id == oneUser.id) { 56 | u.id = oneUser.id; 57 | u.name = oneUser.name; 58 | u.addr = oneUser.addr; 59 | u.age = oneUser.age; 60 | u.birth = oneUser.birth; 61 | u.sex = oneUser.sex; 62 | return true 63 | 64 | } 65 | }) 66 | return { 67 | 'msg': '编辑成功', 68 | 'code': 200 69 | } 70 | }) 71 | 72 | Mock.mock('/batchRemoveUser', 'post', function (options) { 73 | const ids = JSON.parse(options.body) 74 | console.log(ids) 75 | users = users.filter(u => { 76 | return !ids.includes(u.id) 77 | }) 78 | return { 79 | 'msg': '编辑成功', 80 | 'code': 200 81 | } 82 | }) 83 | Mock.mock('/addUser', 'post', function (options) { 84 | const oneUser = JSON.parse(options.body) 85 | users.unshift(oneUser) 86 | return { 87 | 'msg': '编辑成功', 88 | 'code': 200 89 | } 90 | }) -------------------------------------------------------------------------------- /ele-mock/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import home from '@/views/home' 4 | import login from '@/views/login' 5 | import form from '@/views/nav1/form' 6 | import table from '@/views/nav1/table' 7 | import store from '@/vuex' 8 | import { hasPermission } from '@/utils/permission' 9 | 10 | Vue.use(Router) 11 | export const constantRouterMap = [ 12 | { 13 | path: '/login', 14 | component: login, 15 | meta: {} 16 | }, 17 | { 18 | path: '/', 19 | component: home, 20 | name: '导航1', 21 | iconCls: 'el-icon-location',//图标样式class 22 | meta: { scope: 16 }, 23 | children: [ 24 | { 25 | path: '/form', 26 | component: form, 27 | name: '表单', 28 | meta: { scope: 32 } 29 | }, 30 | { 31 | path: '/table', 32 | component: table, 33 | name: '列表', 34 | meta: { scope: 16 } 35 | } 36 | ] 37 | }, 38 | { path: '*', redirect: '/404', meta: {} } 39 | ] 40 | const router = new Router({ 41 | routes: constantRouterMap 42 | }) 43 | router.beforeEach((to, from, next) => { 44 | // 首先判断是否需要权限 45 | 46 | if (to.matched.some(r => r.meta.scope)) { 47 | // 再进一步判断是否有权限 48 | let permission = true 49 | // console.log(to) 50 | // console.log(store.getters.scope) 51 | to.matched.forEach((r) => { 52 | if (!hasPermission(r, store.getters.scope)) { 53 | permission = false 54 | } 55 | }) 56 | // console.log(permission) 57 | if (permission) { 58 | next() 59 | } else { 60 | next({ 61 | path: '/login', 62 | query: { redirect: to.fullPath } 63 | }) 64 | } 65 | } else { 66 | next() 67 | } 68 | }) 69 | 70 | export default router 71 | -------------------------------------------------------------------------------- /ele-mock/src/utils/dateFormat.js: -------------------------------------------------------------------------------- 1 | let DEFAULT_PATTERN = 'yyyy-MM-dd'; 2 | 3 | 4 | export function formatDate(date, pattern) { 5 | pattern = pattern || DEFAULT_PATTERN; 6 | var o = { 7 | "M+": date.getMonth() + 1, //月份 8 | "d+": date.getDate(), //日 9 | "h+": date.getHours(), //小时 10 | "m+": date.getMinutes(), //分 11 | "s+": date.getSeconds(), //秒 12 | "q+": Math.floor((date.getMonth() + 3) / 3), //季度 13 | "S": date.getMilliseconds() //毫秒 14 | }; 15 | if (/(y+)/.test(pattern)) { 16 | pattern = pattern.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); 17 | } 18 | for (let k in o) { 19 | if (new RegExp("(" + k + ")").test(pattern)){ 20 | pattern = pattern.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); 21 | } 22 | 23 | } 24 | return pattern 25 | 26 | } -------------------------------------------------------------------------------- /ele-mock/src/utils/permission.js: -------------------------------------------------------------------------------- 1 | export function hasPermission(router, scope) { 2 | if(router.meta && router.meta.scope){ 3 | if(scope >= router.meta.scope){ 4 | return true 5 | }else{ 6 | return false 7 | } 8 | }else{ 9 | return false 10 | } 11 | } 12 | 13 | 14 | export function filterShow(routerMap, scope) { 15 | const showRouters = routerMap.filter(router => { 16 | // console.log(hasPermission(router,scope)) 17 | if (hasPermission(router, scope)) { 18 | if (router.children && router.children.length) { 19 | router.children = filterShow(router.children, scope) 20 | } 21 | return true 22 | } else { 23 | return false 24 | } 25 | }) 26 | // console.log(showRouters) 27 | return showRouters 28 | } -------------------------------------------------------------------------------- /ele-mock/src/utils/validate.js: -------------------------------------------------------------------------------- 1 | export function isvalidUsername(str) { 2 | const valid_map = ['admin', 'editor'] 3 | return valid_map.indexOf(str.trim()) >= 0 4 | } -------------------------------------------------------------------------------- /ele-mock/src/views/nav1/form.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 71 | -------------------------------------------------------------------------------- /ele-mock/src/vuex/actions.js: -------------------------------------------------------------------------------- 1 | import * as types from './mutation-types.js'; 2 | 3 | 4 | export default { 5 | initUser({commit}, user) { 6 | commit(types.INIT_USER, user); 7 | }, 8 | logout({commit}){ 9 | return new Promise((resolve,reject)=>{ 10 | commit(types.LOGOUT) 11 | resolve() 12 | }) 13 | } 14 | }; -------------------------------------------------------------------------------- /ele-mock/src/vuex/getters.js: -------------------------------------------------------------------------------- 1 | 2 | export const token = (state) => { 3 | if(!state.user.token && localStorage.getItem('user')){ 4 | state.user.token=JSON.parse(localStorage.getItem('user')).token 5 | } 6 | return state.user.token 7 | } 8 | export const scope=(state)=>{ 9 | if(state.user.scope==1 && localStorage.getItem('user')){ 10 | state.user.scope=JSON.parse(localStorage.getItem('user')).scope 11 | } 12 | return state.user.scope 13 | } -------------------------------------------------------------------------------- /ele-mock/src/vuex/index.js: -------------------------------------------------------------------------------- 1 | import vue from 'vue'; 2 | import vuex from 'vuex'; 3 | import state from './state.js'; 4 | import * as getters from './getters.js'; 5 | import mutations from './mutations.js'; 6 | import actions from './actions.js'; 7 | 8 | vue.use(vuex); 9 | 10 | export default new vuex.Store({ 11 | state, 12 | getters, 13 | mutations, 14 | actions 15 | }); -------------------------------------------------------------------------------- /ele-mock/src/vuex/mutation-types.js: -------------------------------------------------------------------------------- 1 | export const INIT_USER = 'INIT_USER'; 2 | export const LOGOUT='LOGOUT' -------------------------------------------------------------------------------- /ele-mock/src/vuex/mutations.js: -------------------------------------------------------------------------------- 1 | import * as types from './mutation-types.js'; 2 | 3 | 4 | export default{ 5 | [types.INIT_USER](state,user){ 6 | state.user.token=user.token 7 | state.user.scope=user.scope 8 | localStorage.setItem('user',JSON.stringify({'token':user.token,'scope':user.scope})) 9 | }, 10 | [types.LOGOUT](state){ 11 | state.user.token=null 12 | state.user.scope=1 13 | // state.routers=null 14 | // state.addRouters=null 15 | localStorage.removeItem('user'); 16 | } 17 | } -------------------------------------------------------------------------------- /ele-mock/src/vuex/state.js: -------------------------------------------------------------------------------- 1 | const state = { 2 | user:{ 3 | token:'', 4 | scope:1 5 | }, 6 | addRouters:[] 7 | }; 8 | 9 | export default state; -------------------------------------------------------------------------------- /ele-mock/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/ele-mock/static/.gitkeep -------------------------------------------------------------------------------- /leftMenu/GIF.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/leftMenu/GIF.gif -------------------------------------------------------------------------------- /leftMenu/README.md: -------------------------------------------------------------------------------- 1 | # 微信小程序之侧边抽屉导航 2 | - 效果图 3 | ![](GIF.gif) 4 | ## 思考 5 | - 对于底部tab导航和顶部侧边抽屉导航，一直觉得底部导航用的很习惯，顶部侧边导航觉得操作起来很不方便 6 | - 在我做信息流展示的时候，突然觉得底部tab会占用浏览屏幕时，信息流展示的空间，此时侧边栏+顶部tab导航我觉得对于信息展示很清楚有效 7 | - 底部tab我觉得适合频繁切换，利用tab将不同的功能模块分开 8 | - 同时也有很多将这两者结合，充分利用顶部侧边导航和底部tab，底部tab在上滑的时候隐藏，下滑显示 9 | - 备注：显示隐藏tab微信有api可以实现，同时监听上滑下滑，可以参考我之前写的卡片滑动切换 10 | ## 达到的效果 11 | - 将顶部原有的导航栏去掉，使得自己的素材可以达到屏幕顶部(微信小程序全局配置里的navigationStyle设为custom即可) 12 | - 侧边栏点击滑动显示 13 | - 点击空白位置滑动退出 14 | - 点击底部返回按钮同样滑动退出 15 | ### 备注 16 | - 如果需要空白位置的遮罩，则将css文件里shadow部分注释的 background-color: rgba(0,0,0,0.1); 解开即可 17 | - 如果全局配置里的navigationStyle设为custom，在其他页面也会没有顶部导航，需要自己设计顶部导航，这一点有点麻烦。 18 | ## 两种实现方式+封装为组件 19 | - 用微信小程序的wx.createAnimation(OBJECT)实现效果 20 | - 用css3的动画实现效果 21 | - 将该侧边抽屉导航封装成了一个组件 22 | - 总体来说使用微信封装的动画更为方便 23 | ## 项目注意点 24 | ### wx.createAnimation(OBJECT)实现 25 | - 注意消失侧边导航的时候，显示隐藏参数延时0.5秒，因为如果直接消失，滑动动画则无法看到 26 | ### css3实现 27 | - 根据变量变化切换css 28 | - 有两个显示主要的参数，一个负责整体的显示隐藏，一个负责动画的启动与否，整体的隐藏时有一个0.5秒的延时，而负责动画的启动与否则即时启动，达到可以看到完整动画的效果 29 | ### 封装为一个组件 30 | - 这是一个提取之前代码的连贯过程，我觉得这个功能封装为一个模块很精简实用，所以就做了一个初学者组件 31 | - 留了一个solt，可以自己插入侧边导航的内容 32 | - slot里的样式可以在父组件里书写 33 | - 成功尝试将子组件里的数据通过事件监听，返回到父组件 -------------------------------------------------------------------------------- /leftMenu/material-component/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 | } 39 | }) -------------------------------------------------------------------------------- /leftMenu/material-component/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index", 4 | "pages/logs/logs" 5 | ], 6 | "window":{ 7 | "navigationStyle":"custom" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /leftMenu/material-component/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | page{ 3 | height: 100%; 4 | width: 100%; 5 | overflow: hidden; 6 | } 7 | .container { 8 | position: relative; 9 | height: 100%; 10 | width: 100%; 11 | box-sizing: border-box; 12 | } 13 | -------------------------------------------------------------------------------- /leftMenu/material-component/components/menu/menu.js: -------------------------------------------------------------------------------- 1 | // components/menu/menu.js 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | hideDrawerFlag:{ 8 | type:Boolean, 9 | value:true 10 | } 11 | }, 12 | 13 | /** 14 | * 组件的初始数据 15 | */ 16 | data: { 17 | animationData: {} 18 | }, 19 | 20 | /** 21 | * 组件的方法列表 22 | */ 23 | methods: { 24 | showDrawer: function(e) { 25 | // console.log(e) 26 | var animation = wx.createAnimation({ 27 | duration: 500, 28 | timingFunction: 'ease', 29 | }) 30 | 31 | this.animation = animation 32 | 33 | animation.translateX(0).step() 34 | 35 | this.setData({ 36 | hideDrawerFlag: !this.data.hideDrawerFlag 37 | }) 38 | 39 | this.setData({ 40 | animationData: animation.export() 41 | }) 42 | 43 | var myEventDetail = { 44 | 'hello':123 45 | } // detail对象，提供给事件监听函数 46 | this.triggerEvent('showDrTry', myEventDetail) 47 | }, 48 | hideDrawer: function(e) { 49 | this.animation.translateX(-150).step() 50 | this.setData({ 51 | animationData: this.animation.export() 52 | }) 53 | let that = this 54 | setTimeout(function() { 55 | that.setData({ 56 | hideDrawerFlag: !that.data.hideDrawerFlag 57 | }) 58 | }, 500) 59 | }, 60 | } 61 | }) -------------------------------------------------------------------------------- /leftMenu/material-component/components/menu/menu.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /leftMenu/material-component/components/menu/menu.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /leftMenu/material-component/components/menu/menu.wxss: -------------------------------------------------------------------------------- 1 | /* components/menu/menu.wxss */ 2 | .navBtn{ 3 | width: 30px; 4 | height: 30px; 5 | position: absolute; 6 | top: 15px; 7 | left: 10px; 8 | } 9 | .navBtn .btnLogo{ 10 | height: 100%; 11 | width: 100%; 12 | } 13 | .leftDrawer{ 14 | display: flex; 15 | height: 100%; 16 | width: 100%; 17 | position: absolute; 18 | top: 0px; 19 | } 20 | .leftDrawer .menu{ 21 | width: 150px; 22 | background-color:#bfbfbf; 23 | transform: translateX(-150px); 24 | padding-top: 60px; 25 | } 26 | .leftDrawer .menu .menu-item{ 27 | text-align: center; 28 | padding: 6px 0; 29 | border: gray solid; 30 | border-width: 0 0 1px 0; 31 | } 32 | .leftDrawer .shadow{ 33 | flex: 1; 34 | /* background-color: rgba(0,0,0,0.1); */ 35 | } 36 | .leftArrow{ 37 | width: 50px; 38 | height: 40px; 39 | position: absolute; 40 | bottom: 0; 41 | left: 50px; 42 | } 43 | .leftArrow .btnLogo{ 44 | width: 100%; 45 | height: 100% 46 | } -------------------------------------------------------------------------------- /leftMenu/material-component/imgs/left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/leftMenu/material-component/imgs/left.png -------------------------------------------------------------------------------- /leftMenu/material-component/imgs/more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/leftMenu/material-component/imgs/more.png -------------------------------------------------------------------------------- /leftMenu/material-component/imgs/top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/leftMenu/material-component/imgs/top.jpg -------------------------------------------------------------------------------- /leftMenu/material-component/pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | const app = getApp() 4 | 5 | Page({ 6 | data: { 7 | hideDrawerFlag:true, 8 | animationData:{} 9 | }, 10 | onLoad: function () { 11 | }, 12 | showTry:function(e){ 13 | console.log(e) 14 | }, 15 | toLogs:function(e){ 16 | wx.navigateTo({ 17 | url: '/pages/logs/logs' 18 | }) 19 | this.setData({ 20 | hideDrawerFlag: true 21 | }) 22 | } 23 | }) 24 | -------------------------------------------------------------------------------- /leftMenu/material-component/pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "left-menu": "/components/menu/menu" 4 | } 5 | } -------------------------------------------------------------------------------- /leftMenu/material-component/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | hello 10 | 11 | 12 | world 13 | 14 | 15 | nice 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /leftMenu/material-component/pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | 3 | .container { 4 | background-color: gray; 5 | } 6 | 7 | .topBack { 8 | height: 200px; 9 | } 10 | 11 | .topBack image { 12 | width: 100%; 13 | height: 100%; 14 | } 15 | .menu-item { 16 | text-align: center; 17 | padding: 6px 0; 18 | border: gray solid; 19 | border-width: 0 0 1px 0; 20 | } 21 | -------------------------------------------------------------------------------- /leftMenu/material-component/pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | const util = require('../../utils/util.js') 3 | 4 | Page({ 5 | data: { 6 | 7 | }, 8 | onLoad: function () { 9 | 10 | }, 11 | backBtn:function(e){ 12 | wx.navigateBack({ 13 | delta: 1 14 | }) 15 | } 16 | }) 17 | -------------------------------------------------------------------------------- /leftMenu/material-component/pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志" 3 | } -------------------------------------------------------------------------------- /leftMenu/material-component/pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | title 8 | 9 | 10 | 11 | here is logs 12 | -------------------------------------------------------------------------------- /leftMenu/material-component/pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | .topNav{ 2 | position: relative; 3 | background-color: #bfbfbf; 4 | height: 37px; 5 | padding-top: 27px; 6 | } 7 | image{ 8 | width: 100%; 9 | height: 100%; 10 | } 11 | .topNav .leftArrow{ 12 | width: 40px; 13 | height: 30px; 14 | position: absolute; 15 | top: 25px; 16 | left: 6px 17 | } 18 | .topNav .title{ 19 | text-align: center 20 | } 21 | 22 | -------------------------------------------------------------------------------- /leftMenu/material-component/utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : '0' + n 15 | } 16 | 17 | module.exports = { 18 | formatTime: formatTime 19 | } 20 | -------------------------------------------------------------------------------- /leftMenu/material-css3/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 | } 39 | }) -------------------------------------------------------------------------------- /leftMenu/material-css3/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index", 4 | "pages/logs/logs" 5 | ], 6 | "window":{ 7 | "navigationStyle":"custom" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /leftMenu/material-css3/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | page{ 3 | height: 100%; 4 | width: 100%; 5 | overflow: hidden; 6 | } 7 | .container { 8 | position: relative; 9 | height: 100%; 10 | width: 100%; 11 | box-sizing: border-box; 12 | } 13 | -------------------------------------------------------------------------------- /leftMenu/material-css3/imgs/left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/leftMenu/material-css3/imgs/left.png -------------------------------------------------------------------------------- /leftMenu/material-css3/imgs/more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/leftMenu/material-css3/imgs/more.png -------------------------------------------------------------------------------- /leftMenu/material-css3/imgs/top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/leftMenu/material-css3/imgs/top.jpg -------------------------------------------------------------------------------- /leftMenu/material-css3/pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | const app = getApp() 4 | 5 | Page({ 6 | data: { 7 | hideDrawerFlag:false, 8 | moveFlag:false, 9 | animationData:{} 10 | }, 11 | onLoad: function () { 12 | }, 13 | showDrawer:function(e){ 14 | console.log('show') 15 | let that=this 16 | this.setData({ 17 | hideDrawerFlag: !that.data.hideDrawerFlag, 18 | moveFlag: !that.data.moveFlag 19 | }) 20 | }, 21 | hideDrawer: function (e) { 22 | let that = this 23 | this.setData({ 24 | moveFlag: !that.data.moveFlag 25 | }) 26 | setTimeout(function(){ 27 | that.setData({ 28 | hideDrawerFlag: !that.data.hideDrawerFlag 29 | }) 30 | },500) 31 | 32 | }, 33 | toLogs:function(e){ 34 | wx.navigateTo({ 35 | url: '/pages/logs/logs' 36 | }) 37 | this.hideDrawer() 38 | } 39 | }) 40 | -------------------------------------------------------------------------------- /leftMenu/material-css3/pages/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /leftMenu/material-css3/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | hello 13 | 14 | 15 | world 16 | 17 | 18 | nice 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /leftMenu/material-css3/pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | 3 | .topBack { 4 | height: 200px; 5 | } 6 | 7 | .topBack image { 8 | width: 100%; 9 | height: 100%; 10 | } 11 | 12 | .navBtn { 13 | width: 30px; 14 | height: 30px; 15 | position: absolute; 16 | top: 20px; 17 | left: 6px; 18 | } 19 | 20 | .navBtn image { 21 | height: 100%; 22 | width: 100%; 23 | } 24 | 25 | .leftDrawer { 26 | display: flex; 27 | height: 100%; 28 | width: 100%; 29 | position: absolute; 30 | top: 0px; 31 | } 32 | 33 | .leftDrawer .menu { 34 | width: 150px; 35 | background-color: #bfbfbf; 36 | 37 | padding-top: 60px; 38 | } 39 | 40 | .leftDrawer .menuMove { 41 | animation: menu 0.5s; 42 | animation-fill-mode: forwards; 43 | } 44 | .leftDrawer .menuHide{ 45 | animation: hideM 0.5s; 46 | animation-fill-mode: forwards; 47 | } 48 | @keyframes menu { 49 | from { 50 | transform: translateX(-150px); 51 | } 52 | 53 | to { 54 | transform: translateX(0px); 55 | } 56 | } 57 | @keyframes hideM { 58 | from { 59 | transform: translateX(0); 60 | } 61 | 62 | to { 63 | transform: translateX(-150px); 64 | } 65 | } 66 | 67 | .leftDrawer .menu .menu-item { 68 | text-align: center; 69 | padding: 6px 0; 70 | border: gray solid; 71 | border-width: 0 0 1px 0; 72 | } 73 | 74 | .leftDrawer .shadow { 75 | flex: 1; 76 | /* background-color: rgba(0,0,0,0.1); */ 77 | } 78 | 79 | .leftArrow { 80 | width: 50px; 81 | height: 40px; 82 | position: absolute; 83 | bottom: 0; 84 | left: 50px; 85 | } 86 | 87 | .leftArrow image { 88 | width: 100%; 89 | height: 100%; 90 | } 91 | -------------------------------------------------------------------------------- /leftMenu/material-css3/pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | const util = require('../../utils/util.js') 3 | 4 | Page({ 5 | data: { 6 | 7 | }, 8 | onLoad: function () { 9 | 10 | }, 11 | backBtn:function(e){ 12 | wx.navigateBack({ 13 | delta: 1 14 | }) 15 | } 16 | }) 17 | -------------------------------------------------------------------------------- /leftMenu/material-css3/pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志" 3 | } -------------------------------------------------------------------------------- /leftMenu/material-css3/pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | title 8 | 9 | 10 | 11 | here is logs 12 | -------------------------------------------------------------------------------- /leftMenu/material-css3/pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | .topNav{ 2 | position: relative; 3 | background-color: #bfbfbf; 4 | height: 37px; 5 | padding-top: 27px; 6 | } 7 | image{ 8 | width: 100%; 9 | height: 100%; 10 | } 11 | .topNav .leftArrow{ 12 | width: 40px; 13 | height: 30px; 14 | position: absolute; 15 | top: 25px; 16 | left: 6px 17 | } 18 | .topNav .title{ 19 | text-align: center 20 | } 21 | 22 | -------------------------------------------------------------------------------- /leftMenu/material-css3/utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : '0' + n 15 | } 16 | 17 | module.exports = { 18 | formatTime: formatTime 19 | } 20 | -------------------------------------------------------------------------------- /leftMenu/material/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 | } 39 | }) -------------------------------------------------------------------------------- /leftMenu/material/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index", 4 | "pages/logs/logs" 5 | ], 6 | "window":{ 7 | "navigationStyle":"custom" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /leftMenu/material/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | page{ 3 | height: 100%; 4 | width: 100%; 5 | overflow: hidden; 6 | } 7 | .container { 8 | position: relative; 9 | height: 100%; 10 | width: 100%; 11 | box-sizing: border-box; 12 | } 13 | -------------------------------------------------------------------------------- /leftMenu/material/imgs/left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/leftMenu/material/imgs/left.png -------------------------------------------------------------------------------- /leftMenu/material/imgs/more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/leftMenu/material/imgs/more.png -------------------------------------------------------------------------------- /leftMenu/material/imgs/top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/leftMenu/material/imgs/top.jpg -------------------------------------------------------------------------------- /leftMenu/material/pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | const app = getApp() 4 | 5 | Page({ 6 | data: { 7 | hideDrawerFlag:true, 8 | animationData:{} 9 | }, 10 | onLoad: function () { 11 | }, 12 | showDrawer:function(e){ 13 | console.log('show') 14 | var animation = wx.createAnimation({ 15 | duration: 500, 16 | timingFunction: 'ease', 17 | }) 18 | 19 | this.animation = animation 20 | 21 | animation.translateX(0).step() 22 | 23 | let that=this 24 | this.setData({ 25 | hideDrawerFlag: !that.data.hideDrawerFlag 26 | }) 27 | 28 | this.setData({ 29 | animationData: animation.export() 30 | }) 31 | }, 32 | hideDrawer: function (e) { 33 | this.animation.translateX(-150).step() 34 | this.setData({ 35 | animationData: this.animation.export() 36 | }) 37 | let that = this 38 | setTimeout(function(){ 39 | that.setData({ 40 | hideDrawerFlag: !that.data.hideDrawerFlag 41 | }) 42 | },500) 43 | }, 44 | toLogs:function(e){ 45 | wx.navigateTo({ 46 | url: '/pages/logs/logs' 47 | }) 48 | this.hideDrawer() 49 | } 50 | }) 51 | -------------------------------------------------------------------------------- /leftMenu/material/pages/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /leftMenu/material/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 26 | -------------------------------------------------------------------------------- /leftMenu/material/pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .topBack{ 3 | height: 200px; 4 | } 5 | .topBack image{ 6 | width: 100%; 7 | height: 100%; 8 | } 9 | .navBtn{ 10 | width: 30px; 11 | height: 30px; 12 | position: absolute; 13 | top: 20px; 14 | left: 6px; 15 | } 16 | .navBtn image{ 17 | height: 100%; 18 | width: 100%; 19 | } 20 | .leftDrawer{ 21 | display: flex; 22 | height: 100%; 23 | width: 100%; 24 | position: absolute; 25 | top: 0px; 26 | } 27 | .leftDrawer .menu{ 28 | width: 150px; 29 | background-color:#bfbfbf; 30 | transform: translateX(-150px); 31 | padding-top: 60px; 32 | } 33 | .leftDrawer .menu .menu-item{ 34 | text-align: center; 35 | padding: 6px 0; 36 | border: gray solid; 37 | border-width: 0 0 1px 0; 38 | } 39 | .leftDrawer .shadow{ 40 | flex: 1; 41 | /* background-color: rgba(0,0,0,0.1); */ 42 | } 43 | .leftArrow{ 44 | width: 50px; 45 | height: 40px; 46 | position: absolute; 47 | bottom: 0; 48 | left: 50px; 49 | } 50 | .leftArrow image{ 51 | width: 100%; 52 | height: 100% 53 | } 54 | -------------------------------------------------------------------------------- /leftMenu/material/pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | const util = require('../../utils/util.js') 3 | 4 | Page({ 5 | data: { 6 | 7 | }, 8 | onLoad: function () { 9 | 10 | }, 11 | backBtn:function(e){ 12 | wx.navigateBack({ 13 | delta: 1 14 | }) 15 | } 16 | }) 17 | -------------------------------------------------------------------------------- /leftMenu/material/pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志" 3 | } -------------------------------------------------------------------------------- /leftMenu/material/pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | title 8 | 9 | 10 | 11 | here is logs 12 | -------------------------------------------------------------------------------- /leftMenu/material/pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | .topNav{ 2 | position: relative; 3 | background-color: #bfbfbf; 4 | height: 37px; 5 | padding-top: 27px; 6 | } 7 | image{ 8 | width: 100%; 9 | height: 100%; 10 | } 11 | .topNav .leftArrow{ 12 | width: 40px; 13 | height: 30px; 14 | position: absolute; 15 | top: 25px; 16 | left: 6px 17 | } 18 | .topNav .title{ 19 | text-align: center 20 | } 21 | 22 | -------------------------------------------------------------------------------- /leftMenu/material/utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : '0' + n 15 | } 16 | 17 | module.exports = { 18 | formatTime: formatTime 19 | } 20 | -------------------------------------------------------------------------------- /sellFood-vue/README.md: -------------------------------------------------------------------------------- 1 | # sellFood-vue 2 | 3 | ## 饿了吗，vue2.0项目记录 4 | ### 项目说明：基本按照慕课网的教程学习编写，布局修改为flex布局 5 | - 首先需要模拟数据，在vue，dev环境下的express搭建数据环境 6 | 参考：[vue2.0配置链接](https://blog.csdn.net/qq_34645412/article/details/78833860) 7 | 8 | - 单页面应用，进入app.vue设置单页面的整体样式，设置路由，进入具体路由的编写 9 | 10 | - 就近原则，将组建所需的图片等资源放入同一文件夹 11 | - 引用外部css的时候，注意，放在static里面的不会被打包，可以在index.html直接引用，src里面的会被打包，不能直接引用 12 | - goods，better-scroll左右滚动联动步骤 13 | - 点击左侧菜单，切换右侧列表，使用better-scrollde的scrollToElement(el, 300);方法即可 14 | - 右侧滚动，左侧菜单切换，首先计算每个菜单类目的长度，使用better-scoll的on获得纵坐标，和菜单类目高度对比，得出左侧菜单的索引，进行高亮 15 | - 购物车小球的动画，采用动画的js钩子，由于是两个方向的移动，设置两个div 16 | - 首先从点击处派发事件，传递点击元素 17 | - 捕获该事件，进行小球动画 18 | - 通过在父组件使用$refs调用子组件的函数，将所点击的元素传递进去 19 | - 注意js的对象和数组是引用传递 20 | - 注意js的对象和数组是引用传递，全局使用selectFood数据来驱动样式 21 | - created是初始化数据，还未渲染出html，mounted是渲染出html后，注意进一步理解生命周期 -------------------------------------------------------------------------------- /sellFood-vue/sellfood/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/README.md: -------------------------------------------------------------------------------- 1 | # sellfood 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/build/logo.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | 12 | 13 | module.exports = { 14 | context: path.resolve(__dirname, '../'), 15 | entry: { 16 | app: './src/main.js' 17 | }, 18 | output: { 19 | path: config.build.assetsRoot, 20 | filename: '[name].js', 21 | publicPath: process.env.NODE_ENV === 'production' 22 | ? config.build.assetsPublicPath 23 | : config.dev.assetsPublicPath 24 | }, 25 | resolve: { 26 | extensions: ['.js', '.vue', '.json'], 27 | alias: { 28 | 'vue$': 'vue/dist/vue.esm.js', 29 | '@': resolve('src'), 30 | } 31 | }, 32 | module: { 33 | rules: [ 34 | { 35 | test: /\.vue$/, 36 | loader: 'vue-loader', 37 | options: vueLoaderConfig 38 | }, 39 | { 40 | test: /\.js$/, 41 | loader: 'babel-loader', 42 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] 43 | }, 44 | { 45 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 46 | loader: 'url-loader', 47 | options: { 48 | limit: 10000, 49 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 50 | } 51 | }, 52 | { 53 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 54 | loader: 'url-loader', 55 | options: { 56 | limit: 10000, 57 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 58 | } 59 | }, 60 | { 61 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 62 | loader: 'url-loader', 63 | options: { 64 | limit: 10000, 65 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 66 | } 67 | } 68 | ] 69 | }, 70 | node: { 71 | // prevent webpack from injecting useless setImmediate polyfill because Vue 72 | // source contains it (although only uses it if it's native). 73 | setImmediate: false, 74 | // prevent webpack from injecting mocks to Node native modules 75 | // that does not make sense for the client 76 | dgram: 'empty', 77 | fs: 'empty', 78 | net: 'empty', 79 | tls: 'empty', 80 | child_process: 'empty' 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: '0.0.0.0', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | 24 | /** 25 | * Source Maps 26 | */ 27 | 28 | // https://webpack.js.org/configuration/devtool/#development 29 | devtool: 'cheap-module-eval-source-map', 30 | 31 | // If you have problems debugging vue-files in devtools, 32 | // set this to false - it *may* help 33 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 34 | cacheBusting: true, 35 | 36 | cssSourceMap: true 37 | }, 38 | 39 | build: { 40 | // Template for index.html 41 | index: path.resolve(__dirname, '../dist/index.html'), 42 | 43 | // Paths 44 | assetsRoot: path.resolve(__dirname, '../dist'), 45 | assetsSubDirectory: 'static', 46 | assetsPublicPath: '/', 47 | 48 | /** 49 | * Source Maps 50 | */ 51 | 52 | productionSourceMap: true, 53 | // https://webpack.js.org/configuration/devtool/#production 54 | devtool: '#source-map', 55 | 56 | // Gzip off by default as many popular static hosts such as 57 | // Surge or Netlify already gzip all static assets for you. 58 | // Before setting to `true`, make sure to: 59 | // npm install --save-dev compression-webpack-plugin 60 | productionGzip: false, 61 | productionGzipExtensions: ['js', 'css'], 62 | 63 | // Run the build command with an extra argument to 64 | // View the bundle analyzer report after build finishes: 65 | // `npm run build --report` 66 | // Set to `true` or `false` to always turn it on or off 67 | bundleAnalyzerReport: process.env.npm_config_report 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | sellfood 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sellfood", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "seven-share <1933592511@qq.com>", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "axios": "^0.18.0", 14 | "better-scroll": "^1.10.2", 15 | "vue": "^2.5.2", 16 | "vue-router": "^3.0.1" 17 | }, 18 | "devDependencies": { 19 | "autoprefixer": "^7.1.2", 20 | "babel-core": "^6.22.1", 21 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 22 | "babel-loader": "^7.1.1", 23 | "babel-plugin-syntax-jsx": "^6.18.0", 24 | "babel-plugin-transform-runtime": "^6.22.0", 25 | "babel-plugin-transform-vue-jsx": "^3.5.0", 26 | "babel-preset-env": "^1.3.2", 27 | "babel-preset-stage-2": "^6.22.0", 28 | "chalk": "^2.0.1", 29 | "copy-webpack-plugin": "^4.0.1", 30 | "css-loader": "^0.28.0", 31 | "extract-text-webpack-plugin": "^3.0.0", 32 | "file-loader": "^1.1.4", 33 | "friendly-errors-webpack-plugin": "^1.6.1", 34 | "html-webpack-plugin": "^2.30.1", 35 | "node-notifier": "^5.1.2", 36 | "optimize-css-assets-webpack-plugin": "^3.2.0", 37 | "ora": "^1.2.0", 38 | "portfinder": "^1.0.13", 39 | "postcss-import": "^11.0.0", 40 | "postcss-loader": "^2.0.8", 41 | "postcss-url": "^7.2.1", 42 | "rimraf": "^2.6.0", 43 | "semver": "^5.3.0", 44 | "shelljs": "^0.7.6", 45 | "uglifyjs-webpack-plugin": "^1.1.1", 46 | "url-loader": "^0.5.8", 47 | "vue-loader": "^13.3.0", 48 | "vue-style-loader": "^3.0.1", 49 | "vue-template-compiler": "^2.5.2", 50 | "webpack": "^3.6.0", 51 | "webpack-bundle-analyzer": "^2.9.0", 52 | "webpack-dev-server": "^2.9.1", 53 | "webpack-merge": "^4.1.0" 54 | }, 55 | "engines": { 56 | "node": ">= 6.0.0", 57 | "npm": ">= 3.0.0" 58 | }, 59 | "browserslist": [ 60 | "> 1%", 61 | "last 2 versions", 62 | "not ie <= 8" 63 | ] 64 | } 65 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/App.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 54 | 55 | 87 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/common/fonts/sell-icon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/common/fonts/sell-icon.eot -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/common/fonts/sell-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/common/fonts/sell-icon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/common/fonts/sell-icon.ttf -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/common/fonts/sell-icon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/common/fonts/sell-icon.woff -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/common/js/date.js: -------------------------------------------------------------------------------- 1 | export function fd(date, fmt) { 2 | if (/(y+)/.test(fmt)) { 3 | fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); 4 | } 5 | let o = { 6 | 'M+': date.getMonth() + 1, 7 | 'd+': date.getDate(), 8 | 'h+': date.getHours(), 9 | 'm+': date.getMinutes(), 10 | 's+': date.getSeconds() 11 | }; 12 | for (let k in o) { 13 | if (new RegExp(`(${k})`).test(fmt)) { 14 | let str = o[k] + ''; 15 | fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)); 16 | } 17 | } 18 | return fmt; 19 | }; 20 | 21 | function padLeftZero(str) { 22 | return ('00' + str).substr(str.length); 23 | } 24 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/common/js/store.js: -------------------------------------------------------------------------------- 1 | export function saveToLocal(id, key, value) { 2 | let seller = window.localStorage.__seller__; 3 | if (!seller) { 4 | seller = {}; 5 | seller[id] = {}; 6 | } else { 7 | seller = JSON.parse(seller); 8 | if (!seller[id]) { 9 | seller[id] = {}; 10 | } 11 | } 12 | seller[id][key] = value; 13 | window.localStorage.__seller__ = JSON.stringify(seller); 14 | }; 15 | 16 | export function loadFromLocal(id, key, def) { 17 | let seller = window.localStorage.__seller__; 18 | if (!seller) { 19 | return def; 20 | } 21 | seller = JSON.parse(seller)[id]; 22 | if (!seller) { 23 | return def; 24 | } 25 | let ret = seller[key]; 26 | return ret || def; 27 | }; 28 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/common/js/util.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 解析url参数 3 | * @example ?id=12345&a=b 4 | * @return Object {id:12345,a:b} 5 | */ 6 | export function urlParse() { 7 | let url = window.location.search; 8 | let obj = {}; 9 | let reg = /[?&][^?&]+=[^?&]+/g; 10 | let arr = url.match(reg); 11 | // ['?id=12345', '&a=b'] 12 | if (arr) { 13 | arr.forEach((item) => { 14 | let tempArr = item.substring(1).split('='); 15 | let key = decodeURIComponent(tempArr[0]); 16 | let val = decodeURIComponent(tempArr[1]); 17 | obj[key] = val; 18 | }); 19 | } 20 | return obj; 21 | }; 22 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/common/stylus/icon.styl: -------------------------------------------------------------------------------- 1 | @font-face 2 | font-family: 'sell-icon' 3 | src: url('@/common/fonts/sell-icon.eot?ckx3gx') 4 | src: url('@/common/fonts/sell-icon.eot?ckx3gx#iefix') format('embedded-opentype'), 5 | url('@/common/fonts/sell-icon.ttf?ckx3gx') format('truetype'), 6 | url('@/common/fonts/sell-icon.woff?ckx3gx') format('woff'), 7 | url('@/common/fonts/sell-icon.svg?ckx3gx#sell-icon') format('svg') 8 | font-weight: normal 9 | font-style: normal 10 | 11 | 12 | [class^="icon-"], [class*=" icon-"] 13 | /* use !important to prevent issues with browser extensions that change fonts */ 14 | font-family: 'sell-icon' !important 15 | speak: none 16 | font-style: normal 17 | font-weight: normal 18 | font-variant: normal 19 | text-transform: none 20 | line-height: 1 21 | 22 | /* Better Font Rendering =========== */ 23 | -webkit-font-smoothing: antialiased 24 | -moz-osx-font-smoothing: grayscale 25 | 26 | 27 | .icon-add_circle:before 28 | content: "\e900" 29 | 30 | .icon-arrow_lift:before 31 | content: "\e901" 32 | 33 | .icon-check_circle:before 34 | content: "\e902" 35 | 36 | .icon-close:before 37 | content: "\e903" 38 | 39 | .icon-favorite:before 40 | content: "\e904" 41 | 42 | .icon-keyboard_arrow_right:before 43 | content: "\e905" 44 | 45 | .icon-remove_circle_outline:before 46 | content: "\e906" 47 | 48 | .icon-shopping_cart:before 49 | content: "\e907" 50 | 51 | .icon-thumb_down:before 52 | content: "\e908" 53 | 54 | .icon-thumb_up:before 55 | content: "\e909" 56 | 57 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/common/stylus/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'sell-icon'; 3 | src: url('../fonts/sell-icon.eot?ckx3gx'); 4 | src: url('../fonts/sell-icon.eot?ckx3gx#iefix') format('embedded-opentype'), 5 | url('../fonts/sell-icon.ttf?ckx3gx') format('truetype'), 6 | url('../fonts/sell-icon.woff?ckx3gx') format('woff'), 7 | url('../fonts/sell-icon.svg?ckx3gx#sell-icon') format('svg'); 8 | 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | 13 | [class^="icon-"], [class*=" icon-"] { 14 | /* use !important to prevent issues with browser extensions that change fonts */ 15 | font-family: 'sell-icon' !important; 16 | /* speak: none; */ 17 | font-style: normal; 18 | font-weight: normal; 19 | font-variant: normal; 20 | text-transform: none; 21 | line-height: 1; 22 | 23 | /* Better Font Rendering =========== */ 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | } 27 | 28 | .icon-add_circle:before { 29 | content: "\e900"; 30 | } 31 | .icon-arrow_lift:before { 32 | content: "\e901"; 33 | } 34 | .icon-check_circle:before { 35 | content: "\e902"; 36 | } 37 | .icon-close:before { 38 | content: "\e903"; 39 | } 40 | .icon-favorite:before { 41 | content: "\e904"; 42 | } 43 | .icon-keyboard_arrow_right:before { 44 | content: "\e905"; 45 | } 46 | .icon-remove_circle_outline:before { 47 | content: "\e906"; 48 | } 49 | .icon-shopping_cart:before { 50 | content: "\e907"; 51 | } 52 | .icon-thumb_down:before { 53 | content: "\e908"; 54 | } 55 | .icon-thumb_up:before { 56 | content: "\e909"; 57 | } 58 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/cartcontrol/cartcontrol.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 41 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/goods/decrease_1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/goods/decrease_1@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/goods/discount_1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/goods/discount_1@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/goods/guarantee_1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/goods/guarantee_1@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/goods/invoice_1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/goods/invoice_1@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/goods/special_1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/goods/special_1@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/header/brand@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/header/brand@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/header/bulletin@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/header/bulletin@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/header/decrease_1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/header/decrease_1@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/header/discount_1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/header/discount_1@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/header/guarantee_1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/header/guarantee_1@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/header/invoice_1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/header/invoice_1@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/header/special_1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/header/special_1@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/seller/decrease_4@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/seller/decrease_4@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/seller/discount_4@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/seller/discount_4@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/seller/guarantee_4@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/seller/guarantee_4@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/seller/invoice_4@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/seller/invoice_4@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/seller/special_4@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/seller/special_4@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/split/split.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 18 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/star/star24_half@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/star/star24_half@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/star/star24_off@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/star/star24_off@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/star/star24_on@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/star/star24_on@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/star/star36_half@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/star/star36_half@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/star/star36_off@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/star/star36_off@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/star/star36_on@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/star/star36_on@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/star/star48_half@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/star/star48_half@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/star/star48_off@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/star/star48_off@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/components/star/star48_on@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/src/components/star/star48_on@2x.png -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | import axios from 'axios' 7 | 8 | Vue.config.productionTip = false 9 | Vue.prototype.$http=axios 10 | 11 | /* eslint-disable no-new */ 12 | new Vue({ 13 | el: '#app', 14 | router, 15 | components: { App }, 16 | template: '' 17 | }) 18 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | // import HelloWorld from '@/components/HelloWorld' 4 | import goods from '@/components/goods/goods' 5 | import ratings from '@/components/ratings/ratings' 6 | import seller from '@/components/seller/seller' 7 | 8 | Vue.use(Router) 9 | 10 | export default new Router({ 11 | mode:'history', 12 | linkActiveClass:'active', 13 | routes: [ 14 | { 15 | path:'/', 16 | redirect: '/goods' 17 | }, 18 | { 19 | path: '/goods', 20 | component: goods 21 | }, 22 | { 23 | path: '/ratings', 24 | component: ratings 25 | }, 26 | { 27 | path: '/seller', 28 | component: seller 29 | } 30 | ] 31 | }) 32 | -------------------------------------------------------------------------------- /sellFood-vue/sellfood/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/sellFood-vue/sellfood/static/.gitkeep -------------------------------------------------------------------------------- /sellFood-vue/sellfood/static/css/reset.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) 3 | * http://cssreset.com 4 | */ 5 | html, body, div, span, applet, object, iframe, 6 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 7 | a, abbr, acronym, address, big, cite, code, 8 | del, dfn, em, img, ins, kbd, q, s, samp, 9 | small, strike, strong, sub, sup, tt, var, 10 | b, u, i, center, 11 | dl, dt, dd, ol, ul, li, 12 | fieldset, form, label, legend, 13 | table, caption, tbody, tfoot, thead, tr, th, td, 14 | article, aside, canvas, details, embed, 15 | figure, figcaption, footer, header, 16 | menu, nav, output, ruby, section, summary, 17 | time, mark, audio, video, input { 18 | margin: 0; 19 | padding: 0; 20 | border: 0; 21 | font-size: 100%; 22 | font-weight: normal; 23 | vertical-align: baseline; 24 | } 25 | 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, menu, nav, section { 29 | display: block; 30 | } 31 | 32 | body { 33 | line-height: 1; 34 | } 35 | 36 | blockquote, q { 37 | quotes: none; 38 | } 39 | 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: none; 43 | } 44 | 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | /* custom */ 51 | a { 52 | color: #7e8c8d; 53 | text-decoration: none; 54 | -webkit-backface-visibility: hidden; 55 | } 56 | 57 | li { 58 | list-style: none; 59 | } 60 | 61 | ::-webkit-scrollbar { 62 | width: 5px; 63 | height: 5px; 64 | } 65 | 66 | ::-webkit-scrollbar-track-piece { 67 | background-color: rgba(0, 0, 0, 0.2); 68 | -webkit-border-radius: 6px; 69 | } 70 | 71 | ::-webkit-scrollbar-thumb:vertical { 72 | height: 5px; 73 | background-color: rgba(125, 125, 125, 0.7); 74 | -webkit-border-radius: 6px; 75 | } 76 | 77 | ::-webkit-scrollbar-thumb:horizontal { 78 | width: 5px; 79 | background-color: rgba(125, 125, 125, 0.7); 80 | -webkit-border-radius: 6px; 81 | } 82 | 83 | html, body { 84 | width: 100%; 85 | } 86 | 87 | body { 88 | -webkit-text-size-adjust: none; 89 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 90 | } -------------------------------------------------------------------------------- /slideDelete/GIF.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/slideDelete/GIF.gif -------------------------------------------------------------------------------- /slideDelete/README.md: -------------------------------------------------------------------------------- 1 | # 微信小程序侧滑删除 2 | ### 侧滑删除效果，目前我发现有两种做法 3 | ### 效果图 4 | ![](GIF.gif) 5 | ### 1. 使用scroll-view实现 6 | - 在scroll-view上bindtouchmove是无效的，bindtouchstart和end是可以的，非要使用bindtouchmove的话可以绑定在scroll-view内部 7 | - 因为scroll-view本身就可以滑动，所以bindtouchemove影响不大，使用start和end就可以实现效果 8 | - 由于scroll-view的scroll-left是数值，单位是px，所以删除按钮部分需要设置为px，不能设置为rpx 9 | - 判断手指滑动距离，得出方向，设置sceoll-left数值即可 10 | - 如果滑动距离短，使scroll-left恢复原状 11 | 12 | ### 2. 使用view实现 13 | - 使用两个view，flex横向布局实现布局 14 | - 使用相对定位，也可以使用绝对定位，但绝对定位脱离文档流，不太推荐 15 | - 设置view，style的left绑定的值，改变它的值即可实现删除按钮的移动 16 | - 使用transition，使滑动有一定的动效 17 | - 在view上使用bindtouchmove，可以实现随手指滑动，删除按钮随时动，如果不用bindtouchmove也可以实现效果，但是手指滑动的时候，删除按钮不动，滑动结束后，才会移动 18 | - 注意left的值需要加上rpx 19 | ### 3. 开发思考 20 | - 由于从后端传来的数据肯定没有设置删除按钮的初始的left值，需要在前端将需要展示的数据添加left，并初始化赋值，其实不初始化，直接移动后动态添加left也可以，个人觉得有一个初始化添加较为严谨 21 | -------------------------------------------------------------------------------- /slideDelete/slideDeleteScroll/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 | } 39 | }) -------------------------------------------------------------------------------- /slideDelete/slideDeleteScroll/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index" 4 | ], 5 | "window": { 6 | "backgroundTextStyle": "light", 7 | "navigationBarBackgroundColor": "#fff", 8 | "navigationBarTitleText": "WeChat", 9 | "navigationBarTextStyle": "black" 10 | } 11 | } -------------------------------------------------------------------------------- /slideDelete/slideDeleteScroll/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /slideDelete/slideDeleteScroll/pages/index/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | initdata : function (that) { 3 |  var list = that.data.list 4 |  for (var i = 0; i < list.length; i++) { 5 |   list[i].txtStyle = "" 6 |  } 7 |  that.setData({ list: list }) 8 | } , 9 | /** 10 | * 页面的初始数据 11 | */ 12 | data: { 13 | list: [ 14 | { 15 | txt: "0" 16 | }, 17 | { 18 | txt: "1" 19 | }, 20 | { 21 | txt: "2" 22 | }, 23 | ], 24 | startX:0 25 | }, 26 | 27 | /** 28 | * 生命周期函数--监听页面加载 29 | */ 30 | onLoad: function (options) { 31 | 32 | }, 33 | 34 | /** 35 | * 生命周期函数--监听页面初次渲染完成 36 | */ 37 | onReady: function () { 38 | this.initList(this.data.list) 39 | }, 40 | initList:function(listData){ 41 | for(var i in listData){ 42 | listData[i].left=0 43 | } 44 | this.setData({list:listData}) 45 | // console.log(this.data.list) 46 | }, 47 | touchS: function (event) { 48 | if (event.touches.length == 1) { 49 | this.setData({ 50 | startX: event.touches[0].clientX 51 | }); 52 | } 53 | }, 54 | touchE: function (event) { 55 | var index = event.currentTarget.dataset.sid 56 | if (event.changedTouches.length == 1) { 57 | //手指移动结束后水平位置 58 | var endX = event.changedTouches[0].clientX; 59 | //触摸开始与结束，手指移动的距离 60 | var disX = this.data.startX - endX; 61 | if(disX>40){ 62 | this.changeList(this.data.list,index,80) 63 | }else{ 64 | this.changeList(this.data.list, index, 0) 65 | } 66 | } 67 | }, 68 | changeList:function(listData,index,leftData){ 69 | for(var i in listData){ 70 | if(i==index){ 71 | listData[i].left=leftData 72 | } 73 | } 74 | this.setData({ list: listData }) 75 | }, 76 | deleteTab:function(event){ 77 | var index = event.currentTarget.dataset.sid; 78 | var listData = this.data.list 79 | for (var i in listData) { 80 | if (i == index) { 81 | listData.splice(index, 1); 82 | } 83 | } 84 | this.setData({ list: listData }) 85 | } 86 | }) -------------------------------------------------------------------------------- /slideDelete/slideDeleteScroll/pages/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /slideDelete/slideDeleteScroll/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | 14 | 15 | 内容部分{{item.txt}} 16 | 删除 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /slideDelete/slideDeleteScroll/pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | scroll-view{ 2 | margin-bottom: 1px; 3 | } 4 | .scroll-box{ 5 | display: flex; 6 | width: fit-content; 7 | line-height: 100rpx; 8 | } 9 | .scroll-box .content{ 10 | width: 750rpx; 11 | background-color: gray; 12 | } 13 | .scroll-box .delete{ 14 | background-color: red; 15 | width: 80px; 16 | text-align: center; 17 | } 18 | -------------------------------------------------------------------------------- /slideDelete/slideDeleteScroll/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "setting": { 4 | "urlCheck": true, 5 | "es6": true, 6 | "postcss": true, 7 | "minified": true, 8 | "newFeature": true 9 | }, 10 | "compileType": "miniprogram", 11 | "libVersion": "1.9.94", 12 | "appid": "wx1ed9ac6f29a707c1", 13 | "projectname": "sc", 14 | "isGameTourist": false, 15 | "condition": { 16 | "search": { 17 | "current": -1, 18 | "list": [] 19 | }, 20 | "conversation": { 21 | "current": -1, 22 | "list": [] 23 | }, 24 | "game": { 25 | "currentL": -1, 26 | "list": [] 27 | }, 28 | "miniprogram": { 29 | "current": -1, 30 | "list": [] 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /slideDelete/slideDeleteView/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 | } 39 | }) -------------------------------------------------------------------------------- /slideDelete/slideDeleteView/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index" 4 | ], 5 | "window": { 6 | "backgroundTextStyle": "light", 7 | "navigationBarBackgroundColor": "#fff", 8 | "navigationBarTitleText": "WeChat", 9 | "navigationBarTextStyle": "black" 10 | } 11 | } -------------------------------------------------------------------------------- /slideDelete/slideDeleteView/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /slideDelete/slideDeleteView/pages/index/index.js: -------------------------------------------------------------------------------- 1 | // pages/index/index.js 2 | Page({ 3 | /** 4 | * 页面的初始数据 5 | */ 6 | data: { 7 | list: [ 8 | { 9 | txt: "0" 10 | }, 11 | { 12 | txt: "1" 13 | }, 14 | { 15 | txt: "2" 16 | }, 17 | ], 18 | startX:0 19 | }, 20 | 21 | /** 22 | * 生命周期函数--监听页面加载 23 | */ 24 | onLoad: function (options) { 25 | 26 | }, 27 | 28 | /** 29 | * 生命周期函数--监听页面初次渲染完成 30 | */ 31 | onReady: function () { 32 | this.initList(this.data.list) 33 | }, 34 | initList:function(listData){ 35 | for(var i in listData){ 36 | listData[i].leftDis=0+'rpx'; 37 | } 38 | this.setData({list:listData}) 39 | }, 40 | 41 | touchS: function (event) { 42 | if (event.touches.length == 1) { 43 | this.setData({ 44 | startX: event.touches[0].clientX 45 | }); 46 | } 47 | }, 48 | touchM:function(event){ 49 | var index = event.currentTarget.dataset.sid; 50 | var moveX = event.touches[0].clientX; 51 | var disX = this.data.startX - moveX; 52 | if(disX>0&&disX<80){ 53 | this.changeList(this.data.list, index, disX * 2) 54 | } 55 | 56 | 57 | }, 58 | touchE: function (event) { 59 | var index = event.currentTarget.dataset.sid 60 | if (event.changedTouches.length == 1) { 61 | //手指移动结束后水平位置 62 | var endX = event.changedTouches[0].clientX; 63 | //触摸开始与结束，手指移动的距离 64 | var disX = this.data.startX - endX; 65 | if(disX>40){ 66 | this.changeList(this.data.list,index,160) 67 | }else{ 68 | this.changeList(this.data.list, index, 0) 69 | } 70 | } 71 | }, 72 | changeList:function(listData,index,leftData){ 73 | for(var i in listData){ 74 | if(i==index){ 75 | listData[i].leftDis=-leftData+'rpx' 76 | } 77 | } 78 | this.setData({ list: listData }) 79 | console.log(this.data.list) 80 | }, 81 | deleteTab:function(event){ 82 | var index = event.currentTarget.dataset.sid; 83 | var listData = this.data.list 84 | for (var i in listData) { 85 | if (i == index) { 86 | listData.splice(index, 1); 87 | } 88 | } 89 | this.setData({ list: listData }) 90 | } 91 | }) -------------------------------------------------------------------------------- /slideDelete/slideDeleteView/pages/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /slideDelete/slideDeleteView/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 内容部分{{item.txt}} 4 | 删除 5 | 6 | -------------------------------------------------------------------------------- /slideDelete/slideDeleteView/pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | .scroll-box{ 2 | display: flex; 3 | width: fit-content; 4 | line-height: 100rpx; 5 | margin-bottom: 1px; 6 | position: relative; 7 | transition: left 0.2s ease-in-out; 8 | } 9 | .scroll-box .content{ 10 | width: 750rpx; 11 | background-color: gray; 12 | } 13 | .scroll-box .delete{ 14 | background-color: red; 15 | width: 160rpx; 16 | text-align: center; 17 | } 18 | -------------------------------------------------------------------------------- /slideDelete/slideDeleteView/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "setting": { 4 | "urlCheck": true, 5 | "es6": true, 6 | "postcss": true, 7 | "minified": true, 8 | "newFeature": true 9 | }, 10 | "compileType": "miniprogram", 11 | "libVersion": "1.9.94", 12 | "appid": "wx1ed9ac6f29a707c1", 13 | "projectname": "sv", 14 | "isGameTourist": false, 15 | "condition": { 16 | "search": { 17 | "current": -1, 18 | "list": [] 19 | }, 20 | "conversation": { 21 | "current": -1, 22 | "list": [] 23 | }, 24 | "game": { 25 | "currentL": -1, 26 | "list": [] 27 | }, 28 | "miniprogram": { 29 | "current": -1, 30 | "list": [] 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /starbook/README.md: -------------------------------------------------------------------------------- 1 | # starbook 2 | 3 | ## 2017年6月的兴趣项目，做的是图书共享的微信小程序 4 | 5 | #### 从市场调研、用户调查，活动组织 6 | #### 从程序原型设计到微信小程序的前端设计和后端设计 7 | 8 | - 原型图 9 | ![image](book.png) 10 | 11 | - 前端是微信小程序 12 | - 后端使用的是node.js的express框架 13 | - 对express中间件有一定的体会，同时对异步回调有一定的认识 14 | - 由于当时水平有限，后端仍需改善 -------------------------------------------------------------------------------- /starbook/book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/book.png -------------------------------------------------------------------------------- /starbook/server/app.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var bodyParser = require('body-parser'); 3 | var routes = require('./routes/index.js'); 4 | 5 | var app = express(); 6 | app.use(bodyParser.json()); 7 | app.use(bodyParser.urlencoded({ extended: false })); 8 | 9 | routes(app); 10 | app.listen(3000, function() { 11 | console.log('success http://localhost:3000'); 12 | }) -------------------------------------------------------------------------------- /starbook/server/lib/mongoose.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | mongoose.Promise = global.Promise; 3 | mongoose.connect('mongodb://localhost:27017/starbook'); 4 | var Schema = mongoose.Schema; 5 | 6 | //用户数据结构 7 | var userSchema = new Schema({ 8 | openid: String, 9 | phoneNum: String, 10 | avatarUrl: String, 11 | nickName: String, 12 | score: { 13 | type: Number, 14 | default: 0 15 | }, 16 | location: { 17 | type: [Number], 18 | index: { 19 | type: '2dsphere', 20 | sparse: true 21 | } 22 | } 23 | }); 24 | exports.userModel = mongoose.model('users', userSchema); 25 | 26 | //图书数据结构 27 | var recordSchema = new Schema({ 28 | openid: String, 29 | bookId: String, 30 | bookTitle: String, 31 | ISBN: String, 32 | feelTitle: String, 33 | feelDetail: String, 34 | inHand: Boolean, 35 | time: { type: Date, default: new Date() } 36 | }); 37 | 38 | exports.recordModel = mongoose.model('records', recordSchema); 39 | 40 | //获取豆瓣数据并储存 41 | var bookSchema = new Schema({ 42 | ISBN: { 43 | type: String, 44 | unique: true 45 | }, 46 | bookTitle: String, 47 | author: String, 48 | image: String, 49 | publisher: String 50 | }) 51 | 52 | exports.bookModel = mongoose.model('books', bookSchema); -------------------------------------------------------------------------------- /starbook/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sharebook", 3 | "version": "1.0.0", 4 | "description": "share book with others", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "seven", 10 | "license": "ISC", 11 | "dependencies": { 12 | "async": "^2.3.0", 13 | "body-parser": "^1.17.1", 14 | "express": "^4.15.2", 15 | "moment": "^2.18.1", 16 | "mongoose": "^4.9.2", 17 | "request": "^2.81.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /starbook/server/routes/addFeel.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | var bookModel = require('../models/book.server.js'); 4 | 5 | //POST /addfeel 6 | router.post('/', function(req, res, next) { 7 | var openid = req.body.openid; 8 | var ISBN = req.body.ISBN; 9 | var feel = {}; 10 | feel.title = req.body.feelTitle; 11 | feel.detail = req.body.feelDetail; 12 | bookModel.addNewFeel(openid, ISBN, feel) 13 | .then(function(result) { 14 | res.send(result); 15 | }) 16 | }); 17 | 18 | 19 | 20 | module.exports = router; -------------------------------------------------------------------------------- /starbook/server/routes/getbook.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | var moment = require('moment'); 4 | var userModel = require('../models/user.server.js'); 5 | var bookModel = require('../models/book.server.js'); 6 | //POST /getbook 7 | router.post('/', function(req, res, next) { 8 | var openid = req.body.openid; 9 | var bookId = req.body.bookId; 10 | bookModel.getbook(bookId, openid) 11 | .then(function(result) { 12 | res.send(result); 13 | }) 14 | }); 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | module.exports = router; -------------------------------------------------------------------------------- /starbook/server/routes/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(app) { 2 | app.get('/', function(req, res) { 3 | res.send('这是主页') 4 | }); 5 | app.use('/register', require('./register')); 6 | app.use('/sharebook', require('./sharebook')); 7 | app.use('/getbook', require('./getbook')); 8 | app.use('/addfeel', require('./addfeel')); 9 | app.use('/nearbook', require('./nearbook')); 10 | app.use('/mybook', require('./mybook')); 11 | app.use('/onebookroad', require('./onebookroad')); 12 | }; -------------------------------------------------------------------------------- /starbook/server/routes/mybook.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | 4 | //POST /mybook 5 | router.post('/', function(req, res, next) { 6 | res.send('这是我的图书'); 7 | }); 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | module.exports = router; -------------------------------------------------------------------------------- /starbook/server/routes/onebookroad.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var bookModel = require('../models/book.server.js'); 3 | var userModel = require('../models/user.server.js'); 4 | var async = require('async'); 5 | var router = express.Router(); 6 | 7 | //POST /onebookroad 8 | router.post('/', function(req, res, next) { 9 | var bookId = req.body.bookId; 10 | bookModel.getOneBookRoad(bookId) 11 | .then(function(result) { 12 | var back = result; 13 | async.map(back, function(item, callback) { 14 | userModel.getPersonDetail(item.openid) 15 | .then(function(r) { 16 | item.openid = r; 17 | bookModel.getBookDetail(item.ISBN) 18 | .then(function(r) { 19 | item.ISBN = r; 20 | callback(null, back); 21 | }) 22 | 23 | }); 24 | }, function(err, r) { 25 | res.send(r); 26 | }) 27 | }) 28 | }); 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | module.exports = router; -------------------------------------------------------------------------------- /starbook/server/routes/register.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var async = require('async'); 3 | var router = express.Router(); 4 | var userModel = require('../models/user.server.js'); 5 | var request = require('request'); 6 | 7 | const APP_ID = 'wx1ed9ac6f29a707c1' 8 | const APP_SECRET = 'c8d90a85afa55a46a940d94a3592fc3e' 9 | 10 | var getOpenid = function(code, callback) { 11 | const url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + 12 | APP_ID + '&secret=' + APP_SECRET + '&js_code=' + code + 13 | '&grant_type=authorization_code'; 14 | request(url, function(err, response, body) { 15 | if (!err && response.statusCode == 200) { 16 | const data = JSON.parse(body) 17 | console.log("[openid]", data.openid); 18 | console.log("[session_key]", data.session_key); 19 | callback(null, data); 20 | } 21 | 22 | }) 23 | } 24 | //GET /getopenid 25 | // router.post('/', function(req, res, next) { 26 | // console.log(req.body); 27 | // var code = req.body.code; 28 | // console.log(code); 29 | // getOpenid(code, function(err, data) { 30 | // res.send(data.openid); 31 | // }) 32 | // }) 33 | 34 | 35 | 36 | //POST /register 37 | router.post('/', function(req, res, next) { 38 | var code = req.body.code; 39 | getOpenid(code, function(err, data) { 40 | var openid = data.openid; 41 | var phoneNum = req.body.phoneNum; 42 | var avatarUrl = req.body.avatarUrl; 43 | var nickName = req.body.nickName; 44 | var latitude = req.body.latitude; 45 | var longitude = req.body.longitude; 46 | var newUser = { 47 | openid: openid, 48 | phoneNum: phoneNum, 49 | avatarUrl: avatarUrl, 50 | nickName: nickName, 51 | location: [longitude, latitude] 52 | } 53 | console.log(newUser); 54 | userModel.create(newUser) 55 | .then(function(result) { 56 | console.log('success'); 57 | 58 | }) 59 | res.send(openid); 60 | 61 | }) 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | }); 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | module.exports = router; 81 | 82 | 83 | 84 | // { 85 | // 'openid': 'sdafjk', 86 | // 'phoneNum' : 123213, 87 | // 'latitude' : 12.88 88 | // 'book' : [{ 89 | // 'openid': 'sdafjk', 90 | // 'phoneNum' : 123213, 91 | // }] 92 | // } -------------------------------------------------------------------------------- /starbook/server/routes/sharebook.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | var moment = require('moment'); 4 | var userModel = require('../models/user.server.js'); 5 | var bookModel = require('../models/book.server.js'); 6 | //POST /sharebook 第一个分享图书 7 | router.post('/', function(req, res, next) { 8 | var openid = req.body.openid; 9 | var ISBN = req.body.ISBN; 10 | var bookTitle = req.body.bookTitle; 11 | 12 | var author = req.body.author; 13 | var image = req.body.image; 14 | var publisher = req.body.publisher; 15 | 16 | var record = { 17 | openid: openid, 18 | ISBN: ISBN, 19 | bookTitle: bookTitle, 20 | inHand: true 21 | }; 22 | var saveBook = { 23 | ISBN: ISBN, 24 | bookTitle: bookTitle, 25 | author: author, 26 | image: image, 27 | publisher: publisher 28 | }; 29 | bookModel.savedouban(saveBook) 30 | .catch(function(err) { 31 | console.log(err); 32 | }) 33 | bookModel.create(record) 34 | .then(function(result) { 35 | userModel.addScore(openid, 30) 36 | .then(function(result) { 37 | res.send(true); 38 | }) 39 | }) 40 | 41 | }); 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | module.exports = router; -------------------------------------------------------------------------------- /starbook/wxApp/app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | var that = this; 5 | wx.login({ 6 | success: function (res) { 7 | var code = res.code; 8 | if (code) { 9 | // console.log('获取用户登录凭证：' + code); 10 | } else { 11 | // console.log('获取用户登录态失败：' + res.errMsg); 12 | } 13 | wx.getUserInfo({ 14 | success: function (res) { 15 | // console.log(res); 16 | that.globalData.userInfo = res.userInfo; 17 | wx.setStorageSync('userInfo', res.userInfo); 18 | wx.setStorageSync('code', code); 19 | } 20 | }) 21 | } 22 | }) 23 | }, 24 | globalData: { 25 | userInfo: {} 26 | } 27 | }) -------------------------------------------------------------------------------- /starbook/wxApp/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/bookStore/bookStore", 4 | "pages/more/shareFeel/shareFeel", 5 | "pages/more/getBook/getBook", 6 | "pages/more/shareBook/shareBook", 7 | "pages/more/more", 8 | "pages/login/login", 9 | "pages/bookStore/bookMore/bookMore", 10 | "pages/bookStore/bookSortMore/bookSortMore", 11 | "pages/nearBook/nearBook", 12 | "pages/nearBook/nearBookList/nearBookList", 13 | "pages/bookStore/bookItem/bookItem", 14 | "pages/myself/myself", 15 | "pages/myself/aboutUs/aboutUs", 16 | "pages/myself/myTip/myTip", 17 | "pages/myself/bookTime/bookTime", 18 | "pages/myself/myFeel/myFeel", 19 | "pages/myself/book/book", 20 | "pages/feel/feel" 21 | 22 | ], 23 | "window": { 24 | "backgroundTextStyle": "light", 25 | "navigationBarBackgroundColor": "#1e8ae8", 26 | "navigationBarTitleText": "星布书途", 27 | "navigationBarTextStyle": "white" 28 | }, 29 | "tabBar": { 30 | "borderStyle": "white", 31 | "color": "black", 32 | "selectedColor": "#1e8ae8", 33 | "backgroundColor": "#ffffff", 34 | "list": [ 35 | { 36 | "pagePath": "pages/bookStore/bookStore", 37 | "text": "书城", 38 | "iconPath": "images/tabBar/bookStore.png", 39 | "selectedIconPath": "images/tabBar/bookStoreSelect.png" 40 | }, 41 | { 42 | "pagePath": "pages/nearBook/nearBook", 43 | "text": "附近", 44 | "iconPath": "images/tabBar/nearBook.png", 45 | "selectedIconPath": "images/tabBar/nearBookSelect.png" 46 | }, 47 | { 48 | "pagePath": "pages/more/more", 49 | "text": "", 50 | "iconPath": "images/tabBar/more.png", 51 | "selectedIconPath": "images/tabBar/moreSelect.png" 52 | }, 53 | { 54 | "pagePath": "pages/feel/feel", 55 | "text": "心得", 56 | "iconPath": "images/tabBar/feel.png", 57 | "selectedIconPath": "images/tabBar/feelSelect.png" 58 | }, 59 | { 60 | "pagePath": "pages/myself/myself", 61 | "text": "我", 62 | "iconPath": "images/tabBar/myself.png", 63 | "selectedIconPath": "images/tabBar/myselfSelect.png" 64 | } 65 | ] 66 | } 67 | } -------------------------------------------------------------------------------- /starbook/wxApp/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: space-between; 8 | padding: 200rpx 0; 9 | box-sizing: border-box; 10 | } 11 | -------------------------------------------------------------------------------- /starbook/wxApp/data/bookStore.js: -------------------------------------------------------------------------------- 1 | var sort = [{ 2 | image: '/images/bookStore/sort1.png' 3 | }, 4 | { 5 | image: '/images/bookStore/sort2.png' 6 | }, 7 | { 8 | image: '/images/bookStore/sort3.png', 9 | }, 10 | { 11 | image: '/images/bookStore/sort4.png', 12 | } 13 | ]; 14 | var book = [{ 15 | image: '/images/bookStore/book1.jpg', 16 | bookTitle: '红楼梦', 17 | author: "曹雪芹", 18 | publisher: "中国出版社" 19 | }, 20 | { 21 | image: '/images/bookStore/book2.jpg', 22 | bookTitle: '挪威的森林', 23 | author: "村上春树", 24 | publisher: "中国出版社" 25 | 26 | }, 27 | { 28 | image: '/images/bookStore/book3.jpg', 29 | bookTitle: '小王子', 30 | author: "安托万·德·圣-埃克苏佩里", 31 | publisher: "中国出版社" 32 | }, 33 | { 34 | image: '/images/bookStore/book4.jpg', 35 | bookTitle: '追风筝的人', 36 | author: "卡勒德·胡赛尼", 37 | publisher: "上海出版社" 38 | }, 39 | { 40 | image: '/images/bookStore/book5.jpg', 41 | bookTitle: '三体', 42 | author: "刘慈欣", 43 | publisher: "上海出版社" 44 | }, 45 | { 46 | image: '/images/bookStore/book6.jpg', 47 | bookTitle: '人格心理学', 48 | author: "JerryM burger", 49 | publisher: "上海出版社" 50 | }, 51 | { 52 | image: '/images/bookStore/book7.jpg', 53 | bookTitle: '活着', 54 | author: "余华", 55 | publisher: "上海出版社" 56 | }, 57 | { 58 | image: '/images/bookStore/book8.jpg', 59 | bookTitle: '解忧杂货铺', 60 | author: "东野圭吾", 61 | publisher: "上海出版社" 62 | } 63 | ]; 64 | module.exports = { 65 | sort: sort, 66 | book: book 67 | } -------------------------------------------------------------------------------- /starbook/wxApp/data/feel.js: -------------------------------------------------------------------------------- 1 | var feel = [{ 2 | avatarUrl: '/images/nearBook/avatar1.png', 3 | nickName: '风中', 4 | time: '2017-4-22', 5 | feel: '如果你喜欢上了一个男生，但是有另一个比你优秀的女生和你争，那你应该怎么做呢？妈妈说，首先你应该了解这个女生，看看你和她的差距在哪里，哪些事情她做到了，而你却没有做到，学习她好的一面，忽略她不好的一面，最终做的和她一样好' 6 | }, 7 | { 8 | avatarUrl: '/images/nearBook/avatar2.png', 9 | nickName: '独自', 10 | time: '2017-3-27', 11 | feel: ' 凡事先反思一下自己，是不是做得有问题，别老是忙着怪别人态度不好。能指出你哪儿不对并且分享她的做事方法的同事，多难得啊！不管别人出于什么目的，客观上都会促进你进步。' 12 | }, 13 | { 14 | avatarUrl: '/images/nearBook/avatar2.png', 15 | nickName: '并不知道昵称', 16 | time: '2017-3-27', 17 | feel: '凡事要做什么都要谨慎，无论这个故事是什么，我们都要去做，去尝试' 18 | }, 19 | { 20 | avatarUrl: '/images/nearBook/avatar4.png', 21 | nickName: '艾伦.艾弗森', 22 | time: '2017-2-8', 23 | feel: '我承认不是很多事情，自己喊两句励志口号，就一冲而上的硬碰硬的搞定。反而越来越依赖自己柔韧的心灵，与生活赐予我的各种好与坏抗衡。就像古人说的：改变可以改变的，接受不能改变的。并且慢慢获取鉴别而这的智慧。' 24 | } 25 | 26 | ]; 27 | module.exports = feel; -------------------------------------------------------------------------------- /starbook/wxApp/data/myself.js: -------------------------------------------------------------------------------- 1 | var borrowBook = [{ 2 | image: '/images/bookStore/book1.jpg', 3 | leftTime: '7' 4 | }, 5 | { 6 | image: '/images/bookStore/book2.jpg', 7 | leftTime: '8' 8 | }, 9 | { 10 | image: '/images/bookStore/book3.jpg', 11 | leftTime: '28' 12 | }, 13 | { 14 | image: '/images/bookStore/book4.jpg', 15 | leftTime: '20' 16 | }, 17 | { 18 | image: '/images/bookStore/book5.jpg', 19 | leftTime: '19' 20 | }, 21 | { 22 | image: '/images/bookStore/book6.jpg', 23 | leftTime: '28' 24 | } 25 | ]; 26 | var shareBook = [{ 27 | image: '/images/bookStore/book4.jpg', 28 | bookTitle: '追风筝的人' 29 | }, 30 | { 31 | image: '/images/bookStore/book5.jpg', 32 | bookTitle: '三体' 33 | }, 34 | { 35 | image: '/images/bookStore/book6.jpg', 36 | bookTitle: '人格心理学' 37 | } 38 | ]; 39 | var bookTime = [{ 40 | image: '/images/bookStore/book1.jpg', 41 | readTime: '2017-3-1' 42 | }, 43 | { 44 | image: '/images/bookStore/book2.jpg', 45 | readTime: '2017-2-8' 46 | }, 47 | { 48 | image: '/images/bookStore/book3.jpg', 49 | readTime: '2016-12-1' 50 | }, 51 | { 52 | image: '/images/bookStore/book4.jpg', 53 | readTime: '2016-11-3' 54 | }, 55 | { 56 | image: '/images/bookStore/book5.jpg', 57 | readTime: '2016-10-3' 58 | }, 59 | { 60 | image: '/images/bookStore/book6.jpg', 61 | readTime: '2016-7-9' 62 | } 63 | ]; 64 | module.exports = { 65 | borrowBook: borrowBook, 66 | shareBook: shareBook, 67 | bookTime: bookTime 68 | }; -------------------------------------------------------------------------------- /starbook/wxApp/images/bookStore/book1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/bookStore/book1.jpg -------------------------------------------------------------------------------- /starbook/wxApp/images/bookStore/book2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/bookStore/book2.jpg -------------------------------------------------------------------------------- /starbook/wxApp/images/bookStore/book3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/bookStore/book3.jpg -------------------------------------------------------------------------------- /starbook/wxApp/images/bookStore/book4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/bookStore/book4.jpg -------------------------------------------------------------------------------- /starbook/wxApp/images/bookStore/book5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/bookStore/book5.jpg -------------------------------------------------------------------------------- /starbook/wxApp/images/bookStore/book6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/bookStore/book6.jpg -------------------------------------------------------------------------------- /starbook/wxApp/images/bookStore/book7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/bookStore/book7.jpg -------------------------------------------------------------------------------- /starbook/wxApp/images/bookStore/book8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/bookStore/book8.jpg -------------------------------------------------------------------------------- /starbook/wxApp/images/bookStore/sort1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/bookStore/sort1.png -------------------------------------------------------------------------------- /starbook/wxApp/images/bookStore/sort2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/bookStore/sort2.png -------------------------------------------------------------------------------- /starbook/wxApp/images/bookStore/sort3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/bookStore/sort3.png -------------------------------------------------------------------------------- /starbook/wxApp/images/bookStore/sort4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/bookStore/sort4.png -------------------------------------------------------------------------------- /starbook/wxApp/images/bookStore/swiper1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/bookStore/swiper1.jpg -------------------------------------------------------------------------------- /starbook/wxApp/images/bookStore/swiper2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/bookStore/swiper2.jpg -------------------------------------------------------------------------------- /starbook/wxApp/images/bookStore/swiper3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/bookStore/swiper3.jpg -------------------------------------------------------------------------------- /starbook/wxApp/images/more/back.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/more/back.jpg -------------------------------------------------------------------------------- /starbook/wxApp/images/myself/aboutUs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/myself/aboutUs.png -------------------------------------------------------------------------------- /starbook/wxApp/images/myself/book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/myself/book.png -------------------------------------------------------------------------------- /starbook/wxApp/images/myself/bookTime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/myself/bookTime.png -------------------------------------------------------------------------------- /starbook/wxApp/images/myself/chat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/myself/chat.png -------------------------------------------------------------------------------- /starbook/wxApp/images/myself/myFeel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/myself/myFeel.png -------------------------------------------------------------------------------- /starbook/wxApp/images/myself/myTip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/myself/myTip.png -------------------------------------------------------------------------------- /starbook/wxApp/images/nearBook/avatar1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/nearBook/avatar1.png -------------------------------------------------------------------------------- /starbook/wxApp/images/nearBook/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/nearBook/avatar2.png -------------------------------------------------------------------------------- /starbook/wxApp/images/nearBook/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/nearBook/avatar3.png -------------------------------------------------------------------------------- /starbook/wxApp/images/nearBook/avatar4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/nearBook/avatar4.png -------------------------------------------------------------------------------- /starbook/wxApp/images/tabBar/bookStore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/tabBar/bookStore.png -------------------------------------------------------------------------------- /starbook/wxApp/images/tabBar/bookStoreSelect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/tabBar/bookStoreSelect.png -------------------------------------------------------------------------------- /starbook/wxApp/images/tabBar/feel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/tabBar/feel.png -------------------------------------------------------------------------------- /starbook/wxApp/images/tabBar/feelSelect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/tabBar/feelSelect.png -------------------------------------------------------------------------------- /starbook/wxApp/images/tabBar/more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/tabBar/more.png -------------------------------------------------------------------------------- /starbook/wxApp/images/tabBar/moreSelect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/tabBar/moreSelect.png -------------------------------------------------------------------------------- /starbook/wxApp/images/tabBar/myself.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/tabBar/myself.png -------------------------------------------------------------------------------- /starbook/wxApp/images/tabBar/myselfSelect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/tabBar/myselfSelect.png -------------------------------------------------------------------------------- /starbook/wxApp/images/tabBar/nearBook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/tabBar/nearBook.png -------------------------------------------------------------------------------- /starbook/wxApp/images/tabBar/nearBookSelect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seven-share/vueAndMiniApp/c3c9c1e58636fd38bc87dc2366ff28343e4db332/starbook/wxApp/images/tabBar/nearBookSelect.png -------------------------------------------------------------------------------- /starbook/wxApp/pages/bookStore/bookItem/bookItem.js: -------------------------------------------------------------------------------- 1 | // pages/bookStore/bookItem/bookItem.js 2 | Page({ 3 | data: {}, 4 | onLoad: function (options) { 5 | // 页面初始化 options为页面跳转所带来的参数 6 | var bookItem = JSON.parse(options.bookItem); 7 | console.log(bookItem); 8 | this.setData({ 9 | bookItem 10 | }) 11 | }, 12 | onReady: function () { 13 | // 页面渲染完成 14 | }, 15 | borrow: function () { 16 | wx.showModal({ 17 | title: '确认借阅', 18 | content: '加入借阅车，请选择完毕后，在个人页面一次性下单', 19 | success: function (res) { 20 | if (res.confirm) { 21 | wx.navigateBack(); 22 | } else if (!res.cancel) { 23 | wx.showToast({ 24 | title: '我再看看', 25 | icon: 'success', 26 | duration: 1000 27 | }) 28 | } 29 | } 30 | }) 31 | } 32 | }) -------------------------------------------------------------------------------- /starbook/wxApp/pages/bookStore/bookItem/bookItem.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /starbook/wxApp/pages/bookStore/bookItem/bookItem.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 书名：{{bookItem.bookTitle}} 8 | 作者：{{bookItem.author}} 9 | 出版社：{{bookItem.publisher}} 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | {{item.nickName}} 20 | 21 | {{item.time}} 22 | 23 | {{item.feel}} 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 昵称 37 | 38 | 2017-4-21 39 | 40 | 41 | 凡事先反思一下自己，是不是做得有问题，别老是忙着怪别人态度不好。能指出你哪儿不对并且分享她的做事方法的同事，多难得啊！不管别人出于什么目的，客观上都会促进你进步。————若是它真的要走，不会理你是不是一无所有 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /starbook/wxApp/pages/bookStore/bookItem/bookItem.wxss: -------------------------------------------------------------------------------- 1 | /* pages/bookStore/bookItem/bookItem.wxss */ 2 | page{ 3 | background-color: #bfbfbf; 4 | } 5 | .border{ 6 | border: 1px white solid; 7 | margin: 20rpx 10rpx; 8 | border-radius: 20rpx; 9 | background-color: white; 10 | } 11 | .contenter{ 12 | margin: 20rpx; 13 | display: flex; 14 | flex-direction: row; 15 | } 16 | image{ 17 | height: 230rpx; 18 | width: 162rpx; 19 | margin-right: 20rpx; 20 | } 21 | .bookInfo view{ 22 | margin-top: 20rpx; 23 | } 24 | .person{ 25 | margin: 20rpx; 26 | position: relative; 27 | display: flex; 28 | flex-direction: row; 29 | } 30 | .person image{ 31 | width: 50rpx; 32 | height: 50rpx; 33 | margin-right: 20rpx; 34 | 35 | } 36 | .time{ 37 | position: absolute; 38 | right: 0rpx; 39 | font-size: 28rpx; 40 | } 41 | .feel{ 42 | margin: 20rpx; 43 | font-size: 27rpx; 44 | line-height: 40rpx; 45 | } 46 | button{ 47 | background-color: #1e8ae8; 48 | width: 600rpx; 49 | position: fixed; 50 | bottom: 30rpx; 51 | left: 80rpx; 52 | } -------------------------------------------------------------------------------- /starbook/wxApp/pages/bookStore/bookMore/bookMore.js: -------------------------------------------------------------------------------- 1 | // pages/bookStore/bookMore/bookMore.js 2 | var firstPage = require('../../../data/bookStore.js'); 3 | Page({ 4 | data:{ 5 | book: firstPage.book 6 | }, 7 | onLoad:function(options){ 8 | // 页面初始化 options为页面跳转所带来的参数 9 | }, 10 | onReady:function(){ 11 | // 页面渲染完成 12 | }, 13 | onShow:function(){ 14 | // 页面显示 15 | }, 16 | onHide:function(){ 17 | // 页面隐藏 18 | }, 19 | onUnload:function(){ 20 | // 页面关闭 21 | }, 22 | tapBook: function (event) { 23 | var bookItemObject = event.currentTarget.dataset.bookItem; 24 | var bookItemJson=JSON.stringify(bookItemObject); 25 | console.log(bookItemJson); 26 | wx.navigateTo({ 27 | url: '/pages/bookStore/bookItem/bookItem?bookItem='+bookItemJson 28 | }) 29 | }, 30 | searchSubmit:function(e){ 31 | console.log(e); 32 | } 33 | }) -------------------------------------------------------------------------------- /starbook/wxApp/pages/bookStore/bookMore/bookMore.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "书城" 3 | } -------------------------------------------------------------------------------- /starbook/wxApp/pages/bookStore/bookMore/bookMore.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 | {{item.bookTitle}} 16 | 17 | 18 | -------------------------------------------------------------------------------- /starbook/wxApp/pages/bookStore/bookMore/bookMore.wxss: -------------------------------------------------------------------------------- 1 | /* pages/bookStore/bookMore/bookMore.wxss */ 2 | 3 | .search { 4 | height: 70rpx; 5 | background-color: #bfbfbf; 6 | padding: 15rpx 0rpx 15rpx 50rpx; 7 | display: flex; 8 | flex-direction: row; 9 | margin: 10rpx; 10 | border-radius: 10rpx; 11 | } 12 | 13 | input { 14 | width: 400rpx; 15 | height: 70rpx; 16 | background-color: white; 17 | border-radius: 10rpx; 18 | } 19 | 20 | button { 21 | width: 150rpx; 22 | height: 70rpx; 23 | line-height: 70rpx; 24 | margin-left: 60rpx; 25 | } 26 | 27 | .bookStore { 28 | display: flex; 29 | flex-direction: row; 30 | flex-wrap: wrap; 31 | } 32 | 33 | .book { 34 | display: flex; 35 | flex-direction: column; 36 | margin-left: 20rpx; 37 | margin-bottom: 20rpx; 38 | } 39 | 40 | .book image { 41 | height: 230rpx; 42 | width: 162rpx; 43 | margin-bottom: 5rpx; 44 | } 45 | 46 | .book text { 47 | font-size: 30rpx; 48 | } 49 | -------------------------------------------------------------------------------- /starbook/wxApp/pages/bookStore/bookSortMore/bookSortMore.js: -------------------------------------------------------------------------------- 1 | // pages/bookStore/bookSortMore/bookSortMore.js 2 | var firstPage = require('../../../data/bookStore.js'); 3 | Page({ 4 | data:{ 5 | sort: firstPage.sort 6 | }, 7 | onLoad:function(options){ 8 | // 页面初始化 options为页面跳转所带来的参数 9 | }, 10 | onReady:function(){ 11 | // 页面渲染完成 12 | }, 13 | onShow:function(){ 14 | // 页面显示 15 | }, 16 | onHide:function(){ 17 | // 页面隐藏 18 | }, 19 | onUnload:function(){ 20 | // 页面关闭 21 | } 22 | }) -------------------------------------------------------------------------------- /starbook/wxApp/pages/bookStore/bookSortMore/bookSortMore.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "图书专辑" 3 | } -------------------------------------------------------------------------------- /starbook/wxApp/pages/bookStore/bookSortMore/bookSortMore.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /starbook/wxApp/pages/bookStore/bookSortMore/bookSortMore.wxss: -------------------------------------------------------------------------------- 1 | /* pages/bookStore/bookSortMore/bookSortMore.wxss */ 2 | .sort{ 3 | margin-top: 30rpx; 4 | } 5 | .sort image{ 6 | height: 140rpx; 7 | width: 345rpx; 8 | margin-left: 20rpx; 9 | } -------------------------------------------------------------------------------- /starbook/wxApp/pages/bookStore/bookStore.js: -------------------------------------------------------------------------------- 1 | // pages/bookStore/bookStore.js 2 | var firstPage = require('../../data/bookStore.js'); 3 | Page({ 4 | data: { 5 | swiperImage: [ 6 | '/images/bookStore/swiper1.jpg', 7 | '/images/bookStore/swiper2.jpg', 8 | '/images/bookStore/swiper3.jpg' 9 | ], 10 | indicatorDots: true, 11 | autoplay: true, 12 | interval: 3000, 13 | duration: 1000, 14 | sort: firstPage.sort, 15 | book: firstPage.book 16 | }, 17 | onLoad: function (options) { 18 | // 页面初始化 options为页面跳转所带来的参数 19 | }, 20 | onReady: function () { 21 | // 页面渲染完成 22 | }, 23 | tapBook: function (event) { 24 | var bookItemObject = event.currentTarget.dataset.bookItem; 25 | var bookItemJson=JSON.stringify(bookItemObject); 26 | console.log(bookItemJson); 27 | wx.navigateTo({ 28 | url: '/pages/bookStore/bookItem/bookItem?bookItem='+bookItemJson 29 | }) 30 | }, 31 | tapSortMore:function(){ 32 | wx.navigateTo({ 33 | url: '/pages/bookStore/bookSortMore/bookSortMore' 34 | }) 35 | }, 36 | tapBookMore:function(){ 37 | wx.navigateTo({ 38 | url: '/pages/bookStore/bookMore/bookMore' 39 | }) 40 | } 41 | }) -------------------------------------------------------------------------------- /starbook/wxApp/pages/bookStore/bookStore.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /starbook/wxApp/pages/bookStore/bookStore.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 | 37 | 38 | {{item.bookTitle}} 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /starbook/wxApp/pages/bookStore/bookStore.wxss: -------------------------------------------------------------------------------- 1 | /* pages/bookStore/bookStore.wxss */ 2 | swiper-item image{ 3 | width: 100%; 4 | height: 400rpx; 5 | } 6 | .subjectTitle{ 7 | color: white; 8 | background-color: #1e8ae8; 9 | border-radius: 20rpx; 10 | height: 80rpx; 11 | margin: 30rpx 20rpx 10rpx; 12 | } 13 | .subjectTitle text{ 14 | line-height: 80rpx; 15 | } 16 | .subjectTitle .label{ 17 | margin-left: 300rpx; 18 | } 19 | .subjectTitle .more{ 20 | margin-left: 200rpx; 21 | font-size: 30rpx; 22 | } 23 | .sort image{ 24 | height: 140rpx; 25 | width: 345rpx; 26 | margin-left: 20rpx; 27 | } 28 | .bookStore{ 29 | display: flex; 30 | flex-direction: row; 31 | flex-wrap: wrap; 32 | } 33 | .book{ 34 | display: flex; 35 | flex-direction: column; 36 | margin-left: 20rpx; 37 | margin-bottom: 20rpx; 38 | } 39 | .book image{ 40 | height: 230rpx; 41 | width: 162rpx; 42 | margin-bottom: 5rpx; 43 | } 44 | .book text{ 45 | font-size: 30rpx; 46 | } -------------------------------------------------------------------------------- /starbook/wxApp/pages/feel/feel.js: -------------------------------------------------------------------------------- 1 | // pages/feel/feel.js 2 | var feel = require('../../data/feel.js'); 3 | Page({ 4 | data: {}, 5 | onLoad: function (options) { 6 | // 页面初始化 options为页面跳转所带来的参数 7 | this.setData({ 8 | feel 9 | }); 10 | }, 11 | onReady: function () { 12 | // 页面渲染完成 13 | }, 14 | onShow: function () { 15 | // 页面显示 16 | }, 17 | onHide: function () { 18 | // 页面隐藏 19 | }, 20 | onUnload: function () { 21 | // 页面关闭 22 | } 23 | }) -------------------------------------------------------------------------------- /starbook/wxApp/pages/feel/feel.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /starbook/wxApp/pages/feel/feel.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | {{item.nickName}} 9 | 10 | {{item.time}} 11 | 12 | {{item.feel}} 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 昵称 27 | 28 | 2017-4-21 29 | 30 | 31 | 凡事先反思一下自己，是不是做得有问题，别老是忙着怪别人态度不好。能指出你哪儿不对并且分享她的做事方法的同事，多难得啊！不管别人出于什么目的，客观上都会促进你进步。————若是它真的要走，不会理你是不是一无所有 32 | 33 | -------------------------------------------------------------------------------- /starbook/wxApp/pages/feel/feel.wxss: -------------------------------------------------------------------------------- 1 | /* pages/feel/feel.wxss */ 2 | page{ 3 | background-color: #bfbfbf; 4 | } 5 | .border{ 6 | border: 1px white solid; 7 | margin: 20rpx 10rpx; 8 | border-radius: 20rpx; 9 | background-color: white; 10 | } 11 | .person{ 12 | margin: 20rpx; 13 | position: relative; 14 | display: flex; 15 | flex-direction: row; 16 | } 17 | .person image{ 18 | width: 50rpx; 19 | height: 50rpx; 20 | margin-right: 20rpx; 21 | 22 | } 23 | .time{ 24 | position: absolute; 25 | right: 0rpx; 26 | font-size: 28rpx; 27 | } 28 | .feel{ 29 | margin: 20rpx; 30 | font-size: 27rpx; 31 | line-height: 40rpx; 32 | } -------------------------------------------------------------------------------- /starbook/wxApp/pages/login/login.js: -------------------------------------------------------------------------------- 1 | // pages/login/login.js 2 | var app = getApp(); 3 | Page({ 4 | data: {}, 5 | onLoad: function (options) { 6 | // 页面初始化 options为页面跳转所带来的参数 7 | this.setData({ 8 | avatarUrl: app.globalData.userInfo.avatarUrl, 9 | nickName: app.globalData.userInfo.nickName 10 | }) 11 | }, 12 | onReady: function () { 13 | wx.getLocation({ 14 | type: 'wgs84', 15 | success: function (res) { 16 | var latitude = res.latitude 17 | var longitude = res.longitude 18 | wx.setStorageSync('latitude', latitude); 19 | wx.setStorageSync('longitude', longitude); 20 | } 21 | }) 22 | 23 | 24 | }, 25 | formBindsubmit: function (e) { 26 | if (isNaN(e.detail.value.phoneNum) || e.detail.value.phoneNum.length != 11) { 27 | wx.showToast({ 28 | title: '请正确输入手机号', 29 | icon: 'loading', 30 | duration: 2000 31 | }) 32 | } else { 33 | wx.switchTab({ 34 | url: '/pages/myself/myself' 35 | }); 36 | // var phoneNum = e.detail.value.phoneNum; 37 | // var code = wx.getStorageSync('code'); 38 | // var userInfo = wx.getStorageSync('userInfo'); 39 | // var latitude = wx.getStorageSync('latitude'); 40 | // var longitude = wx.getStorageSync('longitude'); 41 | // wx.request({ 42 | // url: 'http://localhost:3000/register', 43 | // method: 'POST', 44 | // data: { 45 | // code:code, 46 | // avatarUrl: userInfo.avatarUrl, 47 | // nickName: userInfo.nickName, 48 | // phoneNum: phoneNum, 49 | // latitude: latitude, 50 | // longitude: longitude 51 | // }, 52 | // success: function (res) { 53 | // wx.setStorageSync('openid', res.data); 54 | // wx.showToast({ 55 | // title: '注册成功', 56 | // icon: 'success', 57 | // duration: 5000, 58 | // success: function (res) { 59 | // wx.switchTab({ 60 | // url: '/pages/myself/myself' 61 | // }) 62 | // } 63 | // }) 64 | 65 | // } 66 | // }) 67 | } 68 | } 69 | }) -------------------------------------------------------------------------------- /starbook/wxApp/pages/login/login.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "注册" 3 | } -------------------------------------------------------------------------------- /starbook/wxApp/pages/login/login.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 16 |
-------------------------------------------------------------------------------- /starbook/wxApp/pages/login/login.wxss: -------------------------------------------------------------------------------- 1 | /* pages/login/login.wxss */ 2 | .login{ 3 | text-align: center; 4 | margin-top: 200rpx; 5 | } 6 | .login image{ 7 | width: 200rpx; 8 | height: 200rpx; 9 | } 10 | .personMessage{ 11 | margin-top: 50rpx; 12 | } 13 | .title{ 14 | color: #1e8ae8; 15 | font-weight: bold; 16 | margin-bottom: 10rpx; 17 | } 18 | input{ 19 | width: 400rpx; 20 | border-bottom: black solid 1px; 21 | margin: 0 auto; 22 | } 23 | button{ 24 | width: 80%; 25 | background-color: #1e8ae8; 26 | position: fixed; 27 | bottom: 30rpx; 28 | left: 80rpx; 29 | } -------------------------------------------------------------------------------- /starbook/wxApp/pages/login/loginConform/loginConform.js: -------------------------------------------------------------------------------- 1 | // pages/login/loginConform/loginConform.js 2 | Page({ 3 | data:{}, 4 | onLoad:function(options){ 5 | // 页面初始化 options为页面跳转所带来的参数 6 | }, 7 | onReady:function(){ 8 | // 页面渲染完成 9 | }, 10 | onShow:function(){ 11 | // 页面显示 12 | }, 13 | onHide:function(){ 14 | // 页面隐藏 15 | }, 16 | onUnload:function(){ 17 | // 页面关闭 18 | } 19 | }) -------------------------------------------------------------------------------- /starbook/wxApp/pages/login/loginConform/loginConform.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "验证码" 3 | } -------------------------------------------------------------------------------- /starbook/wxApp/pages/login/loginConform/loginConform.wxml: -------------------------------------------------------------------------------- 1 | 2 | 验证码 3 | 4 | 5 | -------------------------------------------------------------------------------- /starbook/wxApp/pages/login/loginConform/loginConform.wxss: -------------------------------------------------------------------------------- 1 | /* pages/login/loginConform/loginConform.wxss */ 2 | .loginConform{ 3 | text-align: center; 4 | margin-top: 500rpx; 5 | color: #1e8ae8; 6 | font-weight: bold; 7 | } 8 | input{ 9 | margin: 20rpx auto; 10 | width: 300rpx; 11 | height: 80rpx; 12 | border: black solid 1px; 13 | text-align: center; 14 | } 15 | button{ 16 | width: 80%; 17 | background-color: #1e8ae8; 18 | margin-top: 480rpx; 19 | } -------------------------------------------------------------------------------- /starbook/wxApp/pages/more/getBook/getBook.js: -------------------------------------------------------------------------------- 1 | // pages/more/getBook/getBook.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | getBook:function(e){ 25 | var id = e.detail.value.id; 26 | console.log(id); 27 | if(id==""){ 28 | wx.showToast({ 29 | title: '请输入图书ID', 30 | icon: 'loading', 31 | duration: 2000 32 | }) 33 | }else{ 34 | wx.showToast({ 35 | title: '分享成功', 36 | icon: 'success', 37 | duration: 4000, 38 | success:function(){ 39 | wx.switchTab({ 40 | url: '/pages/more/more' 41 | }); 42 | } 43 | }) 44 | 45 | } 46 | } 47 | 48 | }) -------------------------------------------------------------------------------- /starbook/wxApp/pages/more/getBook/getBook.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /starbook/wxApp/pages/more/getBook/getBook.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 输入图书ID 6 | 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /starbook/wxApp/pages/more/getBook/getBook.wxss: -------------------------------------------------------------------------------- 1 | /* pages/more/getBook/getBook.wxss */ 2 | page{ 3 | background-color: #bfbfbf; 4 | } 5 | .get{ 6 | margin-top: 350rpx; 7 | } 8 | .get text{ 9 | margin-left: 280rpx 10 | } 11 | input{ 12 | background-color: white; 13 | height: 100rpx; 14 | width: 60%; 15 | margin: 80rpx auto; 16 | } 17 | button{ 18 | width: 80%; 19 | } -------------------------------------------------------------------------------- /starbook/wxApp/pages/more/more.js: -------------------------------------------------------------------------------- 1 | // pages/more/more.js 2 | Page({ 3 | data:{}, 4 | onLoad:function(options){ 5 | // 页面初始化 options为页面跳转所带来的参数 6 | }, 7 | onReady:function(){ 8 | // 页面渲染完成 9 | }, 10 | onShow:function(){ 11 | // 页面显示 12 | }, 13 | onHide:function(){ 14 | // 页面隐藏 15 | }, 16 | onUnload:function(){ 17 | // 页面关闭 18 | }, 19 | shareBook: function () { 20 | wx.scanCode({ 21 | success: function (res) { 22 | console.log("将带isbn数据跳转" + res.result); 23 | var isbn = res.result; 24 | // wx.showModal({ 25 | // title: '提示', 26 | // content: isbn, 27 | // success: function (res) { 28 | // if (res.confirm) { 29 | // console.log('用户点击确定') 30 | // } else if (res.cancel) { 31 | // console.log('用户点击取消') 32 | // } 33 | // } 34 | // }) 35 | if (isbn) { 36 | wx.navigateTo({ 37 | url: './shareBook/shareBook?isbn=' + isbn 38 | }) 39 | } 40 | }, 41 | fail: function (err) { 42 | console.log(err); 43 | } 44 | }) 45 | }, 46 | getBook:function(){ 47 | wx.navigateTo({ 48 | url: './getBook/getBook' 49 | }) 50 | }, 51 | 52 | shareFeel: function () { 53 | wx.navigateTo({ 54 | url: './shareFeel/shareFeel' 55 | }) 56 | } 57 | 58 | }) -------------------------------------------------------------------------------- /starbook/wxApp/pages/more/more.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /starbook/wxApp/pages/more/more.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /starbook/wxApp/pages/more/more.wxss: -------------------------------------------------------------------------------- 1 | /* pages/more/more.wxss */ 2 | image{ 3 | height: 1334rpx; 4 | width: 750rpx; 5 | } 6 | .button{ 7 | position: fixed; 8 | bottom: 20rpx; 9 | } 10 | button{ 11 | background-color: #1e8ae8; 12 | width: 600rpx; 13 | margin: 30rpx 80rpx; 14 | } -------------------------------------------------------------------------------- /starbook/wxApp/pages/more/shareBook/shareBook.js: -------------------------------------------------------------------------------- 1 | // pages/more/shareBook/shareBook.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | var isbn = options.isbn; 16 | var that = this; 17 | wx.request({ 18 | url: 'https://api.douban.com/v2/book/isbn/' + isbn + '?fields=images,title,author,publisher', 19 | header: { 20 | 'content-type': 'application/json' 21 | }, 22 | success: function (res) { 23 | console.log(res.data); 24 | var bookMessage = { 25 | image: res.data.images.large, 26 | title: res.data.title, 27 | author: res.data.author[0], 28 | publisher: res.data.publisher 29 | } 30 | that.setData({ 31 | bookMessage 32 | }) 33 | 34 | } 35 | }) 36 | }, 37 | shareConfirm:function(){ 38 | 39 | wx.showToast({ 40 | title: '分享成功', 41 | icon: 'success', 42 | duration: 4000, 43 | success:function(){ 44 | wx.switchTab({ 45 | url: '/pages/more/more' 46 | }); 47 | } 48 | }) 49 | 50 | 51 | }, 52 | /** 53 | * 生命周期函数--监听页面初次渲染完成 54 | */ 55 | onReady: function () { 56 | 57 | }, 58 | 59 | /** 60 | * 生命周期函数--监听页面显示 61 | */ 62 | onShow: function () { 63 | 64 | }, 65 | 66 | /** 67 | * 生命周期函数--监听页面隐藏 68 | */ 69 | onHide: function () { 70 | 71 | }, 72 | 73 | /** 74 | * 生命周期函数--监听页面卸载 75 | */ 76 | onUnload: function () { 77 | 78 | } 79 | }) -------------------------------------------------------------------------------- /starbook/wxApp/pages/more/shareBook/shareBook.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "确认分享" 3 | } -------------------------------------------------------------------------------- /starbook/wxApp/pages/more/shareBook/shareBook.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{bookMessage.title}} 6 | {{bookMessage.author}} 7 | {{bookMessage.publisher}} 8 | 9 |