更新记录

1.0.1（2024-12-26） 下载此版本

更新插件描述

平台兼容性

介绍

uniapp-vant2-template模板插件，基于 uniapp 、有赞移动端组件库 vant2 开发，微信公众号网页授权登录，可用于产品售后项目。目前仅支持H5端，小程序后续会支持。

主要功能：个人中心页、手机号验证码登录、提交表单、自动保存和回填表单内容、支持下拉刷新的列表、详情页支持保存海报

模板亮点：

1. 表单支持地址选择，选择省市选择后，根据关键字搜索地址。但是需要百度地图申请key
2. 重写了图片组件、图片上传组件、视频上传组件。由于vant2的VanImage图片在uniapp引入会报错，所以干脆重写了图片组件，功能与VanImage类似
3. 使用html2canvas一键生成海报，并解决生成海报图片变成空白的问题
4. 手机号验证码登录用的是rsa加密，也可以换成其它加密方式。utils目录下的use_JSEncrypt.js
5. 判断是否登录。在需要登录鉴权的网页加入一个混入文件就行了。mixins目录下的LoginRequiredMixin.js
6. 数据处理，比如：姓名，手机号脱敏处理。utils目录下的generateRenderData方法

详细页面介绍请看：uniapp-vant2-template页面说明.pptx

使用

请在 HBuilderX 编辑器上开发。预置插件：内置终端、uniapp vue2、git插件

第一步，下载插件并导入HBuilderX

第二步，安装依赖

npm i

第三步，开发

点击上方“运行”-“运行到浏览器”，就可以预览H5端效果。或者复制链接在微信环境打开

以下是必要的文件说明：

/utils/jsonp.js

针对百度地图的api（关键字返回具体地址经纬度）自己写的jsonp请求，uniapp不支持jsonp请求

import jsonp from '@/utils/jsonp.js'

jsonp('https://api.map.baidu.com/place/v2/suggestion', {
    city_limit: true,
    query: keyword,
    region: this.areaValue, // 当前选择的省市区
    output: 'json',
    city_limit: true,
    ak: baiduAppKey,
}).then((response) => {
    if (response.status === 0) {
        // 成功逻辑
    } else {
        this.$toast.fail(response.message);
    }
}).catch(err => {
    this.$toast.fail(err);
});

/utils/request.js

请求文件

import request from '@/utils/request.js'

request({
    url: '/xxxx/xxx',
    method: 'GET',
    data: params,
}).then(res => {
    this.$toast.success("请求成功");
}).catch(err => {
    this.$toast.fail(err)
})

/static/css/common.scss

项目公共样式

/static/css/variable.scss

项目公共样式变量

/components/index.js

项目全局注册的公共组件，上传组件没有全局注册，只采用组件引入，图片组件全局引入

/mixins/LoginRequiredMixin.js

检测localStorage中有没有token等信息，没有就跳转登录页

// 需要登录的才能访问的页面
import LoginRequiredMixin from '@/mixins/LoginRequiredMixin.js'

export default {
    mixins: [LoginRequiredMixin],
    data() {
        return {
            navBarOptions: {
                title: "我的工单",
                rightText: "首页",
            },
            list: [],
        };
    },
    created() {
        this.getData();
    },
}

/mixins/WeixinAuthorizedMixin.js

判断是否近10天微信授权过，超过10天重新跳转页面授权。如果你项目不需要接入微信公众号，不需要混入此文件

链接

首页底部栏图标：Iconfont 底部栏图标

首页基础服务第一版图标：Iconfont 基础服务图标（第一版）

首页基础服务第二版图标：Iconfont 基础服务图标（第二版）

首页渐变色背景参考链接：首页渐变色海报参考网站、渐变色生成网站