微信小程序遇到的一些问题及解决方法(设备安装)-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序遇到的一些问题及解决方法(设备安装)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、js将字符串按照换行符分隔成数组

//转换成数组
snsArr=str.split(/[(\r\n)\r\n]+/);
//删除空项
snsArr.forEach((item,index)=>{
      if(!item){
          snsArr.splice(index,1);
      }
})

2、vue byte数组

1)、byte数组

let arr = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x20, 0x57, 0x6f]);

2)、将byte数组转换为字符串

let str = String.fromCharCode.apply(null, arr);
console.log(str);

3)、将字符串转换为byte数组

let str = "Hello World";
let arr = new Uint8Array(str.length);

4)、在Vue中使用byte数组。例如，我们可以使用axios发送包含byte数组的POST请求

let arr = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x20, 0x57, 0x6f]);
axios.post('/api', arr).then(response =>{
	console.log(response.data);
});

3、使用vant-weapp的文件上传capture=“camera” 无法直接调用摄像头

<template>
	<van-uploader
	 :file-list="fileListImage"
	 accept="media"
	 :capture="capture"
	 camera="back"
	 compressed
	 max-count="9"
	 max-duration="60"
	 media-type="['image', 'video']"
	 @after-read="afterReadImage"
	 @delete="deleteFileImage"
/>
</template>

export default {
  data() {
    return {
      capture: ["camera"],
    };
  }
}

4、errMsg: “request:fail -2:net::ERR_FAILED” errno: 600001

微信小程序遇到的一些问题及解决方法(设备安装),微信小程序,微信小程序,小程序,前端,vue,javascript

5、微信小程序页面跳转传递值几种方法详解

1)、路由传参

// 通过页面路由函数wx.navigateTo或wx.redirectTo的第二个参数传递数据
wx.navigateTo({
  url: '/pages/details/details',
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', {data: 'test'})
  }
});

// 在被打开页面的onLoad方法中使用wx.onEvent监听事件，并获取数据
onLoad: function(options) {
   var _this = this
   // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
   const eventChannel = this.getOpenerEventChannel()
   eventChannel.on('acceptDataFromOpenerPage', function(data) {
     console.log(data) //输出{data: 'test'}
     _this.setData({
       test: data.data
     })
   })
}

2)、本地缓存传参

// 跳转前页面存储数据
wx.setStorageSync('key', 'value')
wx.navigateTo({
   url: '/pages/index/index'
});

// 跳转后页面获取缓存数据
onLoad: function () {
   var value = wx.getStorageSync('key')
   console.log(value) //输出"value"
}

3)、全局变量传参

// 跳转前页面存储数据 app.js
App({
  globalData:{
    key: 'value'
  }
})
//page.js
wx.navigateTo({
   url: '/pages/index/index'
})

onLoad: function () {
   var app = getApp()
   console.log(app.globalData.key) //输出"value"
}

4)、URL传参

// 通过在URL中携带参数传递数据，如："/pages/details/details?id=1001"

// 在接收页面的onLoad方法中可以获取传递的参数：
onLoad: function(options) {
   console.log(options.id) //输出1001
}

6、微信小程序视频播放，点击视频大屏展示预览

 <video src="{{videosrc}}" bindtap="previewVideo" data-current="{{videosrc}}" class="video"></video>
  // 视频预览 也可图片预览
  previewVideo(e){
    wx.previewMedia({
      sources: [{
        url: e.currentTarget.dataset.current, //视频播放路径
        type: 'video'//video视频 image图片
      }]
    })
  },

7、HTML 图片放大

Viewer 下载地址：
Viewer gitee
Viewer github

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片预览</title>
    <link rel="stylesheet" href="./css/viewer.min.css">
    <script src="./js/viewer.min.js"></script>
</head>
<body>
    <ul id="imgView">
        <li><img class="img" data-original="./img/photo.jpeg" src="./img/photo.jpeg" alt=""></li>
        <li><img class="img" data-original="./img/photo.jpeg" src="./img/photo.jpeg" alt=""></li>
        <li><img class="img" data-original="./img/photo.jpeg" src="./img/photo.jpeg" alt=""></li>
        <li><img class="img" data-original="./img/photo.jpeg" src="./img/photo.jpeg" alt=""></li>
    </ul>        
    <script>
        var Viewer = window.Viewer;  //  定义Viewer 
        var viewer = new Viewer(document.getElementById('imgView'), {
            url: 'data-original'
        });
    </script>
</body>
</html>

8、ztree系列之：如何动态更新节点数据(名称、图标、字体、颜色等)

1）、拿到所有节点
var zTree = $.fn.zTree.getZTreeObj(“treeDemo”);
var nodes = zTree.getNodes();
2）、只获取选中节点
var zTree = $.fn.zTree.getZTreeObj(“treeDemo”);
var nodes = zTree.getSelectedNodes();
3）、更新节点名称
for(var i = 0;i<nodes.length;i++) {
nodes[i].name = “修改后的节点名称”;
//调用updateNode(node)接口进行更新
zTree.updateNode(nodes[i]);
}

9、vue @click.native、@click.stop、@click.self总结

vue @click.native 原生点击事件：

1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符）
2，等同于在自组件中：
子组件内部处理click事件然后向外发送click事件：$emit(“click”.fn)

v-on:click.prevent.self 会阻止所有的点击

v-on:click.self.prevent 只会阻止对元素自身的点击

.passive 修饰符尤其能够提升移动端的性能。

10、uniapp uni.showLoading uni.showToast闪关闭问题修改

  uni.hideLoading({
	  noConflict: true
  });

11、在LayUI中，弹出层内容换行需要的是＜br /＞而不是 \n

首先，作为一名java程序员，我以为换行只要在文本里面在需要添加换行的地方添加上\n，但是在我进行这样操作之后，结果前端显示没有换行。通过学习网络知识，才知道，layui弹出层中换行可以使用 < br />来进行换行
后端代码：

StringBuilder msg = new StringBuilder();
msg.append("清理完成, 共清理成功").append(successCount).append("条记录, ").append("清理失败").append(failureCount)
        .append("条记录, 总耗时").append(clearFee).append(", 详情如下: ").append("<br />");

msg.append("清理成功路径：").append("<br />");
for (String successClearPath : successClearPaths) {
    msg.append(successClearPath).append("<br />");
}
msg.append("清理失败路径: ").append("<br />");
for (String failureClearPath : failureClearPaths) {
    msg.append(failureClearPath).append("<br />");
}
logger.info(msg.toString());
return Result.success(msg.toString());

layui前端接收：

layer.open({
    title: "详情",
     content: res.msg,
     icon: 1
 })

效果显示：
微信小程序遇到的一些问题及解决方法(设备安装),微信小程序,微信小程序,小程序,前端,vue,javascript

12、js实现前端多条件查询功能，多条件筛选功能

问题描述：

在工作中有时候会需要前端对表格进行数据筛选显示。

1、以下为ES6写法：

// data：原始数据，类型为数组；params：过滤条件，类型为对象；
const productFilter = (data, params) => data.filter(item => Object.keys(params).every(key => item[key] && item[key].includes(params[key])))

参数说明：

data：原始数据，类型为数组；params：过滤条件，类型为对象；

如果您需要ES5的写法，请联系：1960816818 （QQ、VX同号）；

如有问题可以留言交流、讨论；

下面看一下执行效果：文章来源地址https://www.toymoban.com/news/detail-700587.html

首先模拟一段表格数据； 
var data = [];
for (var i = 0; i < 100; i++) {
     data.push({
       id: 'id' + i,
       name: 'name' + i + (100 - i),
       car: 'car' + (1000 - i)
     })
   }
productFilter(data, {id: '1',name: '2',car: '2'});   
 
//执行结果 : 
//[
//  {id: 'id18', name: 'name1882', car: 'car982'},  
//  {id: 'id71', name: 'name7129', car: 'car929'}
//]