简介答题活动小程序v2.0，是一个微信小程序答题软件，它基于微信原生小程序+云开发实现。 它使用了最新的前端技术栈，具有原生APP体验服务的小程序框架，小程序视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，响应的数据绑定，提供了丰富的基础组件和API。 提炼了典型的业务模型，它可以帮助你快速搭建各种形式的答题软件产品。相信不管你的需求是什么，本项目都能帮助到你。 [图片] [图片] 目录结构小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件（app.js、app.json、app.wxss）组成，必须放在项目的根目录。目录结构如下： [图片] 一个小程序页面由这四个文件组成，你可以留意到这个项目里边有不同类型的文件: .json 后缀的 JSON 配置文件；.wxml 后缀的 WXML 模板文件；.wxss 后缀的 WXSS 样式文件；.js 后缀的 JS 脚本逻辑文件； 功能主要包含六大功能模块页面，首页、答题页、结果页、活动规则页、答题记录页、排行榜页。适用于交通安全答题、 消防安全知识宣传、 安全生产知识学习、百年历史知识答题活动、学法守法有奖答题等。 - 首页 - 微信授权登录 - 获取微信头像和昵称等 - 活动规则页 - 答题页 - 实现用云开发实现查询题库功能 - 题库随机抽题 - 实现动态题目数据绑定 - 答题交互逻辑 - 切换下一题 - 提交答卷保存到云数据库集合 - 系统自动判分 - 结果页 - 答题结果页从云数据库查询答题成绩 - 实现转发分享答题成绩功能 - 答题记录页 - 查询历史成绩 - 排行榜页 - 成绩由高到低进行排名 - 实现页面间跳转功能 - 路由 - 界面交互 - 消息提示框 - loading 提示框 源码地址uem/答题活动小程序v2 https://gitee.com/uemeng/answer-activity-applet-v2.0 作品体验[图片]

Vue Mixins mixins（vue2） mixins的基础 mixin就是混入的意思，下面是官方文档的介绍：”它提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项“。 通俗一点，就类似于java里面的多重继承！如果多个组件中有一些相同的逻辑，那么通过mixins就可以实现共用这些代码，避免代码冗余，就类似与组件的js之间合并在一起，共享行为。 mixins的使用 [代码]//mixin.js export default { data(){ return { count:0, } }, methods:{ getCount(){ console.log("我是mixins-"+this.count); }, }, created(){ console.log("我是mixins-created"); }, mounted(){ console.log("我是mixins-mounted"); } } 讲mixins引入组件即可使用 //component <template> </template> <script> import mixin from "@...../mixin.js" export default{ mixins:[common], created(){ console.log("我是component-created"); }, mounted(){ console.log("我是component-mounted"); } methods:{ getCount(){ console.log("我是component-"+this.count); }, }, } </script> [代码] mixins的特性： mixins中的生命周期会会和引入的mixins的生命周期整合在一起，并且是混入对象的钩子将在组件自身钩子之前调用。 [代码]//如上面的的代码将依次输出 我是mixins-created 我是mixins-mounted 我是component-created 我是component-mounted [代码] [代码] 2. 如果mixins和组件的键名冲突时，取组件对象的键值对。(个人觉得和混入对象的钩子将在组件自身钩子**之前**调用相同的原因) [代码] [代码]var mixin = { methods: { foo: function () { console.log('foo') }, conflicting: function () { console.log('from mixin') } } } var vm = new Vue({ mixins: [mixin], methods: { bar: function () { console.log('bar') }, conflicting: function () { console.log('from self') } } }) vm.foo() // => "foo" vm.bar() // => "bar" vm.conflicting() // => "from self" [代码] mixins和vuex区别 Mixins：mixins定义的共用变量，可以在每个组合后的组件中使用，但mixins引入到组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。 vuex：vuex主要用来做状态管理，类似于全局变量和全局方法，里面定义的states在各个组件都可以用，在任一组件中修改此变量的值之后，其他组件中此变量的值也会被修改。 mixins和父子组件的区别 组件：父子组件当中，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props或者$emit来传递信息，但本质上两者是相对独立的。 Mixins：在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。（装饰器模式） mixins的缺点 假如是引入了多个 mixins 的话， data 来源不明确（隐式引入），就是不清楚一些变量方法是来自哪个mixin？不利于维护 多个 mixins 的生命周期会融合到一起运行，但是同名属性、同名方法无法融合，可能会导致冲突。 比如 mixin1 中的方法getCount() 是要输出 mixin1 的变量 count1 ，但是 mixin2 也是用了相同的方法名getCount()，但它输出的是 mixin2 的的变量count2 这是这时mixin1的getCount可能就会被覆盖了，就会造成一些bug了 mixins和组件可能出现多对多的关系，复杂度较高（即一个组件可以引用多个mixins，一个mixins也可以被多个组件引用） 可以说mixins的缺点是推动vue3 Composition API背后的主要推动因素之一! 自定义Hooks (Vue3) 个人还没系统学习过Vue3，这里也只是简单尝尝鲜，找时间再补Vue3！ vue3实现的mixins和vue2的区别个人理解就是，vue3 是通过自定义hook函数，而mixins是合并对象。我们将所复用的变量从新的setup（vue3）函数返回js变量，而不是以组件功能去实现。 这里通过一个官方例子来学习自定义Hooks的使用，以及考虑它是怎么解决mixins的缺点的。 [代码]//一个获取鼠标位置mouse的复用js import { ref, onMounted, onUnmounted } from "vue"; export function useMousePosition() { const x = ref(0); const y = ref(0); function update(e) { x.value = e.pageX; y.value = e.pageY; } onMounted(() => { window.addEventListener("mousemove", update); }); onUnmounted(() => { window.removeEventListener("mousemove", update); }); return { x, y }; } //组件里运用 import { useMousePosition } from "./mouse"; export default { setup() { const { x, y } = useMousePosition(); return { x, y }; }, }; [代码] 虽然看起来自定义hooks实现的mixins的运用回略显繁琐，但其实这样子才解决了 vue2 mixins 的缺点 从代码就可以看出mouse的x，y来自useMousePosition，这种显示引入很快就可以帮我们找到变量来源，假如有命名冲突也可以通过显示命名解决了，如下： [代码]//组件里运用 import { useMousePosition1 } from "./mouse1"; //这里的useuseMousePosition1是可以改变的 import { useMousePosition2 } from "./mouse2"; export default { setup() { const { mouse1.x, mouse1.y } = useMousePosition1(); const { mouse2.x, mouse2.y } = useMousePosition2(); return { mouse1.x, mouse1.y, mouse2.x, mouse2.y }; }, }; [代码] 当然这只是简单的运用，至于里面的原理大家感兴趣可以了解一下，也可以带着着个问题去学习一下vue3的新特性！ 参考链接 mixins和vuex区别_hkduan的博客-CSDN博客_vuex和mixins Vue2/Vue3中的代码逻辑复用对比（mixins、自定义hook） - 起源地 (qiyuandi.com) Vue3 Composition API如何替换Vue Mixins_慕课手记 (imooc.com)

技术文章写作规范 来源： GitHub - ruanyf/document-style-guide: 中文技术文档的写作规范，by阮一峰 前言 最近在写文章会想一篇好的文章是不是和写语文作文一样有规范呢？所以就在网上看到阮一峰老师的写的这篇中文技术文档写作规范，觉得真的写得很好，这里就和大家分享一下。 但是阮老师写的是技术文档规范，个人觉得文章的话如果整得太严肃的话或许不太好，不过一些结构，表达还是要注意得，像代码用 md 代码块， uml 图等等会好一点，当然这是个人爱好，这里给大家转载一些我觉得在平时写文章要注意一下的几个点，有兴趣的可以直接去看阮老师的正文！ 标题 层级 标题分为四级。 一级标题：文章的标题 二级标题：文章主要部分的大标题 三级标题：二级标题下面一级的小标题 四级标题：三级标题下面某一方面的小标题 下面是示例。 [代码]# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 [代码] 原则 （1）一级标题下，不能直接出现三级标题。 示例：下面的文章结构，缺少二级标题。 [代码]# 一级标题 ### 三级标题 [代码] （2）标题要避免孤立编号（即同级标题只有一个）。 示例：下面的文章结构，[代码]二级标题 A[代码]只包含一个三级标题，完全可以省略[代码]三级标题 A[代码]。 [代码]## 二级标题 A ### 三级标题 A ## 二级标题 B [代码] （3）下级标题不重复上一级标题的名字。 示例：下面的文章结构，二级标题与下属的三级标题同名，建议避免。 [代码]## 概述 ### 概述 [代码] （4）谨慎使用四级标题，尽量避免出现，保持层级的简单，防止出现过于复杂的章节。 如果三级标题下有并列性的内容，建议只使用项目列表（Item list）。 示例：下面的结构二要好于结构一。结构一适用的场景，主要是较长篇幅的内容。 [代码]结构一 ### 三级标题 #### 四级标题 A #### 四级标题 B #### 四级标题 C 结构二 ### 三级标题 **（1）A** **（2）B** **（3）C** [代码] 文本 字间距 （1）全角中文字符与半角英文字符之间，应有一个半角空格。 [代码]错误：本文介绍如何快速启动Windows系统。 正确：本文介绍如何快速启动 Windows 系统。 [代码] （2）全角中文字符与半角阿拉伯数字之间，有没有半角空格都可，但必须保证风格统一，不能两种风格混杂。 [代码]正确：2011年5月15日，我订购了5台笔记本电脑与10台平板电脑。 正确：2011 年 5 月 15 日，我订购了 5 台笔记本电脑与 10 台平板电脑。 [代码] 半角的百分号，视同阿拉伯数字。 [代码]正确：今年我国经济增长率是6.5%。 正确：今年我国经济增长率是 6.5%。 [代码] （3）英文单位若不翻译，单位前的阿拉伯数字与单位符号之间，应留出适当的空隙。 [代码]例1：一部容量为 16 GB 的智能手机 例2：1 h = 60 min = 3,600 s [代码] （4）半角英文字符和半角阿拉伯数字，与全角标点符号之间不留空格。 [代码]错误：他的电脑是 MacBook Air 。 正确：他的电脑是 MacBook Air。 [代码] 句子 （1）避免使用长句。 不包含任何标点符号的单个句子，或者以逗号分隔的句子构件，长度尽量保持在 20 个字以内；20～29 个字的句子，可以接受；30～39 个字的句子，语义必须明确，才能接受；多于 40 个字的句子，任何情况下都不能接受。 [代码]错误：本产品适用于从由一台服务器进行动作控制的单一节点结构到由多台服务器进行动作控制的并行处理程序结构等多种体系结构。 正确：本产品适用于多种体系结构。无论是由一台服务器（单一节点结构），还是由多台服务器（并行处理结构）进行动作控制，均可以使用本产品。 [代码] 逗号分割的长句，总长度不应该超过 100 字或者正文的 3 行。 （2）尽量使用简单句和并列句，避免使用复合句。 [代码]并列句：他昨天生病了，没有参加会议。 复合句：那个昨天生病的人没有参加会议。 [代码] （3）同样一个意思，尽量使用肯定句表达，不使用否定句表达。 [代码]错误：请确认没有接通装置的电源。 正确：请确认装置的电源已关闭。 [代码] （4）避免使用双重否定句。 [代码]错误：没有删除权限的用户，不能删除此文件。 正确：用户必须拥有删除权限，才能删除此文件。 [代码] 变化程度的表示法 数字的增加要使用“增加了”、“增加到”。“了”表示增量，“到”表示定量。 [代码]增加到过去的两倍 （过去为一，现在为二） 增加了两倍 （过去为一，现在为三） [代码] 数字的减少要使用“降低了”、“降低到”。“了”表示增量，“到”表示定量。 [代码]降低到百分之八十 （定额是一百，现在是八十） 降低了百分之八十 （原来是一百，现在是二十） [代码] 不能用“降低 N 倍”或“减少 N 倍”的表示法，要用“降低百分之几”或“减少百分之几”。因为减少（或降低）一倍表示数值原来为一百，现在等于零。 参考链接 产品手册中文写作规范, by 华为 写作规范和格式规范, by DaoCloud 技术写作技巧在日汉翻译中的应用, by 刘方 简体中文规范指南, by lengoo 文档风格指南, by LeanCloud 豌豆荚文案风格指南, by 豌豆荚 中文文案排版指北, by sparanoid 中文排版需求, by W3C 为什么文件名要小写？, by 阮一峰 Google Developer Documentation Style Guide, by Google

前情提要：   在10月9号开始，社区发起了一个「微信校园技术运营官招募计划」，活动的初衷应该是希望招募所谓的“校园技术运营官”可以在社区为百万级开发者与运营者，贡献优质技术内容，参与社区的运营工作。原文可以看「点这里」   对于此类活动，还是极好的，多了那么多小可爱在社区分享、解答问题，这是极好的，社区就需要这样的热心同学，多多益善。   据了解本次计划招募了中山大学7名、华南农业大学5名、华南理工大学24名、广东工业大学16名、广东外语外贸大学1名、暨南大学2名、广东药科大学1名共计56名新同学来参与开放社区运营。 问题来了，为什么我还要吐槽呢？   首先来说下根据社区所了解到的“校园技术运营官”的考核转正标准，根据社区js文件，综合已获得第一届微信校园技术运营官计划考核的同学可以判断，转正标准为社区贡献值达到300（至于其他要求就不太清楚了，条件是根据已有数据分析所得，可以看图），社区贡献获取来源主要有文章被点赞收藏、回答/评论获得点赞、活跃、反馈有效问题、完善个人信息等方式获得（问题就出在这里）。 [图片]   我想要吐槽的是什么呢？ 1、参与第一届“校园技术运营官”的中有部分同学为了快速获得300贡献值转正，存在很严重的灌水刷分行为，这类行为应该明令禁止的，肯定是会影响其他正常努力的同学。下面是比较夸张的一些日贡献值，11月月度贡献值，数据来源于社区接口 [图片] [图片] [图片] 部分不正常行为截图： 1）文章浏览量88，点赞数23，点赞数量远超出社区当前正常文章平均点赞数范围 [图片] 2）文章浏览量229，点赞数28，点赞数量远超出社区当前正常文章平均点赞数范围 [图片] 3）文章浏览量113，点赞数13，点赞数量远超出远超出社区当前正常文章平均点赞数范围 [图片] 4）问题回答数25，点赞数79，点赞数量远超出社区当前正常用户回答平均点赞范围 [图片] 5）当前排名第一的技术官同学，11月月度获取贡献已超700，即将突破历史贡献者月度贡献记录，然而他回答数只有255、文章数只有1， [图片] 6）文章数3，点赞数53，一篇基础入门文章，10人评论，20次点赞 [图片] 7）回答数169，点赞数209，点赞数量远超出社区当前正常用户回答平均点赞范围 [图片] 8）一篇文章41浏览，8评论，我好奇的点进去看了下，结果是这样的，竟然相互在刷点赞回复 [图片] [图片] 9）文章评论、浏览、点赞比例远超出社区当前正常文章平均评论、点赞数范围 [图片] 10）每篇文章下评论点赞总是那么几个人，太多了，你们自己去看吧，我懒得截图了 [图片][图片][图片] 以上的还有很多，你们自己有兴趣的可以去自己翻一下，我就懒得去挨个贴图了。 2、部分同学存在不认真读题，盲目回答的用户所提出的问题 1）米大师支付问题，可能这两位同学还不清楚米大师是什么产品，该报错并不是网络原因所导致 [图片] 2）小程序打开付款码问题，该问题是提问的在小程序通过接口打开用户付款码接口，而并非付款码支付接口 [图片] 3）公众号问题回复小程序文档地址 [图片] 还有一些就不一一列举了，只是想表达回答用户问题时，不了解的没有必要一定去回答，回答的时候也要认真读问题 写在最后   发表本帖，对事不对人，没有什么特别的意思，技术官里面我一个认识的也没有，不存在为谁鸣不平，既然起点一致，希望做的相对公平一些，初衷是好的，希望新同学们不忘初心，记得自己来社区的目的。   在这里我还想表达一点，即使你们不去刷分，日常勤快的分享文章，回答问题，一个月300分是完全没有问题的，何必投机取巧呢？ [图片]

javascript基础总结 小程序框架系统分为两部分： 逻辑层(App Service) 和视图层(View);其中微信小程序开发提供了自己的语言wxml和wxss来描述视图层，基于javascript(js)的逻辑层框架。在视图层和逻辑层之间提供了数据传输和事件的系统，js将数据处理后将数据发送给视图层，这样便于开发者专注于业务逻辑开发。 1.注释 /* 注释的语法和c++的注释语法一致 */ // 双斜杠 单行注释 /* 斜杠 + 🌟 多行注释 */ 2.变量 1: javascript声明变量都是使用var，和c++声明变量有区别，js声明变量都是使用var,变量类型通过赋值类型决定。javascript，python lua等都是弱类型语言。 var a; //声明变量 var name = "s"; //声明变量并赋值 a = 1; //赋值 2: 变量类型 数字类型：整型，浮点数； 数组： Array 下标从0开始 字符串变量："string"; 布尔类型： true/false; Date类型变量：dtm； Undefined : var name = null; 对象引用变量：object var person = { name : "s"; age : 10; id : 10000; } //访问对象成员可以使用中括号或者 . var name = person.name; var iAge = person["age"]; 3: javascript变量命名规范： 常量以及全局变量名必须全部使用大写字母，常数名中的多个单词使用下划线“_”分隔，例如： var CONST_ED_SFA = "系统错误"; 变量的命名采用匈牙利命名法，通过在变量名前面添加相应小写字母的符号标示作为前缀，标示出变量的作用域，类型等，前缀后面是一个或多个单词组合，单词描述了变量的用途，如o表示对象，i表示的是整数，s表示的是字符串。例如： var oData = new Data(); var sUserName = 'css8'; var iCount = 0; ​ //如果变量名过长可以使用单词缩写，推荐使用标准缩写以使名称保持在适当的长度内。使用缩写时，应确保在整个脚本中保持一致。 //所有使用单词所写的变量名必须在定义时给出注释,如： ​ var strAdminName; // 可以简单注释，Admin被广泛了解 3.运算符 1:运算符： 和数学中的运算符一致； [图片] 2：逻辑运算符： 比较逻辑,返回true 和 false； [图片] 4.条件语句if语句： if(/*condition_1*/) { /* 满足condition_1，执行... */ } else if(/* condition_2 */) { /* 满足condition_2，执行... */ } ... else { /* 上述条件都不满足时，执行... */ } 2.for语句： for(/*初始化语句；开始循环前执行，且只执行一次 */; /*循环退出条件判断；每次进入循环语句前执行，判断为true才会进入循环语句，否则跳出循环*/; /* 语句3，在循环代码执行后执行 */) {    /* 循环代码语句 */ } //example for(var i = 0; i < 10; ++i) {    x = x + i; } 3.while语句： while(/* 条件判断，为true时进入循环 */) { /* 循环语句 */ } //example: while(i > 0) { --i; } 5. js文件基本结构注册页面 page方法：page( //数据对象    data:{     msg : "hello world!",     flag : true,     } ,   //函数， 可重复被调用执行的代码块 /* 函数名: function(参数){ }, */ //生命周期函数 监听页面加载 //在页面加载时调用，一个页面只会调用一次 onLoad: function(options) {         },    //生命周期函数 监听页面初次渲染完成     //页面初次渲染完成时调用，一个页面只会调用一次，代表页面准备妥当，可以和视图层交互    onReady: function() {         }，    //生命周期函数 监听页面显示    //页面显示/切入前台时触发    onShow: function() {         },    ...   )

部署，你做的好啊，你做的好啊省流助手 神中神的几篇博客，解决部署所有烦恼： https://blog.csdn.net/weixin_43754275/article/details/105760905 https://blog.csdn.net/weixin_45678130/article/details/119953888 https://blog.csdn.net/weixin_43408077/article/details/119617391?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.showsourcetag&spm=1001.2101.3001.4242.1 实操部署 环境为腾讯云宝塔linux+vue3+vue-cli4 首先需要在本地将vue项目打包，执行npm run build。之前很多文章指出，在本地运行时，vue.config.js中的publicPath要设定为'/'，打包上传时修改为'./'，本人亲测多次发现这是不对的（比如直接访问子路由地址/xxx/xxx会报404）。问题分析与解决可以看第一篇博客（https://blog.csdn.net/weixin_43754275/article/details/105760905），在使用history模式后，publicPath依然需要设置为'/'，这样打包后才能获取到静态资源。这是本人觉得非常坑的一个点，如果使用history路由的同学可以注意一下。打包后的文件会存在dist目录下。 [图片] 然后进入服务器，宝塔控制面板支持一键配置nginx。在安装好vue及其他所需包后，点击宝塔页面左侧的网站，选择添加站点，第一行可以随便输一个名字（之后再删掉），第二行输入IP及端口号。 [图片] 进入站点文件夹（比如我的叫blog.com，那就进入这个文件夹），将本地的dist目录拷贝于此。回到站点界面，点击刚创建的站点，找到网站目录，添加/dist，因为访问的文件都放在该目录下。 [图片] 找到配置文件栏，修改里面的监听端口，并且增加如下代码，表示访问某个路由时，让nginx去找。配完这一步，并为端口设置防火墙后，就可以访问我们的博客啦~ [图片] [图片] [图片] [图片] 后记 之前配了好久搞到凌晨4点没成，睡醒重装了系统从头来顺利搞好了。只能说history模式下坑挺多。。。 [图片]

写在前面： 小白de自我介绍：本科在读，项目实战开发经验几乎为零（只做过课程大作业的不算是项目的不值一提的项目），最近刚刚开始入坑微信小程序开发，想通过文章的方式分享自己的学习路线和经历，一来记录自己的成长过程，用输出倒逼我自己在学习过程中的梳理与复盘，二来给予其他有想开始学习小程序开发的小伙伴以共勉(同是天涯飘零的菜菜，不过可能只有我是菜菜哈哈哈)，在从小白起步的艰难路途中不孤单，希望大家可以共同进步！ 我的入门学习路线： 学习平台：微信开放社区 不了解社区的可以看一下社区的官方介绍： https://developers.weixin.qq.com/community/business/doc/000c2e7a3d0c501c95b9c3c935640d?source=indextopic 微信开放社区作为微信官方的开发者社区，当让是与最最最最官方和系统的学习教程、文档和相关的资源啦，而且平台上有很多入门的课程，爱了爱了。相较于网上检索到的二手整理出来的“笔记”，微信开发社区绝对是最好的学习平台（没有之一）了。 不过当然，微信开放社区整个社区平台不仅仅是针对于小程序开发，平台的资源很多，刚开始使用这个平台的 时候可能会有一丢丢感到迷失，不知道适合小白的小程序资源在哪。那通过我的探索呢，我发现了最适合小白的课程与文档资源，并配上了我自己的服用方法。 1、看视频体验开发工具与基操，拥有初步认知 https://developers.weixin.qq.com/community/business/course/000264e20a0dd8e69669b609451c0d 这个视频真的讲解非常详细，从账号注册与工具下载开始手把手入门； 所谓“实践出真知”，动手做就是一条快速入门微信小程序开发的路径 看课程，跟着视频的讲解动手实践与体验 这个阶段就是跟着视频去做，去体验就好，只需要了解必要的基本操作，忽略很多原理与细节，避免刚刚接触的时候的畏难心理与情绪 2、学习开发文档，基于之前的感官了解完善一些细节的知识 https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a 这个是微信官方的小程序开发指南。 很多人在刚开始入门一项技术的时候看太多理论的文字可能会觉得枯燥，可以先学习前两章，与前面的视频内容有重叠，有细节的补充，可以算是对于之前视频学习体验的知识化巩固 当然啦，不论是看视频还是看文档，最好还是要同步做一些笔记记录的，便于当下的巩固与以后的回顾。 有任何想法，欢迎到评论区留言呀~ 下期再见~

Ctrl+S：保存文件 Ctrl+【， Ctrl+】：代码行缩进 Ctrl+Shift+【， Ctrl+Shift+】：折叠打开代码块 Ctrl+C Ctrl+V：复制粘贴，如果没有选中任何文字则复制粘贴一行 Shift+Alt+F：代码格式化 Alt+Up，Alt+Down：上下移动一行 Shift+Alt+Up，Shift+Alt+Down：向上向下复制一行 Ctrl+Shift+Enter：在当前行上方插入一行 Ctrl+End：移动到文件结尾 Ctrl+Home：移动到文件开头 Ctrl+i：选中当前行 Shift+End：选择从光标到行尾 Shift+Home：选择从行首到光标处 Ctrl+Shift+L：选中所有匹配 Ctrl+D：选中匹配 Ctrl+U：光标回退 有帮助的话不妨点个赞吧~

博客3.0，大改特改！（11.10-11.13）卡片（暂时这么叫，名字没想好） 网站的初衷是博客+二次元资料库，因此复制一遍发博客的代码，稍加修改（将数据存储至新的数据库）就是发卡片页了。建的第一个资料库就是阿手（b站搜索贝拉kira，把你的关注给我交了）。展示方面和博客展示一样的思路，图片使用懒加载处理，但使用了网络上的卡片插件（https://www.17sucai.com/pins/38899.html），将鼠标放至卡片上可以有一个上推的阴影效果，非常好看。为适配图片尺寸，将卡片设为横向矩形。ASOUL时代，沸腾期待！（点击查看更多可直达bb空间捏） [图片] 嵌套路由：千鸟，降临！ 做完阿手下一个就是千鸟了。想着在卡片页面的左侧做一个导航栏，能够切换阿手/千鸟/其他。导航栏使用竖向的el-menu，根路由是/card，点击千鸟路径就变为/card/qianniao。这需要引入嵌套路由，直接上图，在route.js文件中为card设置children属性。 [图片] el-menu开启router，为每个item设置路径，就可实现导航路由功能咯。 [图片] [图片] 千鸟的立绘是竖向的，因此调整了卡片尺寸。鸟不灭！鸟不灭！ 评论区？发病墙！ 设置了一个匿名评论区，发现发布评论后得手动刷新才能更新出来。在App.vue中写了一个reload函数，通过provide提供变量，子组件通过inject注入变量，设置0.5秒时延触发页面自刷新。 [图片] [图片] [图片] 史诗级提升：本地上传！（11.15） 结合文档和博客研究出了使用elmentui+leancloud将本地文件转为base64上传。el-upload的手动上传需要自己写httpRequest函数，本地上传的关键就是写好这个函数。 [图片] [图片] 下一章介绍部署网页至服务器上，折磨了一晚上，这方面文章繁多，都是你复制我的我复制你的，而且是vue-cli3+vue2，不适配我的版本，好在最后找到了神中神文章解决了。中间摸了几天画画去了~（天选管人痴收到了海子姐晚安和白白回复，赢！赢！） [图片] [图片] [图片]

博客2.0，堂堂更新（11.10）引入markdown 接上回，博客内容写在textarea里没有排版，也不能塞代码，限制过多。便引入了vue的markdown插件——v-md-editor，支持markdown的实时渲染，内容丰富度大大地提高了。 [图片] [图片] 博客详情 之前实现的[博客]页仅仅展示了博客标题与博客摘要，需要实现点击卡片进入单个博客内部，展示完整内容。这时便需要在路由中设置如下内容： [图片] 在点击博客标题时，通过router-link :to="'/blog/+blog.id"将blog id传至单独页，单独页中使用this.$route.params.id来接收，再通过leancloud接口实现过滤。 [图片] router vue的路由默认使用的是hash模式，这样会在地址中出现一个#号，看起来听扎眼的。使用history模式可以去除这一#号，vue3中通过createWebHistory()使用history模式。App.vue是挂载网页的根节点，在这个文件中设置router-view实现路由切换，也可设置整个网页的头图与底部图。 [图片] 界面美观 借鉴了许多博客设计，最后采取Fblog的界面设计（https://gitee.com/fengziy/Fblog#http://www.fengziy.cn/fBlog/），博客封面通过写博客时增加输入网络图片地址实现（暂时没实现本地图片上传）。 [图片] 在拉取数据时，发现图片怎么都加载不出来，检查代码，才想起图片赋值是动态的，不应该使用img src，而是使用img :src，实现动态数据绑定。一次加载过多图片会减慢速度，在此改用图片懒加载v-lazy，未访问的数据暂时先不加载。使用v-lazy也很方便，将img标签改成v-lazy就可以，同时在main.js文件中设置懒加载未加载时的图片。 [图片] （古见同学真可爱，嘿嘿） [图片]

前端性能优化 基础优化 像代码优化，避免使用复杂的 js css 代码，善用keep-alive，减少重复沉余操作等等基础的优化这里就不详细说啦，但同样重要！ 今天主要讲一下几种优化项目的方式。 路由懒加载（很重要） 配置路由各位前端得伙伴应该不陌生吧，但配置路由假如用的时一般加载，如果项目得模块少还好，要是十几个，再大点几十个上百个，一下子把所有组件都加载一遍，估计等项目加载完用户都怀疑是不是网络出问题了，自己开发预览也会很难受吧。 [代码]//一般加载 import component1 from "....." { // path: // name: component:component1 } //懒加载 { // path: // name: component:()=>import('.....') } //import是ES6的一个语法标准，如果需要浏览器兼容，需要转化成es5的语法。 [代码] 其实项目编译打包后，会把每个路由组件的代码分割成一一个 js 文件，初始化时不会加载这些 js 文件，只有当激活路由组件才会去加载对应的js文件。 gzip静态资源压缩 有些文件确实不能再优化了，那我们是不是可以考虑把它压缩了呢。 其实原理很简单，开启gzip压缩把那些大得js，css文件进行压缩，压缩比率在3到10倍左右，这样从服务器获取数据的时候（需要服务器配置），再由浏览器去解压加载，这样可以大大节省服务器的网络带宽，提高资源获取的速度。 不同的脚手架可能配置不太一样，但都大同小异，我这里用的是webpack，大家可以参考一下。 打开config/index.js文件 [代码]//找到下面啊的代码 // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, //把这里改成true productionGzipExtensions: ['js', 'css'], [代码] 然后安装依赖： [代码]npm install --save-dev compression-webpack-plugin@1.1.12 //注意高版本安装可能会报错，不过不确定是不是高版本不适配的原因，这里指定版本@1.1.12 [代码] 打开/build/webpack.base.config.js文件，找到module.exports的module中的rules,把limit从10000改小一点，这里改成1000 [代码] module: { rules: [{ test: /\.scss?$/, loaders: ["style", "css", "sass"] }, { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 1000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 1000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 1000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] }, [代码] 为什么要改这里呢？ 因为 vue 中一些小的静态资源文件是会打包成base64的文件存在css中的或者js中，这里就是控制需要转换的大小，这样减少了js的大小。 服务器端(下面以Nginx为例) 打开配置文件 一般都会默认开启gzip的，但是gzip_static 是没有开启的，所有需要加上 gzip_static on; 如果没有开启gzip的话可以在手动在http{}里添加 [代码]http { gzip on; gzip_static on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_http_version 1.1; gzip_comp_level 2; gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml; gzip_vary on; gzip_proxied expired no-cache no-store private auth; gzip_disable "MSIE [1-6]\."; } [代码] webpack 的 Gzip 和服务端的 Gzip 其实服务端配置好Gzip就可以实现用户向服务器请求，服务器把资源压缩发送了，那为什么webpack也要设置呢?主要是为了减轻服务器压缩资源的负担，如果我们生产环境的资源本身就是压缩了的，那么服务器就不用压缩啦，自然就减轻了服务端的压力。建议两边都配置一下。 减少HTTP请求 不影响需求的前提下，尽可能减少http请求 改善响应时间最简单，最直接的途径当是较少 http 请求啦，有一些一个链接能搞定的就不要分几个链接来请求，也可以用巧用一些缓存来避免重复的http请求。 使用CDN 如果应用程序web服务器离用户更近，那么一个HTTP请求的响应时间将缩短。另一方面，如果组件web服务器离用户更近，则多个HTTP请求的响应时间将缩短。 CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。例如，CDN可能选择网络阶跃数最小的服务器，或者具有最短响应时间的服务器。 CDN还可以进行数据备份、扩展存储能力，进行缓存，同时有助于缓和Web流量峰值压力。 CDN的缺点： 1、响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。 2、如果CDN服务质量下降了，那么你的工作质量也将下降 3、无法直接控制组件服务器 按需加载第三方库 有时候我们开发的页面白屏时间长，打开开发者工具，看 network 那里，一般都是 vender.js 这个资源获取时间长达几s，第三方库一般都会打包到 vender.js ，就像我们常用到的 element.ui ，其实它的库是很大的，一般不设置都是整个库加载上来，自然加载慢了。我们可以把第三方库通过 CDN 的方式引入第三方库，这样vendor.js会减少，大大提升首屏加载速度，具体怎么使用大家可以搜一下，这里就不详细介绍啦。 图片压缩 这个是我自己以身示范的一个坑，在一个项目的登录界面我用了一张照片做背景，后来发现每次加载登录的界面都是超级慢，细究才发现，我这张照片10几m…加载时间自然短不了，所以照片压缩很必要。 参考链接 Web前端性能优化——如何提高页面加载速度 vue项目webpack打包app.js文件太大导致首次加载非常缓慢的解决方案

微信小程序的全局数据写在 [代码]app.js[代码]中，需要现在里面声明存储数据的变量如下： [代码]//app.js this.globalData = {} this.userInfo = {}//这个是我们。等下要用到的变量// this.userMessage = [] [代码] 然后在需要使用以上声明的全局变量的时候声明一下： [代码]const app = getApp()//这个声明是为了后面调用的方便 [代码] 然后使用[代码]Object.assign()[代码]将数据拷贝到全局变量中。 注：[代码]Object.assign()[代码]用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 [代码]Object.assign( app.userInfo , res.data ); [代码] 此时res.data中的数据已经传输到全局变量中。在其他页面使用使用[代码]getApp()[代码]即可调用。

我打开微信上“我的小程序”和“最近使用的小程序”发现，常用的很多小程序很大一部分是各种奶茶店、餐厅预约或者点餐的小程序。如今，几乎每一家零售商都会有自己的小程序。 对于我这样的“社恐”来说，当着收银员或服务员的面看菜谱属实有点尴尬。对商家来说，这样效率低下，例如站在奶茶店收银台前看好久才选择自己想点的饮品，而后面还有人在排队点单。并且菜品有无库存往往要在点单之后才能被告知，又要重新点造成更多麻烦。于我而言，其他因素相同时，我更愿意去有扫码点餐功能的店家吃饭。 如果商家通过上线一些平台提供点餐或者外卖功能，免不了每单会被抽成。依附于平台的餐厅，享受着平台带来的额外利润，但也要忍受平台的抽成，并且没有属于自己的忠实客户，如果通过小程序的会员系统将属于客户转化成忠实客户，进而保持一个长久的发展关系，对商家而言会更加有利可图，也很符合微信的一句口号：“就是再小的个体也有自己的品牌。”，还有微信之父张小龙所说的：“我们希望能够消除中介”“我们希望我们的系统是真正的去中心化的”。 开发者很多时候就是跟着需求走的，因此，我选择着手开发一个有支付功能，可供商家使用的小平台~ 开发途中会遇到很多困难，但幸好这里有活跃的社区和易懂的文档，也请大家多多指教~ It starts right now. Bury your doubts under the ground. Right now you’re taking your turn with the projects.

博客主页：https://blog.csdn.net/weixin_53893220?spm=1001.2101.3001.5343 本文基于js文档简单介绍了什么是cookie，浏览器是如何获取cookie并存储，等到加载时获取的，有助于新手了解cookie的相关操作 JavaScript Cookies cookie介绍： Cookie 是在您的计算机上存储在小的文本文件中的数据。 当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。 Cookie 是为了解决“如何记住用户信息”而发明的： 当用户访问网页时，他的名字可以存储在 cookie 中。 下次用户访问该页面时，cookie 会“记住”他的名字。 Cookie 保存在名称值对中，如： [代码]username = Bill Gates [代码] 当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。 创建 cookie： [代码]document.cookie = "username=Bill Gates"; [代码] 通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。 [代码]document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/"; [代码] document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value; 删除cookie： 直接把 expires 参数设置为过去的日期即可：//即expires为cookie过期的时间 [代码]document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; [代码] 您应该定义 cookie 路径以确保删除正确的 cookie。 cookie过程详解： 下面代码出现的操作cookie的三个函数作用： checkCookie()//加载该页面时运行该函数，检查本地浏览器记录有无cookie setCookie()//没有的话就设置cookie getCookie()//获取cookie中的名称 出现的js自带方法为： getTime()//返回距 1970 年 1 月 1 日之间的毫秒数。 setTime()//以毫秒设置 Date 对象。 toUTCString()//可根据世界时 (UTC) 把 Date 对象转换为世界时字符串，并返回结果。 split(";")//将字符串以；为间隔，分割成多个字符串，返回一个字符串数组 charAt(0)//返回数组下标为0处的字符 substring(1)//切割出从下标为1开始的字符串，第二个参数为切割到哪个位置，即下标 [代码]function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));//为d设置一个形式为一串数字的cookie过期时间 var expires = "expires="+d.toUTCString();//转化为世界时 document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";//我们要的cookie主体 } function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';');//分割记录中已存入的cookie，如果有的话 for(var i = 0; i < ca.length; i++) {//有三个，cname=cvalue;expires=~~~;path=/ var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1);//从下标为1开始，目的是清除字符串开头带有的空格 } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length);//返回cvalue } } return ""; } function checkCookie() { var user = getCookie("username");//该字符串可随意设置，容易理解即可 if (user != "") { alert("Welcome again " + user); } else { user = prompt("Please enter your name:", ""); if (user != "" && user != null) { setCookie("username", user, 365); } } } [代码] 觉得该篇文章有用的请不要忘记忘记点击右下角的大拇指~

1. 问题引入 现在正在学习小程序开发。在开发过程中，前后端交互是非常重要的一环。我选择的是自己搭建后台、前后端分离的开发方式。在这种情况下，按照官方文档的说法，我只能自己配置域名或使用局域网通信。但我想节约学习成本，该怎么办呢？ 2. 问题解决——使用工具ngrok 2.1. 下载ngrok 通过这个链接下载即可：https://ngrok.com/download [图片] 解压后，就一个exe文件 [图片] 2.2. 注册获得Authtoken 回到官网进行注册。如果已经有GitHub账号，建议直接使用GitHub账号进行登录并完成注册，因为这外网的注册一直有些问题。 完成注册并登录后，获取Authtoken（已打码） [图片] 2.3. 配置代理域名 打开下载解压后的exe文件，输入命令 [代码]ngrok authtoken yourauthtoken [代码] 将yourauthtoken换成自己的Authtoken即可 然后根据开发需要，配置相应的端口（这里以8080端口为例） [代码]ngrok http 8080 [代码] 可以得到如下结果 [图片] 红框中生成的即为代理域名，任选一个即可。 2.4. 修改微信开发者工具中的设置 [图片] 这样就完成配置了。这时候我们就可以在外网访问内网，那样子我们手机不用与电脑在同一网段（即手机用4g，电脑连wifi）也可以进行测试。 2.5. 测试验证 后端的测试代码（go语言，gin框架） [代码]package main import "github.com/gin-gonic/gin" func main() { r := gin.Default() r.GET("/ping", func(c *gin.Context) { c.JSON(200, gin.H{"message": "pong"}) }) r.Run() } [代码] 前端发送请求的测试代码 [图片] 前端输出的测试结果 [图片] 后端输出的测试结果 [图片] 测试结果表明前后端成功完成交互，测试成功！ 3. 问题拓展——内网穿透 看懂该部分需要有计算机网络的知识。 首先来描述一下问题的本质。在本机调试中，自己的电脑或服务器在没有配置域名的情况下，相当与内网；而微信开发者工具却是在外网上运行的（需要使用自己的微信号登录）。当微信小程序前端向自己搭建的后端发出请求时，相当于外网主动访问内网。所以问题的本质就是外网对内网的访问。 由计算机网络的知识可以知道这显然是不行的。这时有两种解决方式。 第一种是给服务器配置域名，相当于让内网主动接入外网，这样外网就能访问到了。 第二种是使用内网穿透。即让在内网的节点主动访问一个拥有公网IP地址的服务器，并由中间服务器搭桥，打通经过该服务器从其他主机到NAT之后节点的隧道。结合该问题通俗地讲，就是找了一个服务器作为中转站，让微信小程序先将消息发到中转服务器上，再让中转服务器将消息发送到本机的后台，这样就完成了前后端交互通信。 4. 心得 平时总觉得专业课学的东西没啥用，跟空中楼阁一样排不上用场。这次解决问题的过程却用到了许多计算机网络的知识。我不禁感概，果然技术还是需要实践的，只有真正动手了才能更好地理解所学的专业知识。未来我一定要好好复习计算机基础知识，进一步把专业知识的功底打扎实！ 参考资料： [1]. 博客：https://blog.csdn.net/nanshenjiang/article/details/87889983 [2]. 知乎：https://zhuanlan.zhihu.com/p/303175108 [3]. 《计算机网络：自顶向下方法》（原书第七版）

是否是七天内注册或者改名的？ 如果是的话，可以再等几天 排名比较低，没有滑到底？ 由于小程序、公众号的简介、昵称、关键词等没有设置好导致搜索权重比较低。 是否受到官方的私信？违规被限制搜索？ 打开小程序、公众号的后台查看私信，看看近期是否因为违规被限制搜索，如果存在的话，按照官方的指示进行修改。