hello云胜

技术与生活

0%

发表于

一个不太一样的后台模板

之前推荐过基于elementUi设计的后台管理系统，今天推荐一个不太一样的。

基于ant-design-vue的vue后台管理系统模板。

ant-design想必大家都有所了解的，这是由蚂蚁金服体验技术部开发的国内使用量最大的 React 组件库，服务于企业级产品的设计体系，服务于中后台系统，对在做b端产品设计的时候都是可以借鉴的。

整体来说，ant-design是非常有设计感的。

image-20200421212738162

那么Ant Design Vue 是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库，用于开发和服务于企业级中后台产品。

再然后，就是今天介绍的基于Ant Design Vue实现的一个后台管理系统模板

image-20200421114922906

image-20200421115026958

image-20200421115103220

image-20200421213357935

image-20200421213522618

个人觉得，这个系统做的还是非常美观的，各种效果也很精致优雅。值得推荐。

源码地址：https://github.com/artiely/vue-admin

预览地址：https://artiely.gitee.io/antd-admin

发表于

目录

语言无关

IDE

Web

WEB服务器

其它

函数式概念

分布式系统

在线教育

大数据

操作系统

数据库

智能系统

正则表达式

版本控制

程序员杂谈

管理和监控

编程艺术

编译原理

编辑器

计算机图形学

设计模式

软件开发方法

项目相关

语言相关

Android

AWK

C

C Sharp

C++

CoffeeScript

Dart

Elasticsearch

Elixir

Erlang

Fortran

Golang

Groovy

Haskell

HTML / CSS

iOS

Java

Javascript

AngularJS

Backbone.js

D3.js

ExtJS

impress.js

jQuery

Node.js

React.js

Vue.js

Zepto.js

LaTeX

LISP

Lua

Markdown

MySQL

NoSQL

Perl

PHP

PostgreSQL

Python

Django

R

reStructuredText

Ruby

Rust

Scala

Scheme

Scratch

Shell

Swift

TypeScript

VBA (Microsoft Visual Basic Applications)

Vim

Visual Prolog

WebAssembly

发表于

拥抱规范，远离伤害！

开发的同学们赶紧行动起来，遵守代码规范，你好，我好，大家好！

必须格式化

使用ali规约插件

image-20200319145322422

image-20200319145425036

发表于

各位打工人，是不是每天上班遇到烦心事时，心里就想，这xx工作真是干不下去了。
后来在一个群里有朋友分享了一个excel，用来测算自己这个班上的值不值
就是这个

img

后来excel找不到了。
想了一下，这玩意做个小程序这不很简单吗

用了一晚上开发好了，发布的时候微信说要备案，好家伙，一备备了三个星期。
真可谓开发三小时，备案三星期。

![gh_a2b730cdf1bf_258 (2)](这班上的值不值.assets/gh_a2b730cdf1bf_258 (2).jpg)

小程序名叫 这班上的值不值 。欢迎搜索体验。多多提建议。

输入日薪，工作时长，通勤时长，摸鱼时长，学历系数，工作环境系数，异性环境系数，同事环境系数，职业资格系数等。

根据一个公式计算出一个系数

得到这个班上的值不值

image-20240320211911714

image-20240320211942136

image-20240320212002861

image-20240320212018101

image-20240320212101043

生活不只有眼前的苟且，还有诗和远方——但如果诗和远方的路费有点贵，那就先来【这班上的值不值】算一算，看看今天的班，到底值不值得你跨出这一步！

![gh_a2b730cdf1bf_258 (2)](这班上的值不值.assets/gh_a2b730cdf1bf_258 (2).jpg)

发表于

restful接口设计规范

写在前面

首先强调的一点是，RESTful不是一种规范，而是一种风格，它是不具有强制性的。

RESTful规范可以参考，但不能完全照搬。

风格这种东西说不准，公说公有理，婆说婆有理。而在开发团队中，最忌讳的就是不统一。所以我们首先确定以下基本原则：

  1. 新增、修改、删除、简单查询可以用RESTful

    即简单的crud操作接口，按照RESTful规范

  2. 复杂的业务操作，数据同步操作，就按业务最适合的风格来写

    比如批量操作，我们中间层很多服务业务很难简单抽象为一个名词。不要把时间精力放在纠结这逻辑到底是个什么资源

一、基本概念：

REST是Representational State Transfer的缩写。直译过来是”表现层状态转化”。

其实这个词组前面省略了个主语–“Resource”，加上主语后就是“资源表现层状态转移”。

是不是每个词我都能看懂，但是放在一起不知道什么意思了？

资源（Resource）

网络中的一个实体。 例如，一段文本、一张图片、一首歌曲、一种服务，总之就是一个具体的实在。可以用一个URI（统一资源定位符）指向它，每种资源对应一个特定的URI。要获取这个资源，访问它的URI就可以，因此URI就成了每一个资源的地址或独一无二的识别符。

表现层（Representation）

“资源”是一种信息实体，它可以有多种外在表现形式。

比如一篇文章，可以使用XML、JSON、HTML的形式呈现出来

状态转化（State Transfer）

访问一个网站，就代表了客户端和服务器的一个互动过程。在这个过程中，势必涉及到数据和状态的变化。互联网通信协议HTTP协议，是一个无状态协议。这意味着，所有的状态都保存在服务器端。因此，如果客户端想要操作服务器，必须通过某种手段，让服务器端发生”状态转化”（State Transfer）。而这种转化是建立在表现层之上的，所以就是”表现层状态转化”。

为了支持资源的REST化，业界提出了RESTful规范

二、RESTful规范

协议

生产环境，使用https协议

测试环境，目前的条件下使用http协议

路径

域名有两种设计

  1. 统一放在主域名下，用路径进行分组

    1
    example.com/api/XXX

  2. 放在子域名下

    1
    api.example.com/XXX

每个业务模块申请一个子域名，就太多了。所以我们使用第二种

我们的规范

url格式

1
{域名}/api/[page|inner|outer]/{模块名}/{功能名}

路径的约定：

  • 命名必须全部小写

  • 资源（resource）的命名必须是名词，并且必须是复数形式

  • 如果要使用连字符，建议使用中划线而不是下划线，下划线字符可能会在某些浏览器或屏幕中被部分遮挡或完全隐藏

    当然不建议使用连字符

  • 易读

按照restful规范，接口尽量使用名词，禁止使用动词，下面是一些例子。

1
2
3
4
5
6
7
8
GET         /zoos：列出所有动物园
POST        /zoos：新建一个动物园
GET         /zoos/ID：获取某个指定动物园的信息
PUT         /zoos/ID：更新某个指定动物园的信息（提供该动物园的全部信息）
PATCH       /zoos/ID：更新某个指定动物园的信息（提供该动物园的部分信息）
DELETE      /zoos/ID：删除某个动物园
GET         /zoos/ID/animals：列出某个指定动物园的所有动物
DELETE      /zoos/ID/animals/ID：删除某个指定动物园的指定动物

反例：

1
2
3
/getAllCars
/createNewCar
/deleteAllRedCars

动作

http动词

方法 描述 幂等
GET 用于查询操作，对应于数据库的 select 操作 ✔︎
PUT 用于所有的信息更新，对应于数据库的 update 操作 ✔︎︎
DELETE 用于更新操作，对应于数据库的 delete 操作 ✔︎︎
POST 用于新增操作，对应于数据库的 insert 操作 ✘
HEAD 用于返回一个资源对象的“元数据”，例如数据的哈希或上次更新时间。或是用于探测API是否健康 ✔︎
PATCH 用于局部信息的更新，对应于数据库的 update 操作 ✘
OPTIONS 获取API的支持哪些方法。 ✔︎

不要机械地通过数据库的CRUD来对应这些动词，很多时候，还是要分析一下业务语义。

关注幂等性

其中，PUT 和 PACTH 都是更新业务资源信息，如果资源对象不存在则可以新建一个，但他们两者的区别是，PUT 用于更新一个业务对象的所有完整信息，就像是我们通过表单提交所有的数据，而 PACTH 则对更为API化的数据更新操作，只需要更需要更新的字段

注意：PUT是要保障幂等的，所以不要在PUT中做+1这种更新。

关于PATCH的使用个人持保留意见。可讨论达成一致。

PATCH在RFC规范是是保障幂等性的，但是建议我们的代码设计上做到幂等。

我们的规范

建议只使用常用的动作

GET：查询

POST：除了查询外的所有

版本

考虑到我们的业务中需要支持多版本的情况几乎没有

如果以后需要支持多版本，在路径的最后加上版本v2…

比如

1
{域名}/api/[page|inner|outer]/{模块名}/{功能名}/v2

不带本版的默认是v1

过滤参数

在get请求中，规范常用的查询参数

分页：

?limit=10：指定返回记录的数量
?offset=10：指定返回记录的开始位置。
?page-current=2&page-size=100：指定第几页，以及每页的记录数。
?sortby=name&order=asc：指定返回结果按照哪个属性排序，以及排序顺序。

查询条件：

?animal-type=1：指定筛选条件
参数的设计允许存在冗余，即允许API路径和URL参数偶尔有重复。比如，
GET /zoo/ID/animals 与 GET /animals?zoo_id=ID 的含义是相同的。

建议使用 /animals?zoo_id=ID格式

返回结果

服务器返回的数据格式，使用JSON

针对不同操作，服务器向用户返回的结果应该符合以下规范。

  • GET /collection：返回资源对象的列表（数组）
  • GET /collection/resource：返回单个资源对象
  • POST /collection：返回新生成的资源对象
  • PUT /collection/resource：返回完整的资源对象
  • PATCH /collection/resource：返回完整的资源对象
  • DELETE /collection/resource：返回删除的资源对象id

分页结果格式：

1
2
3
4
5
6
7
8
9
"data": {
        "records": [
        	{数据列表}
        ],
        "total": 0,//总数
        "size": 10,//每页数据条数
        "current": 1,//当前是第几页
        "pages": 0//一共几页
    },

状态码（Status Codes）

状态码范围

1
2
3
4
5
1xx 信息，请求收到，继续处理。范围保留用于底层HTTP的东西，你很可能永远也用不到。
2xx 成功，行为被成功地接受、理解和采纳
3xx 重定向，为了完成请求，必须进一步执行的动作
4xx 客户端错误，请求包含语法错误或者请求无法实现。范围保留用于响应客户端做出的错误，例如。他们提供不良数据或要求不存在的东西。这些请求应该是幂等的，而不是更改服务器的状态。
5xx 范围的状态码是保留给服务器端错误用的。这些错误常常是从底层的函数抛出来的，甚至开发人员也通常没法处理，发送这类状态码的目的以确保客户端获得某种响应。当收到5xx响应时，客户端不可能知道服务器的状态，所以这类状态码是要尽可能的避免。

服务器向用户返回的状态码和提示信息，常见的有以下一些（方括号中是该状态码对应的HTTP动词）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
200 OK - [GET]：服务器成功返回用户请求的数据，该操作是幂等的（Idempotent）。
201 CREATED - [POST/PUT/PATCH]：用户新建或修改数据成功。
202 Accepted - [*]：表示一个请求已经进入后台排队（异步任务）
204 NO CONTENT - [DELETE]：用户删除数据成功。
400 INVALID REQUEST - [POST/PUT/PATCH]：用户发出的请求有错误，服务器没有进行新建或修改数据的操作，该操作是幂等的。
401 Unauthorized - [*]：表示用户没有权限（令牌、用户名、密码错误）。
403 Forbidden - [*] 表示用户得到授权（与401错误相对），但是访问是被禁止的。
404 NOT FOUND - [*]：用户发出的请求针对的是不存在的记录，服务器没有进行操作，该操作是幂等的。
405 Method not allowed 方法不被允许 (常见是服务端需要Get方法，但是客户端发起了POST请求)
406 Not Acceptable - [GET]：用户请求的格式不可得（比如用户请求JSON格式，但是只有XML格式）。
410 Gone -[GET]：用户请求的资源被永久删除，且不会再得到的。
422 Unprocesable entity - [POST/PUT/PATCH] 当创建一个对象时，发生一个验证错误。
500 INTERNAL SERVER ERROR - [*]：服务器发生错误，用户将无法判断发出的请求是否成功。
502 网关错误
503 Service Unavailable
504 网关超时

错误处理

如果状态码是5xx，就应该向用户返回出错信息。一般来说，返回的信息中将error作为键名，出错信息作为键值即可。

1
2
3
{
 error: "错误原因"
}

发表于

微信小程序知识点

小程序的双线程模型

image-20210919203336409

  1. 视图的更新是怎么做到的？

    通过setData()，setData先将 数据转化为字符串，接着将这个字符串和代码拼成js脚本，然后把这个脚本传给evaluateJavascript这个原生方法，然后执行。

  2. 使用setData可能遇到的问题？

    因为是双线程的。页面滑动的卡顿问题。

    image-20210919204108954

更新一个大列表时可能遇到

  1. wxs语言

    wxs可以在wxml文件中写wxs脚本，直接在视图线程里完成。提高效率。

视图线程的编译过程

image-20210919204446289

虚拟DOM

image-20210919204641368

小程序把原生组件放在一般视图组件上面

逻辑线程的实现

生命周期

组件相关

自定义图标

icon可以和文本进行混排

建议使用阿里巴巴的iconfont.cn网站下载使用

小程序中建议使用ttf和woff格式的字体

也可以使用svg图片，然后将svg转成base64字符串，然后就乐意在小程序里直接使用

image-20210919223023128

progress进度条

1，开发一个下载文件的动态的进度条

image-20210920071928814

2，进度条如何设置圆角

1
<process border-radios="5" percent="20" show-info>

这设置的是进度条外框的圆角

hack方法：

image-20210920072407267

在微信开发者工具的目录中找到本地样式表，通过在页面中重写样式实现

3，已经加载完的进度条，让其重新加载

连续调用2次setData

4，实现一个环形进度条

自定义一个组件

image-20210920072909472

image-20210920073117446

5，进度条右边的百分比修改样式

使用内联样式

rich-text富文本

rich-text 组件内屏蔽所有节点的事件。

如何预览并下载rich-text中的图片？

因为rich-text 组件内屏蔽所有节点的事件。所以无法给img设置tap监听。

做法是，监听整个rich-text的tap，通过解析event参数中的pagex，pagey参数的值，大体判断用户点击的是哪一张图片。

使用wx.预览并下载图片

图片列表要提前解析nodes得到。

解决图片间的间隙问题

rich-text中的两张图片间默认是有一个缝隙的。这是样式问题

解决方法是，给node节点加一个style，设置为font-size:0;display:block，

直接解析html代码

手动维护nodes节点比较麻烦，有一个开源parser组件可以直接解析html代码

项目中建议使用这个代替rich-text

view

hover-class:指定按下去的样式类,可以有一个单击效果

hover-stop-propagation：阻止本节点的祖先节点出现点击态，不会阻止bind事件冒泡。

btn里也可以用hover-class

左滑删除功能

moveable-area和moveable-view，功能比较简陋

使用npm第三方包：

wechat-miniprogram/slide-view: weapp custom component – slide-view (github.com)

npm init -y

npm install –save miniprogram-slide-view

工具 –》 构建npm

使用

但是，已经不维护了。可以使用weui-miniprogram的mp-slideview组件

可以直接在小程序中使用，并且使用扩展声名的方式使用不占用代码包大小

在app.json中声明

1
2
3
"useExtendedLib": {
  "weui": true
}

生成海报

painter组件

wxml-to-canas组件

商品导航侧边栏

1
2
npm i @miniprogram-component-plus/vtabs --save
npm i @miniprogram-component-plus/vtabs-content --save

image-20210924224110732

自定义实现多级选择器

微信原生组件提供了picker，但是样式不能自己控制。通过picker-view实现自定义的多级选择器

image-20210925092116851

并且通过js和wxs实现了两个版本，wxs相对来说效率更高

竖向slider

小程序原生组件的slider只有横向

image-20210925120425390

自定义导航

图片作背景图并适配所有机型

建议背景图大小 750 x 1334 分辨率72

用css实现

图片裁剪

1977474741/image-cropper: 💯一款功能强大的微信小程序图片裁剪插件 (github.com)

发表于

小坑

1，图片

图片有默认的宽度是320px，有时候展示会不能占满屏幕。

fix:

将宽度设置为100%

并且mode一般使用widthFix

2，rich-text 图片太大问题

wxml文件下

class
1
<rich-text nodes="{{content}}" type='text'></rich-text>

js文件下

1
2
3
let content = res.content;
//重点是这句话 res.content是从后台获取的数据 进行正则匹配的
res.content = content.replace(/\<img/gi, '<img style="width:100%;height:auto" ')

测试了一下，

这样是在原来的标签下加了style=”width:100%;height:auto”，但是如果原本img中就有style样式， 还是有问题。

image-20200603102012025

所以对正则就行优化：

1
2
3
4
5
6
7
formatImg:function(html){
            var newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
            var match = match.replace(/style=\"(.*)\"/gi, '');
            return match;
        });
        return newContent;
    }

写了一个方法，把img标签中的style删除

然后再统一加上我们的样式。

1
newContent.replace(/\<img/gi, '<img style="width:100%;height:auto" ')

这样做是因为有个img有style，有的没有。所以如果用replace直接替换，原本没有style的会没有加上我们的style。

完整的function:

1
2
3
4
5
6
7
8
formatImg:function(html){
  var newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
    var match = match.replace(/style=\"(.*)\"/gi, '');
    return match;
    });
  const result = newContent.replace(/\<img/gi, '<img style="width:100%;height:auto" ')
  return result;
}

image-20200603102131421

3，微信小程序的父子组件互相传值

一：父组件传值给子组件
  1. 在父组件中引用子组件

1.1 在父组件json中导入子组件

img

1.2 在子组件的json中，把自己定义为子组件

img

  1. 在父组件中，子组件的引用处，绑定一个属性( text )，并传递想要给子组件的值( parentParam )

img

  1. 在子组件中的js中使用 properties 获取值，这样就可以在子组件中用 this.data.text 获取到这个值了

img

二：子组件传值给父组件
  1. 子组件在需要传值时，使用triggerEvent传给父组件一个事件( myevent ），并传递想要给父组件的值( sonParam )

img

  1. 在父组件中，子组件的引用处，通过这个myevent事件绑定一个方法( onMyEvent )

img

  1. 在父组件的js中，定义这个方法onMyEvent，在这个方法内就可以获取到子组件传递过来的值了

img

三:调用子组件方法，修改子组件数据

关键在于使用this.selectComponent选中子组件，然后就可以随意赋值和调用其方法了

例子：

1
<w-base-info goods="{{baseInfo}}" class="baseInfo" />

4，复杂结构的data set值

image-20200509113346748

image-20200509112946981

5，在页面调用自定义组件中的方法

image-20200519092639761

detail页面中引用了w-attr-info自定义组件

现在需要调用其

image-20200519092743990

方法来控制显示

调用方法：

给自定义组件设置一个id

image-20200519094533817

在js中取到这个组件，然后执行其方法即可

image-20200519095014543

6，自定义组件的样式

除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。

7，小程序调用微信支付

调用统一下单后，要对结果进行二次签名

一定要和微信的官方文档一个字段一个字段的对清楚，注意大小写

我因为appId和nonceStr不小心写成了小写，导致签名验证不过

8，showModel遇到类型错误

1
2
3
4
5
6
7
const msg = res.data
wx.showModal({
  title: '抱歉',
  content: msg,
  confirmText: '我知道了',
  showCancel: false
});

报错：

{“errMsg”:”showModal:fail parameter error: parameter.content should be String instead of Undefined;”}
Object

因为content必须是String类型

改成：content: msg + “” 即可

9，一个页面上两个scroll-view互相影响的问题

需要保持相互独立，互不影响。但是二级菜单滚动，一级菜单也一起滚动了。

解决：设置样式

具体的解决方法是对于左边的 scroll-view 的样式设置中，添加position属性，且设置为fixed；对于右边的 scroll-view 的样式设置中添加两个属性，一个是float，且属性值为right，另一个是margin-left，

1
2
3
4
5
6
7
8
9
10
.category w-menu {
  width: 30%;
  position: fixed;
}

.category brand-list {
  width: 70%;
  margin-left: 30%;
  float: right; 
}

10，画分享图

使用微信原始的canvas坑太多了

https://developers.weixin.qq.com/community/develop/article/doc/000ac686c5c5506f18b87ee825b013

https://github.com/Kujiale-Mobile/Painter

在线编辑

https://lingxiaoyi.github.io/painter-custom-poster/

11 vant-tabs 下面的选中条偏移

自定义样式

https://blog.csdn.net/HYeeee/article/details/82747874

没用上

解决：

看的官网 https://youzan.github.io/vant-weapp/#/custom-style

关于如何重置样式

其他文章资源

https://www.jianshu.com/p/b231ca8a9d3f

12 复杂数据的赋值

https://www.jianshu.com/p/8487bb7521af

  • 第一步：先用一个变量，把(info1.name)用字符串拼接起来。
  • 第二步：将变量写在[]里面即可。
1
2
3
4
5
6
const _k1 = `info1.name` // 拼接已知属性
const _k2 = `info2[${index}].name` // 拼接动态属性
this.setData({
  [_k1]: 'cc',
  [_k2]: 'cc'
})

13，顶部固顶的新属性

https://blog.csdn.net/baozhuona/article/details/80849000

可以 position: sticky; 不好使

14，解决wx.getUserInfo不再弹框的问题

https://blog.csdn.net/xishuchen0520/article/details/80410861?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

15， 动态控制多个class的写法

只要在花括号内做三元运算选择相应的class,他们之间用空格隔开就好

1
<view class="{{}}  {{}}  {{}}">hello world</view>

16，vant组件阻止冒泡

vant组件的事件都是bind的，没有catch的。如果要阻止冒泡，需要自己写一个catchtap，全部阻止点击事件即可。

必须，弹出框中用了时间选择器。需要阻止时间选择器的事件向上冒泡。

1
2
3
<van-popup show="{{ calendar_show }}" bind:close="onClose" custom-class="pop">
  <van-datetime-picker type="date"  value="{{ currentDate }}" bind:confirm="onConfirm" bind:cancel="onClose" catch:tap="noop" min-date="{{ minDate }}" max-date="{{ maxDate }}" formatter="{{ formatter }}" />
</van-popup>
1
2
3
noop() {
    console.log("阻止冒泡")
}

17，小程序button组件去除边框

在 button 的 plain=”true”,使用背景图片时.

小程序 默认在这个 css 样式中定义了 边框.

所以,设置这个 可以取消边框

button[plain] {

border:none;

}

发表于

小程序插入直播功能

我们的商城小程序被邀请开通了直播功能。直播功能还是很有吸引力的，可以在小程序内流畅完成购买交易闭环，提升转化率；所以开发工作立马安排上了。

小程序直播组件包括观众端、主播端及后台管理端，其中观众端提供拉流、实时互动、订阅提醒、商品购买等能力，主播端提供开播、推流、音视频效果优化等能力，后台管理端则负责直播房间、商品货架以及营销活动配置等。

所以，大部分的工作其实是管理和运营来做，小程序上只要做好直播入口的跳转进入。

直播功能的接入，微信这次做的不错。接入的开发工作按照文档很容易就完成了。这里记录下我接入的过程，对照微信官方的文档就更明白了。

微信截图_20200229162034

组件引入

使用分包引入直播组件,在项目根目录的 app.json 添加如下引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "subpackages": [
    {
      "root": "zhibo",
      "pages": [
        "list/list"
      ],
      "plugins": {
        "live-player-plugin": {
          "version": "1.0.0",
          "provider": "wx2b03c6e691cd7370"
        }
      }
    }
  ]
}

直播室列表页面

然后新建上面的zhibo/list/list页面。作为直播室列表页

1
2
<text>直播室页面</text>
<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=1">直播1 </navigator>

这里的room_id是你自己的直播室id。获取方式是调用你自己的后台获取。

你自己的后台需要根据token得到直播室的列表信息。方法如下：

1
2
3
请求URL：http://api.weixin.qq.com/wxa/business/getliveinfo?access_token=

请求方式：POST

完成了

是不是很惊奇。这就完事了。测试一下：

image-20200229163742645

image-20200229163846403

这就进来了。坐等开播了。

注意事项

  1. 直播功能对基础库版本有要求，必须是2.9以上。微信客户端必须是7.0.7以上。低版本刚进入直播间时会提示用户升级微信客户端版本（低版本只能观看直播，无法使用直播间的功能）。

image-20200229164044651

​ 调试时注意选择基础库版本。

  1. 商品详情页面需添加返回按钮

    点击直播组件页面里的货架商品跳转到商家小程序的商品详情页面后， 为了避免用户无法再返回直播间，商家需在小程序商品详情页面左上角加上返回按钮，用于返回到直播组件页面。

发表于

小程序中使用自定义Icon

小程序原生提供的icon非常有限，大多数情况都需要我们自定义实现。

通常我们回去阿里巴巴的iconfont.cn网站下载自己需要的icon，然后放入小程序中使用。如果找不到满意的，也可以自己绘制svg文件。

从iconfont下载

选择图标，加入项目

image-20210920102929704

生成代码

image-20210920102958361

复制代码，放到小程序文件中

image-20210920103038144

image-20210920115209705

content填上图标的unicode编码。这个编码在网站页面上可以看到。

在wxml中使用

image-20210920115350533

效果

image-20210920115444377

红色是我们设置的color，可以设置。

自己制作svg

如果我们对找到的图标都不满意，可以自己设计一个。

推荐一个网站【在线PS软件】在线PS图片（照片）处理工具_在线制作编辑图片ps精简版 (uupoop.com)

不需要安装photoshop，直接在线编辑，完全免费。

比如上面的hide图片。

编辑svg图片

将上面的hide图片下载svg格式到本地。

然后在uupoop网站打开编辑。

image-20210920121125385

然后下载新的svg

上传新的icon至iconfont网站

image-20210920121312462

因为我们更新了icon，网站会要求我们重新生成下代码

image-20210920121417526

重新复制代码到小程序中

image-20210920121514951

看到新制作的图标已经显示出来了

发表于

如何快速实现小程序海报分享图

在小程序的运营过程中，一个非常重要的手段就是分享海报，邀请注册。所以一张设计精美的有吸引力的海报是非常重要的。

有前后端两种方案。一种是后端生成分享图。但是这种很不好，一个是加大了后端服务器的压力，同时后端还需要存储，然后网络传输，都是资源的消耗。而且我在java下生成的图片，要解决锯齿等问题，一直没有找到很好的解决，有知道的朋友请不吝赐教。

另一个就是在小程序端生成。这就要使用小程序的canvas了。但是在使用中可能会遇到各种问题，主要是：

1，小程序中有大量的生成图片需求，但是使用过 canvas 的人，都会发现一些难以预料的问题

2，直接在 canvas 上绘制图形，对于普通开发者来说代码会特别凌乱并且难以维护，经常会花费很久的时间去优化代码

3，不同的环境渲染问题，例如在开发者工具看起来好好的，一到 Android 真机，就出现图片不显示，位置不对应等等问题

所以，

开源组件 painter

开源地址：https://github.com/Kujiale-Mobile/Painter

主要思路就是将我们要展示的信息，以json格式传给painter组件。由这个开源组件直接绘制出图片。

整体架构

该组件已经对text实现了很多常用样式，像下划线，删除线，换行等等都有

img

进击–可视化编辑代码工具

是不是觉得自己写一堆json也很麻烦，那么就用下下面这个进击神器吧

https://lingxiaoyi.github.io/painter-custom-poster/

可视化代码编辑工具

image-20200909173116828

这个网站给了几个例子，可以在这个基础上改，也可以新增编辑。都很方便。

在页面上做好图以后，直接复制json数据出来。放到代码里，再稍微调一调基本就能用。

怎么样，爽吧。

使用教程

1，引入

可以按照官方的说明，使用git的子模块模式，直接将painter添加到你的components文件夹下

1
git submodule add https://github.com/Kujiale-Mobile/PainterCore.git components/painter

这样做的好处是，你可以随时跟进版本的更新。

当然，也可以自己手动复制代码。

然后是需要画图的page使用自定义组件

1
2
3
"usingComponents":{
  "painter":"/components/painter/painter"
}

2，使用

在wxml中使用

1
<painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" />

palette接收绘图json格式数据。json数据就用可视化工具导出。

imgOK是绘图完成的回调函数，回调结果中的e.detail.path是生成的图片的临时路径

img