- 博客(66)
- 收藏
- 关注
RSS订阅原创 uniapp开发企业微信内部应用
最近一直忙着开发项目，终于1.0版本开发完成，抽时间自己总结下在项目开发中遇到的技术点。此次项目属于自研产品，公司扩展业务，需要在企业微信中开发内部应用。因为工作中使用的是钉钉，很少使用企业微信，对于企业微信中的一些功能啥的也不了解。上图标注的是在项目中需要配置的，大家可以尝试看下。因为项目是创建应用后授权登录后端返token，前端进行本地存储，然后才调用内部接口，这里并没有使用企业微信的js-sdk。通过上图能看到应用分为自建应用和第三方，因为项目是自建应用对于第三方应用就没有过多的去了解。
2024-06-28 17:08:57
298
原创 vue pc端微信扫码登录
第一种是点击后跳转到二维码页面进行扫码，第二种是内嵌的方式，这两种都是获取到code传给后端，后端根据code获取openid，同时返给前端token，然后再调用登录的接口。前几天写了一遍关于钉钉扫码登录的文章，今天来补充下微信扫码登录的内容。首先看微信官方文档，能看出微信扫码可以分为两种方式。这里具体的细节我就不写了，有不明白的同学可以去看下。
2024-04-10 15:36:52
595
2
原创 vue使用钉钉扫码登录
最近因项目要求要在登录页增加第三方登录，微信/钉钉。微信扫码登录想必大家都做过，钉钉之前也没接触过。找到开发者文档挨个看，首先我们的需求属于，在开发者后台创建H5微应用，创建时让管理员给设置下权限，不然后面没办法操作。
2024-03-27 15:36:17
849
1
原创 uniapp运行钉钉小程序
因项目原因，公司需要在钉钉里面开发小程序。之前用uniapp开发过app，H5，小程序。还真没尝试过钉钉小程序，今天就简单的记录下uniapp运行钉钉小程序中的过程。
2024-03-14 18:22:37
1678
原创 vue中使用echarts实现人体动态图
类型设置为 象形柱形图，象形柱图是可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图。然后边采用SVG PathData来实现，通过SVG PathData实现后发现图片更省事。这也算是长见识了，哈哈。最近一直处于开发大屏的项目，在开发中遇到了一个小知识点，在大屏中如何实现人体动态图。然后看了下echarts官方文档，根据文档中的示例调整出来自己想要的效果。以上代码便是实现人体形态动态效果，如果有不足欢迎大家点评指正。
2024-03-04 16:42:02
759
原创 vue 使用echarts-gl实现3d旋转地图
之前也有使用过echarts开发项目中涉及到的地图功能，当时使用geo来实现地图轮廓，看上去有种3d的感觉。首先安装下echarts和echarts-gl依赖，在这里注意的点是，echarts-gl版本可以安装低版本，默认安装的依赖版本运行后一直报错。，这也是实现3d地图的主要属性，针对geo3d中每个属性的功能大家可以在echarts文档进行查阅，这里我就不一一细说了。这里我截图展示的，需要看地图动效的，大家可以在本地运行看下地图自动旋转效果。接下来我们看下完整的代码。安装好依赖，在页面引入。
2024-01-29 14:08:16
1618
原创 uniapp 云打包 生成安卓证书文件
前因是我司安卓同学休产假，像云打包时需要的证书文件只能自己动手来搞。看了看官方文档，首先安装java jdk环境（这里可以自行百度哈），配置好环境。然后在安装jdk文件夹中找到lib文件夹，进入后，看下lib文件夹中是否有keytool.exe文件。输入完后，一路回车。注意：D:/compony/dema_dev.keystore 这个是指的证书生成后存放的位置，可以自行更改。现在使用uniapp来开发小程序，H5，APP越来越多了，目前开发了一款APP，使用的也是uniapp。
2023-12-04 17:17:45
949
原创 vue高德地图POI关键字搜索定位
最近在项目中遇到了关于地图的问题，首先为了满足需求从而使用的是JSAPI为2.0版本的。需求是根据关键字搜索定位到该位置。值得注意的是在使用 AMap.Event.addListener时 Event一定要大写的E，不然页面会报错。在地图上定义一个输入框，根据输入的位置进行提示，然后点击后跳转到对应的位置并打点标记。JSAPI主要使用这两个。
2023-06-20 20:00:00
1303
5
原创 uniapp中使用qrcodejs2生成二维码
一般做移动端项目时，总会遇到生成海报，在海报中显示二维码。今天正好遇到就记录下。第三步 view标签使用。
2023-03-09 16:51:25
2945
2
原创 vue中将后端返回的二维码字符串生成二维码并下载
开发中遇到下载二维码，二维码是后端同学传过来的，需要解析后下载到本地。还是老规矩，看代码。这样的话图片是可以下载，但是下载后的图片是没有二维码的。重点是需要在api接口中加一个。这样就能下载二维码，并且图片中也能显示二维码。
2023-02-10 16:37:33
689
原创 vue项目中使用mqtt
从去年十一到现在一直在忙项目，赶进度，导致自己也没写笔记。正好今天项目已经进入收尾阶段，腾出时间慢慢的梳理了下在项目开发中遇到的难点及技术点，目的是总结下，一边加深巩固。作为新年开始的第一篇笔记，自己给自己定了一个目标，不管项目如何紧，自己至少都要保证每个月写一篇笔记。
2023-02-08 13:50:32
4874
4
原创 vue h5判断安卓或IOS并打开APP
最近一直在忙，可能也是因为年底了，所有的项目都要收尾。好几个项目穿插开发，中间也遇到了些问题同时也学到了之前没涉及到的知识点。今天虽然是周六，但还是在加班中，趁着需求还在确认中，先整理一篇笔记。首先还是先梳理清晰需求，当app分享到微信，打开后是个H5页面，根据当前用户去判断是否已下载APP，没有下载跳转到应用宝或者APP store。如果下载了则唤起app。首先我们先判断手机是那种机型，然后根据判断 填写app协议和下载地址，这些都是需要后端或者原生开发的同学提供给我们。
2022-11-26 15:47:48
2209
2
原创 uniapp页面跳转到原生ios页面
项目背景是前端用uniapp开发页面，然后嵌套到原生ios及安卓里面，在开发的时候就想到了怎么去通讯，在uniapp官网上找到uni小程序SDK，找到了与原生交互通信的方法。这样原生开发的同事就能接收到uniapp传递的事件了，然后原生开发的同事根据业务情况去写相应的代码。今天来公司加班，忙完手里的活，先把这段时间遇到的问题难点梳理总结下。好记性不如烂笔头嘛。在项目中也可以直接使用，前提是我们要和原生开发的同事提前约定好传递的方法名称。前端在开发完成后，在编辑器里面找到发行，然后打包成wgt格式的包。
2022-10-29 14:51:04
3423
3
原创 uniapp H5 跳转应用外页面
当我们在开发中遇到跳转外部链接时，以上方式就不能满足了。今天在开发中就遇到了，在官方文档上看到了web-view，需要新建组件，然后在页面中引入在使用uni.navigateTo来实现页面跳转，感觉有点麻烦，就没采用。最终使用window.location.href来实现的。需求是在H5中循环列表绑定点击事件，分别跳转不同的外部链接，链接是后端提供的接口中有字段。这样就可以实现了跳转外部链接了。...
2022-07-26 16:18:43
9146
4
原创 uniapp 使用 echarts实现图表
之前使用uniapp来做项目的时候遇到过图表，当时也是使用的echart和uchart，当时echart在uniapp官方插件中说停止维护。后来就了解到了ucharts,当时使用ucharts还是免费的，现如今ucharts也开始收费了。因为之前做pc端项目的时候用echarts次数多，使用起来也方便。这次也是采用echarts来实现图表，在开发预览中图表是没问题的，但是在真机运行中发现图表不显示，兼容出问题了。于是乎各种搜索才找到解决的办法。...
2022-07-14 20:18:19
4900
11
原创 uniapp 使用uview实现折叠面板
最近由于各种原因导致好久没写笔记了，今天就简单记录下这两天在开发中遇到的一个小技术点。在使用uniapp开发项目时大家肯定会使用UI框架，uview是针对uniapp量身打造的，这里我就不写怎么安装了，具体的可以看下文档。昨天在开发中要实现一个折叠的效果，使用uview中Collapse 折叠面板，但是Collapse 折叠面板默认有个点击时的背景色，根据需求的是不需要这个背景色的，按照api 属性来设置，发现并没有啥用。isLink为false时 箭头不显示但是可以折叠，clickable为false时点
2022-06-28 10:13:27
2755
原创 微信小程序状态栏
之前刚开始接触小程序的时候有写过小程序状态栏，今天开发的时候又遇到了，顺便记录下。<view style="padding-top: {{statusBarHeight}}px;background-color: #f6f6f6;"></view>Page({ data: { statusBarHeight: 0, //状态栏初始高度 toBarHeight: 44, //标题栏高度 }, onLoad(options){ // 手机状态栏的
2022-05-17 09:30:00
677
1
原创 微信小程序wx.setClipboardData复制文本
今天在开发中遇到一个问题，在小程序中 复制文本，在做之前也查了资料，大部分都是固定文本复制，（小程序本身是不能手动复制的）和需求还是不一样的。对于复制官方文档中提供了：wx.setClipboardData设置系统剪贴板的内容。调用成功后，会弹出 toast 提示"内容已复制"，持续 1.5s。方法一：要求在小程序页面中可以手动选择文本复制。<text selectable="true">{{texts}}</text>在text标签中添加selecta.
2022-05-16 23:45:04
8852
原创 小程序editor富文本编辑使用及rich-text解析富文本
今天尝试了下在小程序中使用editor富文本编辑，然后再详情页使用rich-text来解析富文本html。首先先下载editor组件，并放到项目目录中，（组件下载地址）文件存放后，打开richText.wxml可以根据需求修改代码，richText.js同理。然后在需要的json文件中引入"usingComponents": { "richText":"../../components/richText/richText"},在需要的wxml中使用组件<ric
2022-03-29 17:24:39
5562
1
原创 小程序云开发 上传图片到云存储
在学习了小程序云开发后，遇到了开发中常见的图片上传，今天简单的记录总结下在云开发中如何实现图片上传到云存储中。
2022-02-16 15:24:24
10048
6
原创 小程序云开发表单提交并在页面中获取数据
当遇到表单录入时，录入好的数据提交保存到云数据库后，在其他页面展示刚提交到数据库的数据时，今天自己尝试做一遍。表单页面：代码如下：<view class="container"> <form action="" bindsubmit="addBtn"> <view class="view-li"> <label>姓名：</label> <input type="text" name="na
2022-02-13 20:00:00
2419
2
原创 微信小程序云开发使用方法-1
2022年已经过了几天了，之前做过微信小程序，但是没使用过小程序提供的云开发功能，今天学习了云开发数据库的使用，做个笔记记录下。在小程序创建项目的时候，勾选云开发，等项目创建好后，项目目录中会出现如下图所示的文件夹，这就代表项目已经开通了云开发，文件夹中有自动带的文件夹，可以删掉。云开发在小程序编辑器中点击此处，就可以打开云开发控制台了。打开控制面板后，我们看下数据库红色框中是创建一个数据集合，创建好后在点击添加记录，每添加一个就是一个数据记录等我们创建好数据后，在相应的js文件中引用数据
2022-01-11 10:46:14
3023
原创 使用Echars实现水滴状、环形图、分割图、堆叠、组织架构图、地图轮廓等图表
百度Echarts水滴状图表横向柱形图分割块柱形图曲线面积图横向堆叠柱形图环形进度图饼状图组织架构图省市轮廓地图相信大家对百度Echarts一点也不陌生，几乎每个项目中都会用到Echarts图表，作为数据统计展示或者其他业务展示。当初刚接触Echarts的时候，看了几遍文档，在示例中找到适合自己需求的代码直接修改。但是效果很丑或者说是太简单了，虽然功能实现了，但是在视觉和用户体验上就会差点意思（产品：你看看人家这个挺好的）。今年使用的Echarts次数很多，简单的图表满足不了需求，自己只好多看看Echa
2021-12-21 16:19:44
6046
2
原创 echarts树形结构实现组织架构图
好久没写笔记了，今天总结下前几天遇到类似组织架构图的功能，当看到原型图的时候，第一时间查看了下echarts文档，发现有类似的，拿过来就直接改成自己的。对echarts的一些配置还算熟悉点，由于之前用echarts写过柱形图、折线图、饼状图等。接下来我们看下效果图其实就是组织架构图，大家写之前最好好好看一遍文档，文档中对于每个属性都有讲解。好了，我们一步步来看下代码，代码我习惯写注释了，大家可以看下。树形结构布局树形布局 分为 orthogonal水平垂直方向 和 radial径向布局 ，水平垂
2021-11-22 15:21:33
11329
8
原创 uniapp中使用ucharts图表，饼状图，柱状图，折线图
好久没写笔记了，总结下最近在项目中遇到的问题，首先就是如何在uniapp中构建图表，之前做pc端用的Echarts, 后来Echarts为了满足微信小程序，也出了小程序ECharts组件。之前做过在小程序里面实现图表，大家有需要的可以看下之前写的笔记之前没用过uniapp来实现图表，当遇到需求是就跑到文档中阅读文档，当看到ucharts时，觉得图表可以实现。大家可以在官网中插件中查看ucharts文档，传送门其实ucharts是基于Echarts的，是针对小程序和APP生成的。我们先简单看下uchar
2021-09-18 11:51:18
15597
6
原创 uniapp 表单（input、radio、picker）提交获取参数值
在使用uniapp开发页面的时候，经常会用到表单，今天第一次用uniapp写表单，记录下当点击提交的时候input、radio、picker如何获取参数值的。获取参数值，首先要进行数据绑定v-model，然后定义个对象 （saveData），将数据保存到里面。input<input type="text" value="" placeholder-style="color:#999;font-size:14px; letter-spacing: 2px;" v-model="saveDat
2021-07-08 17:42:35
8403
1
原创 百度地图 实现 热力图
最近做项目遇到地图相关的需求，然后采用百度地图来实现地图热力图、省区标注点及描边。主要是几个笔记记录下。热力图：代码如下：// 地图var map = new BMap.Map("mapWarp"); // 创建地图实例var point = new BMap.Point(87.635087, 43.79934);map.centerAndZoom(point, 8); // 初始化地图，设置中心点坐标和地图级别map.enableScrollWheelZoom(); // 允许滚轮缩放/
2021-06-21 10:10:53
6549
1
原创 echarts 动态数据动画效果
在做项目时，当我们用到echarts图表时，大部分产品经理都会要求我们给图表加上一些动画效果，让页面看起来更加炫酷。其实给图表加上动画效果不难，如果数据是实时数据这样做动画效果会更简单点，就怕数据不是实时数据还非要加动画。接下来我说下echarts 数据动画效果，还是老规矩，先看下效果图这是个柱形图，我就截图放上来，大家将就的看下哈，想看实际效果可以把下面的代码复制到本地页面上去，自己运行下。接下来就是代码了。var dom = document.getElementById("p_columnar
2021-06-03 14:39:52
11148
原创 echarts 数据转换成千位符，坐标轴文字折行显示
相信大家都做过大屏，我理解的大屏大部分都是一些图表和地图及数据列表等，今天刚收尾了大屏的项目，现在总结下在开发大屏的时候遇到的echarts一些细节的问题。echarts 数据转换成千位符项目中遇到的第一个问题就是要把堆叠柱形图上的数据加上千位符。series:[ { label: { normal: { show: true, position: 'inside',//数据显示位置，默认显示在中间 textStyle: { color: '#
2021-06-01 18:15:49
2364
3
原创 echarts面积图颜色渐变的实现
之前经常使用echarts来实现常见的折线、柱形、饼状等图表。今天做做数据大屏的时候，ui小姐姐问我可以实现渐变面积图形吗？ 小哥哥表示男人不能说不行，这都是小场面。接下来我们看下如何使用echarts实现渐变面积图。option = { grid:{//设置图表四周留白间距 top:'2%', right:'2%', bottom:'4%', left:'4%' }, xAxis: { type: 'category', bou
2021-04-28 15:34:07
9001
原创 uni-app 条件编译#ifdef #endif 兼容多个终端
做项目的时候，请求数据接口时发现eval函数在H5和APP端是可以渲染出来的，但是运行在小程序时页面报错。然后换JSON.parse()方法，又发现小程序是可以渲染的，但H5和APP端又报错了。结果在网上一顿搜索，终于找到了一个解决的办法，可以跨端兼容，就是我们接下里要讲的条件编译。条件编译其实就是if判断，以#ifdef或 #ifndef加%PLATFORM%开头，以 #endif结尾。个人感觉这是uniapp把自己的js封装到框架中，只要按照 uni-app 规范开发即可保证多平台兼容。只是用特殊的注
2021-02-23 10:09:06
4603
1
原创 uni-app 设置状态栏背景色
在开发中遇到需求是：关闭H5和APP端原生导航栏，但APP端要设置状态栏 背景色。参考了官方文档，为此写下这篇笔记记录下。首先我们要在page.json文件中关闭原生导航栏，设置状态类字体颜色。代码如下："pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "navigationBarTextStyle": "black",//设置状态类字体颜色，只支持w
2021-02-20 16:19:21
10703
5
原创 H5页面使用html2canvas实现div生成为图片，保存到手机
在做微信公众号H5页面时，需求要求html页面生成base64图片，并保存到手机相册中。之前没做过，在网上搜了相关的资料。了解到了html2canvas.js。 html2canvas首先将页面生成canvas画布，然后转换成base64图片。最后长按图片保存到手机相册。这是效果图，接下来我们看代码。<!doctype html><html><head> <meta charset="utf-8"> <meta http-equ
2021-02-07 18:40:45
6385
1
原创 echarts实现各省市地图、中国地图
之前写过单独的省市地图，好多朋友都问各省市的地图怎么写，今天我就简单的写了个demo。仅供大家参考。不足之处望大家多多指正。首先我们还是先看下效果图鼠标滑过各个省市的效果如下：其实写法和之前我写过的省市地图基本一致，将china.json文件改成china.js文件，然后引入到页面中。 <div id="main" style="" class="china"></div> <script type="text/JavaScript" src="js/echa
2021-01-27 18:42:47
4412
原创 uni-app 封装组件中点击事件及父子组件传值
之前写过uniapp如何封装组件及在页面中如何引入。今天遇到了在组件中有点击事件，在页面中如何引入组件及事件。本文主要是做笔记记录下，下面直接看代码：子页面<template name="titleBox"> <view class="p_title"> <text>{{p_title}}</text> <text @click="more()" class="p_more">{{p_more}}</text> <
2021-01-11 15:31:06
3953
原创 uni-app swiper自定义指示点 和 数字胶囊指示点
使用swiper时，需求要把轮播图上的指示点要做成自定义和数字的，做个笔记记录下。自定义指示点<template name="swiperBox"> <view class="swiperUnit"> <swiper @change="swiperChange" :interval="4000" :duration="400" class="swiper"> <swiper-item v-for="(item , index) in swiper
2021-01-06 18:15:06
3949
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人