分类 微信小程序 下的文章

wepy 插件 压缩

npm install wepy-plugin-filemin --save-dev
module.exports.plugins = {
  'filemin': {
    filter: /\.(json|wxml|xml)$/
  }
};


npm install wepy-compiler-less --save-dev
module.exports = {
  "compilers": {
    less: {
      "compress": true
    }
  }
};

npm install wepy-plugin-uglifyjs --save-dev

module.exports.plugins = {
  'uglifyjs': {
    filter: /\.js$/,
    config: {
    }
  },
};



npm install wepy-plugin-imagemin --save-dev

module.exports.plugins = {
  'imagemin': {
    filter: /\.(jpg|png|jpeg)$/,
    config: {
      'jpg': {
        quality: 80
      },
      'png': {
        quality: 80
      }
    }
  }
};

开发微信小程序用到wepy框架,node_modules文件夹可以共用吗?

我也想问这个问题。

每个项目都是这些依赖,每个项目都需要一个node_modules文件夹安装完全一样的依赖包,哎

其实可以共用一个包路径的,怎么做:

1、在项目文件夹上一层目录 安装包依赖,把项目的package.json文件复制一份放到 A目录,执行安装:

npm install
或者
yarn install

这个目录会产生一个 node_modules文件夹

2、项目文件放到A目录中,比例B项目的目录,A/B,然后修改B目录中的wepy.config.js,找到这一段:

    resolve  : {
        alias  : {
            counter: path.join(__dirname, 'src/components/counter'),
            '@'    : path.join(__dirname, 'src')
        },
        modules: ['node_modules']
    },

改成(修改 modules 字段):

    resolve  : {
        alias  : {
            counter: path.join(__dirname, 'src/components/counter'),
            '@'    : path.join(__dirname, 'src')
        },
        modules: ['../node_modules']
    },

3、现在你删除掉B目录的node_modules文件夹(注意B目录中依然需要留一个package.json文件,不然wepy会报错找不到pkg),现在执行wepy编译正常完成:

wepy build --watch

有了 FormID,就相当于有了给用户发送模板消息的权限,一个Formid只能发送一条消息,且这个FormId 的有效期只有7天。

微信相关的文档:
https://developers.weixin.qq.com/miniprogram/dev/api/notice.html#发送模板消息

之前也在网上看过到类型的代码和思路参考,只是他们的实现方法都不太符合我的要求,所以自己写了。

目前普遍的做发就是先把用户在小程序里的操作产生的formid收集到后台系统保存起来,需要发的时候直接从后台数据中取出,发送一条消耗一个fromid,过期就自动删除掉。要产生formid前台还必需使用form标签,再写上对应的属性,然后用户要手动去点击了表单的提交按钮才能得到一个fromID。

思路
就是把你页面中(尽量可能多的把所有页面都加上),用户经常会去点的按钮,图片等都用form标签给包起来,再form里面放上一个提交的按钮,改下按钮的样式,透明、大小和原本的按钮、图片的大小一样,这样用户去点击的时候,际实上是点击的表单的提交按钮,所以就拿到了formid ,然后提交到后台保存,后台推荐用像redis这样的缓存服务来保存

实现
这里我把自己写的收集代码片段分享给大家(使用wepy框架,仅供大家参考提供思路):

这是mixins组件,怎么使用这里就不说明了
PS:$post是我自己封装的一个请求方法, 注意:the formId is a mock one 这是开发者工具的固定值,这里不作提交,开发可以去掉看效果

form.js

import wepy from 'wepy'

import {$post, config} from './base'

/**
 * @author Joyber
 * 收集用户的FormID的MIXINS
 * 用法:
 *
 <form class="_f [原有的classname]" report-submit @submit="FormSubmit"
    data-event="[原有的方法]">
 <button class="_f" form-type="submit"></button>
    [原有的标签内容]
 </form>

 */

export default class formMixin extends wepy.mixin {

    methods = {
        FormSubmit(e) {
            let _this = this;
            const {formId, value} = e.detail;
            const {dataset} = e.currentTarget;
            const {event} = dataset;

            config.debug && console.log('formId', formId);
            //the formId is a mock one  这是开发者工具的固定值,这里不作提交
            formId && formId!='the formId is a mock one' && $post("member/form/id", {formId});

            if (!event) return;
            if (typeof _this.methods[event] == 'function') {
                _this.methods[event].call(_this, e);
            } else if (typeof _this[event] == 'function') {
                _this[event].call(_this, e);
            } else {

                let flag = false;
                const {$mixins} = _this;
                config.debug && console.log(typeof $mixins, $mixins);

                $mixins.forEach((mixin, index)=>{
                    config.debug && console.log('find mixin function', index);
                    if (mixin.methods && typeof mixin.methods[event] == 'function') {
                        flag = true;
                        mixin.methods[event].call(_this, e);
                    }else if (typeof mixin[event] == 'function') {
                        flag = true;
                        mixin[event].call(_this, e);
                    }
                });
                !flag && console.error('page function undefined: ' + event);
            }
        }
    }
}

使用

全局CSS(less语法):

form{
    &._f{
        position: relative;
        display: block;
        &._b{display: block;}
        button {
            &._f {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: transparent;
                z-index:1;
                &::after {display: none;}
            }
        }
    }
}

代码改造:
原来的页面代码比如:

<view class="XXXX1" @tap="xxxx2" data-id="xxxx3"><image src="xxx4"></image></view>

改造后的页面代码:

 <form class="_f XXXX1" report-submit @submit="FormSubmit"
    data-event="xxxx2" data-id="xxxx3">
 <button class="_f" form-type="submit"></button>
    <image src="xxx4"></image>
 </form>

而JS中只需要把 form.js import进来

wx.page 的 mixins 中 增加 formMixin 即可。
mixins = [formMixin]

本人文采不好,见谅!

效果截图如下:

效果截图

WXML

    <view class="menu-mask {{menuStyle}}" @tap="openMenu('')"></view>
<view class="menu-nav {{menuStyle}}">
    <view class="menu" @tap="openMenu({{menuStyle!='show'?'show':''}})"><text class="iconfont icon-fenlei"></text></view>
    <view class="menu-li" @tap="pathTo" data-url="{{item.path}}" wx:for="{{menus}}" wx:key="">{{item.name}} <view class="icon"><text class="iconfont {{item.icon}}"></text></view></view>
</view>

WXSS(LESS)

    /**浮动菜单**/
.menu-mask{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.7);
    z-index: 10;
    display: none;
    opacity: 0;
    transition: all .3s;
    &.show{display: block; opacity: 1;}
}
.menu-nav{
    position: fixed;
    right: 30rpx;
    bottom: 100rpx;
    z-index: 100;
    .menu,.menu-li{
        position: absolute;
        bottom: 0;
        right: 0;
        transition: all .3s;
        line-height: 1;
    }
    .menu{
        font-size: 40rpx;
        display: flex;
        align-items: center; justify-content: center;
        width: 80rpx;
        height: 80rpx;
        border-radius: 100%;
        background-color: #F64E45;
        box-shadow: 0 0 20rpx #F64E45;
        color: #fff;
        z-index: 100;
    }
    .menu-li{
        width: 250rpx;
        padding-right: 10rpx;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        opacity: 0;
        .icon{
            font-size: 32rpx;
            margin-left: 20rpx;
            display: flex;
            align-items: center; justify-content: center;
            width: 60rpx;
            height: 60rpx;
            border-radius: 100%;
            background-color: #40464C;
            box-shadow: 0 0 10rpx #40464C;
            color: #fff;
        }
    }
    &.show{
        .menu {
            background-color: #282D33;
            box-shadow: 0 0 20rpx #282D33;
        }
        .menu-li{
            color: #fff;
            opacity: 1;
            &:nth-child(2){bottom: 100rpx;}
            &:nth-child(3){bottom: 180rpx;}
            &:nth-child(4){bottom: 260rpx;}
            &:nth-child(5){bottom: 340rpx;}
            &:nth-child(6){bottom: 420rpx;}
            &:nth-child(7){bottom: 500rpx;}
        }
    }
}