微信小程序的几个主要文件微信小程序

一个小程序一般包含多个文件。虽然具体的文件数量可以根据开发需求和项目复杂性而变化，但一般的小程序包含以下几个主要文件：

app.js：小程序的全局脚本文件，包含小程序的生命周期和全局方法。

app.json：小程序的全局配置文件，可以设置小程序的页面、窗口样式和网络请求等。

app.wxss：小程序的全局样式文件，定义小程序的公共样式。

pages 目录：包含小程序的页面文件，每个页面通常由一个 .js、.json 和 .wxml、.wxss 文件组成。

.js 文件：页面的逻辑脚本文件，包含页面的事件处理和数据绑定等。

.json 文件：页面的配置文件，可以设置页面的标题、导航栏样式等。

.wxml 文件：页面的结构文件，类似于HTML，用于描述页面的结构和内容。

.wxss 文件：页面的样式文件，用于定义页面的样式和布局。

除了以上主要文件外，小程序还可能包含其他一些辅助文件，如图片、音频、视频等资源文件，以及组件和插件的文件。
注：以上仅是一般情况下的文件组织结构，具体的文件数量和组织方式可能因开发者的需求而有所不同。

小诸葛微信小程序的几个主要文件 7-11

评论(0) 浏览(917)

数组快速去重的方法 JavaScript

一.使用 Set 数据结构：Set 是 ES6 中的一种数据结构，它只能存储唯一的值，可以通过将数组转换为 Set 来去除重复项，然后再将 Set 转换回数组。

const arr = [1, 2, 3, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];

二.使用 Array.prototype.filter() 方法：使用 filter() 方法遍历数组，根据元素在数组中的首次出现的索引来确定是否保留该元素。

const arr = [1, 2, 3, 3, 4, 4, 5];
const uniqueArr = arr.filter((value, index, self) => self.indexOf(value) === index);

三.使用 Array.prototype.reduce() 方法：使用 reduce() 方法遍历数组，将元素添加到结果数组中，但仅在结果数组中不存在相同的元素时才添加。

const arr = [1, 2, 3, 3, 4, 4, 5];
const uniqueArr = arr.reduce((result, value) => {
    if (!result.includes(value)) {
        result.push(value);
    }
    return result;
}, []);

四.使用 ES6 中的 map() 方法：使用 map() 方法遍历数组，将元素作为键值对存储在 Map 数据结构中，然后返回 Map 的键数组。

const arr = [1, 2, 3, 3, 4, 4, 5];
const uniqueArr = Array.from(new Map(arr.map(value => [value, value])).values());

小诸葛数组快速去重的方法 7-11

评论(0) 浏览(840)

微信小程序调用扫码API 微信小程序

一：app.json 文件中添加相机权限

"permission": {
    "scope.camera": {
      "desc": "用于扫码功能"
    }
  }

二：触发事件

  <view class="list-img" bindtap="takePhoto">
    <text>二维码</text>
  </view>

三：事件代码

takePhoto(){
  wx.scanCode({
    onlyFromCamera: false, // 是否只允许从相机扫码，设为 true 则只能从相机扫码，不会从相册选择图片进行扫码，默认为 false
    scanType: ['qrCode', 'barCode'], // 所支持的码类型，Array 类型，默认支持所有类型的码
    success: function(res) {
      console.log(res.result); // 打印扫码结果
      console.log(res.scanType); // 打印扫码的码类型
      console.log(res.charSet); // 打印扫码的字符集
      console.log(res.path); // 打印扫码的路由路径
      console.log(res.rawData); // 打印原始扫码数据，仅在 certain conditions 下可用
    },
    fail: function(res) {
      console.log(res.errMsg); // 打印扫码失败的错误信息
    }
  });
},

小诸葛微信小程序调用扫码API 7-11

评论(0) 浏览(923)

微信小程序使用weui 微信小程序

1.app.json

  "useExtendedLib": {
    "kbone": true,
    "weui": true
  }

2.在页面的index.json中引入

  "usingComponents": {
    "mp-dialog": "weui-miniprogram/dialog/dialog"
  },

3.使用

<mp-dialog title="这是一个弹窗" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
    <view>这里是内容</view>
</mp-dialog>

小诸葛 weui 7-11

评论(0) 浏览(922)

微信小程序tabBar 微信小程序

实现微信小程序的导航跳转

1.在app.json中配置路由

  "pages": [
    "pages/index/index",
    "pages/coupon/coupon",
    "pages/shop/shop",
    "pages/mine/mine"
  ],

 "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "image/index.png",
        "selectedIconPath": "image/indexs.png"
      },
      {
        "pagePath": "pages/coupon/coupon",
        "text": "优惠券",
        "iconPath": "image/index.png",
        " ": "image/indexs.png"
      },
      {
        "pagePath": "pages/shop/shop",
        "text": "找好店",
        "iconPath": "image/index.png",
        "selectedIconPath": "image/indexs.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "image/index.png",
        "selectedIconPath": "image/indexs.png"
      }
    ]
  },

iconPath：是你的图标

selectedIconPath：是激活的图标

pagePath：路径

text：标题名字

如果需要使用全局配置还需要在当前的json文件页面引入app.json

  "usingComponents": {
    "./app.json": "../../app.json"
  }

效果图：

小诸葛 tabBar 微信小程序菜单 7-10

评论(0) 浏览(946)

字母掉落js 前端

字母飘落代码

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        * {
            margin: 0;
            padding: 0;
            color: #fff;
            box-sizing: border-box;
        }

        body {
            background-color: #000;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script src="js/index.js"></script>
</body>

</html>

JavaScript

window.addEventListener("load", function () {
    /**
     * @description 通过指定选择器获取对应的函数节点
     * @param {string} Selector 选择器
     * @returns 函数节点
     */

    function $(Selector) {
        let nodeList = document.querySelectorAll(Selector);
        if (nodeList.length === 0) {
            return console.warn(`{Selector}没有获取节点`);
        }
        if (nodeList.length === 1) {
            return nodeList[0];
        }
        if (nodeList.length > 1) {
            return nodeList
        }
    }
    //获取画板
    //doccument 当前文档
    //getElement 获取一个标签
    //ById 通过Id名称的方式
    //var 声明一片空间
    //var canvas 声明一片空间的名字叫做canvas
    var canvas = document.getElementById("canvas");
    //获取画板权限 上下文
    var ctx = canvas.getContext("2d");
    //让画板的大小等于屏幕的大小
    /*
        思路：
            1.获取屏幕对象
            2.获取屏幕的尺寸
            3.屏幕的尺寸赋值给画板
    */
    //获取屏幕对象
    var s = window.screen;
    //获取屏幕的宽度和高度
    var w = s.width;
    var h = s.height;
    //设置画板的大小
    canvas.width = w;
    canvas.height = h;
    //设置文字大小
    var fontSize = 14;
    //计算一行有多少个文字 取整数 向下取整
    var clos = Math.floor(w / fontSize);
    //思考每一个字的坐标
    //创建数组把clos 个 0 （y坐标存储起来）
    var drops = [];
    var str = "01";
    //往数组里面添加 clos 个 0
    for (var i = 0; i < clos; i++) {
        drops.push(0);
    }
    //绘制文字
    function drawString() {
        //给矩形设置填充色
        ctx.fillStyle = "rgba(0,0,0,0.05)"
        //绘制一个矩形
        ctx.fillRect(0, 0, w, h);
        //添加文字样式
        ctx.font = "600 " + fontSize + "px 微软雅黑";
        //设置文字颜色
        ctx.fillStyle = "#00ff00";
        for (var i = 0; i < clos; i++) {
            //x坐标
            var x = i * fontSize;
            //y坐标
            var y = drops[i] * fontSize;
            //设置绘制文字
            ctx.fillText(str[Math.floor(Math.random() * str.length)], x, y);
            if (y > h && Math.random() > 0.99) {
                drops[i] = 0;
            }
            drops[i]++;
        }

    }
    //定义一个定时器，每隔30毫秒执行一次
    setInterval(drawString, 30);

})

效果图

字母掉落js

小诸葛字母掉落 7-9

评论(0) 浏览(787)

Vue2的双向数据绑定原理及缺陷 Vue

Vue2的双向数据绑定原理及缺陷

利用订阅-开发者模式，vue初始化时会用Object.defineProperty()给data中的每一个属性添加getter和setter,同时创建dep和watcher进行依赖收集与派发更新，最后通过diff算法对比新老vnode的差异，通过patch即时更新。

Vue2使用Object.defineProperty()的缺陷是什么？

一次性递归到底开销很大，如果数据很大，大量的递归导致调用栈溢出
不能监听对象的新增属性和删除属性
当监听的下标对应的数据发生改变时，无法正确的监听数组的方法
vue中通过重写了7个能够改变原数组的方法来进行数据监听

简洁说明：

无法对新添加或删除的属性进行监听、无法监听数组的变化

pop: 移除并返回数组的最后一个元素。
push: 向数组末尾添加一个或多个元素，并返回新数组的长度。
shift: 移除并返回数组的第一个元素。
unshift: 向数组开头添加一个或多个元素，并返回新数组的长度。
reverse: 颠倒数组中元素的顺序（第一个元素变为最后一个，最后一个变为第一个）。
sort: 对数组元素进行排序，默认按字符串Unicode码点进行排序。
splice: 在指定位置修改数组，可以删除、替换或添加新元素，并返回被删除的元素数组。

小诸葛 Vue2 双向数据绑定原理及缺陷 7-9

评论(0) 浏览(884)

解决vuex刷新页面数据丢失

1.监听页面是否刷新，如果页面刷新了，把state对象存入到sessionStorage或者localStorage中，

2.页面打开之后，判断sessionStorage/localStorage中是否存在state对象，如果存在，则说明页面是被刷新过的，将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。如果不存在，说明是第一次打开，则取vuex中定义的state初始值。

小诸葛 7-9

评论(0) 浏览(821)