- 博客(32)
- 收藏
- 关注
RSS订阅原创 Taro（2.1.5）打包字节小程序，无法自动生成project.config.json
Taro框架打包字节小程序，无法自动生成project.config.json文件
2022-08-09 16:55:07
586
原创 create-react-app使用v5版本创建项目，运行输出很多webpake日志
昨天自己准备做一个react的demo，复习一下。使用了create-react-app v5版本，发现会莫名的出现一堆webpake日志经过排查发现是因为create-react-app v5导致的问题，你也可以手动修改**“react-scripts”: "5.0.0"为4.0.3版本**，可以暂时解决日志输出的问题。但是不建议这么做。因为后期会出现一些不可控的bug，例如eslint的配置。猜测出现日志输出的问题是因为webpack 不再填充节点内置包导致的。可以参考github建议还是
2022-03-03 10:05:57
590
原创 js replace全局匹配及小程序中如何进行全局匹配
需求：在一段内容中匹配用户搜索的文字，并进行高亮展示。有可能一段内容中包含多个搜索的文字方案：使用富文本渲染，全局匹配到对应字段，对对应字段添加Html标签及color。例如：1、let user = '搜索'let text = '这是内容，搜索后的内容，搜索后的内容，搜索后的内容'let reg = "/"+user+"/g";let val = text .replace(eval(reg),"替换");console.log(val) // 这是内容，替换后的内容，替换后的内容，替换
2022-02-17 09:46:01
1171
原创 字节小程序登录，报fail：not logiin
在调试字节小程序授权登录的时候，发现一直报错fail:not login;查看文档发现说是未在小程序登录平台登录？？？？what are you ？？？这文档写的也太随意了吧，未在小程序平台登录，什么小程序平台啊，大哥。试了字节小程序开放平台登录，字节开发者平台登录！！！ 然而都不是。只能继续查阅文档，查社区，发现有几个小伙伴都有这个问题，但是没人贴解决方案。解决方法文档中提示需要在获取手机号前调用login,不然会刷新登录状态。晴天霹雳，因为是多端开发，微信和百度都是直接在获取授权的回调时调用的
2022-01-13 15:41:53
1086
原创 Taro项目百度小程序登录，无法获取用户登录凭证code，工具控制台报：此api已经废弃，请使用组件方式登录
在做百度小程序登录的时候发现使用Taro,login无法获取到用户登录凭证code，开发工具报，此api已经废弃，请使用组件方式登录，相关文档：https://smartprogram.baidu.com/docs/develop/function/login发现百度小程序中已经废弃了此API，需要使用button组件设置属性为open-type:login,调用 bindlogin 返回参数的 detail 判断是否登录成功，当 errMsg 为login:ok时即为成功。如想获取登录凭证请示用 sw
2022-01-12 11:07:32
7861
2
原创 微信小程序微信授权登录，使用getPhoneNumber()部分手机无法获取动态令牌code（Taro）
今天在测试微信授权登录时，部分微信使用getPhoneNumber（）方法无法获取动态令牌code，查询微信小程序文档提示：可以使用组件的方式获取兑换用户手机号的动态令牌。使用方法：需要将 button 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，可以通过 bindgetphonenumber 事件回调获取到动态令牌code，然后把code传到开发者后台，并在开发者后台调用微信后台提供的 phonenumber.getPhoneNumber 接口，消费
2022-01-12 10:36:26
4927
原创 React实现快速搜索并且关键字高亮
需求：点击搜索按钮，弹出模糊匹配列表。下拉列表选择选项，点击后跳转相应页面关键字所在地。思路：利用正则从列表匹配到关键词，再使用标签包含关键词，给标签添加color属性，使用react富文本渲染方式进行渲染js内容： /** * 关键字变色 * @params content 内容 * @params keyword 关键词 * @params tagName 标签名 */ warpTag(content, keyword, tagNa
2021-12-29 09:40:57
2630
原创 实现一个compose函数，数据扁平化
实现一个 compose 函数。compose是函数式编程中使用较多的一种写法, 它把逻辑解耦在各个函数中,通过compose的方式组合函数, 将外部数据依次通过各个函数的加工,生成结果。function compose(...fn) { if (!fn.length) return (v) => v; if (fn.length === 1) return fn[0]; return fn.reduce( (pre, cur
2021-12-28 20:43:59
317
原创 小程序页面跳转报错：fail webview count limit exceed
**小程序性报错：fail webview count limit exceed**报错原因：Taro.navigateTo(option) || wx.navigateTo(option) 小程序中页面栈最多十层。保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 Taro.navigateBack 可以返回到原页面。解决方法：Taro.redirectTo(option) || wx.redirectTo(option)关闭当前页面，跳转到应用内的某个页面。但
2021-12-22 18:05:10
2274
原创 小程序如何将图片转换为base64
如过是网络地址的图片： Taro.downloadFile({ url: 'https://t7.baidu.com/it/u=2511982910,2454873241&fm=193&f=GIF', // 非真实有效地址，仅供参考 success: function (dat) { if (dat.statusCode === 200) { Taro.getFileSystemManager().readFile({
2021-12-21 14:22:38
646
原创 数组去重，并根据数组元素的某个属性进行排序。
今天在做项目的时候，请求一个接口返回一个数组，后端同学说需要前端来进行去重并根据某个属性进行排序。思路：有这样一个数组 ，先去重，把属性id、num相等的进行去重,再根据id进行排序，如过相等，再根据num进行排序话不多说，上代码： let newArray= [{xxx: 30, id: "1", num: "6053739"} ,{xxx: 140, id: "1", num: "16102516"},{xxx: 39, id: "1", num: "5832576"}, {xxx
2021-11-29 17:31:35
207
原创 forEach与map的区别
1、相同点:currentValue 必选， 当前元素index 可选，当前元素的索引值arr 可选，当前元素所属的数组对象。（1）都接受三个参数forEach || map（(currentValue,index,arr ){}）（2）都不会改变原数组2、不同点：forEach 没有返回值， 返回值为undefinedmao 有返回值，返回一个新数组示例：let arr = [1, 2,
2021-11-20 21:02:43
339
原创 js数组随机抽取显示首位，其他元素依次往后排序。
实现数组中元素随机出现在首位，其他帧依次后排思想：在数组中先找到对应的元素，并删除，在数组的前面使用unshift()添加元素var imgArr = [ 1, 2, 3, 4, 5, 6 ];let randomNum = parseInt(imgArr.length * Math.random()) // 随机取其中一个元素 Math.random()--随机函数0-1，parseInt()--取整数for (let i = 0; i < imgArr.length; i++) {
2021-11-18 16:28:14
547
原创 Taro 、React （hook）移动端 中怎么实现列表list左滑删除
应用场景：在项目列表（List）中左滑，删除 || 取消关注当前项实现方式使用移动端触摸事件ontouchstart、ontouchmove、ontouchend； + SCSS移动端事件详解：事件详解布局css部分.slide-item { width: 100vw; overflow: hidden; line-height: 48px; height: 160px; text-align: center; margin-bottom: 20p
2021-11-15 16:48:21
1463
原创 移动端的常用触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel
1、Touch事件简介pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端如 iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件，分别对应了触屏开始、拖拽及完成触屏事件和取消。当按下手指时，触发ontouchstart；当移动手指时，触发ontouchmove；当
2021-11-15 16:22:00
5677
原创 Typescript + Taro Ts怎么在类组件中,定义state,props,以及hook中ts的简单实用
ts在taro类组件中怎么使用定义使用state，使用方式跟在js类组件中一样，直接使用this.state.属性名，使用方式一样，定义state稍微有点区别，在js中我们是这样定义的：class Index extends Component { constructor(props) { super(props) this.state = { navList: [], Tjsp_flag: false, topbanner_data: [],
2021-11-11 21:29:12
2250
原创 小程序如何分包 （Taro成功案例--原生微信小程序分包一致）
在编写小程序的时候，因为业务的拓展逻辑更加复杂，导致小程序体积越来越大，但是小程序是有体积限制的，微信小程序主包限制为2MB,虽然限制大小是对小程序启动速度的考虑，但是业务不能砍掉呀。只能用微信小程序提供分包来解决。分包加载某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。在构建小程序分包项目时，构建会输出一个或多个分包。分包小程序必定含有一个主包，和多个分包。主包：即放置默认启动页面/TabBar页面，以及一些所有分包都需用到公共资源/JS 脚本；
2021-11-05 16:27:42
2650
原创 Taro小程序中无法调起openSetting设置页面,用户查看授权的功能，
今天同事在做小程序的时候，产品给了个需求，在用户首次进入小程序时获取其位置，如果点击拒绝后，再调起客户端小程序设置界面，返回用户设置的操作结果，让其再次选择授权。查阅官方文档后发现Taro.openSetting()可以吊起小程序设置页面，同事在跟着文档做的时候遇见了个问题，就是每次清除平台缓存后，调起来的设置页面没有之前的权限，显示未使用您的任何信息 。代码如下 Taro.getSetting({ success: function (res) { var st
2021-11-04 18:19:49
267
原创 Taro 中在Tab组件中使用ScrollView滚动组件，滚动时把Tab标题顶走了。（支付宝小程序）
今天在使用Taro框架写小程序的时候，需要咨询页面，如下图展示整体布局就是在Tab组件中使用ScrollView滚动组件，滚动到底部进行加载下一页。很简单的一个页面，在微信、字节、百度都没有问题，在编译成支付宝小程序后，（真机）发现在滚动的时候，会把顶部的Tab标题顶上去，仔细研究发现在在这个页面出现了两个滚动条，一个是ScrollView的。另一个是Tab组件的，在每次滚动的时候可能会触发到Tab页面的滚动条，导致把标题顶上去。问题出现在给ScrollVeiw设置高度的时候直接设置为100%，
2021-11-03 14:40:29
1745
原创 Taro 中使用ScrollView滚动组件。怎么设置滚动高度的问题。
在使用ScrollView进行滚动加载的时候，滚动到下一页，再进行筛选的时候，需要把位置恢复到顶部。不然就会出现这种情况查阅Taro官网得知，可以设置scrollTop进行设置滚动条位置。在进行设置scrollTop,为0的时候，发现不生效。然后开始对比官方文档，发现使用方法什么都一样，没有任何问题。实在让人头疼，仔细进行排查，会不会是每次都是设置为0，是不是框架检查属性值没发生改变而没设置成功呢。采用属性值+Math.random(),这样每次产生的值就不一样了。这样进行设置果然成功了
2021-10-29 15:04:08
3271
2
原创 Taro 、Taro-hook中阻止冒泡 怎么阻止事件冒泡方法-亲测有效
前言：以前在使用Taro class组件的时候一直使用的是e.stopPropagation()；来阻止冒泡事件，现在改为hook 函数式组件在使用e.stopPropagation()阻止冒泡不好使了。Taro官网文档上指出按照官网提示进行修改，发现以上方法无效。依然会发生冒泡。官方提供的在事件内使用 e.stopPropagation(); 的方式不能有效的阻止事件冒泡。方法没有问题，只能进行疯狂试错，最终发现在使用箭头函数的方式使用e.stopPropagation()，可以直接有
2021-10-29 11:57:27
1137
原创 Taro 小程序做蒙层，蒙层下页面会滚动。滚动穿透问题
最近在写小程序的时候，需要手写一个拨打打电话的功能，点击查看弹出蒙层展示手机号，点击电话号码进行拨打电话。前面拨打电话API都挺顺利，后来忽然发现蒙层下的页面依然还能滚动。一开始以为层级问题，调整层级一直没什么效果。于是开始查文档，发现文档中提示于是开始一个个方法进行测试。第一种方法不适合，因为当前页面滚动元素没办法给到高度，会有问题，就不细说了。开始第二种办法，我的项目还是使用Taro.2,所以使用catchtouchmove属性，如果为Trao3,可使用catchMove属性。<Vie
2021-08-12 17:40:17
3113
原创 react 脚手架打包不生成 sourceMap 的解决方案
1、过程那么首先说下，为什么我需要这个需求。在前端打包中，如果生成sourceMap 无形之中增加了打包以后的文件的体积，有时候项目需求就是，轻量级，所以对于这样的项目而言，sourceMap 就有点多余了。其实无非就是在某个打包的配置文件里面，有个 sourceMap 的属性，将属性设置为 false 就 ok 了，然后这个问题就解决了。2、解决方案1、稍微懂点英语的人就能看出来，这就是判断要不要使用 sourceMap 的参数了。如果结果为 true，那么在打包的过程中，就会生成 source
2021-07-26 17:40:16
1399
原创 小程序 taro中遇到的编译错误---版本问题，EBUSY:source busy or locked
昨天项目组给了一个小程序（taro）的项目,首先拉去分支，下载依赖，很完美，没有任何问题，然后yarn dev:tt 运行项目（特别注意:taro项目最好使用yarn）,编译项目过程中说缺少@tarojs/plugin/sass，并在plugin中进行配置。没啥问题，安装配置就ok了。但是装依赖过程中始终就是安装不上。npm cnpm yarn切换镜像。都用了。后来就觉得可能不只是依赖的问题！！！继续挖掘，发现很早之前自己装过本地taro依赖，版本比较低1.3.44，但是拉去的项目版本号是2.1.5，版本
2020-11-26 15:04:54
837
原创 前后端分离开发--跨域，最简单的就是前端开发可以给浏览器设置跨域。附带chrome的下载地址
chorme下载网址[添加链接描述]：(https://www.google.cn/chrome/)前端开发相信大家会经常的遇到跨域问题，也就是在打印区爆出一段飘红的ACAO的飘红代码。最简单的给chrome设置跨域。chrome的跨域设置(1) 首先在在C盘创建一个空的目录，列如：C:\CrossDomain。(2) 然后右键点击chrome应用打开属性配置再打开目标。（3）在目标后面追加 --disable-web-security --user-data-dir=C:\C
2020-11-09 11:42:05
200
原创 移动端项目中使用rem布局，华为手机不兼容。
在上一次做人脸审核的项目（h5）的时候，需要适配各种设备手机的屏幕，刚开始的时候使用的那套（不兼容华为）rem的计算逻辑，在测试的时候却发现在华为一些部分机型不适配，超出了屏幕。后来在网上查阅资料发先了一套新的rem计算的公式，经本人亲自实验，可以兼容华为手机，下面上代码：(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientation
2020-10-28 17:23:54
1681
1
原创 关于ios弹窗（alert）显示域名问题
前段时间做一个h5项目的时候，使用了alert弹窗，却发现在ios设备上弹窗弹出来的时候会显示出域名。解决办法，给alert进行二次封装。window.alert = function (name) { var iframe = document.createElement("IFRAME"); iframe.style.display = "none"; iframe.setAttribute("src", 'data:text/plain,'); document.documentE
2020-10-28 17:10:22
1083
原创 记录关于正则在smarty渲染遇到的坑，昨天在写项目的时候遇到了正则校验身份证号规则一样，身份证号一样，却一个是true，一个是false
问题展示：正常在js中是可以的。在我项目中出现的问题：明明一摸一样的校验规则和身份证号，为什么就是结果不一样呢？接下来我们打印一下我的项目中的正则打印一看果然有问题，相信大家也一定看到了问题所在，就是我们正则的大括号{}没了，这是为什么呢？后来经查阅资料终于明白，在做web开发时，难免会写一些JS，jquery代码。js和jquery里面都会｛｝这样的符号，smarty会不会把它理解成php的变量呢？答案是：smarty肯定会把它理解变量了。所以在项目中的正则就失效了，问题知道了，接下来就
2020-10-22 09:59:47
205
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人