qq_39241421的博客

原创 微信小程序开发模式--第三方代开发

使用第三方平台代开发的背景是，客户急需用自己注册的小程序来宣传活动，但是没有固定的研发团队，于是想通过我们来提供技术支持、服务，来不断迭代小程序。也就是我们是第三方平台，我们有自己的小程序，但是要按照微信官方规则来开发。从开发者角度来说，我有一套代码，开发语法不变，若需求只用于我们企业的小程序，没有变化，但是第三方代开发，就要按照新的规则来开发，规则如下。2、3rdMiniProgramAppid：第三方平台申请的并绑定在该平台上的小程序，用于开发小程序模板。接下来第三方平台代开发简称：代开发。

原创 vue2 computed

大多数情况下会滥用watch属性，因为开发时候只想着实时监听数据的变化，但却忽略了是否全部需要监听。若是几个数据最终关联到一起，最终要展示关联后的实时数据，不会用computed,自然就用watch代替了。上面看上去就很繁琐，要监听两个数据，代码量也增大了，很让人抓狂。如果数据变化时，执行异步或者，开销很大的操作，那就要用它了。响应式数据变化了它们会重新计算，但是没变，会把原来的数据保存好，不会再次执行函数。有点监听的属性，只要响应式数据变化，他就会做计算，不变化就不做计算。

原创 小程序指南--小程序运行时

特定的小程序基础库版本有最低微信客户端版本要求，如基础库 v2.15.0 要求安卓最低版本 7.0.22，iOS 最低版本 7.0.20。小程序的JS执行环境在不同平台有所差异，不同平台对ECMAScript标准支持也存在差异，因此小程序基础库为了尽量抹平差异，内置了一份。如果用户已经打开过某小程序，然后一定时间内再次打开小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。如果用户首次打开，或者小程序销毁后被用户再次打开，此时小程序需要重新加载启动，这个就是冷启动。

原创 小程序-＜web-view＞嵌套H5页面支付功能

用JSSDK接口提供的wx.miniProgram.navigato({url: url})，跳转到过渡页面wePay，在wePay.js中处理调取微信支付接口的功能，支付成功与否，跳转到小程序包含web-view页面，动态修改url，就可跳转到H5中的指定页面，开发者工具中，web-view中的h5页面若想看到打印日志，那是看不到的，于是和同事说了一下问题，他之前遇到过，和我说可以在vue中install vconsole试试。页面之间跳转是没问题的，因后台接口也改了，要等老板上线了再做调试了。

原创 微信小程序打开微信客服

在小程序中使用openCustomerServiceChat接口，可以实现与客服进行实时聊天的功能。

原创 小程序在IOS系统的兼容性

上面就是因为使用了textarea标签导致，换成text或者view就可以展示了。使用textarea标签，小程序在苹果手机中展示有bug。

原创 微信小程序第三方代开发前言碎语

面对多端服务需求，前端需要的技术储备必须要全面，包括如VUE框架，VUE2（健总管全部用）、VUE3（2022年开始研发校总管用，因国家禁止教培，导致该教育系统夭折了）、微信小程序（跟上时代潮流，健总管+使用），前端技术的层出不穷、更新考验着前端开发的学习力。因为新的需求，也是为我们的创新提供了新的思路。所以遇到不同种类的技术，不要怕，不要慌，要搞懂技术产生的背景和技术规则。特殊需求是，场馆尚未成立，需要提前预售，需要微信小程序的健总管+的功能，同时要用他公司申请的小程序做外壳，借助健总管+来宣传。

原创 微信小程序添加class

<view class="tabs_title {{item.isActive?'active':''}}" wx:for="{{tab}}" wx:key="id" >{{item.value}}</view>

原创 vue3--watch()&watchEffect()

【代码】vue3--watch()&watchEffect()

原创 javascript--call()--apply()

call(this,parame1,parame2,...,parameN)，这里的parames只能是一个，且必须与被继承对象的形式一样，分开写，如有N个参数，写N个参数。它适用1-2个参数情况。apply(this,[parame1,parame2,...parameN])，后面的参数是数组的形式，只是把和被继承对象的参数集合到数组里面，如有N个参数，就放在数组里面。它适用参数多的情况。Prev.call(Next, name)解释： Prev对象叫Next对象帮它执行一下它的代码，参数也可传进去。

原创 vue路由切换时，若是一个路径但是参数不同，页面不会变化

vue路由切换时，若是一个路径但是参数不同，页面不会变化

原创 vue3build

vue3build

原创 vue3响应式数据关联性

赋值响应式数据

原创 vue3使用vue.awesome.swiper.js

vue3+swiper

原创 vuex---useStore()返回undefined

看看main.js中import store from './store/index.js'app.use(store)

原创 微信小程序请求数据报错： 如若已在管理后台更新域名配置，请刷新项目配置后重新编译项目，操作路径：“详情-域名信息”

原创 小程序开发回调函数调用全局变量

回调函数（f2）调用全局变量（a）时，指针（this）需在调用函数（f1）里面以参数形式传给回调函数（f2），此时方可调用全局变量（a）data:{ a:''},onLoad(){ this.f1(this.f2)}methods:{ f1(callBack)=>{ if(callBack) callBack(this) } f2(that)=>{ //调用全局变量 console.log(th.

原创 微信小程序页面倒计时

秒杀列表页有n条商品参加倒计时，那么此时vue中写的倒计时可以直接用到小程序中吗，答案是ofcourse，当然能~下面是处理数据列表里面的倒计时 queryEventList() { let _this = this let args = { shopId: $.data.shop.shopId }; app.service( $.SvName.EVENT_QUERY, .

原创 Es6：变量的解构赋值-遍历Map结构

所有部署Iterator接口的对象，都可以用for...of循环遍历。Map结构原生支持Iterator接口，那么配合变量的解构赋值获取键值键名就更加方便。let map = new Map()map.set('first', 'hello')map.set('second', 'world')for (let [key, value] of map) { console.log(key + ' is ' + value)}// first is hello// second i

原创 编辑页的下拉框

问题：编辑页自己模拟写的下拉框，接口数据有被选中的情况下，点击下拉框无法打开下拉。如下：对象中的属性已经被渲染到div里面，当点击下拉框时，不展示下拉框，在代码里面点击看控制下拉框的状态值是有变化的，但是页面已经被渲染了，而且是有接口请求延时，js无法控制它，这时就需要使用this.$set(对象名，key，value)，要是数组对象的话，可如下操作：letchange = arr[idx]change.key =changeValthis.$set(arr, idx, c..

原创 video标签在安卓浏览器使用问题

<video width="100%" controls > <source src="http://www.jzongguan.com/imglib/jzg-show.MP4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。 </video>不常用这个标签，很多控制属性没有添加，在pc端常规开发中展示没有问题，但是到移动端测试，就出现以..

原创 ES6--Const 命令

数学应用题中，用方程式解决问题，在方程时，会设未知数，常数。Js中我们常用let或者var声明变量，ES 6中有const用来声明常量。本节重点学习 const命令基本用法1、const 声明一个只读的常量，一旦声明，常量不可改变。且声明时必须赋值，立即初始化const PI = 3.1415 PI = 3 //执行后报错 类型错误：常数变量赋值con...

原创 css3 实现瀑布流

如何实现以上效果css3 完全搞定：一、<style>.func-list-detail ul { width:1100px; margin:0 auto; column-count:4; column-gap: 50px;}.func-list-detail li { break-inside: avoid;}</style&gt...

原创 vue 倒计时

需求背景：商品促销、拼团、秒杀等运用活动都会涉及到在规定的时间内结束，以便刺激消费。那么就需要我们前端做好倒计时功能。问题点：一个商品倒计时相对简单实现，但要是多个商品搞活动，那么时间可能就不同，那就要每个商品都要设定的专属倒计时记录时间。往往后台会给前端返回商品数据列表，截止日期都在里面，那么就要前端自行设计倒计时功能，以确保活动时间准确无误。技术难点：vue框架多条数据怎么设定定时器？...

原创 jq放大镜效果demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="http://www.vedeng.com/js/jquery-1.11.3.min.js"></script> <script src="demo.js"...

原创 vue 针对动态添加的属性，不支持响应式修改，解决办法

场景描述：很多时候前端从后台接口获取的数据列表的数据，满足不了列表渲染后，前端所有的数据控制。举例说明：列表中需要有可点击本条数据实现隐藏/展示的功能。后台数据中是没有控制本条数据的对象。比如有10条数据，每条数据被点击的时候，当前数据可实现隐藏和显示（show），那么就要在数据初始化时，动态的给每一个对象添加新属性show：false。因为这是动态添加的，问题根源来了，vue针对动态...

原创 axios简介

axios是基于promise用于浏览器与node.js的http服务端的一种js。相当于连接桥，此桥是人工智能的，可以自定义浏览器与服务端请求与响应的方式。1支持浏览器与node.js，2支持promise，3能够拦截请求和响应，4能转换请求与响应数据，5能取消请求，6自动转换Json格式，7浏览器端支持CSRF(跨域请求)（https://www.cnblogs.com/zhy-1992/...

原创 正式使用rem

需求：移动端推广页面，需要嵌入到微信公众号现况：之前全部都用绝对单位，没有认真使用过相对单位rem,看了一些购物网站都在用rem,于是这次完全使用了rem写页面目的：实际检测rem布局效果。安卓和ios分辨率不一样，导致字体大小也不一样测试一：字体大小 改成 px；图片的大小设计图是按照宽为750px，所有到前端都需要除二。问题二：安卓系统背景色默认为灰色，ios默认为白色。p...

原创 当前页面的路径删除参数并替换

// let url = window.location.href// history.replaceState('myorder','',this.removeURLParameter(url,'state')) removeURLParameter(url, parameter) { var urlparts = url.split('?'); if(urlp...

原创 input触屏端样式兼容问题

1、border-radius: 0;//ios会有圆角2、-webkit-appearance:none;//ios/safari中有内阴影要去掉3、移动端输入方法是：英文单词全拼输入法情况下，输入法会自动添加一个空格，以示一个单词。str.replace(/\s+/g,'')，用这个正则删除空格...

原创 js-删除当前页面url后面的参数并返回

removeURLParameter(url, parameter) {var urlparts = url.split('?');if(urlparts.length >= 2) {//参数名前缀var prefix = encodeURIComponent(parameter) + '=';var pars = urlparts[1].split(/[&;]...

原创 cookies //小饼干怎么吃 什么馅儿的小饼干，我想应该是粉色的甜甜圈 //

cookie 是一些数据，保存在电脑中的文本文件中，主要解决的问题：1、记录访问网站的用户信息，2、下一次访问该页面时，可以在cookie中读取用户访问记录形式：名=值浏览器请求web页面时，属于该页面的cookie会被添加到请求中，服务器端通过这种方式获取用户信息。js创建cookiedocument.cookie="name=Moon";添加过期时间以（UT...

原创 vue-$router中的query与parames

A: that.$router.push({ path:'/forgetpasswordmodifypassword', query:{ mobileToken:res.data.data.mobileToken, ...

原创 vue-$nextTick及安装jq

一个页面中页面元素有图片、文字、外部文件链接，这些加载时候都会占据时间，js在做操作时，需要等所有元素都加载完进行操作，这个问题做项目时没有考虑到，导致在做dom操作时，获取页面高度，查找了很长时间的问题才解决。这里使用了jq 操作dom 楼层滚动定位，添加一点安装步骤1、npm install jquery --save-dev2、build.js 中 webpack.base....

原创 index.vue 传参使用新变量的变化再重置data变量

&lt;div class="picyanzhengma passwords"&gt; &lt;div class="flex-row"&gt; &lt;span class="tit"&gt;登录密码&lt;/span&gt;

原创 有趣的CSS实现“勾号”

1、矩形模拟 // scss语法.select-all{ cursor: pointer; overflow: hidden; span{ float: left; &amp;:first-child{ display: inline-block; margin: 22px 10px 0 20px; width...

原创 Ie lineheight坑

line-height行高 ；px/percent/em/none(系数)。

转载 Vue 实时监听窗口变化 windowresize

方法一：First-step : 定义变量data(){ return{ formLabelWidth : '123px' }},Second-step:   根据生命周期 在mounted 中绑定 窗口变化 mounted(){ const that = this window.on...

原创 vue.js – event对象兼容性问题

应用场景：头部【搜索功能】点击全局页面任意位置搜索框下的下拉框隐藏，此时点击搜索框输入信息时需要阻止冒泡，event.stopPropagation()；此时没有注意这点event，在浏览器中会有问题。追根溯源 ：event对象 Event对象代表事件的状态，比如事件在其中发生的元素，键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会再事件发生前执行。wi...

转载 Vue.js源码构建--初步认识

script -- config.jsnode中有针对vue写了方法Path.resolve()映射到真实目录下的文件。 主要是为了配置路径处理，能让在vue跑起来的时候，有路可走，文件链接。经过一系列处理，返回到build下面。通篇获取pages.经过过滤留下我们想要的pages,再用build编译，对code进行修改 ...