2020.4月
1.小程序Swiper轮播图 tab切换
[swiper] current无效，请修改current值
在切换tab时， 小程序轮播图空白问题
-. 设置current
<Swipercircularautoplaycurrent={current}className='carouse'onChange={e => onChange(e)}/>
还需要实现onChange事件里把current设置为当前的index，并在轮播数据长度改变时设置当前索引为0
const onChange = (e) => {
setCurrent(e.target.current)
}
useEffect(() => {
setCurrent(0)
}, [carousel])
2. 把token当做url传参的问题
const url = encodeURIComponent(location.href)
location.href = `${location.origin}/${url}`
重定向到返回页面
const { returnUrl } = this.$route.query
location.replace(returnUrl)
由于token在url中，所以在链接新页面时,不仅要将returnUrl编码到新页面的URL的query中， 也需要将token值拼接到url中，比较麻烦
所以就采用，路由守卫里先把token存到session中，再进行
3. Hooks 返回路由加载问题
useEffect(() => {
return () => {
console.log('----返回的话')
cashRouterBack(router.params)
}
}, [])
小程序里返回上一页的话，会执行 useEffect 里面的回调函数,
但是当navigateTo一个新页面以后， 此页面从 页面栈中推出的话，也会执行 这个回调
就会容易造成 返回错乱问题
// 在to的时候， 设置标识位
router.params.page = 'navigateTo'
最后解决方案: 分为不同的支付结果页
更新 2020.6.3号问题
点击小程序的返回按钮，再执行Taro.``_navigateBack_``() ，相当于是返回了两个页面
4 设置npm源
npm config set registry https://registry.npm.taobao.org
2020年5月
5.小程序的Canvas/CanvasContext
// 创建 canvas 的绘图上下文 CanvasContext 对象
wx.createCanvasContext(string canvasId, Object this)
该API，从基础库 2.9.0 开始，本接口停止维护，请使用 Canvas 代替
// 该方法返回 Canvas 的绘图上下文
Canvas.getContext(string contextType)
const query = Taro.createSelectorQuery().in(this.$scope)
query.select('#myCanvas')
.fields({ node: true, size: true,})
.exec((res) => {
init.apply(this, res)
}
)
function init(res) {
const width = res.width
const height = res.height
const canvas = res.node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
}
6. Taro 函数式组件自定义分享开关
小程序的webview，在整个项目中通用一份，所以在做分享功能的时候， 就需要判断条件
该链接是否需要分享， 在我们的实际项目中，只有营销页面H5需要分享
所以很容易写出如下代码:
function Index() {
if (url.indexOf('/activity/') === -1) {
this.onShareAppMessage = function () {
}
}
return (
)
}
虽然是if 块级作用域, this上下文都是一致的，但在Taro编译时， 不会走判断条件，
虽然最终执行时this对象上都会挂载onShareAppMessage, 但是在执行时不会生效
function Index() {
this.onShareAppMessage = function () {
}
return (
)
}
由此应该就引出了Taro的编译原理和小程序最终的执行原理
7.Cocoapods代理的问题
cocoa在1.7.2 开始使用CDN技术来实现速度的提升，
但是当启动 flutter项目的时候，
但是这个CDN加速，在我这里各种问题报错,连不上，比如
[!] Unable to add a source with url https://github.com/CocoaPods/Specs.git named cocoapods.
pod repo add master https://github.com/CocoaPods/Specs.git
[!] CDN: trunk Repo update failed - 60 error(s): CDN: trunk URL couldn’t be downloaded: https://raw.githubusercontent.com/CocoaPods/Specs/master/Specs/a/7/5/AFNetworking/0.10.0/AFNetworking.podspec.json Response: Couldn’t connect to server
pod repo
pod repo remove trunk
source 'https://github.com/CocoaPods/Specs.git'
pod ‘IQKeyboardManager’, ‘~> 6.2.0’
install 这个库的时候， 有两个版本，swift和OC， 需要指定一下版本
[!] Unable to add a source with url https://github.com/CocoaPods/Specs.git named cocoapods.
You can try adding it manually in /Users/zjx/.cocoapods/repos or via pod repo add.
线上的css无效
CSS 的http请求头 Content-Type: text/plain
worker_processes 1;
events {
worker_connections 512;
}
http {
include mime.types;
sendfile on;
server {
listen 80;
server_name 0.0.0.0:80;
root /project/app;
}
}
小程序 webView 返回
问题: webView返回的时候，出现白屏，还需要在点击一次返回，被坑了好几天
2020.7月
全局css被打包一份局部css
2.小程序视图横向滚动
小程序视图若需要横向滚动，最好使用 ScrollView + 样式
使用overflow: auto 会出现滚动条
<ScrollView scrollX className='grid'>
<View className='fx'>
{
views.map(v => (
<View key={v.key}>
<Image className='grid__img' src={v.path} />
</View>
))
}
</View>
</ScrollView>
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
2020.8月
npm install 404失败, yarn install 成功的问题
起因是接手品真阁外包项目,发现使用 npm config set registry [https://registry-node.aliyun.com/org/1166572487057521/registry/comall/](https://registry-node.aliyun.com/org/1166572487057521/registry/comall/)
执行 npm install
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@front-desktop%2fnika - Not found
但是执行 yarn install 可以成功下载依赖，发现是因为 yarn.lock文件，而没有package.lock文件
通过 yarn cache list —pattern @front-desktop/nika 可以找到 镜像仓库
@front-desktop/nika 1.2.0 npm https://nexus3.co-mall.com/repository/npm/@front-desktop/nika/-/nika-1.2.0.tgz#e528bae98259db4dfd6062061bdcbc993c213d3a
1.所以引出问题 npm install 是怎样获取模块的？
- 下载模块之前要从
package.json确定其版本信息, 如果package.lock中有该模块的信息直接用即可，
如果没有，则从远程仓库中获取
- 上一步中 获取的是模块的压缩包地址 (resolved)
2.模块安装机制？
发出npm install命令
查询node_modules目录之中是否已经存在指定模块
存在->
不存在 -> 查询压缩包位置 -> 下载压缩包到.npm 缓存文件中 -> 解压缩到当前的node_modules目录
3.node.js npm 循环依赖解决？
npm install的实现原理？
npm 模块安装机制简介
4. 输入框卡顿
Taro Input标签在输入时卡顿, 一开始排查问题,以为是useState 总是造成重新渲染所导致的卡顿
最终排查问题为,把 input的value值设置成受控所导致的, 也就是value值去掉可以解决问题
<Input type='number' onInput={e => setCode(e.target.value)} />
2020.9月
小程序生成的小程序码为 webview页面,为 pages/web/index?url=https://xxx.com/#/xx
#号 在解析的时候，#后面的所有东西都是空, 然后看了#编码为%23，%23 在编码一次为%2523
%25会被忽略，所以加上25， 单独再编码一次#号 解决此问题
跨域CORS的问题
在iOS浏览器， 包括PC上的chrome，该页面为https页面，获取http接口的数据,都是不行的
但是在android的手机端, 无任何影响
iOS端时间格式问题
后端给的字符串时间格式，调用new Date()
2020-09-11T19:10:23.000+0800
9.15号 图片问题
python后端给的post请求接口, 接口用postman请求能展示出来一张图片,如图
用axios在浏览器端请求
axios({
method: 'post',
url: 'http://172.16.7.87:6080/sailfish/api_jira/get_attachment',
responseType: 'blob',
data: {
"issue_id": "15086",
"attachment_id": "12130",
"token": "eyJhbGciOiAiSFMyNTYiLCAidHlwIjogIkpXVCJ9.eyJ1c2VybmFtZSI6ICI1MTc5IiwgImlhdCI6IDE2MDAxNTU2MjYuMTA4NjQwMiwgIm5iZiI6IDE2MDAxNTU2MjYuMTA4NjQwMiwgImV4cCI6IDE2MDAyNDIwMjYuMTA4NjQwMn0=.cb098bbc4c7f8f317d08dd2b6eee0855c21d39ebfb61cc60b272f2d8172c5605"
}
}).then(res => {
console.log(res.data)
})
报错:
Failed to read the ‘responseText’ property from ‘XMLHttpRequest’: The value is only accessible if the object’s ‘responseType’ is ‘’ or ‘text’ (was ‘blob’).
at XMLHttpRequest.r.onreadystatechange
去掉responseType: ‘blob’, 结果返回是乱码(注意: 在node端是可以返回如下所示的)
����JFIF``��C
# *%,+)%((.4B8.1?2((:N:?DGJKJ-
后来后台又是返回的一张图片
const auth = {
username: '5179',
password: 'p0x8Tj'
}
const imageurl = 'http://172.16.88.52/secure/thumbnail/12172/_thumb_12172.png'
axios.get(imageurl, {
// responseType: 'blob',
auth: auth
})
.then(function (res) {
console.log(res.data)
});
用node获取发现乱码是
�PNG
IHDR��X��xNIDATx���T���7 ��xE1���흭Y:��fa�I[DQ�CDT
乱码为png开头，直接用axios设置为blob格式请求，得到图片的base64，代码如下
注意会有跨域问题
axios.get(imageurl, {
responseType: 'blob',
auth: auth
}).then(function (response) {
reader.readAsDataURL(response.data);
reader.onload = function () {
var imageDataUrl = reader.result;
}
});
使用arraybuffer处理
axios.get(imageurl, {
responseType: 'arraybuffer',
auth: auth
}).then(function (response) {
const data = btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
const url = 'data:image/png;base64,' + data
});
chorme关闭cors
$ open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir=/tmp/chrome_dev_test --disable-web-security
2020.10 js 基础, 参数传递
const arr = [{
key: '1',
children: [{
key: '2-1',
children: [{
key: '3-1-1'
}]
}]
}]
function trans(a) {
console.log(a)
a.forEach(item => {
item.name = item.key
item.children && trans(item.children)
})
}
trans(arr)
console.log(JSON.stringify(arr))
// js 基本类型按值传递，引用类型按引用传递
let array = [{ key: 'dddd' }]
let obj = {
a: 100
}
function fnA (arr, o) {
arr = [{ key: 'fffff' }]
o.a = 10000
}
fnA(array, obj)
console.log(array, obj)
递归问题
const newA = []
export const loopMenuItem = (data) => {
// const newA = []
for (let i =0; i < data.length; i++) {
const m = data[i]
if (m.children.length) {
newA.push({
name: m.menuNamez
})
loopMenuItem(m.children)
}
}
return newA
};
2020.11月
SameSite by default cookies
antd design pro
打包体积优化
Umi项目拆包优化过程
若有收获，就点个赞吧
0 人点赞
