text: (window.webpackJsonp=window.webpackJsonp||[]).push([[29],{525:function(n,e,t){"use strict";t.r(e);var o=t(3),s=Object(o.a)({},(function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("ContentSlotsDistributor",{attrs:{"slot-key":n.$parent.slotKey}},[t("h2",{attrs:{id:"开发手册"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#开发手册"}},[n._v("#")]),n._v(" 开发手册")]),n._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[n._v("1. 可以使用 'I18N' 这个库来实现国际化\n2. 现在更推荐使用 i18next\n3. 在 react 中可以使用 i18next + react-i18next\n4. 如果要实现搜索结果高亮可以通过遍历搜索出来的结果把结果外面加一个标签,使用 v-html 进行展示\n5. 上拉或下拉容器移动原理是通过 js 动态改变position的位置\n6. 点击哪个选哪个解决方法：动态的加 class 通过 index 和点击时的 activeIndex 相同时就加，实现点哪个选哪个\n7. 点击哪个多选哪个解决方法：判断数组中的变量，如果是 true 就动态的加 class，否则不加，实现多点哪个多选哪个\n8. 动态加载css实现换肤原理，准备多份 css 文件，每次切换时动态的 appendChlid 到 head 中，要删除原有的不然会一直添加\n9. 设置英文的font-size可能会遇到字显示不全的问题，可以通过设置 line-height 解决\n10. 表格列表中的下拉框选中一个后，后面新增的下拉框去除前面选中的思路： 监听表格列表长\n    当是添加的时候把当前所有选中的从下拉框中去除掉，并且存进去除的数组中，在删除表格列表时，把删除的数据再添加进下拉框中\n11. 在IE浏览器中不支持Date横杠格式 \"2011-06-06\" ，需要转换为 \"2011/06/06\"\n12. 调用微信需要授权的 api 时，第一次都会弹出授权框，getUserInfo 除外，在使用这些需要授权的api时需要注意兼容用户拒绝授权的情况\n    使用 getSetting 查看授权情况结合 authorize 进行重新弹框授权\n13. 在有 v-for 的地方使用不了 v-if 可以用动态 class 或 style 的 display: none 代替\n    也可以把循环内容放在计算属性里, 在计算属性里把判断条件过滤掉\n14. 在实现swiper的列表数据展示时, 每页的列表都不一样, 如果使用数组每个页面都会重新赋值会出现闪屏的情况\n    最好的做法是使用对象存储每页的列表数据, 使用时可能会遇到 vue 动态的给对象的属性或数组的下标赋值不成功\n    则需要使用 this.$set 方法赋值, 注意要判断是否已经有值, 避免重复加载同样的数据\n15. 在 webpack 打包的时候，可以在 js 文件中混用 require 和 export，但是不能混用 import 以及 module.exports\n    因为 webpack2 中不允许混用 import 和module.exports, 解决办法就是统一改成ES6的方式编写即可\n16. 在安装依赖不成功时，可执行 npm cache clean --force 清除缓存，删除 package-lock.json 和 node_modules 文件，再执行 npm install\n17. 在开发微信网页时，如果是安卓手机可以打开 debugx5.qq.com 这个地址清除网页缓存，如果是苹果手机则需要重新登录微信清除网页缓存\n18. 在开发微信网页时，安卓手机打开微信 webview 有缓存导致第二次白屏，解决方法在 webview 链接后加一个时间戳\n    切记不能在 webview 页面对 url 做其他操作，会引起其他 bug，如加解密 url\n19. 引用静态文件规范\n    uni-app\n    在 template 中使用不加 ~@ 的绝对路径，如 '/static/img/1.png'\n    在 js 中使用不加 ~ 的绝对路径，如 '@/static/img/1.png'\n    在 css 中使用 ~@ 的绝对路径，如 '~@/static/img/1.png'\n    vuecli\n    在 template 中可以使用 ~@ 的绝对路径，如 '~@/static/img/1.png'\n    在 js 中使用不加 ~ 的绝对路径，如 '@/static/img/1.png'\n    在 css 中使用 ~@ 的绝对路径，如 '~@/static/img/1.png'\n    默认没有 static 目录，而 assets 会经过 webpack 构建\n    如果需要通过本地动态切换，需要在 js 中 import ，再使用通过变量切换\n20. 可以使用 npx 命令调用安装的依赖，如 npx mocha --version\n21. 快速删除 node_modules 文件夹\n    npm install rimraf -g\n    rimraf node_modules\n22. uni.getLocation 获取位置时在 H5 需要使用 winxin-js-sdk 获取\n    uni.chooseLocation 打开地图默认位置时在 H5 需要使用腾讯地图组件\n23. 当margin或者padding取值是百分比的时候，无论是left，right或者top，bottom，都是以父元素的width为参考物\n24. 可以使用 json-server 实现 mock 数据\n25. decodeURIComponent 和 encodeURIComponent 是用来对 URI 其中的一部分做转义\n    decodeURI 和 encodeURI 是用来对整个 URI 做转义\n26. 如果使用了 ssl 证书，打开 chrome 报 Your connection is not private 不让访问\n    一般点击高级选项中可以继续访问，如果不行，可以直接输入 thisisunsafe 即可绕过 ssl 校验\n")])])]),t("h2",{attrs:{id:"生成测试的-ssl-证书"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#生成测试的-ssl-证书"}},[n._v("#")]),n._v(" 生成测试的 ssl 证书")]),n._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[n._v("openssl genrsa -des3 -passout pass:x -out server.pass.key 2048\n\nopenssl rsa -passin pass:x -in server.pass.key -out server.key \n\nopenssl req -new -key server.key -out server.csr \n\nopenssl x509 -req -sha256 -days 3650 -in server.csr -signkey server.key -out server.crt\n")])])]),t("h2",{attrs:{id:"文字溢出省略号"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#文字溢出省略号"}},[n._v("#")]),n._v(" 文字溢出省略号")]),n._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[n._v("overflow: hidden;\ntext-overflow: ellipsis;\ndisplay: -webkit-box;\n-webkit-line-clamp: 1;\n-webkit-box-orient: vertical;\nwhite-space: nowrap;\nword-break: normal;\n")])])]),t("h2",{attrs:{id:"在webkit和safari内核的浏览器下隐藏滚动条且可以滚动"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#在webkit和safari内核的浏览器下隐藏滚动条且可以滚动"}},[n._v("#")]),n._v(" 在webkit和safari内核的浏览器下隐藏滚动条且可以滚动")]),n._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[n._v("  /* webkit 内核 */\n  .scroll_content::-webkit-scrollbar {\n    width:0px;\n    height:0px;\n  }\n  .scroll_content::-webkit-scrollbar-button    {\n    background-color:rgba(0,0,0,0);\n  }\n  .scroll_content::-webkit-scrollbar-track     {\n    background-color:rgba(0,0,0,0);\n  }\n  .scroll_content::-webkit-scrollbar-track-piece {\n    background-color:rgba(0,0,0,0);\n  }\n  .scroll_content::-webkit-scrollbar-thumb{\n    background-color:rgba(0,0,0,0);\n  }\n  .scroll_content::-webkit-scrollbar-corner {\n    background-color:rgba(0,0,0,0);\n  }\n  .scroll_content::-webkit-scrollbar-resizer  {\n    background-color:rgba(0,0,0,0);\n  }\n  .scroll_content::-webkit-scrollbar {\n    width:10px;\n    height:10px;\n  }\n  /* o 内核 */\n  .scroll_content .-o-scrollbar{\n    -moz-appearance: none !important;   \n    background: rgba(0,255,0,0) !important;  \n  }\n  .scroll_content::-o-scrollbar-button {\n    background-color:rgba(0,0,0,0);\n  }\n  .scroll_content::-o-scrollbar-track {\n    background-color:rgba(0,0,0,0);\n  }\n  .scroll_content::-o-scrollbar-track-piece {\n    background-color:rgba(0,0,0,0);\n  }\n  .scroll_content::-o-scrollbar-thumb{\n    background-color:rgba(0,0,0,0);\n  }\n  .scroll_content::-o-scrollbar-corner {\n    background-color:rgba(0,0,0,0);\n  }\n  .scroll_content::-o-scrollbar-resizer  {\n    background-color:rgba(0,0,0,0);\n  }\n  /* IE10 IE11 IE12 */\n  .scroll_content{\n    -ms-scroll-chaining: chained;\n    -ms-overflow-style: none;\n    -ms-content-zooming: zoom;\n    -ms-scroll-rails: none;\n    -ms-content-zoom-limit-min: 100%;\n    -ms-content-zoom-limit-max: 500%;\n    -ms-scroll-snap-type: proximity;\n    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);\n    -ms-overflow-style: none;\n    overflow: auto;\n  }\n")])])]),t("h2",{attrs:{id:"reset-css"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#reset-css"}},[n._v("#")]),n._v(" reset css")]),n._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[n._v("html, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed, \nfigure, figcaption, footer, header, hgroup, \nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font: inherit;\n  vertical-align: baseline;\n}\narticle, aside, details, figcaption, figure, \nfooter, header, hgroup, menu, nav, section {\n  display: block;\n}\nbody {\n  line-height: 1;\n}\nol, ul {\n  list-style: none;\n}\nblockquote, q {\n  quotes: none;\n}\nblockquote:before, blockquote:after,\nq:before, q:after {\n  content: '';\n  content: none;\n}\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n")])])]),t("div",{staticClass:"custom-block tip"},[t("p",[n._v("作者：chenjie "),t("br"),n._v("\n链接：https://webchenjie.cn "),t("br"),n._v("\n来源：ChenJieBlog")])])])}),[],!1,null,null,null);e.default=s.exports}}]);