zxm-miniprogram-components v0.1.9

zxm-miniprogram-components

小程序自定义组件

装小蜜内部项目专用，出现问题责任自负!!! 使用此组件需要依赖小程序基础库 2.2.2 版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。

开发

1. 在项目根目录下方文件 package.json （npm 配置文件），内容大致如下：

{
  "name": "your-miniprogram",
  "version": "1.0.0",
  "description": "",
  "miniprogram": "dist",
  "dependencies": {},
  "devDependencies": {}
}

2. 安装依赖：

npm install --production zxm-miniprogram-components --save

3. 在微信开发者工具菜单栏找到：工具 -> 构建npm，会在项目根目录下生成miniprogram_npm文件夹，

包结构

长列表组件由2个自定义组件 recycle-view、recycle-item 和一组 API 组成，对应的代码结构如下

├── zxm-miniprogram-components/
    └── index.js
    └── components 
        └── getPrivateInfo 组件文件夹
            └── getPrivateInfo 组件
        └── getUserInfo 组件文件夹
            └── getUserInfo 组件
        └── getPhoneInfo 组件文件夹
            └── getPhoneInfo 组件

用法

API (index.js 暴露)

versionUpdateManager 小程序版本更新

let zxmMiniprogramComponents = require('../miniprogram_npm/zxm-miniprogram-components/index.js'); //相对路径

//获取新版本
zxmMiniprogramComponents.versionUpdateManager();

md5 字符串加密

let zxmMiniprogramComponents = require('../miniprogram_npm/zxm-miniprogram-components/index.js'); //相对路径

//md5字符串加密
zxmMiniprogramComponents.md5(string);

baseVerification 公共的字符串验证方法

let zxmMiniprogramComponents = require('../miniprogram_npm/zxm-miniprogram-components/index.js'); //相对路径

//获取新版本
zxmMiniprogramComponents.baseVerification.xxx(string);

zxmAjax 封装的wx.request

let zxmMiniprogramComponents = require('../miniprogram_npm/zxm-miniprogram-components/index.js'); //相对路径

//获取新版本
zxmMiniprogramComponents.zxmAjax({
    signstr: '', //请求签名要用，默认''
    userId: '', //请求签名要用，默认为'0'
    url:'', //请求链接
    method: 'POST', //默认post
    isHideWxLoading: true/false, //默认false显示loading，请求的过程中是否隐藏loading
    data: {} //请求的数据
}, resData => {
    if(resData.status == 1){
        console.log(resData);
    }else{
        console.log('数据错误');
    }
});

组件

获取用户加密信息 获取用户加密信息，iv、encryptedData、code等

调用方法：

// xxx.json
"usingComponents": {
    "getPrivateInfo": "/miniprogram_npm/zxm-miniprogram-components/components/getPrivateInfo/getPrivateInfo"
}

// xxx.html
<getPrivateInfo 
    targetMiniProgramData="{{targetMiniProgramData}}" bind:getPrivateInfoFinish="getPrivateInfoFinishCallback" />

// xxx.js

// data
data: {
    targetMiniProgramData: {
        miniProgramName: '小程序名称',
        miniProgramLogo: '小程序logo，线上完整路径',
    }
},

//events
getPrivateInfoFinishCallback(event) {
    console.log(event.detail); //返回的加密数据
}   

获取用户信息，openId、unionId、nickName等

调用方法：

// xxx.json
"usingComponents": {
    "getUserInfo": "/miniprogram_npm/zxm-miniprogram-components/components/getUserInfo/getUserInfo"
}

// xxx.html
<getUserInfo targetMiniProgramData="{{targetMiniProgramData}}" getUserInfoAjaxData="{{getUserInfoAjaxData}}" bind:getUserInfoFinish="getUserInfoFinishCallback" />

// xxx.js

// data
data: {
    targetMiniProgramData: {
        miniProgramName: '小程序名称',
        miniProgramLogo: '小程序logo，线上完整路径',
    },
    getUserInfoAjaxData: {
        url: '后端利用加密信息解密用户信息的接口',
        method: 'GET',  //默认get, 如果是get请求，可不写
        data: { //需要传的其他参数（非加密信息）
            type: 4
        }
    }
},

//methods
getUserInfoFinishCallback(event) {
    console.log(event.detail); //返回的用户信息
}   

获取用户手机号

调用方法：

// xxx.json
"usingComponents": {
    "getPhoneInfo": "/miniprogram_npm/zxm-miniprogram-components/components/getPhoneInfo/getPhoneInfo"
}

// xxx.html
<getPhoneInfo targetMiniProgramData="{{targetMiniProgramData}}" getPhoneInfoAjaxData="{{getUserInfoAjaxData}}" bind:getPhoneInfoFinish="getPhoneInfoFinishCallback" />

// xxx.js

// data
data: {
    targetMiniProgramData: {
        miniProgramName: '小程序名称',
        miniProgramLogo: '小程序logo，线上完整路径',
    },
    getPhoneInfoAjaxData: {
        url: '后端利用加密信息解密用户信息的接口',
        method: 'GET',  //默认get, 如果是get请求，可不写
        data: { //需要传的其他参数（非加密信息）
            type: 4
        }
    }
},

//methods
getPhoneInfoFinishCallback(event) {
    console.log(event.detail); //返回的用户手机号
}