├── .gitignore ├── LICENSE ├── docs ├── .DS_Store ├── .vuepress │ ├── .DS_Store │ ├── config.js │ ├── dist │ │ ├── 404.html │ │ ├── activities │ │ │ └── index.html │ │ ├── api │ │ │ └── index.html │ │ ├── assets │ │ │ ├── css │ │ │ │ └── 0.styles.50aae8d8.css │ │ │ ├── img │ │ │ │ ├── auth_process.394863eb.jpg │ │ │ │ ├── knowledge.e73471ed.png │ │ │ │ └── search.83621669.svg │ │ │ └── js │ │ │ │ ├── 10.56580e41.js │ │ │ │ ├── 11.3be47fb0.js │ │ │ │ ├── 12.d60b9707.js │ │ │ │ ├── 13.5eceb6db.js │ │ │ │ ├── 14.0d1f698f.js │ │ │ │ ├── 15.698860a1.js │ │ │ │ ├── 16.6fb9da28.js │ │ │ │ ├── 17.9f899974.js │ │ │ │ ├── 18.db1db02c.js │ │ │ │ ├── 19.743c3cb1.js │ │ │ │ ├── 2.48608264.js │ │ │ │ ├── 20.b25bb440.js │ │ │ │ ├── 21.ead5cdaf.js │ │ │ │ ├── 22.09c3b1f5.js │ │ │ │ ├── 3.54fe201e.js │ │ │ │ ├── 4.d6287f56.js │ │ │ │ ├── 5.23c6c8d7.js │ │ │ │ ├── 6.fd53af94.js │ │ │ │ ├── 7.31d6c222.js │ │ │ │ ├── 8.c52dd0f1.js │ │ │ │ ├── 9.d09515ee.js │ │ │ │ └── app.a3562d1e.js │ │ ├── exercise │ │ │ └── index.html │ │ ├── guide │ │ │ ├── base.html │ │ │ ├── dev.html │ │ │ ├── dev │ │ │ │ ├── auth.html │ │ │ │ ├── book-detail.html │ │ │ │ ├── book-list.html │ │ │ │ ├── category-list.html │ │ │ │ ├── crash.html │ │ │ │ ├── home.html │ │ │ │ ├── read.html │ │ │ │ ├── search.html │ │ │ │ └── shelf.html │ │ │ └── index.html │ │ ├── home1.jpg │ │ ├── home2.jpg │ │ ├── index.html │ │ ├── logo.gif │ │ └── qa │ │ │ └── index.html │ └── public │ │ └── logo.gif ├── README.md ├── activities │ └── README.md ├── api │ └── README.md ├── column │ ├── README.md │ └── mpvue │ │ └── init.md ├── exercise │ └── README.md ├── guide │ ├── README.md │ ├── base.md │ ├── base_mpvue.md │ ├── base_vue.md │ ├── base_vuex.md │ ├── dev.md │ ├── dev │ │ ├── alipay.md │ │ ├── auth.md │ │ ├── book-detail.md │ │ ├── book-list.md │ │ ├── category-list.md │ │ ├── crash.md │ │ ├── error.md │ │ ├── home.md │ │ ├── prepare.md │ │ ├── read.md │ │ ├── search.md │ │ └── shelf.md │ ├── images │ │ ├── alipay_add_permission.png │ │ ├── auth.png │ │ ├── component_auth.png │ │ ├── component_banner.png │ │ ├── component_home_card.png │ │ ├── component_home_card2.png │ │ ├── component_recommend_book.png │ │ ├── component_search_bar.jpg │ │ ├── component_search_item.jpg │ │ ├── component_search_list.jpg │ │ ├── component_search_table.png │ │ ├── component_tag.png │ │ ├── component_tag_group.png │ │ ├── detail_component.png │ │ ├── detail_component_detail.png │ │ ├── dev_process.jpg │ │ ├── git_settings.png │ │ ├── knowledge.png │ │ ├── search_component.png │ │ ├── vue_base_preview.jpg │ │ ├── vue_base_preview2.jpg │ │ ├── wechat_code_structure.jpg │ │ ├── wechat_defect.png │ │ ├── wechat_dev_process.jpg │ │ ├── wechat_homepage.jpg │ │ ├── wechat_reg.png │ │ ├── wechat_reg2.jpg │ │ └── wechat_reg3.jpg │ └── release │ │ ├── auto.md │ │ ├── git.md │ │ ├── https.md │ │ └── server.md ├── images │ ├── gzh_qrcode.jpg │ ├── home_design.jpg │ ├── home_feature.jpg │ ├── home_tech.jpg │ ├── logo.gif │ └── mp_qrcode.jpeg ├── qa │ ├── README.md │ └── images │ │ ├── qa_8_1_1.png │ │ ├── qa_8_1_2.jpg │ │ ├── qa_8_4_1.jpg │ │ └── qa_8_4_2.png └── reader │ └── README.md └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .git 3 | .idea 4 | 5 | # Logs 6 | logs 7 | *.log 8 | 9 | # Runtime data 10 | pids 11 | *.pid 12 | *.seed 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directory 30 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 31 | node_modules 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 sam 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /docs/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/.DS_Store -------------------------------------------------------------------------------- /docs/.vuepress/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/.vuepress/.DS_Store -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | title: '慕课网「小慕读书」官网', 3 | base: '/mpvue-docs/', 4 | description: 'mpvue多端小程序快速入门', 5 | markdown: { 6 | // markdown-it-anchor 的选项 7 | anchor: { permalink: false }, 8 | // markdown-it-toc 的选项 9 | toc: { includeLevel: [1, 2, 3] }, 10 | lineNumbers: true 11 | }, 12 | head: [ 13 | ['link', { rel: 'icon', href: `/logo.gif` }], 14 | ['meta', { name: 'theme-color', content: '#3eaf7c' }], 15 | ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }], 16 | ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }], 17 | ['meta', { name: 'msapplication-TileColor', content: '#000000' }] 18 | ], 19 | themeConfig: { 20 | lastUpdated: '上次更新', 21 | nav: [ 22 | { text: '首页', link: '/' }, 23 | { text: '指南', link: '/guide/' }, 24 | { text: 'API', link: '/api/' }, 25 | // { text: '补充阅读', link: '/column/' }, 26 | // { text: '习题', link: '/exercise/' }, 27 | { text: '答疑汇总', link: '/qa/' }, 28 | { text: '学习笔记', link: '/reader/' }, 29 | // { text: '精彩活动', link: '/activities/' }, 30 | { text: '点赞支持', link: 'https://github.com/sam9831/mpvue-imooc-ebook-docs' } 31 | ], 32 | navbar: true, 33 | sidebar: { 34 | collapsable: false, 35 | '/column/': [ 36 | { 37 | title: '说明', 38 | collapsable: false, 39 | children: [ 40 | '' 41 | ] 42 | } 43 | ], 44 | '/guide/': [ 45 | { 46 | title: '说明', 47 | collapsable: false, 48 | children: [ 49 | '' 50 | ] 51 | }, 52 | { 53 | title: '基础知识', 54 | collapsable: false, 55 | children: [ 56 | 'base', 57 | 'base_vue', 58 | 'base_mpvue', 59 | 'base_vuex' 60 | ] 61 | }, 62 | { 63 | title: '项目规划', 64 | collapsable: false, 65 | children: [ 66 | 'dev' 67 | ] 68 | }, 69 | { 70 | title: '开发指南', 71 | collapsable: false, 72 | children: [ 73 | 'dev/prepare', 74 | 'dev/home', 75 | 'dev/auth', 76 | 'dev/search', 77 | 'dev/book-list', 78 | 'dev/book-detail', 79 | 'dev/read', 80 | 'dev/category-list', 81 | 'dev/shelf', 82 | 'dev/crash', 83 | 'dev/error' 84 | ] 85 | }, 86 | { 87 | title: '支付宝小程序开发指南', 88 | collapsable: false, 89 | children: [ 90 | 'dev/alipay' 91 | ] 92 | }, 93 | { 94 | title: '部署指南', 95 | collapsable: false, 96 | children: [ 97 | 'release/git', 98 | 'release/server', 99 | 'release/https', 100 | 'release/auto', 101 | ] 102 | } 103 | ] 104 | } 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 慕课网「小慕读书」官网 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

404

There's nothing here.
Take me home.
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/activities/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 慕课网「小慕读书」官网 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
慕课网「小慕读书」官网

筹备中，敬请期待...

上次更新: 6/9/2019, 11:51:58 PM
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/img/auth_process.394863eb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/.vuepress/dist/assets/img/auth_process.394863eb.jpg -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/img/knowledge.e73471ed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/.vuepress/dist/assets/img/knowledge.e73471ed.png -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/img/search.83621669.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/10.56580e41.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[10],{204:function(t,e,n){"use strict";n.r(e);var s=n(0),l=Object(s.a)({},function(){var t=this.$createElement,e=this._self._c||t;return e("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("p",[this._v("筹备中，敬请期待...")])])},[],!1,null,null,null);e.default=l.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/11.3be47fb0.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[11],{198:function(t,e,r){"use strict";r.r(e);var s=r(0),u=Object(s.a)({},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("h1",{attrs:{id:"基础知识"}},[t._v("基础知识")]),t._v(" "),r("h2",{attrs:{id:"微信小程序入门"}},[t._v("微信小程序入门")]),t._v(" "),r("h2",{attrs:{id:"基础入门"}},[t._v("基础入门")]),t._v(" "),r("h3",{attrs:{id:"vue-js入门"}},[t._v("Vue.js入门")]),t._v(" "),r("h3",{attrs:{id:"mpvue入门"}},[t._v("mpvue入门")]),t._v(" "),r("h3",{attrs:{id:"vue-router和vuex入门"}},[t._v("vue-router和vuex入门")])])},[],!1,null,null,null);e.default=u.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/12.d60b9707.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[12],{191:function(t,s,e){"use strict";e.r(s);var n=e(0),r=Object(n.a)({},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"项目开发指南"}},[t._v("项目开发指南")]),t._v(" "),e("h2",{attrs:{id:"项目规划"}},[t._v("项目规划")]),t._v(" "),e("h2",{attrs:{id:"环境搭建"}},[t._v("环境搭建")]),t._v(" "),e("h2",{attrs:{id:"开发指南"}},[t._v("开发指南")])])},[],!1,null,null,null);s.default=r.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/13.5eceb6db.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[13],{194:function(t,s,e){"use strict";e.r(s);var n=e(0),r=Object(n.a)({},function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"图书详情"}},[this._v("图书详情")])])},[],!1,null,null,null);s.default=r.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/14.0d1f698f.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[14],{196:function(t,s,e){"use strict";e.r(s);var n=e(0),r=Object(n.a)({},function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"图书列表"}},[this._v("图书列表")])])},[],!1,null,null,null);s.default=r.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/15.698860a1.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[15],{189:function(t,s,e){"use strict";e.r(s);var n=e(0),r=Object(n.a)({},function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"分类列表"}},[this._v("分类列表")])])},[],!1,null,null,null);s.default=r.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/16.6fb9da28.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[16],{200:function(t,s,e){"use strict";e.r(s);var n=e(0),r=Object(n.a)({},function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"异常捕获"}},[this._v("异常捕获")])])},[],!1,null,null,null);s.default=r.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/17.9f899974.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[17],{202:function(t,s,e){"use strict";e.r(s);var n=e(0),r=Object(n.a)({},function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"首页开发"}},[this._v("首页开发")])])},[],!1,null,null,null);s.default=r.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/18.db1db02c.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[18],{203:function(t,s,e){"use strict";e.r(s);var n=e(0),r=Object(n.a)({},function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"阅读器"}},[this._v("阅读器")])])},[],!1,null,null,null);s.default=r.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/19.743c3cb1.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[19],{201:function(t,s,e){"use strict";e.r(s);var n=e(0),r=Object(n.a)({},function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"搜索开发"}},[this._v("搜索开发")])])},[],!1,null,null,null);s.default=r.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/20.b25bb440.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[20],{199:function(t,s,e){"use strict";e.r(s);var n=e(0),r=Object(n.a)({},function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"书架"}},[this._v("书架")])])},[],!1,null,null,null);s.default=r.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/21.ead5cdaf.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[21],{197:function(t,e,n){"use strict";n.r(e);var s=n(0),l=Object(s.a)({},function(){var t=this.$createElement,e=this._self._c||t;return e("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("p",[this._v("筹备中，敬请期待...")])])},[],!1,null,null,null);e.default=l.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/22.09c3b1f5.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[22],{9:function(n,w,o){}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/3.54fe201e.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[3],{186:function(t,e,n){"use strict";var i=n(69);n.n(i).a},193:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(186),n(0)),a=Object(r.a)(i,void 0,void 0,!1,null,"172fd448",null);e.default=a.exports},69:function(t,e,n){}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/4.d6287f56.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{184:function(t,s,e){t.exports=e.p+"assets/img/knowledge.e73471ed.png"},190:function(t,s,e){"use strict";e.r(s);var i=e(0),n=Object(i.a)({},function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"mpvue多端小程序开发指南"}},[this._v("mpvue多端小程序开发指南")]),this._v(" "),s("div",{staticClass:"tip custom-block"},[s("p",[this._v("本章节内容为课程配套的文字版本，方便各位同学不便查看视频时使用")])]),this._v(" "),s("p",[s("img",{attrs:{src:e(184),alt:"knowledge"}})])])},[],!1,null,null,null);s.default=n.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/5.23c6c8d7.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{185:function(t,s,e){t.exports=e.p+"assets/img/auth_process.394863eb.jpg"},192:function(t,s,e){"use strict";e.r(s);var r=e(0),n=Object(r.a)({},function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"认证流程"}},[this._v("认证流程")]),this._v(" "),s("p",[s("img",{attrs:{src:e(185),alt:"auth progress"}})])])},[],!1,null,null,null);s.default=n.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/6.fd53af94.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[6],{188:function(t,e,s){"use strict";s.r(e);var o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],n={methods:{getMsg:function(){return o[Math.floor(Math.random()*o.length)]}}},i=s(0),h=Object(i.a)(n,function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("router-link",{attrs:{to:"/"}},[this._v("Take me home.")])],1)])},[],!1,null,null,null);e.default=h.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/7.31d6c222.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[7],{195:function(t,e,r){"use strict";r.r(e);var n=r(0),o=Object(n.a)({},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("h1",{attrs:{id:"项目功能结构"}},[t._v("项目功能结构")]),t._v(" "),r("h1",{attrs:{id:"交互设计"}},[t._v("交互设计")]),t._v(" "),r("h1",{attrs:{id:"课程技术栈"}},[t._v("课程技术栈")]),t._v(" "),r("p",[t._v("如果您想学习本课程，请支持正版，谢谢！"),r("a",{attrs:{href:"https://coding.imooc.com/class/285.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("购买地址"),r("OutboundLink")],1)])])},[],!1,null,null,null);e.default=o.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/8.c52dd0f1.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[8],{205:function(t,e,n){"use strict";n.r(e);var s=n(0),l=Object(s.a)({},function(){var t=this.$createElement,e=this._self._c||t;return e("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("p",[this._v("筹备中，敬请期待...")])])},[],!1,null,null,null);e.default=l.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/exercise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 慕课网「小慕读书」官网 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
慕课网「小慕读书」官网

筹备中，敬请期待...

上次更新: 6/9/2019, 11:51:58 PM
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/guide/base.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 基础知识 | 慕课网「小慕读书」官网 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
慕课网「小慕读书」官网

基础知识

微信小程序入门

基础入门

Vue.js入门

mpvue入门

vue-router和vuex入门

上次更新: 6/9/2019, 11:51:58 PM

23 | ← 24 | 27 | 项目开发指南 28 | 29 | → 30 |

31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/guide/dev.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 项目开发指南 | 慕课网「小慕读书」官网 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
慕课网「小慕读书」官网

项目开发指南

项目规划

环境搭建

开发指南

上次更新: 6/9/2019, 11:51:58 PM

23 | ← 24 | 27 | 认证流程 28 | 29 | → 30 |

31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/guide/dev/auth.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 认证流程 | 慕课网「小慕读书」官网 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
慕课网「小慕读书」官网

认证流程

auth progress

上次更新: 6/9/2019, 11:51:58 PM

23 | ← 24 | 27 | 首页开发 28 | 29 | → 30 |

31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/guide/dev/book-detail.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 图书详情 | 慕课网「小慕读书」官网 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
慕课网「小慕读书」官网

图书详情

上次更新: 6/9/2019, 11:51:58 PM

23 | ← 24 | 27 | 阅读器 28 | 29 | → 30 |

31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/guide/dev/book-list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 图书列表 | 慕课网「小慕读书」官网 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
慕课网「小慕读书」官网

图书列表

上次更新: 6/9/2019, 11:51:58 PM

23 | ← 24 | 27 | 图书详情 28 | 29 | → 30 |

31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/guide/dev/category-list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 分类列表 | 慕课网「小慕读书」官网 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
慕课网「小慕读书」官网

分类列表

上次更新: 6/9/2019, 11:51:58 PM

23 | ← 24 | 27 | 书架 28 | 29 | → 30 |

31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/guide/dev/crash.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 异常捕获 | 慕课网「小慕读书」官网 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
慕课网「小慕读书」官网

异常捕获

上次更新: 6/9/2019, 11:51:58 PM

23 | ← 24 |

27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/guide/dev/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 首页开发 | 慕课网「小慕读书」官网 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
慕课网「小慕读书」官网

首页开发

上次更新: 6/9/2019, 11:51:58 PM

23 | ← 24 | 27 | 搜索开发 28 | 29 | → 30 |

31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/guide/dev/read.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 阅读器 | 慕课网「小慕读书」官网 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
慕课网「小慕读书」官网

阅读器

上次更新: 6/9/2019, 11:51:58 PM

23 | ← 24 | 27 | 分类列表 28 | 29 | → 30 |

31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/guide/dev/search.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 搜索开发 | 慕课网「小慕读书」官网 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
慕课网「小慕读书」官网

搜索开发

上次更新: 6/9/2019, 11:51:58 PM

23 | ← 24 | 27 | 图书列表 28 | 29 | → 30 |

31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/guide/dev/shelf.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 书架 | 慕课网「小慕读书」官网 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
慕课网「小慕读书」官网

书架

上次更新: 6/9/2019, 11:51:58 PM

23 | ← 24 | 27 | 异常捕获 28 | 29 | → 30 |

31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/guide/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | mpvue多端小程序开发指南 | 慕课网「小慕读书」官网 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
慕课网「小慕读书」官网

mpvue多端小程序开发指南

本章节内容为课程配套的文字版本，方便各位同学不便查看视频时使用

knowledge

上次更新: 6/9/2019, 11:51:58 PM

23 | 基础知识 24 | 25 | → 26 |

27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/home1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/.vuepress/dist/home1.jpg -------------------------------------------------------------------------------- /docs/.vuepress/dist/home2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/.vuepress/dist/home2.jpg -------------------------------------------------------------------------------- /docs/.vuepress/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 慕课网「小慕读书」官网 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
慕课网「小慕读书」官网

mpvue实战「小慕读书」多端小程序

23 | 基于mpvue2.0多端小程序开发 24 |

快速上手 →

商业项目

课程为你提供一个完整闭环的项目，项目包含真实的数据、API以及开发流程，项目完全符合商业项目标准

多端适配

借助mpvue强大的编译引擎，将vue源码快速转换为多端小程序版本，课程将详细介绍如何实现多端适配

完整流程

面向初学者，课程难度逐步加深，讲解从账号注册、工具下载、项目开发、API联调到上线发布的完整流程

项目功能结构

交互设计

课程技术栈

如果您想学习本课程，请支持正版，谢谢！购买地址

25 | imooc.com | Copyright © 2019 Sam 26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/logo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/.vuepress/dist/logo.gif -------------------------------------------------------------------------------- /docs/.vuepress/dist/qa/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 慕课网「小慕读书」官网 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
慕课网「小慕读书」官网

筹备中，敬请期待...

上次更新: 6/9/2019, 11:51:58 PM
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/.vuepress/public/logo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/.vuepress/public/logo.gif -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroText: mpvue实战「小慕读书」多端小程序 4 | tagline: 基于mpvue2.0多端小程序开发 5 | actionText: 快速上手 → 6 | actionLink: /guide/ 7 | features: 8 | - title: 商业项目 9 | details: 课程为你提供一个完整闭环的项目，项目包含真实的数据、API以及开发流程，项目完全符合商业项目标准 10 | - title: 多端适配 11 | details: 借助mpvue强大的编译引擎，将vue源码快速转换为多端小程序版本，课程将详细介绍如何实现多端适配 12 | - title: 开发体验 13 | details: 课程面向初学者，提供完整的文档支持，如开发文档、部署文档、API文档等，同时提供在线API，无需部署，直接调用 14 | footer: © 慕课网（imooc.com）版权所有 | 苏ICP备18055397号-1 | 2019 Powered by Sam 15 | --- 16 | 17 | # 扫码体验 18 | ![qrcode](./images/mp_qrcode.jpeg) 19 | 20 | ::: tip 21 | 本官网全部开源，如果您觉得课程还不错，请到[github](https://github.com/sam9831/mpvue-imooc-ebook-docs)点赞支持，您的支持是我们前进的最大动力 22 | ::: 23 | 24 | # 服务号 25 | ![gzh_qrcode](./images/gzh_qrcode.jpg) 26 | 27 | ::: tip 28 | 公众号福利： 29 | - 参与课程互动 30 | - 定期好文推送 31 | - 课程补充资源（免费） 32 | ::: 33 | 34 | # 问答 35 | 课程提供问答区服务，购买课程的童鞋可以直接到问答区提问，地址：[https://coding.imooc.com/learn/qa/376.html](https://coding.imooc.com/learn/qa/376.html) 36 | ::: warning 37 | 问答区提问规则： 38 | 1. 代码量少的问题可以直接上传截图 39 | 2. 代码量大的问题可以把代码上传到git（github、码云等都可以），然后提供git仓库地址 40 | 3. 运行错误建议上传完整的错误日志（文本和截图都可以，但要尽量完整），方便定位问题 41 | ::: 42 | 除了课程问答区获取答疑服务外，还可以直接到**答疑汇总区**，[立即查看](https://www.youbaobao.xyz/mpvue-docs/qa/)我为大家汇总的常见问题，我会尽我所能帮助大家学习，解决大家的问题 43 | 44 | # 技术栈介绍 45 | ## mpvue 46 | 课程将教会你如何使用脚手架初始化mpvue小程序项目，并完成打包构建，mpvue2.0支持多端小程序，课程将讲解如何实现原生API调用和多端适配，我们还将应用vuex实现全局状态管理和vue-router语法实现路由管理 47 | 48 | ## 小程序 49 | 小程序部分我们将学习原生小程序开发流程，从账号注册、工具下载，一直到上线发布，生成小程序二维码等整个流程，即使你没有任何小程序开发经验也不要紧，课程将从最浅显的知识开始讲起，帮助你顺利破冰小程序！ 50 | 51 | ## 组件库 52 | 课程将使用有赞的vant-weapp作为微信小程序的组件库，支付宝小程序则采用官方的mini-antui，我们将介绍如何将组件库集成到mpvue项目，并掌握组件的基本应用方法 53 | 54 | ## 发布 55 | 课程使用git作为代码管理，前后端分离架构，我们将服务端发布到阿里云服务器，并接入https服务，使用nginx作为静态资源服务器 56 | 57 | ::: tip 58 | 课程实际应用的知识点将更加丰富，非常贴近商业项目的需求，详细的课程目录及试听请点击[这里](https://coding.imooc.com/class/376.html) 59 | ::: 60 | 61 | # 项目功能结构 62 | ![feature](./images/home_feature.jpg) 63 | 64 | # 交互设计 65 | ![design](./images/home_design.jpg) 66 | 67 | # 前置学习 68 | - 具备一定的javascript、html、css基础 69 | - 了解npm和webpack的基本概念 70 | - 了解node.js的基本概念 71 | 72 | 如果您想学习本课程，请支持正版，谢谢！[购买地址](https://coding.imooc.com/class/376.html) 73 | -------------------------------------------------------------------------------- /docs/activities/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar: false 3 | --- 4 | 5 | 筹备中，敬请期待... 6 | -------------------------------------------------------------------------------- /docs/column/README.md: -------------------------------------------------------------------------------- 1 | # 补充读物说明 2 | 3 | 大家好，在实战课视频更新完毕后，我将会在这里为大家继续更新`mpvue`的补充读物，内容包括：对`mpvue`基础知识讲解、源码解读、`mpvue`与微信小程序的对比等等，帮助大家持续学习和成长。 4 | -------------------------------------------------------------------------------- /docs/column/mpvue/init.md: -------------------------------------------------------------------------------- 1 | # mpvue基础 2 | 3 | > 写作中... 4 | -------------------------------------------------------------------------------- /docs/exercise/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar: false 3 | --- 4 | 5 | 筹备中，敬请期待... 6 | -------------------------------------------------------------------------------- /docs/guide/README.md: -------------------------------------------------------------------------------- 1 | # mpvue多端小程序开发指南 2 | 3 | ::: tip 4 | 本章节内容为课程配套的文字版本，方便各位同学不便查看视频时使用 5 | ::: 6 | 7 | ![knowledge](./images/knowledge.png) 8 | -------------------------------------------------------------------------------- /docs/guide/base.md: -------------------------------------------------------------------------------- 1 | # 微信小程序入门 2 | 3 | ## 学习流程 4 | ![dev_process](./images/wechat_dev_process.jpg) 5 | 6 | ## 账号注册 7 | ### 访问官网 8 | 官网地址：[https://mp.weixin.qq.com](https://mp.weixin.qq.com) 9 | 10 | ### 点击注册 11 | ![reg](./images/wechat_reg.png) 12 | 13 | ### 选择小程序 14 | ![reg2](./images/wechat_reg2.jpg) 15 | 16 | ### 注册账号 17 | 填写基本信息并完成邮箱激活，完成小程序开发者注册 18 | ![reg3](./images/wechat_reg3.jpg) 19 | 20 | ### 登录 21 | 使用刚刚注册的账号登录小程序开发者平台 22 | ![homepage](./images/wechat_homepage.jpg) 23 | 24 | ## 开发工具下载 25 | 下载地址：[https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html) 26 | 27 | ## 小程序代码结构 28 | ![code_structure](./images/wechat_code_structure.jpg) 29 | 30 | ## Hello World 31 | ### 第一步，创建App 32 | 创建app.js 33 | ```js 34 | App({}) 35 | ``` 36 | 37 | 创建app.json 38 | ```json 39 | { 40 | "pages": [ 41 | "test" 42 | ] 43 | } 44 | ``` 45 | ### 第二步，创建Page 46 | 创建test.json 47 | ```json 48 | {} 49 | ``` 50 | 51 | 创建test.js 52 | ```js 53 | Page({ 54 | data: { 55 | message: 'Hello World!' 56 | }, 57 | show() { 58 | wx.showToast({ 59 | title: '小慕读书上线啦！', 60 | }) 61 | } 62 | }) 63 | ``` 64 | 65 | 创建test.wxml 66 | ```html 67 | {{message}} 68 | 69 | ``` 70 | 71 | 创建test.wxss 72 | ```css 73 | .name { 74 | color: red; 75 | } 76 | ``` 77 | 78 | 通过以上步骤我们创建了一个简单的小程序应用，通过这个案例我们学到如下知识点： 79 | - 小程序本质是一个渲染容器，可以把它想象成浏览器 80 | - 小程序由App和Page两部分构成 81 | - App需要依赖2个文件：app.js和app.json，其中app.json不可改名，且必须配置pages属性 82 | - Page需要依赖4个文件：js、json、wxml和wxss 83 | 84 | ## 基础组件使用方法 85 | [https://developers.weixin.qq.com/miniprogram/dev/component/](https://developers.weixin.qq.com/miniprogram/dev/component/) 86 | 87 | ## API调用方法 88 | [https://developers.weixin.qq.com/miniprogram/dev/api/](https://developers.weixin.qq.com/miniprogram/dev/api/) 89 | 90 | ## 原生小程序的缺点 91 | ![defect](./images/wechat_defect.png) 92 | -------------------------------------------------------------------------------- /docs/guide/base_mpvue.md: -------------------------------------------------------------------------------- 1 | # mpvue入门 2 | 3 | 官网：[http://mpvue.com/](http://mpvue.com/) 4 | 5 | ## mpvue介绍 6 | - mpvue （github [地址](https://github.com/Meituan-Dianping/mpvue)）是一个使用 Vue.js 开发小程序的前端框架 7 | - github 1.7w+ Star 8 | - 2018年3月14日 Release 1.0.2版本，正式开源 9 | - 2019年2月18日 Release 2.0.2版本，正式支持多端小程序 10 | - mpvue与原生小程序开发对比： 11 | 12 | | 对比项 | 原生小程序 | mpvue | 13 | | --- | --- | --- | 14 | | 学习成本 | 高 | 低 | 15 | | IDE | 不友好 | 友好 | 16 | | 多端开发 | 工作量大 | 一套代码 | 17 | | 可复用性 | 低 | 高 | 18 | 19 | ## 搭建mpvue脚手架 20 | 第一步，基于mpvue-quickstart模板创建新项目 21 | ```bash 22 | vue init mpvue/mpvue-quickstart my-project 23 | ``` 24 | 25 | 第二步，安装依赖和运行 26 | ```bash 27 | cd my-project 28 | npm install 29 | npm run dev 30 | ``` 31 | 32 | ::: tip 33 | mpvue开发需要我们预先安装node.js环境，大家可以到node.js官网[下载](https://nodejs.org/en/download)最新的稳定版本 34 | ::: 35 | 36 | 37 | ## mpvue原理 38 | - `mpvue`保留了`vue.runtime`核心方法，无缝继承了`Vue.js`的基础能力 39 | - `mpvue-template-compiler`提供了将`vue`的模板语法转换到小程序的`wxml`语法的能力 40 | - 修改了`vue`的建构配置，使之构建出符合小程序项目结构的代码格式：`json/wxml/wxss/js`文件 41 | 42 | ## mpvue生命周期 43 | 44 | ### Vue生命周期 45 | ![lifecycle](https://www.youbaobao.xyz/mpvue-res/mpvue-lifecycle.jpg) 46 | 47 | ### 小程序生命周期 48 | 49 | #### 小程序应用生命周期 50 | 小程序应用生命周期官网介绍：[https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#onLaunch-Object-object](https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#onLaunch-Object-object) 51 | 52 | #### 小程序页面生命周期 53 | ![lifecycle](https://www.youbaobao.xyz/mpvue-res/wx-lifecycle.png) 54 | ::: tip 55 | 详细内容见官网文档：[https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html) 56 | ::: 57 | -------------------------------------------------------------------------------- /docs/guide/base_vue.md: -------------------------------------------------------------------------------- 1 | # Vue入门 2 | 3 | ## 为什么要学习Vue 4 | 先看一组数据 5 | - github star 14w+，位列开发项目第一 6 | - [patreon](https://www.patreon.com/evanyou)捐赠$1.5w+/月 7 | - Chrome DevTools周活用户90w+ 8 | 9 | 给出三点理由： 10 | - 最热门的前端开源框架之一 11 | - 大幅提升Web开发效率，降低开发门槛 12 | - 大幅提升Web项目的可维护性 13 | 14 | ## Hello World 15 | ### 第一步 在桌面创建index.html文件 16 | ```bash 17 | touch ~/Desktop/index.html 18 | ``` 19 | 20 | ### 第二步 填入如下代码 21 | 用你喜欢的编辑器打开这个文件（注意：不要用浏览器打开，因为这样你无法编辑它），推荐使用Webstorm或者Vscode，写入如下代码： 22 | ```html 23 | 24 | 25 | 26 | vue测试 27 | 28 | 29 | 30 |
{{message}}
31 | 41 | 42 | 43 | ``` 44 | 45 | ### 第三步 使用浏览器打开index.html 46 | 这时我们会在浏览器中看到如下效果： 47 | ![vue_preview](./images/vue_base_preview.jpg) 48 | 如果你也看到同样的内容，恭喜你！这说明我们的程序生效了 49 | 50 | ## 源码分析 51 | 上述代码基本是Vue可运行的最小case，下面我们就来分析一下这个case的具体执行过程，帮忙大家理解Vue的工作原理（为了节约篇幅，省略了与Vue无关的内容）： 52 | ### 第一步，加载vue.js脚本 53 | ```html 54 | 55 | ``` 56 | 执行这行代码时，浏览器会下载并执行vue.js这个脚本文件，下载地址是：[https://cdn.jsdelivr.net/npm/vue/dist/vue.js](https://cdn.jsdelivr.net/npm/vue/dist/vue.js)，大家可以直接打开这个文件，这个文件就是Vue.js源码经过编译、打包后生成的最终文件 57 | 58 | ::: warning 59 | 这里有两个非常重要的基础知识点： 60 | - 浏览器解析html文件的过程是自上而下、逐行解析的 61 | - 执行script标签时，浏览器会下载，然后执行js脚本，只有这一步完成后才会开始下一步，因为如果不完成这一步，下面的代码中如果使用了该js脚本内容时就会报错 62 | ::: 63 | 64 | ### 第二步，生成div 65 | 加载完vue.js脚本后浏览器继续执行body中的内容 66 | ```html 67 |
{{message}}
68 | ``` 69 | 当浏览器执行到上述代码时，得到的效果如下： 70 | ![vue_preview2](./images/vue_base_preview2.jpg) 71 | 为什么会这样呢？因为这里的`{{message}}`被视为普通文本来执行了，要验证这一点很简单，大家把代码中``这部分代码删除即可 72 | 73 | ### 第三步，执行script脚本 74 | 我们通过结果可以反推下面这段代码的作用是将界面中的`{{message}}`替换为`Hello Mpvue!`，事实也确实如此！这里的`el: '#root'`告诉浏览器去查找id为root的DOM，然后将其中的变量替换为我们自定义的内容 75 | ```js 76 | new Vue({ 77 | el: '#root', 78 | data() { 79 | return { 80 | message: 'Hello Mpvue!' 81 | } 82 | } 83 | }) 84 | ``` 85 | 86 | 到这里，我要恭喜你，已经完成了Vue.js的入门学习，由此可见Vue.js并没有那么难学！ 87 | 88 | ## 事件 89 | 90 | 下面我们向界面中增加一个按钮，代码如下： 91 | ```html 92 |
93 | {{message}} 94 | 95 |
96 | ``` 97 | 98 | 这时虽然可以看到按钮，但是点击它是没有反应的，因为我们还没有绑定事件，Vue中绑定点击事件需要通过`@click`来实现： 99 | ```html 100 |
101 | {{message}} 102 | 103 |
104 | ``` 105 | ::: warning 106 | 这里有一点非常重要，就是button必须为位于id为root的div下，vue只会处理该div下的DOM，像下面这样的代码是无法绑定成功的！ 107 | ::: 108 | ```html 109 |
{{message}}
110 | 111 | 112 | ``` 113 | 114 | 这段代码表示点击按钮时，会调用`handleClick`方法，注意这个方法是需要定义在Vue参数的methods属性中，完整代码如下： 115 | ```html 116 | 117 | 118 | 119 | vue测试 120 | 121 | 122 | 123 |
124 | {{message}} 125 | 126 |
127 | 142 | 143 | 144 | ``` 145 | 回到浏览器中点击按钮，可以看到文字从`Hello Mpvue!`变成了`Click worked!` 146 | 147 | ## 条件 148 | 149 | 下面我们略微修改需求，我们希望点击按钮时，文字隐藏，如果文字已经处于隐藏状态，则进行显示，要实现这一点，我们需要借助`v-if`或`v-show`指令，先改造DOM： 150 | ```html 151 |
152 | {{message}} 153 | 154 |
155 | ``` 156 | 上述代码表示，当`visible`变量为`true`时，显示`span`标签，反之则隐藏，下面我们再定义`visible`变量，并且修改事件： 157 | ```html 158 | 159 | 160 | 161 | vue测试 162 | 163 | 164 | 165 |
166 | {{message}} 167 | 168 |
169 | 185 | 186 | 187 | ``` 188 | 189 | 这里我们具体做了两件事： 190 | - 定义了`visible`变量，默认为`true`，那么`span`默认就是显示状态 191 | - 修改了`handleClick`，当点击按钮时对`visible`取反，也就是说显示的时候隐藏，隐藏的时候显示 192 | 193 | ::: tip 194 | 这里我们可以将v-if改为v-show，他们两者的区别在于v-if隐藏时会移除DOM，而v-show隐藏时仅仅改变DOM的display属性为none 195 | ::: 196 | 197 | ## 循环 198 | 199 | 下面我们继续增加需求的复杂度，我们希望点击一次按钮，就会再出现一行文字，这时字符串已经不能满足我们的需求了，我们需要创建一个数组来存储数据，然后通过`v-for`循环指令来进行显示，还是先修改DOM： 200 | 201 | ```html 202 |
203 |
{{message}} - {{item}}
204 | 205 |
206 | ``` 207 | 208 | `v-for`使用时需要有两个注意点： 209 | 1. `data`必须是一个数组或者对象，即可遍历的元素 210 | 2. 使用`v-for`的DOM需要指定`key`属性，并且绑定到一个唯一值 211 | 212 | 接下来的工作是定义`data`变量，修改`handleClick`方法： 213 | ```html 214 | 215 | 216 | 217 | vue测试 218 | 219 | 220 | 221 |
222 |
{{message}} - {{item}}
223 | 224 |
225 | 242 | 243 | 244 | ``` 245 | 246 | 初始状态下，我们可以看到界面上只有一个按钮，当点击按钮时会添加一行，再次点击会再增加一行，这是因为每次点击时我们都会往`data`中添加一个元素`index`，然后将`index`的值加1，这样每点击第一次`data`中就多一个元素，从而实现了列表展示 247 | 248 | ## 双向绑定 249 | 250 | 下面我们将展示Vue的双向绑定机制，我们先在界面中添加一个`input`输入框，并使用`v-model`绑定一个变量： 251 | ```html 252 |
253 | 254 |
{{data}}
255 |
256 | ``` 257 | 258 | 完整源码如下： 259 | ```html 260 | 261 | 262 | 263 | vue测试 264 | 265 | 266 | 267 |
268 | 269 |
{{data}}
270 |
271 | 281 | 282 | 283 | ``` 284 | 285 | 在浏览器中打开文件检查效果：我们向`input`输入框中输入一些文本，发现下方的`div`中的内容会随着改变，这说明`Vue`帮我们做了以下工作： 286 | 1. 监听`input`的输入变化 287 | 2. 将`input`的输入变化写入`data`变量 288 | 289 | ## 组件化 290 | 291 | 数据驱动和组件化是`Vue`最重要的两个概念，上面的概念都在演示如何通过数据的方式驱动`DOM`的变化，下面我们将演示如何通过组件化的方式简化开发，提高复用，我们先创建一个`Message`组件： 292 | ```js 293 | Vue.component('Message', { 294 | template: '
{{data}}
', 295 | props: { 296 | data: String 297 | } 298 | }) 299 | ``` 300 | 301 | 创建组件需要通过`Vue.component`这个静态方法来实现，第一个参数是组件的名称，第二个参数是组件的参数： 302 | - `template`: 表示组件对应的`DOM`结构 303 | - `props`: 父组件传入的参数名称和值类型 304 | 305 | 完整源码如下： 306 | ```html 307 | 308 | 309 | 310 | vue测试 311 | 312 | 313 | 314 |
315 | 316 |
317 | 333 | 334 | 335 | ``` 336 | 337 | 这段代码虽然很短，但是逻辑还是比较复杂的，下面具体给大家解析执行过程： 338 | 1. 定义组件`Message`，并且指定了组件的`template`和`props` 339 | 2. 实例化`Vue`对象，初始化了`message` 340 | 3. `DOM`中使用了`Message`组件，此时会将该组件替换为`template`中的内容，并接收父组件传入的`data`参数，这里`data`参数的值为`message` 341 | 4. 完成对DOM的渲染 342 | 343 | 组件是可以嵌套的，也就是说组件中可以继续嵌套组件，从而实现更高层次的复用！ 344 | 345 | ## 脚手架的使用 346 | 1. 安装cnpm 347 | 官网：http://npm.taobao.org/ 348 | ```bash 349 | npm install -g cnpm --registry=https://registry.npm.taobao.org 350 | ``` 351 | 352 | 2. 安装vue 353 | Vue-CLI官网：[https://cli.vuejs.org/zh/](https://cli.vuejs.org/zh/) 354 | ```bash 355 | cnpm install -g @vue/cli 356 | ``` 357 | 3. 项目初始化 358 | ```bash 359 | vue create hello-world 360 | ``` 361 | 362 | 4. 运行项目 363 | ```bash 364 | cd hello-world 365 | npm run serve 366 | ``` 367 | 368 | 5. 代码结构 369 | - index.html：应用的入口文件 370 | - main.js：主js文件，初次渲染时执行 371 | - App.vue：根组件，在main.js中加载 372 | 373 | ## 小结 374 | 至此，Vue的基础部分就给大家讲解完了，如果大家还有什么不清楚的地方可以到问答区与我互动哦 375 | -------------------------------------------------------------------------------- /docs/guide/base_vuex.md: -------------------------------------------------------------------------------- 1 | # vue-router和vuex入门 2 | [vue-router](https://github.com/vuejs/vue-router)和[vuex](https://github.com/vuejs/vuex)是官方提供的Vue插件，主要解决路由和状态管理两个问题 3 | 4 | ## vue-router 5 | ### 基本概念 6 | 解决什么问题？`vue-router`解决了路由与组件的对应关系 7 | 8 | ### vue-router的基本使用方法 9 | 1. 安装vue-router依赖 10 | ```bash 11 | npm i -S vue-router 12 | ``` 13 | 14 | 2. 使用vue-router插件 15 | ```js 16 | import Route from 'vue-router' 17 | 18 | Vue.use(Route) 19 | ``` 20 | 21 | 3. 初始化vue-router对象 22 | ```js 23 | const routes = [ 24 | { path: '/a', component: A }, 25 | { path: '/b', component: B }, 26 | { path: '/hello-world', component: HelloWorld } 27 | ] 28 | const router = new Route({ 29 | routes 30 | }) 31 | ``` 32 | ::: tip 33 | 注：这里省略了定义A组件和B组件的过程，这两个组件与普通组件无异 34 | ::: 35 | 36 | 4. 实例化Vue对象，传入router参数 37 | ```js 38 | new Vue({ 39 | router, 40 | render: h => h(App) 41 | }) 42 | ``` 43 | 44 | 5. 使用router-view和router-link 45 | ::: tip 46 | router-view和router-link是vue-router官方提供的两个组件，router-view会替换为路由对应的组件，router-link相当于a标签，点击后会加载to属性中路由对应的组件 47 | ::: 48 | ```html 49 |
50 |
51 | a 52 |
53 |
54 | b 55 |
56 |
57 | hello-world 58 |
59 |
60 | 61 | ``` 62 | 63 | ### 路由嵌套 64 | 上面是一个非常简单的vue-router case，实际项目开发过程中，需求往往不会这么简单，比如我们希望实现`/a/aa`路由，并且`/aa`对应的组件嵌套在`/a`之下，这时我们需要修改路由的配置文件： 65 | ```js 66 | const routes = [{ 67 | path: '/a', 68 | component: A, 69 | redirect: '/a/aa', 70 | children: [ 71 | { 72 | path: '/a/aa', 73 | component: AA, 74 | }] 75 | }] 76 | ``` 77 | 并修改A组件的内容： 78 | ```html 79 | 85 | ``` 86 | 由于A组件是父级路由，所以也需要添加`router-view`组件，动态匹配子路由 87 | 88 | ### 重定向 89 | 将一个路由重定向到另一个路由，实际开发过程中非常实用，修改配置文件即可： 90 | ```js 91 | const routes = [{ 92 | path: '/a', 93 | component: A, 94 | redirect: '/a/aa', 95 | children: [{ 96 | path: '/a/aa', 97 | component: AA, 98 | }] 99 | }] 100 | ``` 101 | 102 | ### 动态路由 103 | 为了支持`restful`形式路由以及更复杂的场景时，我们可以使用动态路由，定义路由时，在路由前加上冒号即可，我们先添加AA2组件，动态路由部分通过`this.$route.params`进行接收： 104 | ```vue 105 | 111 | 112 | 124 | ``` 125 | 修改路由配置后生效： 126 | ```js 127 | const routes = [ 128 | { 129 | path: '/a', 130 | component: A, 131 | redirect: '/a/aa', 132 | children: [ 133 | { 134 | path: '/a/aa', 135 | component: AA, 136 | }, 137 | { 138 | path: '/a/:id', 139 | component: AA2, 140 | }, 141 | ] 142 | } 143 | ] 144 | ``` 145 | 146 | ::: tip 147 | 动态路由的优先级低于普通路由，所以我们访问`/a/aa`时会匹配到`AA`组件，而输入其他路由时会匹配到`AA2`组件 148 | ::: 149 | 150 | ### 路由参数 151 | 参数传递是我们开发过程中必不可少的步骤，`vue-router`支持参数传递，通过`this.$route.query`进行接收，我们修改AA组件进行测试 152 | ```vue 153 | 159 | 160 | 172 | ``` 173 | 174 | ### 编程式路由 175 | 有很多时候我们需要手动操作路由的跳转，这时我们需要使用`this.$router`，以下是一些常用的操作： 176 | 177 | - 路由跳转 178 | ```js 179 | this.$router.push('/a/aa') 180 | ``` 181 | - 带参数路由跳转 182 | ```js 183 | this.$router.push({ 184 | path: '/a/aa', 185 | query: { 186 | message: 'hello' 187 | } 188 | }) 189 | ``` 190 | - 不向history插入记录 191 | ```js 192 | this.$router.replace('/a/123') 193 | ``` 194 | - 回退 195 | ```js 196 | this.$router.go(-1) 197 | ``` 198 | 199 | ## vuex 200 | ### 基本概念 201 | 解决什么问题？`vuex`解决了状态管理问题，通过集中管理状态，使得`state`、`action`和`view`实现松耦合，从而让代码更易维护 202 | ![flow](https://vuex.vuejs.org/flow.png) 203 | 204 | ### vuex的基本使用方法 205 | 1. 安装vuex依赖 206 | ```bash 207 | npm i -S vuex 208 | ``` 209 | 210 | 2. 使用vuex插件 211 | ```js 212 | import Store from 'vuex' 213 | 214 | Vue.use(Store) 215 | ``` 216 | 217 | 3. 初始化vuex对象 218 | ```js 219 | const store = new Vuex.Store({ 220 | state: { 221 | data: 'this is data' 222 | }, 223 | mutations: { 224 | SET_DATA(state, data) { 225 | state.data = data 226 | } 227 | }, 228 | actions: { 229 | setData({ commit }, data) { 230 | commit('SET_DATA', data) 231 | } 232 | } 233 | }) 234 | ``` 235 | 236 | 4. 实例化Vue对象，传入store参数 237 | ```js 238 | new Vue({ 239 | render: h => h(App), 240 | router, 241 | store 242 | }) 243 | ``` 244 | 245 | 5. 读取vuex状态 246 | ```html 247 |
{{$store.state.data}}
248 | ``` 249 | 250 | 6. 更新vuex状态 251 | ```js 252 | update() { 253 | this.$store.dispatch('setData', 'this is update data') 254 | } 255 | ``` 256 | 257 | ### vuex模块化 258 | 实际项目开发中，状态众多，如果全部混在一起，则难以分辨，而且容易相互冲突，为了解决问题，vuex引入模块化的概念，解决这个问题，下面我们定义a和b两个模块： 259 | ```js 260 | const moduleA = { 261 | state: { 262 | data: 'this is a' 263 | }, 264 | mutations: { 265 | SET_DATA(state, data) { 266 | state.data = data 267 | } 268 | }, 269 | actions: { 270 | setData({ commit }, data) { 271 | commit('SET_DATA', data) 272 | } 273 | } 274 | } 275 | const moduleB = { 276 | state: { 277 | data: 'this is b' 278 | }, 279 | mutations: { 280 | SET_DATA(state, data) { 281 | state.data = data 282 | } 283 | }, 284 | actions: { 285 | setData({ commit }, data) { 286 | commit('SET_DATA', data) 287 | } 288 | } 289 | } 290 | ``` 291 | 修改store的初始化代码： 292 | ```js 293 | const store = new Vuex.Store({ 294 | modules: { 295 | a: moduleA, 296 | b: moduleB 297 | } 298 | }) 299 | ``` 300 | 修改获取状态的代码，此时需要加入模块进行区分： 301 | ```vue 302 |
{{$store.state.a.data}}
303 |
{{$store.state.b.data}}
304 | 305 | 306 | ``` 307 | 修改update方法： 308 | ```js 309 | update(ns) { 310 | this.$store.dispatch(`setData`, `update ${ns}`) 311 | } 312 | ``` 313 | 314 | ### vuex命名空间 315 | 上述代码在执行过程中，获取状态没有问题，但是修改状态会出现问题，因为两个模块出现同名actions，所以此时需要使用命名空间来解决这个问题： 316 | ```js 317 | const moduleA = { 318 | namespaced: true, 319 | // ... 320 | } 321 | ``` 322 | 修改update方法： 323 | ```js 324 | update(ns) { 325 | this.$store.dispatch(`${ns}/setData`, `update ${ns}`) 326 | } 327 | ``` 328 | -------------------------------------------------------------------------------- /docs/guide/dev.md: -------------------------------------------------------------------------------- 1 | # 项目开发指南 2 | 3 | ## 项目需求分析 4 | ### 首页 5 | - 授权登录 6 | - 预加载骨架图 7 | - 搜索框（热门搜索词） 8 | - 书架精选图书 9 | - banner图 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 | ### 书架 39 | - 加入时间 40 | - 书架列表 41 | 42 | ### 异常 43 | - 小程序异常捕获 44 | - Vue异常捕获 45 | - 异常信息展示 46 | 47 | ## 交互视觉 48 | ### Sketch下载 49 | - 官网：[https://www.sketch.com/](https://www.sketch.com/) 50 | - oursketch下载：[https://www.oursketch.com/tool/sketch](https://www.oursketch.com/tool/sketch) 51 | 52 | ### measure插件 53 | 下载地址：[http://www.youbaobao.xyz/mpvue-design/measure.zip](http://www.youbaobao.xyz/mpvue-design/measure.zip) 54 | 55 | ### sketch设计稿下载 56 | [http://www.youbaobao.xyz/mpvue-design/xiaomu-reader-design.sketch](http://www.youbaobao.xyz/mpvue-design/xiaomu-reader-design.sketch) 57 | 58 | ### 交互稿 59 | ![design](../images/home_design.jpg) 60 | 61 | ### 视觉稿 62 | [http://www.youbaobao.xyz/mpvue-design/preview](http://www.youbaobao.xyz/mpvue-design/preview) 63 | 64 | ## 开发计划 65 | ![dev_process](./images/dev_process.jpg) 66 | -------------------------------------------------------------------------------- /docs/guide/dev/alipay.md: -------------------------------------------------------------------------------- 1 | # 支付宝小程序开发指南 2 | 3 | ## 开发者工具下载 4 | 5 | [点击](https://docs.alipay.com/mini/ide/download)下载 6 | 7 | ## 获取openId 8 | 9 | ### 生成公钥和私钥 10 | 11 | 开发 `openId` 获取接口需要生成公钥和私钥，[查看](https://docs.open.alipay.com/291/105971#LDsXr)技术文档 12 | 13 | ### 填入公钥信息 14 | 15 | 进入小程序开发者后台，在设置->开发设置->开发信息下填入公钥 16 | 17 | ### 服务端 SDK 18 | 19 | 支付宝小程序获取 `openId` 需要通过服务端 `SDK` 开发进行支持，[查看](https://docs.open.alipay.com/54/103419/)开发文档地址 20 | 21 | ### Node.js 版本开发 22 | 23 | 首先需要安装依赖： 24 | ```bash 25 | npm install alipay-sdk 26 | ``` 27 | 28 | 下面提供核心代码： 29 | ```js 30 | const AlipaySdk = require('alipay-sdk').default 31 | app.get('/openId/get/alipay', (req, res) => { 32 | const appId = req.query.appId 33 | const code = req.query.code 34 | if (!appId || !code) { 35 | onFail(res, '获取openId失败') 36 | } else { 37 | const alipaySdk = new AlipaySdk({ 38 | appId, 39 | privateKey: fs.readFileSync(appIdMap[appId], 'ascii') 40 | }) 41 | alipaySdk.exec('alipay.system.oauth.token', { 42 | grantType: 'authorization_code', 43 | code, 44 | refreshToken: 'token' 45 | }).then(result => { 46 | console.log('alipay', result) 47 | if (result) { 48 | const { alipayUserId, userId, accessToken } = result 49 | onSuccess(res, '获取openId成功', { 50 | openid: `${userId}|${alipayUserId}`, 51 | session_key: accessToken 52 | }) 53 | } else { 54 | onFail(res, '获取openId失败') 55 | } 56 | }).catch(err => { 57 | onFail(res, '获取openId失败', err) 58 | }) 59 | } 60 | }) 61 | ``` 62 | 63 | 这里有两点需要注意： 64 | - `appIdMap[appId]` 为私钥地址 65 | - 将 `userId|alipayUserId` 定义为 `openId`，因为支付宝中没有 `openId` 的概念 66 | 67 | ## 获取用户信息 68 | 69 | 需要手动添加权限，[查看](https://docs.alipay.com/mini/introduce/twn8vq)开发文档地址 70 | 71 | ![add](../images/alipay_add_permission.png) 72 | 73 | ## 用户授权 74 | 75 | ```html 76 | 84 | ``` 85 | 86 | 支付宝小程序中仍然是通过 `open-type` 和 `scope` 完成授权 87 | 88 | ## API 改造 89 | 90 | API 获取方式需要进行兼容： 91 | ```js 92 | export function getUserInfo(onSuccess, onFail) { 93 | const wx = () => { 94 | mpvue.getUserInfo({ 95 | success(res) { 96 | const { userInfo } = res 97 | console.log('getUserInfo', userInfo) 98 | onSuccess(userInfo) 99 | }, 100 | fail() { 101 | onFail ? onFail() : setError('获取用户信息失败') 102 | } 103 | }) 104 | } 105 | const my = () => { 106 | mpvue.getAuthUserInfo({ 107 | success(res) { 108 | console.log(res) 109 | res.avatarUrl = res.avatar || res.avatarUrl 110 | delete res.avatar 111 | console.log('getOpenUserInfo', res) 112 | onSuccess(res) 113 | }, 114 | fail() { 115 | onFail ? onFail() : setError('获取用户信息失败') 116 | } 117 | }) 118 | } 119 | adapter({ wx, my }) 120 | } 121 | ``` 122 | 123 | `adapter` 方法源码： 124 | ```js 125 | function adapter(fn, params) { 126 | return fn[mpvuePlatform] && fn[mpvuePlatform](params) 127 | } 128 | ``` 129 | -------------------------------------------------------------------------------- /docs/guide/dev/auth.md: -------------------------------------------------------------------------------- 1 | # 用户授权 2 | 3 | ## 用户授权流程 4 | ![auth](../images/auth.png) 5 | 6 | ### 用户授权判断 7 | 通过`mpvue.getSetting`判断小程序是否获得权限 8 | 9 | ::: tip 10 | 查看[官方文档](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/setting/wx.getSetting.html) 11 | ::: 12 | 13 | ### 用户申请授权 14 | 如果小程序未获得授权，我们需要提供用户主动申请授权的功能，微信规定获取用户信息，必须用户主动触发，此时我们需要借助`button`组件完成用户授权事件绑定，关键步骤： 15 | ```html 16 | 22 | ``` 23 | 关于`getuserinfo`和`open-type`的官方说明如下： 24 | 25 | | 属性 | 说明 | 26 | | --- | --- | 27 | | open-type | 微信开放能力 | 28 | | bindgetuserinfo | 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效 | 29 | 30 | ::: tip 31 | 查看[官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html) 32 | ::: 33 | 34 | ### 获取用户信息 35 | 通过`mpvue.getUserInfo`获取用户信息 36 | 37 | ::: tip 38 | 查看[官方文档](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html) 39 | ::: 40 | 41 | ### 获取openId 42 | 由于每个用户在每个小程序都会获得唯一的`openId`，所以`openId`非常适合用作用户的唯一标识，获取`openId`我们需要通过官方提供的`api` `auth.code2Session 43 | `来获取，为了简化`api`调用，课程提供了该`api`的封装版本，[立即查看](https://www.youbaobao.xyz/mpvue-docs/api/#%E8%8E%B7%E5%8F%96%E5%BE%AE%E4%BF%A1%E7%94%A8%E6%88%B7%E7%9A%84openid) 44 | 45 | ::: tip 46 | 查看[官方文档](https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html) 47 | ::: 48 | 49 | ### 用户登录 50 | 通过`mpvue.login`进行用户登录，登录后会获得`code`，该`code`可用于获取`openId`，但要注意`code`只能使用一次，用完即作废 51 | 52 | ::: tip 53 | 查看[官方文档](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html) 54 | ::: 55 | 56 | ### 用户注册 57 | 获得`openId`后，我们可以通过该`openId`和用户信息在小慕读书中进行注册，课程提供了注册的`api`，[立即查看](https://www.youbaobao.xyz/mpvue-docs/api/#%E7%94%A8%E6%88%B7%E6%B3%A8%E5%86%8C) 58 | 59 | ## 授权组件 60 | 用户授权登录组件 61 | 62 | ![component_auth](../images/component_auth.png) 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |
组件名称属性参数用途默认值
AuthmethodgetUserInfo获取用户信息(空)
79 | 80 | ::: tip 81 | LOGO图片地址：[https://www.youbaobao.xyz/mpvue-res/logo.jpg](https://www.youbaobao.xyz/mpvue-res/logo.jpg) 82 | ::: 83 | -------------------------------------------------------------------------------- /docs/guide/dev/book-detail.md: -------------------------------------------------------------------------------- 1 | # 图书详情 2 | 3 | ## 学习重点 4 | 5 | - `van-rate` 组件的使用（查看[官方文档](https://youzan.github.io/vant-weapp/#/rate)） 6 | - API对接： 7 | - 图书详情API 8 | - 评分API 9 | - 目录API 10 | - 加入书架API 11 | - 移出书架API 12 | - 微信小程序API： 13 | - `showModal` 确认对话框（查看[官方文档](https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html)） 14 | 15 | ## 图书详情视觉稿 16 | [http://www.youbaobao.xyz/mpvue-design/preview/#artboard9](http://www.youbaobao.xyz/mpvue-design/preview/#artboard9) 17 | 18 | ## 搜索页面组件结构图 19 | 20 | ![detail](../images/detail_component.png) 21 | 22 | ## 搜索页面组件示意图 23 | 24 | ![detail](../images/detail_component_detail.png) 25 | 26 | ## 图书信息组件 27 | 图书详情中的图书信息组件 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |
组件名称属性参数用途默认值
DetailBookpropsbook图书信息{}
45 | 46 | ## 图书统计组件 47 | 48 | 显示图书的统计信息 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 |
组件名称属性参数用途默认值
DetailStatpropsreaders读者信息[]
readerNum阅读人数0
rankNum评分人数0
rankAvg平均得分0
81 | 82 | ## 图书评分组件 83 | 84 | 图书评分组件 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 |
组件名称属性参数用途默认值
DetailRatepropsrateValue上次评分0
methodsonRateChange评分更改时触发事件(空)
108 | 109 | ## 图书目录组件 110 | 111 | 显示图书目录 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 |
组件名称属性参数用途默认值
DetailContentspropscontents图书目录信息[]
methodsreadBook阅读电子书(空)
135 | 136 | ## 图书详情页脚组件 137 | 138 | 图书详情页脚组件 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 |
组件名称属性参数用途默认值
DetailBottompropsisInShelf是否在书架中[]
methodshandleShelf修改书架状态(空)
readBook阅读电子书(空)
167 | 168 | 169 | ## 组件源码 170 | 171 | ### DetailBook 172 | 173 | ```vue 174 | 188 | 189 | 198 | 199 | 248 | ``` 249 | 250 | ### DetailStat 251 | 252 | ```vue 253 | 290 | 291 | 303 | 304 | 369 | ``` 370 | 371 | ### DetailRate 372 | 373 | ```vue 374 | 389 | 390 | 402 | 403 | 422 | ``` 423 | 424 | ### DetailContents 425 | 426 | ```vue 427 | 445 | 446 | 458 | 459 | 488 | ``` 489 | 490 | ### DetailBottom 491 | 492 | ```vue 493 | 515 | 516 | 531 | 532 | 551 | 552 | 579 | ``` 580 | -------------------------------------------------------------------------------- /docs/guide/dev/book-list.md: -------------------------------------------------------------------------------- 1 | # 图书列表 2 | 3 | 复用 SearchTable 组件，详见[搜索开发](http://www.youbaobao.xyz/mpvue-docs/guide/dev/search.html) 4 | -------------------------------------------------------------------------------- /docs/guide/dev/category-list.md: -------------------------------------------------------------------------------- 1 | # 分类列表 2 | 3 | 复用 HomeBook 组件，详见[首页开发](http://www.youbaobao.xyz/mpvue-docs/guide/dev/home.html) 4 | -------------------------------------------------------------------------------- /docs/guide/dev/crash.md: -------------------------------------------------------------------------------- 1 | # 异常捕获 2 | 3 | ## 集成 Vuex 4 | 5 | 安装 vuex： 6 | 7 | ```bash 8 | npm install -S vuex 9 | ``` 10 | 11 | 创建 store.js，源码如下： 12 | 13 | ```bash 14 | import Vue from 'vue' 15 | import Vuex from 'vuex' 16 | 17 | Vue.use(Vuex) 18 | 19 | const store = new Vuex.Store({ 20 | state: { 21 | error: null 22 | }, 23 | mutations: { 24 | setError: (state, message) => { 25 | if (message) { 26 | state.error = { message } 27 | } else { 28 | state.error = null 29 | } 30 | } 31 | } 32 | }) 33 | 34 | export default store 35 | ``` 36 | 37 | 这里的 vuex 中存放了一个 error 状态，mutations 中包含了一个方法 setError，用于更新 error 状态，error 状态是一个对象，包含一个 message 属性，即错误提示 38 | 39 | ## Global 组件 40 | 41 | 创建 Global 组件，源码如下： 42 | 43 | ```html 44 | 62 | 63 | 89 | 90 | 136 | ``` 137 | 138 | Global 是一个容器组件，它最主要的有以下两点： 139 | 140 | 1. 获取 vuex 中的 error 状态，如果 error 状态不为 null，则显示 error 中的信息 141 | 2. 如果 error 状态为 null，则显示 slot 插槽，这部分就是我们自己的组件内容了 142 | 143 | ## 优化现有组件 144 | 145 | 将现有组件外层套上 Global 组件即可，这里以 list 组件为例： 146 | 147 | ```html 148 | 155 | ``` 156 | 157 | ::: tip 158 | 附赠：[Sam 老师《mpvue 专栏》异常处理章节](../dev/error.html) 159 | ::: 160 | -------------------------------------------------------------------------------- /docs/guide/dev/error.md: -------------------------------------------------------------------------------- 1 | # mpvue 异常处理详解 2 | 3 | ## 微信小程序异常处理 4 | 5 | ### 异常处理方法 6 | 7 | 微信小程序的异常捕获方法有两种，第一是通过 App 中定义 `onError` 方法捕获异常，第二是通过微信小程序的 API `wx.onError` 捕获异常，下面我们分别看看他们的应用方法： 8 | 9 | ### App 异常处理 10 | 11 | 首先给出一个最简单的 App 异常处理案例，我们修改 app.js 源码： 12 | 13 | ```js 14 | /* app.js */ 15 | App({ 16 | onLaunch() { 17 | console.log('onLaunch') 18 | throw new Error('crash') 19 | }, 20 | onError(err) { 21 | console.log(err) 22 | } 23 | }) 24 | ``` 25 | 26 | 上面的代码自定义了 App 的生命周期函数 `onLaunch`，所以在应用启动阶段就会执行，在 `onLaunch` 中我们打印了一行日志，随后抛出异常，由于我们定义了 `onError` 方法，所以微信小程序会执行我们自定义的 `onError` 方法，此时会在控制台打印如下日志： 27 | 28 | ```bash 29 | onLaunch 30 | thirdScriptError 31 | crash;at App lifeCycleMethod onLaunch function 32 | Error: crash 33 | at pe.onLaunch (http://127.0.0.1:24523/appservice/app.js:12:11) 34 | at pe. (WAService.js:1:1318961) 35 | at WAService.js:1:1319523 36 | at new pe (WAService.js:1:1319599) 37 | at Function. (WAService.js:1:1319944) 38 | at WAService.js:1:1307261 39 | at http://127.0.0.1:24523/appservice/app.js:9:1 40 | at require (WAService.js:1:1353445) 41 | at :1:1 42 | at HTMLScriptElement.scriptLoaded (http://127.0.0.1:24523/appservice/appservice?t=1567692883746:1324:21) 43 | ``` 44 | 45 | 第一行 onLauch 是我们打印的日志，第二行之后的内容是 Error 对象的内容。下面我们对 `onError` 方法监听异常过程中的一些逻辑进行分析： 46 | 47 | #### 多个 onError 处理逻辑 48 | 49 | `onError` 只能定义一个，当存在多个 `onError` 时，后定义的 `onError` 方法会覆盖先定义的： 50 | 51 | ```js 52 | /* app.js */ 53 | App({ 54 | onLaunch() { 55 | console.log('onLaunch') 56 | throw new Error('crash') 57 | }, 58 | onError(err) { 59 | console.log(err) 60 | }, // 该 onError 方法会被覆盖 61 | onError(err) { 62 | console.log('err2', err) 63 | } // 该 onError 方法会生效 64 | }) 65 | ``` 66 | 67 | #### app.js 异常捕获 68 | 69 | `onError` 只能监听 App、Page 和 Component 相关的生命周期函数或自定义方法的错误，如果错误发生在构造器之外，`onError` 将无法监听： 70 | 71 | ```js 72 | /* app.js */ 73 | throw new Error('crash') // 该异常会被全局异常处理器捕获 74 | App({ 75 | onLaunch() { 76 | console.log('onLaunch') 77 | throw new Error('crash') 78 | }, 79 | onError(err) { 80 | console.log(err) 81 | } 82 | }) // App 初始化不会执行 83 | ``` 84 | 85 | 上面的代码第一行抛出异常后会被微信小程序全局异常处理器捕获，所以后面的代码将不会执行，如果希望处理这类异常，我们需要使用 try catch 来实现： 86 | 87 | ```js 88 | /* app.js */ 89 | try { 90 | throw new Error('crash') 91 | App({ 92 | onLaunch() { 93 | console.log('onLaunch') 94 | throw new Error('crash') 95 | }, 96 | onError(err) { 97 | console.log(err) 98 | } 99 | }) 100 | } catch(err) { 101 | console.log(err) 102 | } 103 | ``` 104 | 105 | #### Page 或 Component 异常捕获 106 | 107 | App 中定义的 `onError` 同样可以捕获 Page 和 Component 中抛出的异常： 108 | 109 | ```js 110 | /* pages/index.js */ 111 | Page({ 112 | onReady() { 113 | console.log('onReady') 114 | throw new Error('page crash') 115 | } 116 | }) 117 | ``` 118 | 119 | 上述代码会在 Page 的 onReady 生命周期中抛出异常，该异常会被 App 的 `onError` 捕获到： 120 | 121 | ```bash 122 | onLaunch 123 | onReady 124 | thirdScriptError 125 | page crash;at "pages/index" page lifeCycleMethod onReady function 126 | Error: page crash 127 | at ye.onReady (http://127.0.0.1:24523/appservice/pages/index2.js:9:11) 128 | at ye. (WAService.js:1:1315997) 129 | at ye.p.__callPageLifeTime__ (WAService.js:1:1315742) 130 | at WAService.js:1:1338247 131 | at Function. (WAService.js:1:1339036) 132 | at WAService.js:1:1307261 133 | at WAService.js:1:754376 134 | at WAService.js:1:392894 135 | at n (http://127.0.0.1:24523/appservice/__dev__/asdebug.js:1:27894) 136 | at e.exports. (http://127.0.0.1:24523/appservice/__dev__/asdebug.js:1:28236) 137 | ``` 138 | 139 | 如果在 Component 中抛出异常，App 中 `onError` 方法仍然能捕获到。这里需要注意：虽然 Component 和 Page 抛出了异常，但是程序仍然会继续向下执行，也就是说生命周期中抛出异常不会中断小程序的执行，但在 js 文件中抛出异常会中断执行，如在 Page 中抛出异常： 140 | 141 | ```js 142 | /* pages/index.js */ 143 | throw new Error('page crash') // 会中断小程序执行 144 | Page({ 145 | onReady() { 146 | console.log('onReady') 147 | throw new Error('page crash') 148 | } 149 | }) 150 | ``` 151 | 152 | 第一行代码会中断整个小程序的执行，程序遇到这种异常将不会继续向下执行。那么为什么生命周期中的异常不会中断小程序执行呢？因为小程序使用 try catch 处理了这类异常，所以虽然控制台抛出了异常，但并不会影响小程序整体执行，这点和 Vue 执行生命周期方法的逻辑非常类似。 153 | 154 | ### API 捕获异常 155 | 156 | 异常捕获的第二种方法是使用微信小程序 API 进行捕获： 157 | 158 | ```js 159 | /* app.js */ 160 | App({ 161 | onLaunch() { 162 | console.log('onLaunch') 163 | wx.onError(function(err) { 164 | console.log('error from wx.onError') 165 | }) 166 | } 167 | }) 168 | 169 | ``` 170 | 171 | 调用方法非常简单，我们只是需要向 `wx.onError` 中传入一个异常处理的 function 即可。`wx.onError` 可以和 App 中的 `onError` 方法并存，不会产生覆盖，如果同时定义了两者，那么会优先触发 App 中的 `onError`： 172 | 173 | ```js 174 | /* app.js */ 175 | App({ 176 | onLaunch() { 177 | console.log('onLaunch') 178 | wx.onError(function(err) { 179 | console.log('error from wx.onError') 180 | }) 181 | }, 182 | onError(err) { 183 | console.log('error from app') 184 | } 185 | }) 186 | 187 | ``` 188 | 189 | 然后我们分别在 Page 和 Component 中抛出异常，执行结果如下： 190 | 191 | ```bash 192 | error from app 193 | error from wx.onError 194 | error from app 195 | error from wx.onError 196 | 197 | ``` 198 | 199 | ## mpvue 异常处理 200 | 201 | mpvue 异常处理比微信小程序稍微复杂一些，因为它包含两个层面：微信小程序异常捕获和 mpvue 异常捕获，下面分别进行说明。 202 | 203 | ### mpvue 中小程序异常捕获 204 | 205 | mpvue 中的小程序异常捕获方法与微信小程序中类型，我们可以通过 `onError` 方法进行捕获： 206 | 207 | ```vue 208 | 209 | 220 | 221 | ``` 222 | 223 | 这与微信小程序的 `onError` 使用方法无异，它仍然能够捕获到页面或组件中抛出的异常： 224 | 225 | ```vue 226 | 227 | 230 | 231 | 238 | 239 | ``` 240 | 241 | 我们仍然可以使用 `mpvue.onError` 这个 API 来捕获异常，它与微信小程序使用的区别在于将 wx 替换为 mpvue： 242 | 243 | ```vue 244 | 245 | 258 | 259 | ``` 260 | 261 | 这里需要注意，mpvue 的生命周期函数是无法被捕获的，因为它不受微信小程序控制： 262 | 263 | ```vue 264 | 265 | 268 | 269 | 279 | 280 | ``` 281 | 282 | ### mpvue 异常捕获 283 | 284 | 我们可以使用 mpvue 的自定义异常捕获方法来解决生命周期函数无法被捕获的问题，我们需要修改 index.vue 组件对应的 js 文件 main.js： 285 | 286 | ```js 287 | /* pages/main.js */ 288 | import Vue from 'vue' 289 | import App from './index' 290 | 291 | Vue.config.errorHandler = function (err) { 292 | console.log('error from errorHandler', err) 293 | } // 自定义 mpvue 异常捕获方法 294 | 295 | const app = new Vue(App) 296 | app.$mount() 297 | 298 | ``` 299 | 300 | 值得注意的是 mpvue 每一个页面都对应一个 Vue 实例，如果将 `Vue.config.errorHandler` 定义到一个页面中，它将只能对当前页面生效，所以如果你希望进行全局异常处理，我们需要将它定义到全局的的 main.js 文件中： 301 | 302 | ```js 303 | /* main.js */ 304 | import Vue from 'vue' 305 | import App from './App' 306 | 307 | Vue.config.productionTip = false 308 | App.mpType = 'app' 309 | 310 | Vue.config.errorHandler = function (err) { 311 | console.log('error from errorHandler', err) 312 | } 313 | 314 | const app = new Vue(App) 315 | app.$mount() 316 | 317 | ``` 318 | 319 | 此时 index.vue 中的 `created` 和 `onReady` 的异常都将被 `errorHandler` 捕获： 320 | 321 | ```bash 322 | error from errorHandler Error: created crash 323 | at Vue$3.created (main.js:96) 324 | at callHook (vendor.js:2429) 325 | at Vue$3.Vue._init (vendor.js:3882) 326 | at new Vue$3 (vendor.js:3976) 327 | at Object._ (main.js:17) 328 | at __webpack_require__ (manifest.js:59) 329 | at Object.webpackJsonpCallback [as webpackJsonpMpvue] (manifest.js:30) 330 | at main.js:3 331 | at require (WAService.js:1) 332 | at :11:7 333 | error from errorHandler Error: onReady crash 334 | at Vue$3.onReady (main.js:99) 335 | at callHook$1 (vendor.js:5092) 336 | at ye.onReady (vendor.js:5393) 337 | at ye. (WAService.js:1) 338 | at ye.p.__callPageLifeTime__ (WAService.js:1) 339 | at WAService.js:1 340 | at Function. (WAService.js:1) 341 | at WAService.js:1 342 | at WAService.js:1 343 | at WAService.js:1 344 | 345 | ``` 346 | 347 | 可以看到我们只需要使用 `errorHandler` 就能同时捕获到所有页面中生命周期函数的异常，非常方便。值得一提的是 `errorHandler` 同样能捕获到 App 中的异常，所以我们无需使用 `onError` 来处理异常了。 348 | 349 | ### mpvue 异常处理源码分析 350 | 351 | mpvue 异常处理方法并不复杂，它的源码如下： 352 | 353 | ```js 354 | function handleError (err, vm, info) { 355 | if (config.errorHandler) { 356 | config.errorHandler.call(null, err, vm, info); // 如果自定义了 errorHandler 方法，则进行调用 357 | } else { 358 | if (inBrowser && typeof console !== 'undefined') { 359 | console.error(err); // 如果处于浏览器环境，则通过 console.error 打印异常 360 | } else { 361 | throw err // 否则直接抛出异常，交给容器进行处理 362 | } 363 | } 364 | } 365 | 366 | ``` 367 | 368 | 可以看到如果我们自定义了 `errorHandler` 方法，mpvue 会优先调用这个方法处理异常，而如果没有定义时，mpvue 会判断我们是否处于浏览器环境，这是 Vue 的处理逻辑，如果处于浏览器环境并且能够使用 console 函数，则通过 `console.error` 打印异常，否则直接抛出异常。 369 | 370 | # 总结 371 | 372 | 异常处理在程序开发时非常重要，是必须要掌握的内容，本章向大家介绍了微信小程序和 mpvue 异常处理的方法： 373 | 374 | - 微信小程序处理异常主要有两种方法： 375 | - 通过 app.js 中添加 `onError` 捕获异常； 376 | - 通过 `wx.onError` API 捕获异常。 377 | - mpvue 处理异常的方法主要是自定义 `errorHandler` 方法实现，mpvue 中仍然能够使用微信小程序的两种异常捕获方法； 378 | - 如果异常发生的位置在小程序构造器以外，可以采用 try catch 的方式手动捕获异常，这种方法对 mpvue 同样适用。 379 | -------------------------------------------------------------------------------- /docs/guide/dev/prepare.md: -------------------------------------------------------------------------------- 1 | # 项目框架搭建 2 | 3 | ## 项目初始化 4 | - 打开视觉稿 5 | - 初始化mpvue项目 6 | - 删除无关内容 7 | - `npm run dev`进入开发模式 8 | - 打开微信开发者工具 9 | - 设置AppId 10 | - 勾选"不校验合法域名" 11 | 12 | ## 集成`scss` 13 | ### 安装依赖 14 | ```bash 15 | npm i -D sass-loader node-sass 16 | ``` 17 | 18 | ### 使用 19 | ```html 20 | 25 | ``` 26 | 27 | ## 集成`vant-weapp`组件库 28 | ### 官网 29 | [https://youzan.github.io/vant-weapp/](https://youzan.github.io/vant-weapp/) 30 | 31 | ### 安装依赖 32 | ```bash 33 | npm i vant-weapp -S --production 34 | ``` 35 | 36 | ### 引入组件 37 | ```json 38 | { 39 | "usingComponents": { 40 | "van-button": "/path/to/vant-weapp/dist/button/index" 41 | } 42 | } 43 | ``` 44 | 45 | ### 使用组件 46 | ```html 47 | 按钮 48 | ``` 49 | 50 | ### 修改构建配置 51 | 修改webpack.base.config.js 52 | ```js 53 | if (/^wx$/.test(PLATFORM)) { 54 | baseWebpackConfig = merge(baseWebpackConfig, { 55 | plugins: [ 56 | new CopyWebpackPlugin([{ 57 | from: resolve('node_modules/vant-weapp/dist'), 58 | to: resolve('dist/wx/vant-weapp/dist'), 59 | ignore: ['.*'] 60 | }]) 61 | ] 62 | }) 63 | } 64 | ``` 65 | ## 集成`mpvue-router-patch`插件 66 | `github`地址：[https://github.com/F-loat/mpvue-router-patch](https://github.com/F-loat/mpvue-router-patch) 67 | ### 安装依赖 68 | ```bash 69 | npm i -S mpvue-router-patch 70 | ``` 71 | 72 | ### 安装插件 73 | ```js 74 | import MpvueRouterPatch from 'mpvue-router-patch' 75 | 76 | Vue.use(MpvueRouterPatch) 77 | ``` 78 | 79 | ### 使用 80 | ```js 81 | this.$router.push('/pages/categoryList/main') 82 | ``` 83 | 84 | ## 集成`flyio` 85 | `github`地址：[https://github.com/wendux/fly](https://github.com/wendux/fly) 86 | 87 | ### 安装依赖 88 | ```bash 89 | npm i -S flyio 90 | ``` 91 | 92 | ### 使用 93 | 初始化Flyio对象 94 | ```js 95 | function createFly() { 96 | if (mpvuePlatform === 'wx') { 97 | const Fly = require('flyio/dist/npm/wx') 98 | return new Fly() 99 | } else { 100 | return null 101 | } 102 | } 103 | ``` 104 | 105 | 处理get请求 106 | ```js 107 | export function get(url, params = {}) { 108 | const fly = createFly() 109 | if (fly) { 110 | return new Promise((resolve, reject) => { 111 | fly.get(url, params).then(response => { 112 | console.log(response) 113 | resolve(response) 114 | }).catch(err => { 115 | console.log(err) 116 | handleError(err) 117 | reject(err) 118 | }) 119 | }) 120 | } 121 | } 122 | ``` 123 | 124 | 处理post请求 125 | ```js 126 | export function post(url, params = {}) { 127 | const fly = createFly() 128 | if (fly) { 129 | return new Promise((resolve, reject) => { 130 | fly.post(url, params).then(response => { 131 | console.log(response) 132 | resolve(response) 133 | }).catch(err => { 134 | console.log(err) 135 | handleError(err) 136 | reject(err) 137 | }) 138 | }) 139 | } 140 | } 141 | ``` 142 | 143 | 这里的`handleError`我们可以根据实际业务场景进行定制 144 | -------------------------------------------------------------------------------- /docs/guide/dev/read.md: -------------------------------------------------------------------------------- 1 | # 阅读器 2 | 3 | ## 学习重点 4 | 5 | - `webview` 组件的使用（查看[官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html)） 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 |
组件名称属性参数用途默认值
readdatafileName图书的唯一标识-
opf图书opf文件地址-
navigation图书目录地址-
36 | -------------------------------------------------------------------------------- /docs/guide/dev/search.md: -------------------------------------------------------------------------------- 1 | # 搜索开发 2 | 3 | ## 搜索视觉稿 4 | [http://www.youbaobao.xyz/mpvue-design/preview/#artboard1](http://www.youbaobao.xyz/mpvue-design/preview/#artboard1) 5 | 6 | ## 搜索页面组件结构图 7 | 8 | ![search](../images/search_component.png) 9 | 10 | ## 标签组件 11 | 可交互的标签组件 12 | ![tag](../images/component_tag.png) 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
组件名称属性参数用途默认值
Tagpropstext标签文本(空)
methodsonClick标签点击事件(空)
35 | 36 | ## 标签分组组件 37 | 标签分组组件，包含一个标题和按钮，以及标签分组 38 | ![tag_group](../images/component_tag_group.png) 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 |
组件名称属性参数用途默认值
TagGrouppropsheaderText标题文本(空)
btnText按钮文本(空)
value标签数据[]
methodsonTagClick标签点击事件(空)
onBtnClick按钮点击事件(空)
77 | 78 | ## 搜索分类组件 79 | 搜索列表中的分类组件 80 | ![component_search_item](../images/component_search_item.jpg) 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 |
组件名称属性参数用途默认值
SearchItempropstitle标题文本(空)
subTitle副标题文本(空)
icon图标类型(空)
methodsonClick分类点击事件(空)
114 | 115 | ## 搜索列表组件 116 | 搜索结果列表组件 117 | 118 | ![component_search_table](../images/component_search_table.png) 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 |
组件名称属性参数用途默认值
SearchTablepropsdata列表数据[]
methodsonClick图书点击事件(空)
142 | 143 | ## 综合搜索列表组件 144 | 包含分类和列表的综合搜索列表 145 | 146 | ![component_search_list](../images/component_search_list.jpg) 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 |
组件名称属性参数用途默认值
SearchListpropsdata列表数据{}
methodsshowList展示分类点击后的列表(空)
170 | -------------------------------------------------------------------------------- /docs/guide/dev/shelf.md: -------------------------------------------------------------------------------- 1 | # 书架 2 | 3 | ## 学习重点 4 | 5 | - API对接： 6 | - 加入时间API 7 | - 书架列表API 8 | 9 | ## 书架视觉稿 10 | [http://www.youbaobao.xyz/mpvue-design/preview/#artboard6](http://www.youbaobao.xyz/mpvue-design/preview/#artboard6) 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 | 39 |
组件名称属性参数用途默认值
ShelfUserInfopropsnum书架图书数量0
readDay加入天数0
userInfo用户信息{}
40 | 41 | ## 书架列表组件 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 |
组件名称属性参数用途默认值
ShelfListpropsshelfList书架列表[]
methodsgotoHome访问首页-
gotoBookDetail访问图书详情-
70 | 71 | ## 组件源码 72 | 73 | ### ShelfUserInfo 74 | 75 | ```vue 76 | 90 | 91 | 100 | 101 | 148 | ``` 149 | 150 | ### ShelfList 151 | 152 | ```vue 153 | 179 | 180 | 197 | 198 | 264 | ``` 265 | -------------------------------------------------------------------------------- /docs/guide/images/alipay_add_permission.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/alipay_add_permission.png -------------------------------------------------------------------------------- /docs/guide/images/auth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/auth.png -------------------------------------------------------------------------------- /docs/guide/images/component_auth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/component_auth.png -------------------------------------------------------------------------------- /docs/guide/images/component_banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/component_banner.png -------------------------------------------------------------------------------- /docs/guide/images/component_home_card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/component_home_card.png -------------------------------------------------------------------------------- /docs/guide/images/component_home_card2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/component_home_card2.png -------------------------------------------------------------------------------- /docs/guide/images/component_recommend_book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/component_recommend_book.png -------------------------------------------------------------------------------- /docs/guide/images/component_search_bar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/component_search_bar.jpg -------------------------------------------------------------------------------- /docs/guide/images/component_search_item.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/component_search_item.jpg -------------------------------------------------------------------------------- /docs/guide/images/component_search_list.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/component_search_list.jpg -------------------------------------------------------------------------------- /docs/guide/images/component_search_table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/component_search_table.png -------------------------------------------------------------------------------- /docs/guide/images/component_tag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/component_tag.png -------------------------------------------------------------------------------- /docs/guide/images/component_tag_group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/component_tag_group.png -------------------------------------------------------------------------------- /docs/guide/images/detail_component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/detail_component.png -------------------------------------------------------------------------------- /docs/guide/images/detail_component_detail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/detail_component_detail.png -------------------------------------------------------------------------------- /docs/guide/images/dev_process.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/dev_process.jpg -------------------------------------------------------------------------------- /docs/guide/images/git_settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/git_settings.png -------------------------------------------------------------------------------- /docs/guide/images/knowledge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/knowledge.png -------------------------------------------------------------------------------- /docs/guide/images/search_component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/search_component.png -------------------------------------------------------------------------------- /docs/guide/images/vue_base_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/vue_base_preview.jpg -------------------------------------------------------------------------------- /docs/guide/images/vue_base_preview2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/vue_base_preview2.jpg -------------------------------------------------------------------------------- /docs/guide/images/wechat_code_structure.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/wechat_code_structure.jpg -------------------------------------------------------------------------------- /docs/guide/images/wechat_defect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/wechat_defect.png -------------------------------------------------------------------------------- /docs/guide/images/wechat_dev_process.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/wechat_dev_process.jpg -------------------------------------------------------------------------------- /docs/guide/images/wechat_homepage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/wechat_homepage.jpg -------------------------------------------------------------------------------- /docs/guide/images/wechat_reg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/wechat_reg.png -------------------------------------------------------------------------------- /docs/guide/images/wechat_reg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/wechat_reg2.jpg -------------------------------------------------------------------------------- /docs/guide/images/wechat_reg3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/guide/images/wechat_reg3.jpg -------------------------------------------------------------------------------- /docs/guide/release/auto.md: -------------------------------------------------------------------------------- 1 | # 自动更新脚本 2 | 3 | > 写作中 4 | -------------------------------------------------------------------------------- /docs/guide/release/git.md: -------------------------------------------------------------------------------- 1 | # git使用方法简介 2 | 3 | ## 创建仓库 4 | 选择免费的git平台创建仓库（如github、coding.net、码云等） 5 | ::: tip 6 | 建议空的代码仓库 7 | ::: 8 | 9 | ## 本地push源码 10 | 这里分两种情况：本地无源码和本地有源码 11 | ### 本地无源码 12 | 第一步，clone远程源码 13 | ```bash 14 | git clone https://path/to/your/repository 15 | ``` 16 | 第二步，编写源码，完成后上传源码 17 | ```bash 18 | git add . 19 | git commit -m "your commit message" 20 | git push origin master --set-upstream 21 | ``` 22 | ::: tip 23 | 注意初次提交时需要加上`--set-upstream`参数，因为远程不存在master分支，需要创建分支，第二次提交时就不需要了 24 | ::: 25 | 26 | ### 本地有源码 27 | 第一步，初始化git仓库 28 | ```bash 29 | git init 30 | ``` 31 | 第二步，添加远程仓库 32 | ```bash 33 | git remote add origin https://path/to/your/repository 34 | ``` 35 | 第三步，上传源码，与上一节方法相同 36 | 37 | ## 多git仓库源码管理 38 | 很多场景我们同一份源码需要在多个git仓库中进行投放，这时需要进行多仓库管理，首先我们查看本地远程仓库情况 39 | ```bash 40 | git remote -v 41 | origin https://path/to/your/repository1 (fetch) 42 | origin https://path/to/your/repository1 (push) 43 | ``` 44 | 添加远程仓库 45 | ```bash 46 | git remote add upstream https://path/to/your/repository2 47 | ``` 48 | 重新查看 49 | ```bash 50 | git remote -v 51 | origin https://path/to/your/repository1 (fetch) 52 | origin https://path/to/your/repository1 (push) 53 | origin https://path/to/your/repository2 (fetch) 54 | origin https://path/to/your/repository2 (push) 55 | ``` 56 | 向仓库1 master分支pull或push源码 57 | ```bash 58 | git pull origin master # 等价于git pull 59 | git push origin master # 等价于git push 60 | ``` 61 | 向仓库2 master分支pull或push源码 62 | ```bash 63 | git pull upstream master # master可以省略 64 | git push upstream master # master可以省略 65 | ``` 66 | 67 | ## 服务端pull源码 68 | ```bash 69 | git clone https://path/to/your/repository 70 | git pull 71 | ``` 72 | 73 | ## git免密更新 74 | 在服务端pull源码时我们发现每次都需要输入git用户名和密码，这样更新非常麻烦，我们可以通过git免密更新解决，方法如下： 75 | ### 服务端生成密钥 76 | 在服务端输入如下指令 77 | ```bash 78 | ssh-keygen -t rsa -C "youremail@example.com" 79 | ``` 80 | 成功生成密钥后打印密钥信息 81 | ```bash 82 | $ cat ~/.ssh/id_rsa.pub 83 | ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQCx/QMSjVSLKmHC0gNkVqjt59LdTkL1/3EJAQEIw 84 | TtlFNqTGAjTQMdZByDEfYacTfrsjnabUfUXgXYLd4RHv1/HYWcDq/LQDqT7x8xEuyGnC8RX980/me 85 | 5O5DhadUT3q3plppHX2MaT/qhQPmBz9H/fUGpkcL8nLJS3xCgXh4psC4us3Wnc1XUr7u1AEPZmmWc 86 | NVfehZ2cpr8DnD0MoWc2elKUQFmRuq3TyKnSvZRqPZ4OszmQ251mJEXcAZTUnHQQ1zszKSjO/oeY7 87 | 1XGOMOACqSCDBIw1cyMw5QTJ73vgxDOvMGMOntr/HuJbGmAevinl062/ph+47zNFRafTPm8r 9000 88 | 00000@qq.com 89 | ``` 90 | 91 | ### 部署密钥 92 | 在git仓库中选择"仓库设置"->"管理部署密钥"（这里以慕课网的git仓库为例，其他仓库类似） 93 | ![git_settings](../images/git_settings.png) 94 | 95 | 选择添加部署密钥，将服务端生成的密钥拷贝并添加 96 | 97 | ### 尝试免密更新 98 | 再次使用git pull发现不需要使用密码即可更新 99 | -------------------------------------------------------------------------------- /docs/guide/release/https.md: -------------------------------------------------------------------------------- 1 | # https服务 2 | 3 | > 写作中，目录结构： 4 | > ## 申请域名 5 | > ## 域名备案 6 | > ## https证书申请 7 | -------------------------------------------------------------------------------- /docs/guide/release/server.md: -------------------------------------------------------------------------------- 1 | # 服务端搭建 2 | 3 | ## MySQL安装 4 | MySQL 安装相关请参考：[MySQL 数据库搭建](https://www.youbaobao.xyz/admin-docs/guide/exercise/prepare.html#mysql-%E6%95%B0%E6%8D%AE%E5%BA%93%E6%90%AD%E5%BB%BA) 5 | 6 | ## 创建数据库 & 数据导入 7 | 1. 下载数据脚本（[地址](https://www.youbaobao.xyz/mpvue-res/book.sql)） 8 | 2. 创建 book 数据库 9 | 3. 通过 Navicat 等工具导入数据脚本 10 | 11 | ## 服务端部署 12 | 1. 下载服务端源码（[地址](https://git.imooc.com/coding-376/mpvue-imooc-node)） 13 | 2. 源码需要额外配置三个文件： 14 | - db/config.js 该文件为数据库文件，代码格式为： 15 | ```js 16 | module.exports = { 17 | host: '127.0.0.1', 18 | user: 'root', 19 | password: '123456', 20 | database: 'book', 21 | } 22 | ``` 23 | 24 | - alipay/appIdMap.js 该文件为微信小程序的 appId 和 secretKey，代码格式为： 25 | ```js 26 | const appIdMap = { 27 | ['your_wechat_app_id']: 'your_wechat_secret_key' 28 | } 29 | module.exports = appIdMap 30 | ``` 31 | 32 | - https/** 需要创建 https 文件夹，里面存储通过阿里云注册获得的 https 证书 33 | ```bash 34 | book_youbaobao_xyz.key 35 | book_youbaobao_xyz.pem 36 | ``` 37 | :::tip 38 | 如果你的小程序需要发布到互联网，则必须包含 https 证书，因为小程序接口要求必须为 https 服务 39 | ::: 40 | -------------------------------------------------------------------------------- /docs/images/gzh_qrcode.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/images/gzh_qrcode.jpg -------------------------------------------------------------------------------- /docs/images/home_design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/images/home_design.jpg -------------------------------------------------------------------------------- /docs/images/home_feature.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/images/home_feature.jpg -------------------------------------------------------------------------------- /docs/images/home_tech.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/images/home_tech.jpg -------------------------------------------------------------------------------- /docs/images/logo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/images/logo.gif -------------------------------------------------------------------------------- /docs/images/mp_qrcode.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/images/mp_qrcode.jpeg -------------------------------------------------------------------------------- /docs/qa/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar: auto 3 | --- 4 | 5 | # 常见问题汇总 6 | 7 | ## 8月4日 8 | 9 | ### 花絮 10 | 今天碰到一位非常可爱的同学，给大家报告一下，第8章已经录制完毕，正在后期剪辑中，第9章正在紧张制作中，谢谢大家的期待！ 11 | ![qa_8_4_2](./images/qa_8_4_2.png) 12 | 13 | ### 构建错误 14 | 15 | #### 问题现象 16 | 今天问答区有同学出现`webpack`构建后运行失败的情况，具体报错如下： 17 | ```bash 18 | vendor.js:17 Uncaught TypeError: __webpack_require__(...) is not a function 19 | at Object. (vendor.js:17) 20 | at __webpack_require__ (manifest.js:59) 21 | at Object._ (main.js:32) 22 | at __webpack_require__ (manifest.js:59) 23 | at Object. (vendor.js:6922) 24 | at __webpack_require__ (manifest.js:59) 25 | at Object. (vendor.js:6899) 26 | at __webpack_require__ (manifest.js:59) 27 | at Object. (vendor.js:6892) 28 | at __webpack_require__ (manifest.js:59) 29 | ``` 30 | 31 | #### 解决方法 32 | 解决方法出奇简单，只需要重启服务即可 33 | 34 | ::: tip 35 | 原文地址：[http://coding.imooc.com/learn/questiondetail/135053.html](http://coding.imooc.com/learn/questiondetail/135053.html) 36 | ::: 37 | 38 | ### 依赖安装问题 39 | 40 | #### 问题现象 41 | 这位同学使用`npm`安装`node-sass`和`sass-loader`报错后，使用`cnpm`安装成功，但是运行项目后提示： 42 | ```bash 43 | Cannot find module 'source-list-map' 44 | ``` 45 | ![qa_8_4_1](./images/qa_8_4_1.jpg) 46 | 47 | 48 | #### 解决方法 49 | 这类问题通常由于国内`npm`网络不佳，导致依赖没有安装完全，删除`node_modules`重装依赖即可解决问题，国内推荐使用`cnpm` 50 | 51 | ::: tip 52 | 原文地址：[http://coding.imooc.com/learn/questiondetail/135120.html](http://coding.imooc.com/learn/questiondetail/135120.html) 53 | ::: 54 | 55 | ## 8月1日 56 | 57 | ### 小程序运行问题 58 | 59 | #### 问题现象 60 | 为什么我的代码编译成功，却无法运行呢？报错如下： 61 | ![qa_8_1_1](./images/qa_8_1_1.png) 62 | 63 | #### 解决方法 64 | 这位同学犯了一个小小的错误，他通过微信开发者工具打开了代码目录（比如代码目录是：`D:\mpvue\mpvue-imooc-ebook`），而实际我们应该打开微信小程序代码所在目录，这个路径位于：`D:\mpvue\mpvue-imooc-ebook\dist\wx`，打开小程序代码目录后，问题迎刃而解 65 | 66 | #### 反馈 67 | 今天通过TeamViewer远程解决了同学的问题，不算大问题，解决后得到同学的好评，非常开心^^这位同学也非常辛苦，晚上近11点还在学习！ 68 | ![qa_8_1_1](./images/qa_8_1_2.jpg) 69 | -------------------------------------------------------------------------------- /docs/qa/images/qa_8_1_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/qa/images/qa_8_1_1.png -------------------------------------------------------------------------------- /docs/qa/images/qa_8_1_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/qa/images/qa_8_1_2.jpg -------------------------------------------------------------------------------- /docs/qa/images/qa_8_4_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/qa/images/qa_8_4_1.jpg -------------------------------------------------------------------------------- /docs/qa/images/qa_8_4_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sam9831/mpvue-imooc-ebook-docs/8d5855884b149b818be622b76f5be8d549a59a23/docs/qa/images/qa_8_4_2.png -------------------------------------------------------------------------------- /docs/reader/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar: auto 3 | --- 4 | 5 | # 学习笔记 6 | 7 | ## 《Vue实战微信读书》学习笔记 8 | ::: tip 9 | 今天非常意外地在问答区收获一位同学的学习笔记，写得非常全面、细致和深入，非常佩服这位同学的总结能力和学习态度，所以特别开设读书笔记专栏，收集同学们的优秀读书笔记 10 | ::: 11 | 12 | - 第一篇：[https://blog.csdn.net/weixin_41688305/article/details/97293918](https://blog.csdn.net/weixin_41688305/article/details/97293918) 13 | - 第二篇：[https://blog.csdn.net/weixin_41688305/article/details/97512350](https://blog.csdn.net/weixin_41688305/article/details/97512350) 14 | - 第三篇：[https://blog.csdn.net/weixin_41688305/article/details/97623051](https://blog.csdn.net/weixin_41688305/article/details/97623051) 15 | - 第四篇：[https://blog.csdn.net/weixin_41688305/article/details/97692051](https://blog.csdn.net/weixin_41688305/article/details/97692051) 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mpvue-imooc-ebook-docs", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "docs:dev": "vuepress dev docs", 9 | "docs:build": "vuepress build docs" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC" 14 | } 15 | --------------------------------------------------------------------------------